<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1040703452609373&amp;ev=PageView&amp;noscript=1">

Essential Elements of Accessible Web Design

Posted by Imagewërks on April 16, 2018 at 3:00 PM


Of the 308 million people living in the United States, close to 50 million have a disability—or nearly 20 percent of the population.

Anyone can have a temporary or permanent disability in their lifetime—trouble walking, difficulty thinking/remembering, a cognitive impairment, or vision loss.

Now, imagine having a disability and trying to navigate a website when you’re colorblind or visually impaired or hard of hearing or on the autism spectrum and fonts are too small or toggles are color-coded or pages are overly busy or videos don’t have subtitles. What should be convenient and liberating can quickly become a frustrating experience.

In order to be inclusive of the needs of everyone—making the web a better place for all—web accessibility has been gaining more and more attention.

Why? The roots go back to the Americans with Disabilities Act (ADA) of 1990, and after that, the the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines, a set of accessibility standards created in partnership with other groups to help guide web content producers in making their work more accessible.

Even so, it can still be challenging to establish what accessible means. According to W3C, "Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these. Following these guidelines will also often make your Web content more usable to users in general."

At the basic level, an accessible website should include:

• Text alternatives for any non-text content so that it can be changed into large print, braille, speech, symbols or simpler language

• Captions on images

• Structured headings so content is correctly organized

• Descriptive and short alt text for images for screen readers

• Ability to pause, stop, or hide motion and sound on audio and video

• Transcripts for videos

• Simple sentences and bullet points

• Legible font sizes

• More paragraphs and subheadings and less “walls of text”

• Accessible color schemes

• Descriptive links

• Field names on all forms

• Ability to cancel or correct mistakes

• A clear focus outline

• Expansive touch targets

• Large, clickable calls-to-action

• “I am not a robot” No CAPTCHA rather than those squiggly, distorted numbers and letters within CAPTCHAS (Completely Automated Public Turing Tests to Tell Computers and Humans Apart) that can be impossible to read

At the end of the day, accessibility guidelines make design better for people of all ages and abilities who just want a quality experience.

Working with a senior or impaired audience?

Download our web accessibility checklist below to get these tips and more in a handy reference guide to share with your team.

New Call-to-action


Topics: Accesible Web Design, ADA Compliance, Accessibility Design, Design for disabilities

Suggested Reading

Need More Ideas@Wërk?

How We Werk

Take a look at the ideas that make all our werk possible. 

Subscribe to Email Updates

Recent Posts

Posts by Topic

see all