Over the course of the next four blog posts, I’m going to cover the 4 main principles behind accessible web design (as per WCAG 2.0). This post will focus on perception.
What Is Accessibility and Why Is It Important?
Accessibility in web design is the practice of making your website or web application as accessible as possible to everyone including those with disabilities or simply aren’t quite as fluent with technologies as we might be. I previously wrote a blog on incorporating colour blindness research into UI design and it turned out to be quite popular so I thought I would create something a bit more substantial and cover more types of disabilities we should consider when flexing our creative muscles.
Although an important facet of modern web design and development, accessibility doesn’t always get the attention it deserves. This is partly due to ignorance, but also because it can be difficult to do well - everyone struggles to get it right sometimes.
Compatibility with assistive technologies is unstable and can change over time. Sometimes you try your best to develop an accessible solution which works in all major browsers with a particular screen-reader, only for another to not be able to make any sense of it at all. But that doesn’t mean we shouldn’t try our best to integrate accessibility into our work.
Over the course of the next four blog posts, I’m going to cover the 4 main principles behind accessible web design (as per WCAG 2.0).
The First Principle - Perceivable
The first principle I’m going to cover in this blog series is around being Perceivable, which is to say that all of the user interface and content on a website should be perceivable to the user in a way they can understand, even if they have a disability.
Colour Blindness in Mind
Colour blindness is a relatively common visual impairment that could cause certain parts of your design to be hard to see or make out if not completely invisible to certain users. To make matters worse, colour blindness comes in more than one form so it’s not simply a case of avoiding one or two colour combinations. Luckily, there’s a lot of fantastic documentation out there to help you with this particular accessibility conundrum including my blog that I mentioned earlier - so I won’t go into it in anymore detail here.
Non-Text Content Alternatives
Obviously there are times when a user cannot directly perceive the content we would like to show them - for instance we might have an images of our smiling faces when introducing our team which a visually impaired user could not fully perceive if at all. In this case we might use text to simply explain that we had included photographs on the page of ourselves or we could go as far as to describe ourselves in the photo (e.g. “A picture of Chris smiling - He has curly hair, glasses and a mighty fine beard!”).
In general, every bit of content on your page that’s not text needs some kind of text alternative, unless it’s of very little importance in which case we can tell assistive technology to ignore it.
Ignore Non-Essential Elements
If an element or bit of content isn’t integral to the overall site/application experience or the user experience for those using screen-readers would be greatly improved without it you can attempt to tell the reader to ignore it.
One technique to hide elements from screen readers in particular is to set the aria attribute of a tag to hidden, although support varies between browsers and screen-readers - but some support is better than no support at least.
If an image includes text then it’s usually a good idea to remove it from the image and display it over the top with real text in your html template. This way screen-readers can still read the copy that’s displayed over the top of the image.