DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

jainnehaa
jainnehaa

Posted on

Web Accessibility Primer

Web Accessibility is designing and developing websites, tools and technologies such that people with disabilities can also perceive, understand, navigate, interact and contribute on them.

Web accessibility encompasses auditory, cognitive, neurological, physical, speech and visual disabilities that could affect access to the Web.

Web accessibility also benefits people without physical disabilities but with situational disabilities, socio-economic restrictions on bandwidth or speed etc, viz:

  • people using devices with small screens, different input modes, etc
  • people with temporary disabilities such as a broken arm or lost glasses
  • people with situational limitations such as in bright sunlight or noise around hindering listening to audio
  • people using a slow internet connection or having limited or expensive bandwidth

Accessibility is the practice of making websites usable by as many people as possible and is the right thing to do. Providing accessible sites is part of the law in some countries, which can open up some significant markets that otherwise would not be able to use your services or buy your products.

Accessibility, Usability, and Inclusion are closely related aspects.
Accessibility addresses discriminatory aspects in user experience for disabilities.
Usability is about designing products to be effective, efficient, and satisfying. Usability practice and research often does not consider the needs of people with disabilities.
Inclusion/Universal Design/Design For All is about diversity and ensuring involvement of everyone to the greatest extent possible, addressing broad range of issues including:

  • accessibility for people with disabilities
  • access to and quality of hardware, software, and Internet connectivity
  • computer literacy and skills
  • economic situation
  • education
  • geographic location
  • culture
  • age, including older and younger people
  • language Accessibility focuses on disability and does not try to address broader issues as Inclusion.

Implementing Accessibility is a topic of wide range. So, listing down only few strategies and tips to give a big picture on how to to implement it (based, on documentations and approaches adopted by various organizations)

  • Ensure readability when using color by highlighting content changing fonts to make to noticeable and readable by all including those with color blindness.
    Ensure readability when using color

  • Avoid usage of color alone to convey information, instead provide additional identification that does not rely on color perception. For example, asterisk along with color to indicate required form fields, labels along with color in graphs

Avoid usage of color alone to convey information

  • Descriptive hyperlink text usage to help recipients understand who use a screen reader or for anyone who would like to know exactly where the link will take them.

  • Provide sufficient contrast between foreground and background

    Contrast Sufficiency

  • Create designs for different viewport sizes

Different Viewport Sizes Designs

  • Add descriptive text to images as with 'Alt Text' to help when an image won’t load or if a recipient can’t see the visual.
  • Ensure Forms are Keyboard Accessible : Users who cannot use a mouse, navigate web pages with the keyboard. Forms that use JavaScript to manipulate form data, set focus, change form elements or submit forms, can create interactions that only work with a mouse. Ensure that your web site forms can be understood and operated with the keyboard alone.
    Screen reader users navigate using the Tab key. Although labels are announced when form inputs received keyboard focus, other text between the form controls is usually skipped. Be sure to include any instructions at the beginning of the form, or associate them with specific fields using aria-describedby.

  • Text to Speech : Text-to-speech (TTS) technologies read written text aloud, providing essential accommodations for users with certain impairments and is capable of synthesizing natural, human-like audio from virtually any piece of text, with applications ranging from in-home assistants (like Alexa and Google Home) to language-learning tools and screen readers.

  • Video Captions are essential for people with disabilities and useful for all.

  • Work using everyday language

  • Speech to Text : Speech recognition can be used for dictating text in a form field as well as navigating to and activating links, buttons, and other controls.
    Speech recognition is about recognizing words for speech-to-text (STT) transcription, virtual assistants and other speech user interfaces. This technology identifies who the speaker is, not the words they’re saying.

Reference :
w3.org/WAI
developer.mozilla.org
wikipedia.org
microsoft.com
query.prod.cms.rt.microsoft.com
webaim.org
boia.org
microsoft.com

Image Resources :
Contrast Sufficiency
Viewport sizes

Top comments (0)

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!