Why Accessibility Matters

What is accessible design? It’s the design practice, that if done correctly, results in equal access to the web, for everyone, including those with disabilities. It enables those with disabilities to access, understand, navigate, interact with, and contribute to the web.

The ADA defines a person with a disability as a person who has a physical or mental impairment that substantially limits one or more major life activity. “Disability” in this context, is a legal term rather than a medical one. The ADA is a civil rights law that prohibits discrimination against individuals with disabilities in all areas of public life. However, in the U.S., outside of government institutions, like public schools, reasonable equal access to digital information isn’t protected by law. So it’s up to you to make it so.

Some of the disabilities to consider when designing your application include visual, cognitive, audio, motor, and intellectual. Without your thoughtful design, a not insignificant number of people will be challenged to, or may be completely unable to access your work.

Why make your work accessible? Beyond increasing your reach, it’s just the right thing to do. In addition to supporting the social inclusion of people with disabilities, accessible design also benefits people without disabilities and members of other underserved populations such as the elderly, and those in rural, or developing countries. At its heart, the web is designed to level the playing field. It’s to be accessible to all, regardless of hardware, language, ability, socioeconomics and location. Designing for accessibility is a realization of this goal.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” -Tim Berners-Lee

But what is accessible design? A lot of considerations go into making a design more accessible for disabled people. There are however, specific guidelines for increasing the accessibility of your apps.

For example, things like using semantically meaningful HTML. That is the practice of using elements that add meaning to the content. A <p> tag is meaningful. It indicates a paragraph. People know what paragraphs are. <nav> tags for containing your nav bar instead of using <div> informs screen reading software that the element is a navigation bar. Semantic HTML helps to set expectations for the disabled consumer of your app. A byproduct of using semantic HTML is improved SEO. Google's algorithms analyze the markup and labels to understand what your site is about. The more semantical your HTML, the more accurate the evaluation will be, and more favorable your SEO.

Consistently using the image “alt” attribute, with descriptive text, (for text to speech conversion);

<img src="image.gif" alt="Smiley face" width="42" height="42">

and choosing low-vision-friendly, high-contrast, color schemes, can make the difference between whether or not your site is usable for visually impaired users.

Although all of the following considerations are helpful for many circumstances, they are of particular importance for the specified disability.

Visually Impaired Users

• Provide text alternatives to images, e.g., Alt text, descriptions of info contained in graphics like charts

• Semantic HTML:
  
  <article>,<aside>, <details>, <figcaption>, <figure>,<footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <p>,<time>
  

• High contrast color schemes

• Large or Scalable type/ images, up to 400%

• Keyboard navigational

• Color-blind user colors, underlined text, use of symbols and textures and limited color palette

• Transcripts of video

• Tech: Braille keyboards, screen readers, speech recognition(respond to voice commands), screen magnifiers

Seizures

• No or optionally available strobing/flashing effects

Motor

• Large clickable links/areas
• Speech recognition(respond to voice commands)
• All functionality is available via Keyboard navigational (mouse fine motor)
• Support input alternatives to keyboard and mouse

Audio

• Providing a text transcript for videos
• Closed captioned

Cognitive/Intellectual/Dyslexia

• Plain language
• Consistently maintained site
• Diagrams

The World Wide Web Consortium (W3C), has established the Web Accessibility Initiative which outlines principles and methodologies for evaluating and increasing your apps' accessibility. It has a special focus on dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

W3C's Components of Web Accessibility

• content (text, image, sounds, markup that defines presentation)
• browsers and media players
• assistive technologies
• users' knowledge/perspective
• developers
• authoring tools
• accessibility evaluation tools (CSS and HTML validators)

Web Content Accessibility Guidelines (led by World Wide Web Consortium), guide for content developers. Address four concerns regarding content:

• Perceivability
  text alternative, captions, alternative presentations, increased abilities to see and hear content

• Operability
  keyboard access, alow enough time for user to process content, non-seizure-inducing, help with navigation and searching, input other than keyboard

• Understandability
  make text readable and understandable, make content appear and behave in consistent and predictable ways

• Robustness
  avoid and correct mistakes

A growing number of service providers offer accessibility audits routinely to identify problems and recommend remediation. Use automated tools, and knowledgeable end user assessment by accessibility experts. And end user testing. It's always cheaper to design accessibility in rather than go back and remediate.

Accessible Rich Internet Applications
The World Wide Web Consortium specifies how to increase the accessibility of dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies.

For more information:

For a quick check of your apps accessibility, access Chrome's dev tools/audits/accessibility.

https://www.w3.org/WAI/fundamentals/accessibility-principles/

https://www.w3.org/WAI/test-evaluate/preliminary/

https://www.w3.org/WAI/tips/