All too often, popular websites and apps fail to design for accessibility, unknowingly resulting in a huge loss of potential customers who cannot consume or access the site. This is all too often due to overestimating the amount of work it takes to make a website accessible, while also underestimating how many users require accessible content. As you’ll see here, there are a few basics you need to know about designing websites and writing code that considers accessible users as first class users.
Web Accessibility Overview
WebAIM http://webaim.org/intro/#people says that about 20% of the population has some sort of disability that affects their lives, and often it affects the way they use the internet. That means 62.8 million Americans and 1.4 billion people worldwide.
There are four main types of disabilities that one might contend with, and that you can consider when designing websites and apps.
- Visual : Vision impairments range from a slight loss of vision to complete blindness. Contrast sensitivity and colorblindness are also common visual impairments.
- Auditory: Often, those with hearing impairments cannot discern background noise from important sounds, or have any degree in loss of hearing, or a combination thereof.
- Motor : Diseases such as dyslexia, ALS, and Parkinson are often behind a motor impairment. Neurological and spinal damage contribute as well to motor impairments.
- Cognitive : ADHD, Dyslexia, and other disorders contribute to the challenges these folks face in using the web.
In other words, there is no “normal”. For every human quality or behavior runs across spectrum. Some can navigate a site easily where others need help. The majority of the population might see red one way, but those with color vision differences will not. People from every walk of life and corner of the planet range in their ability and opportunity. As developers who create websites that can theoretically reach almost the entire world, we should ensure that as many as users possible can access our products that we build, be they websites or native apps. Good developers want to make it as easy as possible for all (or as many as possible) users.
At some point, everybody will need some assistive technology, even if it is what you’d consider a primitive one.
(Image says: I just used the accessibility settings on my iPhone to change the systemwide font to BOLD. Pure win. Give it a try.)
Me too. I must increase fonts on most websites and the default zoom in all browsers to clearly read any text. Sometimes something small like a font increase makes a big difference. Even to those who are considered able bodied like Scott and myself.
Designing with Accessibility in Mind
Way back in the beginning days of the internet, browsers and BBS software displayed little more than text. Fast forward a few decades and now the Web is largely visual. That means that a large percentage of data that crosses the internet is in the form of a image, video, or audio file, often to accompany, and as frequently to replace textual data. This change in data format is due to the wide availability of broadband connectivity. It has also contributed to many sites relying only on graphic data, which shuts out or limits a significant portion of the population from consuming the content. Below is a quick laundry list of things to consider when designing with accessibility (any of the above impairment types) in mind. Notice that most of these things will make it easier for those without disabilities as well.
- Fonts should be large, clear, and have a high contrast
- Use HTML5 semantic elements
- Colors should have high contrast
- Use a consistent and clear navigation scheme
- Provide alternate ways to interact with the user instead of just the mouse and keyboard
- Field tab orders should be straight forward
- Label fields and elements such as buttons using the <label> element
- Images should have alt attributes set to something quick and descriptive
- Movies and animations should provide captions or transcripts
- Organize content into distinct sections with clear headings
The list of techniques and suggestions above reveal not just things to do to make your site more accessible but these are indeed best practices in the realm of proper standard UX design. That’s because users should be able to access content from their favorite browser, OS, or device, including those with accessibility needs.
Summary
I’ve authored a few articles on designing and programming for accessibility at Internet Explorer’s Modern.IE site, that expand on this post by going into more depth about programming for visual, auditory, motor, and cognitive impairments.
Both WebAIM and Microsoft have an online Accessibility Center containing lots of great information about designing an accessible web.
Rachel Appel 