Implementing Accessibility as a Developer: Keyboards and Screen Readers

People are the key to bringing technology and guidelines together to build Accessible Products and User Experience. These people work together to form the Software Development Life Cycle (SDLC), and software Developers are part of this group of people.

Accessibility is simply the ease of access. It entails removing obstacles that prevent people with disabilities from accessing the Web or a product while providing extra support so that they can use, contribute to, or otherwise easily navigate a product.

The Introductory Statement states that Developers are a part of the Software Development life cycle SDLC, working together with the other members to make Accessibility a success, so what is their role?

Who is an Accessibility Developer?

To Understand who an Accessibility Developer is, we need to know who a Web Developer is. A Web Developer, also called a programmer or coder, writes, documents, tests, debugs, tests, and publishes frameworks and software components to create interactive web pages. In summary, developers write and maintain code, implementing Designs.

With these in mind, an Accessibility developer ensures that accessible designs are implemented in web content, following the Web Accessibility W3C Standards and Guidelines.

How Do Accessibility Developers Implement Accessibility

Web Developers implement accessibility by following the Standards and guidelines of the Web Accessibility Initiative (WAI), which are made up of the WCAG, the UAAG, and the ATAG.

• The WCAG is the Web Content Accessibility Guidelines, and they ensure Accessible web content such as texts, images, multimedia, and presentation.
• The ATAG is the Authoring Tool Accessibility guideline that is in charge of making authoring tools accessible for users to create web content, and these Authoring tools include social media platforms, creative platforms, etc.
• The UAAG is the User Agent Accessibility Guidelines, ensuring user agents are accessible. User agents are browsers, browser extensions, media players, etc.

Screen Readers

Developers implement these guidelines while building in various ways, but there will be a focus on Screen Readers and keyboard applications.

The Keyboard and the Screen Readers share a strong relationship, and they very much complement each other. Most Screenreader users rely on the keyboard to navigate, and Screen readers have inbuilt keyboard navigation functionality.

Screen readers are assistive technology software that reads out all the details and information on the screen. Despite their role as the eyes of the user, the user perceives the web through their hearing.

For Screen Readers to work effectively, proper labeling should be done. There should be clear structure and affordance of headings, lists, paragraphs, data tables, and forms.

These can only be achieved when the contents are coded correctly. There’s Accessibility in using HTML, CSS, and JavaScript; while doing this, they should use semantic elements.

When a Dev writes HTML codes to build a web, the Browser(e,g chrome) uses the information to create a DOM.

DOM is the Document Object Model, which represents a collection of JavaScript objects that correspond with the HTML tags combined with CSS to form the GUI.

The Browser also generates a new section known as an Accessibility tree. The Accessibility tree corresponds to the DOM information but filters out elements that lack semantics. This is how people with disabilities communicate or navigate the internet.

Semantics in Programming means writing codes that are descriptive and have affordances. In HTML, it involves using semantic tags where they apply and for the purposes they serve.

When web content is coded correctly, a screen reader announces the name, the role, and the state of an element—for example, navigating a list.

• Screen Readers
• Voice overs
• Glasses

The screen reader reads it as “list with 3 items,” which is the Role, “screen readers, voice-overs, Glasses” as the Name, and the state, “List Item”.

In cases where there is no specific Tag serving a purpose for the element, Accessible Rich Internet Applications (ARIA) is recommended. . It is a set of rules, states, or purposes that can be applied to non-active/non-semantic HTML elements to make them semantic.

WAI- ARIA adds to the ability to modify and enhance semantic elements. It also helps communicate Affordances. ARIA doesn’t give any new Characteristics; it simply fills the gap.

Screen readers can also be connected to an output Braille for visually impaired users. They can use it on desktops/laptops as well as on their mobile device with a Bluetooth connection.

Image of A system screen reader connected to a braille output.

Who can Use Screen Readers?

• Visually impaired Users
• Users who are both visually impaired and hard of hearing.
• Users with cognitive disabilities like ADHD, learning disabilities, and Autism.

Keyboards

The keyboard is a hardware device with keys used to operate the computer, and they are an essential part of accessibility. Making a Web Keyboard Accessible is a critical way of implementing Accessibility.

This Feature favors users with some forms of physical disabilities and cognitive disabilities, and it also generally benefits users who suffer from disabilities due to a decline in age. A user with a weak grip or an unstable touch cannot use the mouse to access the web thus, rely on the keyboard.

The Keyboard, as mentioned earlier, is used conjointly with the screen reader, benefiting screen reader users.

How to Make a Web Keyboard Accessible

• Make Web Keyboard Accessible by Default
• Allow keyboard shortcuts, e.g., Ctrl+C (Windows) or Cmd+C (MacOS)
• Add Tab index in an organized format to make elements clickable and the order they appear.
• Avoid lengthy navigations; Apply Skip to main link content
• Ensure that there is a focus order in navigation. The keyboard should be able to navigate in the proper order, whether left to right, or top to bottom.
• Carry out manual testing and get help from senior accessibility specialists with experience

How to Use a Keyboard to Navigate the Web

Table Credit: Introduction to Accessibility by EdX

Why Developers Should Code for Accessibility: A Real-World Use Case

Every developer’s primary responsibility should be to create products that can be exposed to users not only virtually but also through other means, such as hearing and touch.

• Laws and principles have been set up by governmental bodies to ensure that the groups of people in SDLC implement Accessibility and Developers are part of them. Over 15% of the world population are people with disability, and they are legally bound to enjoy, navigate and interact with the Web
• One size doesn’t fit all users, and implementing designs without semantics or considering accessibility, will get users frustrated because they misunderstood a piece of information; it can also lead to loss of money for the product owners and users
• Business can be affected when the web is restricted, Products are Inaccessible, and users cannot carry out transactions successfully.

It is important to note that there is no specific code to implement accessibility. However, having Knowledge of the Guidelines and Standards for Accessibility and Implementing them in their codes, research, and consistent testing enable these Developers to do a great job while building Accessible web and products for users.

Sources

• Accessibility principles
• Accessibility developers’ guide
• Accessibility Fundamentals with Rob Dodson
• Aria Guidelines

A TIP FROM THE EDITOR: Accessibility is a vital topic, and we have several articles on it, such as An Overview Of Web Accessibility and Psychology In Design Of Products For Users With Disabilities, among others.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo