Over the past five or six years we have seen a steady push toward quality accessibility in websites and web applications. From a development point of view this can initially look like a way to stifle creativity. A better way to look at it is an opportunity to come up with creative ways to implement a user experience that includes everyone.
For programming we have taken this accessibility to heart. We have developed our Catalyst CMS to start with accessibility as a default feature. We include keyboard based tab navigation, semantically correct html formatting, and we follow the W3C standards for accessibility for imagery, audio, and video. With these items available from minute one of development, it means that we are making sure that those with visual and physical disabilities are primary considerations as our projects progress.
What we have noticed when it comes to other CMS platforms is that their functionality takes an approach of being everything for everybody. Some of the accessibility requirements sometimes fall by the wayside, especially with open development for plugins and themes, third party developers do not always follow the standards that the core CMS developers require for their platforms. As a result, we see considerable inconsistency with the level of accessibility in sites and applications developed on these platforms.
When designing and developing with accessibility in mind, it forces the designers and developers to think through more thoroughly what features that would be considered cool, or really good marketing gimmicks. These elements may actually be a hinderance to the audience who cannot see or physically interact with an interface in ways that able-bodied audience members can.
When clients and designers are coming up with user interface ideas, we have seen concepts that look amazing and would be a real challenge to create. We then put on our accessibility advocate hat and look at those same ideas and we then need to torpedo the design. When I say torpedo, we are not giving the client or designer a hard no. We feel that it is important to bring up these accessibility issues so that our clients and designers are aware of how some of these interface ideas may leave out a portion of their potential customer or user base.
Here is a short list of things that we have noticed over time that should be considered to make for a better user interface experience.
- Pop-ups and modals. Clicking or tapping an interface element that opens a layer above the primary interface can be a hinderance to how the user interacts with the page. A person with a visual disability needs to be informed in some way that a pop-up or modal has opened in a layer above the rest of the page and that some form of action needs to take place to either close the pop-up or interact with what has appeared in the pop-up in order to return to the rest of the site.
- Small design elements or copy. If the copy or design elements are very small, it may be hard for a person who has a visual disability to read the copy, or if buttons and design elements are small, audience members with physical disabilities may not have the fine motor skills to position the cursor with precision.
- Backgrounds and text colour. A busy background image with varying colours with copy over it can be extremely difficult to read. Background colours and copy colours that do not have enough contrast can have the same issue.
If you are like me, you really do not like automated pop-up elements. The ones that bother me the most are the ones that wait about a minute before they appear. You're in the middle of reading or watching the content you are visiting a site for, and right in the middle of your reading or viewing a pop-up or modal block appears causing you to lose your place or miss the specific moment in the video that you wanted to see. You are forced to stop and dismiss or interact with the pop-up before you can continue. Now imagine if you have a visual disability and your screen-reader is reading you an article, and suddenly it stops. If the modal doesn't somehow provide the screen-reader with information about what it is and why it is there, the user is not going to understand why the screen-reader stopped reading the content.
Imagine you have a disability like Cerebral Palsy. It is already difficult for you to interact with the base web page interface and now you required to move the cursor to the close link on the popup before you can continue reading.
I've used some pretty specific examples of where certain elements can cause difficulties. These examples provide glaring examples of why accessibility in user interface and design development needs to be a high priority.
Designers and Developers have a history of coming up with ways to help with accessibility. One of the best examples of this was having a font-size changing tool in the interface. It was a good attempt to make a website or web application accessible. Now however this is no longer required. Modern web browsers have zooming tools to increase font sizes. If an interface is designed properly, it takes advantage of the accessibility features of the browser itself. When developing with accessibility in mind, remember to work smarter, not harder. Since the browser can handle things like font-size changes, developing a stylesheet with font-sizes that are relative rather than absolute means the interface design can flex to work with the user's needs. It is important that our interface adapts to the user, and not the other way around.
Another item you may have noticed or wondered about. Autoplay of video or audio. We have been asked time and again about autoplaying videos (not so much for audio). The standard now is that autoplay is not acceptable. There are several reasons not to have autoplay in a web browser. Most of us don't want to be caught out watching movie trailers when we're supposed to be working. But the accessibility reason for this is about it being up to the audience member as to whether or not they want to watch a video or hear an audio clip. If an element autoplays, then the user has to start searching around to find out how to pause the media that is being played.
From a marketing perspective we understand that need to drive traffic to a product, service, or promote content. From the audience perspective however, this can be a distraction or an intrusion on their senses that they did not want. The audience wants to be on the site, but if they are inundated with unwanted visual or auditory stimuli the fastest way to make it stop is to close the tab or browser window. As a marketing person that is the last thing you want. Accessibility also means that the audience is provided the choice to listen to or view media. The audience doesn't want it forced upon them.
As the internet continues to evolve, we are now seeing a push by governments to legislate accessibility. So going forward keeping accessibility in mind and developing interfaces to be accessible means that your designs and your websites are ahead of the game and you won't have to go back and retrofit or rebuild.
Recommended Reading - A Book Apart: Accessibility for Everyone by Laura Kalbag
If you are having trouble with accessibility on your website or web application, please get in touch and we would be happy to help you out.