Designing for Accessibility

While designers and developers (especially in their 20s) may be slightly hesitant to think about accessibility, it’s becoming much more commonplace and easier to do in recent times.  There are a few main reasons why designing for accessibility should be done. First of all, there is a significant portion of people affected by some form of disability.  Secondly, new technologies are making it easier and faster to design for accessibility.  And lastly, it’s just the right thing to do.  As Steve Krug points out in his book Don’t Make Me Think, “And not just the right thing; it’s profoundly the right thing to do, because the one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives.”

To get an idea of how important of a topic this is, consider the follow facts:

Although it’s difficult to get accurate statistics on how many people with disabilities may use your website, when we take the above facts into account, it’s certainly a high enough number to be concerned about.  Either way, a site built for better accessibility is always going to have better usability.  Making a website easier to use for those with disabilities also makes the website easier for those without disabilities.

When thinking about designing for accessibility, the above conditions should certainly be taken into account.  The World Wide Web Consortium (W3C), the main international standards organization for the World Wide Web, has created the Web Content Accessibility Guidelines (WCAG) requirements and techniques.  The W3C provides four principles for web accessibility:

  • Perceivable – Information and user interface components must be presentable to users in ways they can perceive. This includes factors such as providing alt text for images, providing suitable contrast between colors, etc.
  • Operable – User interface components and navigation must be operable.  Making sure the site is keyboard accessible and navigable falls under this principle.
  • Understandable – Information and the operation of user interface must be understandable.  This means the site should be readable and behaves in a predictable way.
  • Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assertive technologies.

In the design on websites, color alone should never be used as a distinguishing factor of functionality.  Deuteranopia, the most common form of color blindness, is when people won’t see a difference between green and red.  These users may not be able to use a feature or understand part of a website if color alone is used, for example as an accept/deny.  Text should always be used in addition to the color.  A way to ensure functionality of the site is independent of color is to view the website in black and white and make sure everything is easily understood and functional.

deuteranopia vision

The visual presentation of text and images of text should have a contrast ratio of 4.5:1 except for large text (3:1), text that is pure decoration, inactive or hidden, and logos/brand names (which have no requirement).  Large text is defined as 18pt or 14pt bold text.  Use of a color contrast checker can be useful when designing accessible websites.  WebAIM.org has one available here which shows examples of the colors, the exact color ratio, and if it passes the W3C’s accessibility guidelines.  However, it should be noted that too strong of contrast may cause problems with people that are dyslexic.  Pure black text (#000000) on pure white backgrounds (#FFFFFF) sometimes causes words to swirl or blur together.  This can be avoided by using a dark grey text or a light grey background with still enough contrast to meet the W3C’s recommendation while also being suitable for dyslexic users.

dyslexia vision

credit :http://irlen.com.sg/irlen.html

There are some other best practices for text on websites as well.  Sans-serif fonts are easier to read on screens than serif fonts.  This is true for not only those with reading disabilities such as dyslexia, but for everyone.  Text should also be left aligned and rarely ever full justified on the page.  Having fully justified text creates “rivers”, blank areas that the eye can follow down through the text.  The use of all caps should also be limited as it makes it difficult to distinguish individual words and also slows down the speed of reading.

Designing links on websites can sometimes be tricky too.  Links should always be obviously clickable and the user should always know where they lead to. As in other aspects of design on the site, the links should not rely on color alone.  Link text should also make sense on its own, independent of situational context.  This means avoiding link text that simply contains wording such as “click here” or “more.”  Images alone should not be used as links as some users may not be able to view the pictures and are relying on text only versions of the site.  In the case of images, alt text should always be used to describe the image.  This is helpful not only for accessibility, but also for search engine optimization (SEO).

The reason some designers and developers may be hesitant to think about accessibility is because of some common myths still floating around.  Designers may think that designing for accessibility will compromise their overall design and color choices while developers may believe that they have a lot more work to do or that it will cost more to make a fully accessible site.  Luckily, new technology and methods are making accessibility easier and cheaper to design for, thus dismissing these myths.

On the web, the continued recent rise of Responsive Web Design (RWD) is helping out with accessibility.  It should be noted that just because a site is responsive does not imply that it is accessible.  However, it does help out with accessibility on the web.  With responsive design, we are finally thinking of websites as being flexible instead of as a printed page with fixed elements.  This allows for better viewing regardless of what device the website is being displayed on and also creates a unified experience of the website across these devices.  Users now don’t have to worry about an entire website being squeezed into a small screen while designers and developers don’t have to worry about making multiple versions of the website to be easily viewable on different devices.

There has also been a trend in the past couple of years for larger displays on mobile devices. Samsung and now Apple have introduced very large displays on their main lineup of phones, which are beneficial for visually impaired users.  As noted previously, since almost everyone over 40 experiences some degree of presbyopia and the fastest growing population is 60 years and older, larger screens and larger font sizes can be helpful for many.  It should also be noted that according to Pew Research Center, 59% of seniors (65 or older) report they go online while 77% have a cell phone.

Designing for accessibility is a good thing for all users and is beneficial to those with disabilities and those without.  By using best practices and having accessibility in mind when beginning a project, websites and software will become easier to use, enjoyed by a larger audience, and produce better results.

Craig Zdanowicz

Written by Craig Zdanowicz

Leave a Reply

*