Web Accessibility Primer
Tags: a11y, inclusion, usability
Published: 2022-08-14 18:50:00

**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)
- _<u>Ensure readability when using color</u>_ by highlighting content changing fonts to make to noticeable and readable by all including those with color blindness.
    ![Ensure readability when using color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkyaits1k7yi5rt6mut8.png)
 
- _<u>Avoid usage of color alone to convey information</u>_, 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1ngbahyfa3zzye18070.png)
 
- <u>_Descriptive hyperlink text usage_</u> to help recipients understand who use a screen reader or for anyone who would like to know exactly where the link will take them.

- <u>_Provide sufficient contrast between foreground and background_</u>

    ![Contrast Sufficiency](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj732j0abxh1duko3gz5.png)
 
-  _<u>Create designs for different viewport sizes</u>_
    
![Different Viewport Sizes Designs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7aenr6ziedqal2camswf.png)
 
- <u>_Add descriptive text to images_</u> as with 'Alt Text' to help when an image won’t load or if a recipient can’t see the visual.
- _<u>Ensure Forms are Keyboard Accessible</u>_ : 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.

- _<u>Text to Speech</u>_ : 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.

- _<u>Video Captions</u>_ are essential for people with disabilities and useful for all. 

- <u>_Work using everyday language_</u>
- _<u>Speech to Text</u>_ : 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. 

<u>Reference</u> :
[w3.org/WAI](https://www.w3.org/WAI)
[developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility)
[wikipedia.org](https://en.wikipedia.org/wiki/Web_accessibility)
[microsoft.com](https://www.microsoft.com/en-us/accessibility)
[query.prod.cms.rt.microsoft.com](https://query.prod.cms.rt.microsoft.com/cms/api/am/binary/RE4Y2lz)
[webaim.org](https://webaim.org/techniques/forms/)
[boia.org](https://www.boia.org/blog/why-prioritize-text-to-speech-accessibility)
[microsoft.com](https://www.microsoft.com/en-in/accessibility/features?rtc=1&activetab=pivot_1:primaryr6)

<u>Image Resources</u> :
[Contrast Sufficiency](https://www.w3.org/WAI/tips/designing/#provide-sufficient-contrast-between-foreground-and-background)
[Viewport sizes](https://www.w3.org/WAI/tips/designing/#create-designs-for-different-viewport-sizes)