Design and Accessibility – Tips on Building an Inclusive User Experience
Building a modern website in this day and age immediately brings to mind two important things:
- Your website must look visually pleasing.
- Your website must keep users with accessibility needs in mind (whether mandated by law or not).
Sometimes pairing design with accessibility can create a myriad of website development challenges so let’s explore this problem further using real examples from day-to-day issues we encounter as a team.
Let’s start with Text
Your website content and how it relates to accessibility is a hard thing to be mindful of at times.
Here is one way we can purposely fail to meet accessibility:
At the beginning of this blog post, if we had stated: “let’s detail a couple examples of accessibility challenges below”. Then this blog post would not be accessible. There is no “below” or “to the right” on a screen reader. There is only “following” or “preceding”. If you have directions in your content for a visually impaired user, they will be unable to follow those directions because on a screen reader everything has to read like a book.
Tables are another prominent issue as tables must contain specific sets of data as well as have HTML that indicates the exact nature of the data being displayed in the table. While tables are not inherently inaccessible, the rules behind creating them are strict and not easily followed when writing content in a WYSIWYG editor.
First off, you may be tempted to use white text on coloured buttons for your website design. But … unless that colour passes accessibility guidelines, users with visual impairments will be unable to see the text on your button and they won’t be able to use it.
While white text may look better on a button, what’s important is that the text is readable to all users. In this case either the text needs to be made black or the colour of the button needs to be made more pale and dark.
Ultimately the issue here is that the colour is likely a brand colour, meaning once it is made darker (to meet accessibility requirements), it now does not line up with the website’s theme. Harmony is achieved by picking colours that work well together and that are accessible. This however usually limits your colour palette. If you want a vibrant colour pallette, the solution is to use colours that aren’t accessible as accents. For example you could take a colour and use it as an underline on a button rather than the background.
Next comes Images
First there is the fact that users who are visually-impaired cannot view all images or may have a colour vision deficiency that doesn’t allow them to see the correct or full colour of an image.
If you put key content inside of an image then you need to attach alt text to it, otherwise the user will be unable to read what you want them to.
If the preceding image was an image on your website than the alt text should read: “To get the latest updates, sign-up to receive our newsletter.” The text order is changed in the alt text so the image reads like a sentence, which makes it easier for the user read to understand the image. Be wary of how much text you put in an image however, you only get 125 characters for the alt text field. If over 125 characters are needed, consider using a caption or relaying the same information elsewhere on the page.
This does not mean that every image on your website needs alt text.
Decorative images that do not convey any information should not have alt text, this is a common mistake that people make when placing images onto websites and we don’t blame them, the rules behind accessibility in design are very strict and confusing unless you have someone to show you the ropes.
Text On Images
Another example that comes up a lot is text on an image. On a print piece this technique can be used to add visual interest to a design, but on the web where everything should be accessible, these kinds of elements need to be treated with care. For example, if you have text you want to place on an image, then you must either use a gradient colour under the image that is accessible or change the main colour of the image to be accessible with your text. In both of these instances, the image is obscured either by the gradient or the darker colour that it was changed to.
You might think: “Well i’ll just pick an image that has white space”. And that’s a good solution but it isn’t the full solution. Today, your website needs to also be mobile responsive, meaning when the browser is reduced in width to the size of a mobile device that text won’t be accessible on top of your image. It will need to go down below your image.
We could list thousands of additional examples of accessibility being broken in website designs like how the Twitter share button technically isn’t accessible because Twitter’s blue is not accessible with white text, but listing all of these examples would make this blog post go from a 10 minute read to a 10 hour read, so we’ll leave you with this.
Design is important but it shouldn’t hinder accessibility, likewise accessibility is also important but it shouldn’t hinder the design of your website. Striking a balance between accessibility and design is one of the hardest things a team can do. However accessible design will to get easier as more tools and more general knowledge of how to build accessible websites become available.
In the end, we hope that this post has made you more aware of some of the challenges of truly accessible website design and the ways you can ensure a great user experience for everyone browsing your website.