Keyboard Accessibility-ADA

ADA The American Disability Act (ADA) is a civil rights law that prohibits discrimination against individuals with disabilities like full/partial visual impairments.

Keyboard accessibility makes the screen readers(screen readers are the tools that read the web applications) read the texts, buttons, menus, dropdowns, checkboxes, and input fields in the web application in detail so that people can interact with the application.

Screen readers are JAWS, CCA (Color Code Analyzer), NVDA, Talkback in Android, which is inbuilt, Voiceover in iOS and Mac, etc.

Example of Talkback in Android

Talkback in Android

This requires a few important technical steps while programming.

Important Key Aspects While Working on Accessibility

Summarized and comprehensive information

While programming, concentrate on descriptive and clear information on inputs, menus, and dropdowns in respective labels in the coding file, which is our HTML file.

Captions and summaries need to be provided for videos in the application.

<!DOCTYPE html>
<html lang="en">
   <body>
      <h1>Use of caption element for concise description</h1>
      <table>
         <caption>Employee details table</caption>
         <tr>
            <th>Employee</th>
            <th>First name</th>
            <th>Last name</th>
         </tr>
      </table>
   </body>
</html>

<!-- Declare the language in HTML file -->
<!DOCTYPE html>
<html lang="en">
   <body>
      <title>Always declare language in HTML tag so that browser can understand</title>
   </body>
</html>

Semantic tags: Use semantic HTML tags that are self-explanatory to both human and web browsers for better accessibility and improved search engine optimization. For example, <table>, <strong>, <section>, <article>, etc, so that screen readers can catch them easily to improve readability.

<!DOCTYPE html>
<html lang="en">
   <body>
      <title>Use of caption element for concise description</title>
      <article>
         <h2>First blog</h2>
         <p>This is my first blog at c-sharpcorner platform</p>
      </article>
   </body>
</html>

ARIA (Accessible Rich Internet Applications)

Use proper roles and states. Use Aria-label precisely when the content on the application is updating dynamically.

In simple words, there are 3 points to keep in mind when we are using aria-* in accessibility.

Role: The type of the element, for example, button, checkbox, list alert, etc, can be declared for its content.

When the role is a button.

<a tabindex="0" role="button" class="submitButton" aria-label="this is final submit">
   Submit
</a>

<!-- When role is alert -->
<span id="errorSymbol" role="alert">
   You are entering wrong information
</span>

Properties

Aria-* attribute provides the information about the element, such as its name, description, and position.

<button tabindex="0" role="button" class="submitButton" aria-label="Submitting the critical information">
   Submit
</button>

State: When we have to explain the state of a dynamic property such as checked, expanded, required, or selected, the user will change the value by their actions. We can set the value to true or false.

For example. When we have a custom checkbox, then we can use it as below.

<span id="checkboxBreak" role="checkbox" aria-checked="true">
   Agree and submit
</span>

Use image texts: Use alternative text for information on the image so that the user can understand when the screen reader reads it if the browser cannot find the image for some reason.

Example

Example

<h2>Image element</h2>
<img src="123456.jpeg" alt="Bird on a branch" width="200" height="180">

Focus navigation

Use the proper tab index in the coding file. The tabindex attribute allows the coders to decide whether the HTML elements are focusable and allows or denies them focusable depending on the requirement. For example. tabindex=-1, tabindex=0, depending on the application's need.

For example. tabindex=0 gives the default navigation order. We can use tabindex=-1 when we have a modal popup open on the application. If we add tabindex=”-1” to that particular element, the focus holds to that modal popup, and once the screen reader is done its work, the focus goes back to the original/main page.

Along with the above, we should focus on the proper color contrast ratio (between background and text color), font size and line height property in CSS, and page zoom level. We should also avoid text/information on the images and horizontal scrolling of the web page.

Keyboard Accessibility helps people with disability interact with essential websites like banking applications, ecomm applications, news blogs, and articles like everyone else.