Skip to Main Content
keyboard with custom accessible key - accessible web design guide

How to Design for Web Accessibility

David Gibson

How Do I Design for Web Accessibility?

Designing for website accessibility is not an option any more. The American Disabilities Act, backed by Dept of Justice and courts have made it clear that websites must be accessible to all to be ADA compliant. Accessibiity is a civil right, and website designers must adapt. Quickly.

This is a requirement that has come on very suddenly for many web designers. Especially for those not 100% dedicated to the craft of desiging websites.

If you describe yourself as a "graphic designer", its time for you to leave the room.
This is no longer a game for "graphic designers". 

First, designing for people with disabilities requires a foundational understanding of the principles of Universal Design/Inclusive Design. There is tons already published on Google on this topic, so I won’t repeat these all here. The basic idea is to expand your target personas to include people with various disabilities, and create design and interactive elements that work for people with low or no vision, color blindness, deafness, physical restrictions, or mental/cognitive disabilities who use a wide assortment of "assistive technologies". ATs include screen readers, screen magnifiers, speech input and alternate input devices. In practice, focus first on screen readers. 

 

Web Accesibility Tips for Web Designers

  • Make sure you have strong contrast throughout product 

  • Avoid small typefaces

  • Avoid typefaces that are difficult to read

  • Ensure that you do not rely on color or image alone to convey information or importance

  • Provide [skip to content] option triggered by first AT input (tab key for keyboard-only)
  • Provide focus states that indicate where the cursor is on the page and ensure that contrast achieves necessary contrast. 

  • Make user inputs understandable - ensure form field labels and instructions are not embedded in the field and remain visible while the user is using the form

  • Provide clear and consistent navigation options

  • Add user controls for content that starts automatically (ex. hero slider)

  • For each construct, make sure to work out how the keyboard-only user would complete the task. 


 

Creating Personas of People with Disabilities

Low Vision


  • Importance of larger typefaces and strong contrast. Use of browser tools to control font size, or separate screen magnifiers.

  • Color contrast is key for this user group. 

  • Consider for the color blind group here as well. 


Blind


  • Use of screen readers

  • Highly dependent on keyboard accessibility and ensuring that each element on the page properly describes its name, role and state. 


Deaf


  • Video content captions

  • Ensure no auditory cues for advancing through flows or denoting information


Cognitive


  • Simple layouts with clear structure

  • Avoid repetitive flashing

  • Appropriate language levels 

  • Limit dynamically changing content (sliders that auto slide, tickers, etc.)


Physical - fine motor skills


  • Keyboard-only nav

  • Pointers, etc.

  • Audio input


  

Accessible Web Design Tools

For designers, the primary toolset focuses on color contrast to ensure designs work for people with low vision and color blindness.



 

Accessible Web Design References for Designers

 

Universal design success will ensure stronger desktop and mobile UX for all users.

Web Accessibility also promises stronger SEO as well.