October 3, 2019 Topcoder – Planning for Accessibility

“We need to make every single thing accessible to every single person with a disability.”― Stevie Wonder

This article will talk about planning for accessibility. Previous articles in the accessibility series include Designing for Accessibility , Digital Accessibility , Topcoder and Accessibility  and Accessibility Project LifeCycle . Here, the reader will learn about planning for website accessibility projects and we will look at some areas on the Topcoder home page such as  keyboard accessibility and navigation.

Accessibility is about making software useful for many users, and ensuring websites and desktop software help users who have disabilities, mobile users and slow internet based users. Accessibility provides equal opportunities and helps to handle different groups of users in the same way, giving users with different disabilities the same rights to access as users without disabilities. Accessible software helps make a website more search engine optimization friendly. The companies that provide accessible web sites have a good branding image.

The users with disabilities can be visually impaired, users with motor function problems or hearing impaired users. Visually impaired users might have low level vision, full blindness or color blindness and might use screen readers for accessing content at different zoom factors. Users facing motor function problems such as paralysis or weakness due to neurological disorders might use a keyboard and other features which are non mouse. Deaf users might use captions and other content alternatives for voice and video. These users might have hearing levels which are low or be completely deaf. The other group of users might have disabilities related to cognitive impairment and difficulty in thinking/memorizing, or disease related to mental illness such as depression, schizophrenia, dyslexia and attention deficit hyperactivity disorder.

Users who have these disabilities need to be able to access digital content and websites. Different assistive technologies can make them capable to navigate, input and read the content. Americans with Disabilities Act of 1990 (ADA) law stipulates that websites need to be accessible to disabled users. Web content accessibility guidelines (WCAG)  are provided as a standard. These guidelines are related to the perceivability, operability, understandability and robustness of the web content. WCAG compliance levels are A, AA and AAA.

Planning for website accessibility needs to start very early in the software release process. The team needs to have accessibility experts right from the start of the project. They help to cut down on re-work and reduce the amount of issues during the testing stages. Training the team of developers and testers on accessibility is also very important . The project plan needs to have time built in for designing, development, testing, fixing and retesting. The testing might be manual or automated tool based. The website needs to be in a stable testing environment for testing of accessibility requirements. 

You need to have a requirements board to decide which websites, pages, content management systems, and visual designs need to be developed and what their priority is. Any change or accessibility issue needs to be carefully reviewed by the board so it meets requirements. Implementation of these requirements needs to happen in phases, or sprints. Teams should have a plan for future requirements which enhance the capability of the application. Making content accessible is not a one time fix. It is a continuous process and as new web pages are developed, the accessibility requirements come in. Testing and fixing issues is part of the maintenance phase.

TopCoder Accessibility Project

Now, we look at the Topcoder home page and try to evaluate these pages for  keyboard accessibility and navigation.

Web Page Design : Navigation

Web page navigation needs to have a skip link target which is valid and appropriately positioned. The event handles should not have navigation and form submission triggers. Meta redirects need to be avoided. The pages should not refresh automatically.The web pages need to have a consistent navigation structure. Voice should not be the only way to access the content.  A web page should be locatable in multiple ways from a group of pages. The past repetitive content should be skippable with the use of visible links.

In the html below, the repeated components need not appear in the same relative order each time they appear.

In the html snippets below, Tab order is not following the  logical order.

Web Page Design : Keyboard Accessibility

To ensure keyboard accessibility, inactive elements need to avoided in the focus order. The device dependent event handles and the title attribute should not be used alone. 

Accelerator and shortcut keys should be unique and consistent across the web pages. These keys should not conflict with browser specific keys. The active elements need to have a keyboard focus with the ability to be activated by the keyboard, as does the interactive functionality. The elements which are read-only and editable need to have keyboard focus. The javascript based web features need to be keyboard accessible. The keyboard focus should not be trapped. The character key shortcuts should be ensured for reconfiguration and deactivation. The hovering or focused content needs to be able to be closed by the user if necessary. The focus order of the interactive elements needs to be logical. Documentation needs to be provided for non standard keys which are used for access.

In the html snippets below, script user interface is not accessible. 

In the next part of the series, we will look at other areas in accessibility such as  frames, data tables, charts, graphs, trees and outlines, page tabs, dialogs, calendar controls, animations, dynamic content, authoring tools, layout tables, multimedia, multimedia control playback, and typography.