Accessibility Object Model (AOM) — Part 1
Accessibility in present times and some developer good practices
Prior to learning about AOM, it is completely mandatory that you understand what the A stands for. Let’s go !!
Accessibility aka a11y deals with enhancing the accessibility of the content on the web pages.
Isn’t it unjust done to the people who cannot take the advantage of the Web which is continuously feeding us with useful data? Louis Braille invented the Braille language for the visually impaired.
“The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.”
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web.
In fact, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.
Accessibility is a practice which aims at building and using technologies to make the web accessible as much as possible to everyone irrespective of any permanent or temporal disability involving
- auditory
- cognitive
- neurological
- physical
- speech
- visual
via any device PCs, smartphones, tablets etc and under any other disturbing situation like slow internet connections.
Why care about Accessibility?
If you are not yet convinced why we should care so much about a11y lets first answer the why before discussing the how.
1. Aging population
According to the latest census (2010), 56.7 million Americans have a disability. Around 80 million people in the European Union (EU) currently have a disability.
As population ages, more people will suffer from various disabilities hindering them from accessing the web. Therefore businesses will have to ensure that their products and services are reachable to their target customers.
2. Web accessibility-related litigation and settlements are on the rise
The information below is specific to the US but rules in this regard have been established by the European Commission as well.
Seyfarth Synopsis: The number of federal lawsuits alleging inaccessible websites continues to increase, along with the number of law firms filing them. Businesses remain well-advised to seek advice from counsel experienced in website accessibility to manage risk.
For more info follow: https://www.adatitleiii.com/2017/08/website-accessibility-lawsuit-filings-still-going-strong/
Terms related to accessibility
I mention here a bit about a few terms which you must be familiar with to understand the accessibility workings.
Assistive Technologies
Following are the three most common assistive technologies which work in coordination with the browser and the operating system to enhance accessibility.
- screen readers for the visually impaired. (Eg: JAWS, NVDA, Narrator on windows, Talkback on Android. The VoiceOver on MAC and iOS and Orca on Linux)
- screen magnifiers for the partially sighted
- speech recognition tools to give commands to control technology, especially useful for people with motor disabilities
Accessibility APIs
Different operating systems have different accessibility APIs available :
- Windows: MSAA/IAccessible, UIAExpress, IAccessible2
- Mac OS X: NSAccessibility
- Linux: AT-SPI
- Android: Accessibility framework
- iOS: UIAccessibility
These APIs are unlike the javascript APIs which the developers use. However the assistive technologies like the ones mentioned above can use it to get information from the browser and the operating system.
Accessibility Tree
Like we have the DOM tree in the browser which is accessed using the DOM API, most assistive technologies interact with the accessibility tree using the accessibility APIs.
When a webpage loads, first a DOM object is created by parsing the HTML. Then further the browser builds the accessibility tree from the DOM tree corresponding to the assistive technology used. Whenever browser updates the DOM in response to user interaction or scripted events the a11y tree is also updated and vice versa.
Lets look at a simple example of the accessibility tree for a screen reader.
A screen reader only needs textual data, the visual part of the UI is not required. For some alt attribute may be just an image caption but for a disabled person that is the only source of understanding the image.
Developer Good Practices
1. Declare the language
Search engines generally have automatic language detectors but its still a good practice to define the language of the content. With HTML5 you can use the lang attribute for any child tag if only some content is written in a language different from the rest of the web page.
<!DOCTYPE html>
<html lang="en">
<body>
<p lang="fr">Ceci est un paragraphe.</p>
</body>
</html>Language information assists speech synthesizers and Braille translators to produce usable results. These applications need to know whether they can produce output from the text, or whether perhaps they need to switch to a different language mode.
2. Use HTML elements as semantic to the purpose as possible
semantic elements are those that which tells the reader about the type of content. Eg button, header, footer, article, section, p, figure etc
non-semantic elements: only tells that there is some content. Eg spanand div
You may create a link simply by following the sophisticated way like this
<a href=”https://google.com">Go to Google</a>or mislead the browser to build a less perfect accessibility tree with this
<span id= "link" data-link="https://google.com">Go to Google</span>Especially when you were a newbie you might have build your entire web page using div
3. Different parts of the webpage should be accessible using the tab key
This can be helpful mainly under two circumstances:
- Your mouse doesn’t wish to listen to you
- Owing to some motor disability you use cap head pointer
Observe the demo below of the website https://www.visionaustralia.org/. which can be considered to have good web accessibility. You can just move to different parts of the website using the tab key and press enter/return instead of clicking with a mouse.
link and form control elements are focusable and can be interacted using tabs by default. To add these features to other elements as necessary we use the attribute tabindex which has an integer value.
tabindex =0 indicates that the element is focusable and accessible using tab under the normal navigational flow i.e the sequence in which elements are defined in the DOM
<span id= "link" data-link="https://google.com" tabindex="0" >Go to Google</span>Note: still you will need to play with CSS to provide proper styling to the focus.
4. Use WAI-ARIA attributes
Precisely defined in the documentation of Mozilla
WAI-ARIA is a specification written by the W3C, defining a set of additional HTML attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking.
These attributes do not affect the structure of the web page or DOM but modify the accessibility tree.
I would like to discuss the most commonly used type of its attribute role
Let’s look at the same silly code snippet we have been going through in the previous points.
<span id= "link" data-link="https://google.com" role="link" tabindex="0" >Go to Google</span>Adding role = "link" informs the screen reader that the current element under focus is a link so that the user too gets to know about it.
Now let’s look at somewhat a more practical example
The code snippet above may be all good for visual display. But when the user reaches the list, the screen reader merely describes it as a list consisting of three links. It does not identify the list as a collection of tabs and whether the links open up new pages or displays some content on the same page.
Next, see the same code snippet modified by using ARIA attributes
The screen reader now identifies the list as a collection of tabs with corresponding tab panels in the accessibility tree. The aria-controls attribute establishes a relationship between each tab defined inside li and the corresponding tab panel defined in the div tag. The role = presentation mainly signifies to neglect the semantic meaning of that tag. Interpretation of ARIA attributes defined may vary slightly depending upon the assistive technology and browser.
5. Use the biggest heading tag h1 for the main heading and so on.
This is an important part of SEO. Search engines use the heading tags to determine page topics and subtopics. Hence choosing right keywords and metadata under appropriate tags is further critical to make your content rank higher in relevant web searches.
Further obeying the previous point, don’t use these tags just to get bold and bigger fonts. You can easily get so with the help of CSSfont attributes.
6. Make the website responsive
With the increasing popularity of smartphones, quite a high proportion of internet users browse websites via their tabs and mobile devices. Hence it becomes necessary that apart from desktops the websites look appealing in all other types of devices as well.
7. Accessibility Audit
You can do an accessibility check of any website using different tools.
Chrome: Head over to the developer tools and select the audit option on the top. If it is not visible expand the double arrow to find the option there. Perform an audit which generates an audit report consisting of SEO, accessibility and PWA reports etc and also provides you hints on how to improve.
Firefox: Include the aXe Developer Tools addon
8. Start building Progressive Web Apps (PWA)
PWA is a modern web technology to provide an offline first experience to users similar to mobile applications. As said something is better than nothing. Time to kill the dinosaur.
Conclusion
Thanks a lot for reading my article. This article gave you an overview of the concepts involved in accessibility and how caring about them would help you in building high-quality websites with a superb user experience. Do let me know what you think in the comments section and If you found it useful please give it some claps to support it and stay tuned for its next part.
I would be happy to connect with you on Linkedin.
