Web site accessibility has been a lingering issue that is still present even on modern websites. To make a website accessible, its elements should be "readable" and "understandable" by a screen reader in the most logical, possible way. We were once reminded by Jon Fingas on how dyslexia is a constant struggle through a JS snippet. While indeed it is amazing to simulate a certain condition with JS, but how can we use it to make the web more accessible? HTML can easily be configured to make a modern website accessible. Nowadays, JavaScript is the core of web-based applications; gone were the days that it was used for unimportant usability enhancements. Contrary to popular belief, JavaScript can also be configured to make accessibility possible. But, there are still instances that JavaScript can create accessibility issues too. To make accessibility easier to implement in your websites, you have to be familiar with Web Accessibility Initiative's Accessible Rich Internet Applications (WAI ARIA) or simply called ARIA. ARIA "defines a way to make Web content and Web applications more accessible to people with disabilities." ARIA makes it possible for assistive technology, like screen readers to understand and read the flow of information within a web page. Assistive devices can now interpret dynamic content because of ARIA. ARIA is a lifesaver due to Web 2.0's lack of accessibility capabilities. However, ARIA isn't fully supported by most screen readers, and implementing ARIA on your website's backend doesn't mean it will be implemented properly. Only expensive assistive devices can process ARIA properly; if you have to fix your site's backbone, remember that a solid understanding of how ARIA, JavaScript, and usability is the key to mold these three together. READ: Google adds screen reader support to Docs, Sheets and Slides apps How JavaScript Accessibility Help the Disabled JavaScript accessibility can help the disabled in different ways: JS helps assistive technology assist the visually impaired to understand the content in the page. Navigation is made easier through keyboard use for those with motor impairment or those who cannot use the mouse to browse through a page. Photosensitive users who are prone to epilepsy or seizure attacks can benefit from Java's user-controllable settings. JavaScript in Assistive Technologies Visually impaired people use the aid of assistive devices such as braille readers, screen readers, or similar technologies like this colorblinding Chrome extension. Vision impaired people benefit from these readers in reading and comprehension. In using assistive technology, all information is displayed as structured text. JavaScript functionalities should take a form that can be displayed as text. One good example is a JavaScript loading bar. A loading bar presents visual information as it shows loading times, but for this to be accessible and readable through an assistive device, a text could supplement information denoting its progress. On the other hand, drop-down menus can be interpreted through unordered lists and structural labels. Assistive devices can process this information as it understands the semantics and hierarchy of those lists. Note however that you should still avoid nested lists as this complicates the information of the list. All JavaScript functionalities should be labeled correspondingly according to function or use. Keyboard for Navigation Use Navigation could be difficult for the blind who use screen readers; however, sighted users can also benefit from keyboard navigation, especially those who have problems with mouse control due to motor function impairment. The most intuitive keystrokes should be used to the JavaScript functionality. This includes keys such as the Arrow Keys, Tab, Space bar, Enter or Return, and Escape. Navigating through the website could be done by the Arrow keys, Space bar, and Tab. Enter or Return key should be used to confirm an action, and Escape to abort an action. Form validation can also be performed through limitations. This is a <script> that does not display non numerical input: <script type="text/javascript"> function numbersonly(e){ var unicode=e.charCode? e.charCode : e.keyCode if (unicode!=8){ //if the key isn't the backspace key (which we should allow) if (unicode<48||unicode>57) //if not a number return false //disable key press } } </script> <form> <input type="text" size=18 onkeypress="return numbersonly(event)"> </form> A placeholder can work as a reminder upon invalid input. The Web Content Accessibility Guidelines (WCAG) 2.0 is the official guide on website accessibility. For more complex interactions, you can consult the WCAG about event pairings. Drag and drop functions, as well as the logical content order, can also be done through the keyboard. Drag and drop functions can be complex, but the simple logical content order can be accessed with single keystrokes. For example, items with rich tooltips should be next to their corresponding elements, so using Tab can select the tooltip next when using a screen reader. User Controllable Functions through JavaScript Users prone to seizure or epileptic episodes are people who cannot respond to certain elements as expected. Flashing content can trigger their condition, making them unable to continue further with browsing their content. Moreover, those with cognitive disabilities may find it easier if there are fewer stimuli in their environment. Again, you can rely on the WCAG for visual limits as the Three Flashes or Below Threshold. A cognitively disabled user can benefit from controllable time-based activity in JavaScript. Although limits on these time-based activities are not specific, the rule of the thumb is that whenever an activity has to be completed within a timeframe, the user is warned when the time is about to expire. Afterward, the user is given a chance to extend the time limit to accomplish their purpose. Moreover, animated content should also be controllable as this type of content can disrupt the focus of the user. This does not only involve animated cartoons but as well as news tickers or auto-scrolling galleries of photos. Refresh frequency should be limited; you can designate a button that can refresh data upon request. Unfortunately, there are some animations that cannot be limited for accessibility. Games are fundamentally time-bound and packed with extra animations to entertain users. Controlling these effects would simply contradict the purpose of the game, so this cannot be subjected for accessibility. Do not worry; according to the guidelines, this is possible as long as it is clearly defined as such. JavaScript Accessibility in a Nutshell JavaScript accessibility is possible to implement, but there are certain limitations that will hinder full accessibility of content in the website. JavaScript functionalities should be interpreted with text for screen readers to properly process the information. In navigating a website, it should be possible for the user to use the keyboard to browse and move from one page to another within the website. Here's a guide from Hosting Facts on how to properly format your content for accessibility. Finally, allow the user some control on time-based activities on the site, unless necessary.
By John Stevens
Read More
