Web Accessibility

Accessible by all(no barriers that prevent interaction or access to the web)

Web Accessibility- Means creating a web application for all. Whenever we create a web application, we always should consider that whether this application can be access by all kinds of people. there should no barriers for people with disabilities to access your web application.

As per data given by the ‘world bank’ about 1 billion people around the world are having some form of disability and they are contributing more than 8 trillion disposal income to the economy. So this is the factor that we have to keep in mind as more users more growth. Even while creating any application this should be our primary focus that if we have something which can not be accessible by people then it is a worrying factor. Now let’s discuss, how we can make our web applications more and more accessible.

Challenges or usability obstacles on web application for disabled people—

1. Visual — There might be many users who are fully are partial blind.
2. Auditory- Hearing impairment
3. Mobility- Can only use mouse or keyboard or having another kind of physical Mobility problem
4. Cognitive- Is a web app created by you is easy to understand?

To address these kinds of problems WCAG provides 4 principles that every web application should adhere to.

WCAG — is a group of individuals and organizations that works around web accessibilities.

Web Content Accessibility Guidelines (WCAG)
Here we will discuss 4 Principles provided by WCAG

1. Perceivable — users must be able to perceive the information being presented
2. Operable — the interface cannot require interaction that a user cannot perform
3. Understandable — the content or operation cannot be beyond their understanding
4. Robust — as technologies and user agents evolve, the content should remain accessible

Tips for addressing challenges or usability obstacles

Partial/full(Blind and Visually Impaired)-
1. Provide sufficient contrast using colors and textures

2. Use headings to organize page content

3. Provide alt text or descriptions for non-text content

4. Descriptive labels for links and buttons

5. Don’t rely on color alone(like green for success or red for error)(users will benefit from the use of icons and relevant labels accompanying alerts and actionable page elements.)(underlining of links)

6. keyboard accessibility(use screen readers to surf the Web)

Partial/full(Hearing impairment)
1. Transcripts for Audio and Video/Audio Content

2. Captions and Subtitles for Video/Audio

3. Sign Language Feeds for Your Videos/Audio

Partial/full(Mobility impairment)
1. The key repeat function can be disabled for those who cannot release a key quickly enough to avoid multiple selections.

2. Individuals who have use of one finger or have access to a mouth- or headstick or some other pointing device can control the computer by pressing keys with the pointing device

3. Trackballs and specialized input devices can replace mice.

4. Provide logical and standard keyboard commands for interacting with the product.

5. Ensure all functions can be accessed with the keyboard.

Cognitive- Think As User
Think like a real-time user, that whatever application you have created is easy to operate, easy to understand all the flows. You will also get if there is any problem.

Tips for codings-

1. Always try to use Native semantic elements/tags-
   Always try to use native semantic HTML elements to achieve your desired output. you can get the same behavior with custom elements but most of the time you will miss the internals of that semantic elements. These internals of elements helps in web accessibility.
   Ex- Let’s discuss click event

<div onClick={0}>Link item with div </div>
<button onClick={alertFn}>Link item with button</button>
Note- 1. You can get same visual effect for both
      2. You can get same functionality for normal user
but what about the user who uses screen reader because he is blind. screen reader will skip <div> element as click listner, but button will work great for every kind of user

2. Give enough Time- Many cases, I have seen, there are some time-based pages/screens like some form/banking application. For such applications, we should always consider people with disabilities because people with disabilities will require more time than normal time. If the application is not having enough time then in most cases for people with disabilities will face difficulties to achieve the desired task.

3. Avoid display:none or visibility: hidden
These styles will hide content from all users. The content is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader.

The following are the recommended styles for visually hiding content that will be read by a screen reader.
.sr-only{
position:absolute; 
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden}
.class {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%); 
height: 1px;
width: 1px; 
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;}

4. Label Your Controles-
Labeling your form controls(elements) will not make any visuals changes but are very useful for screenreaders for reading content and provide detailed information to blind persons.

<label for="UserEmail">Email</label>
<input type="text" id="UserEmail" /></div>
Here we added label with for attribute and same id, it will provide more information while reading it by screenreader to blind person

5. Use Aria role Attribute to indicate Generic Tag behaving like some Standard tag

<div onClick={0}>Link item with div </div>
<button onClick={alertFn}>Link item with button</button>
Note- 1. You can get same visual effect for both
      2. You can get same functionality for normal user
but what about the user who uses screen reader because he is blind. screen reader will skip <div> element as click listner, but button will work great for every kind of user
To get screenreader to catch <div/> as click listner be can add aria roles on it
<div role="button" onClick={0}>Link item with div </div>

6. Keyboard accessibility- Many users don’t use a mouse, so validate your application can be fully accessed by keyboard only. Note — Please avoid tabIndex:-1;

7. Provide proper descriptive text for ‘alt’ attribute for the image Element

BAD
<img src="imgPath" />
<img src="imgPath" alt="" />
<img src="imgPath" alt="img" />
Good
<img src="imgPath" alt="tell about your image" />
tell about your image - means add what this image is about

8. Provide proper ‘title’ text on Elements that support this attribute

BAD
<abbr>ISRO</abbr>
<abbr title="">ISRO</abbr>
Good 
<abbr title="Indian Space Research Organisation">ISRO</abbr>

9. Contrast Ratio — Provide proper color for your text. because the improper color or unreadable color on the text will make your application non-accessible. Things on a web page should be properly readable.

Try to read paragraph text in below image.

Like in this above image, text for paragrapgh looks like bit blurred. Even a normal person needs to put so much focus to read it. so think about partial visualy disbled person.

10. Zooming and scaling must not be disabled — Never fix viewport Scaling on your web application. Give flexibility to users to zoom-in and zoom-out of your application.

1. Remove the user-scalable="no" parameter from the content attribute of the <meta name="viewport">
2, he maximum-scale parameter limits the amount the user can zoom. This is problematic for people with low vision

Happy Learning…. 👏👏👏