Accessible Design

In this article, I’ll show you how to develop an accessible website. I’ll start with a brief background on Accessibility and then look at four key areas to focus when developing an accessible web application. I’ll also explain what key steps you can take to ensure that your existing website is accessible. I will then take individual HTML5 elements and web components like Homepage, Images, Video and Forms and show you how to make them accessible. Finally, I’ll finish with putting it all together to make a basic accessible website.

  • About Accessibility
  • How Assistive Technology Works
  • Accessible Design
  • Accessible Web page with HTML5

About Accessibility

Accessibility is about making web pages easier to use, easier to access, and available for everyone using the latest technology available at that time.

Easier to access means, you are making your content accessible to a range of devices. The content is accessible to screen readers, audio browsers, keyboard or mouse alone, devices with limited bandwidth, old browsers and computers, and mobile phones and touch devices. The second important aspect of accessibility is your content is available for a maximum number of peoples, including disabled, senior citizens, and people with low literacy level, temporary illness, and advanced users who prefer using only keyboards or Mouse. Accessibility should also consider the latest technologies available at that time to utilize technology to the maximum extent.

                                                                                                          Figure 1: Understanding the four key disabilities

The four key areas for Accessibility (see Figure 1.) are:

  • Hearing
  • Mobility
  • Cognitive
  • Visual

Hearing as it relates to, not hearing audio, video and any kind of sound in the website. The solution to this problem is to make the content Perceivable by using text alternative to all non-text content. Use alternative for media using subtitles and closed captions. Include transcribed text and sign languages if possible

Mobility means inability to use mouse or keyboard. The solution for mobility on the web is to make the content Operable. Use all functionality accessible from keyboard alone. Don’t allow any auto-refresh on the page and add the ability to stop time-based contents. Allow navigation with proper use of headings and anchors. Enable use of joysticks, voice recognition, and audio feedbacks when possible.

Cognitive relates to a problem with the content itself, size, color contrast, flashy graphics as well as the type of font used can cause problems to cognitive users. The solution is to make the content Understandable.  Use easy to read Sans serif fonts, allow font resize. Use high color contrast (4.5:1) between foreground and background color. Avoid auto-refresh, flashy graphics and autoplay of media and animation. Use multiple visual cues and use standard icons to create an easy to understand the content.

The visual problem relates to the user unable to see the content or distinguish color. The web solution for visual problem is to make the content Robust and easily and efficiently accessible to screen readers. Use Semantic HTML and follow standard specifications, Use syntactically correct HTML and validate your web page. Use “lang” attribute and “abbr” tags where ever applicable.

The different kind of users who needs assistive technology.

  • Visually Impaired
  • Blind
  • Cognitive,  Learning Disability
  • Deaf
  • Hearing Impaired
  • Mobility, Physically handicapped

The Assistive Technology (AT) which are used for providing these users content from the web, can be thought in terms of hardware and software.

Assistive Technology hardware includes:

  • Large Monitors
  • Large Print Keyboards
  • Anti-glare filter
  • Braille Keyboards
  • Refreshable Braille display
  • Color/ Brightness keys
  • Trackballs / D-Pads
  • Headphones

Assistive Technology software includes:

  • Text Enlarging software
  • Text/Audio Browser
  • Screen Readers
  • Braille software Translator
  • Speech Recognition
  • Virtual Keyboards
  • Captioning Text
  • Show Sound

How Accessible Web Works

    Most current AT tools—including JAWS, NVDA and VoiceOver—support ARIA. Assistive technology like VoiceOver and Windows Eye, shown in the Figure 2, uses platform accessibility APIs like Mac OSX Accessibility Protocol,  Linux IAccessible2 and Windows MSAA to read a web page through ARIA tags and HTML5 semantics, input types and other attributes, as detailed in the later section. 

    Figure 2: How Assistive Technology Works

    Accessible Design

    There are two main things here accessible visual color & text.

    Visual accessibility

    The recommendation is to have a ratio of 4.5:1 for foreground to background.

    Figure 3. Accessible Wheel

    Rules for visual accessibility

    1. Exaggerate lightness differences between foreground and background colors
    2. Choose dark colors with hues from the bottom half against light colors from top
    3. Avoid contrasting hues from adjacent parts of the hue circle

    Accessible TExt

    Figure 4: Effective Accessible Text

    Guidelines for Accessible Text

    • Highest Possible Contrast for main content
    • Use Color contrasts for Title or highlighted text
    • Use large types, minimum 16 points
    • Minimum 25% Spacing between lines
    • Use Regular Serif/San Serif fonts
    • Cursive, decorative fonts, italic case, use sparingly
    • Use San Serif fonts for small text
    • Avoid close letter spacing