Accessibility is an often overlooked, but critical facet of web design. Just as wheelchair ramps can allow differently-abled individuals to access a business storefront that would otherwise only be reachable by stairs, web accessiblity tools allow for differently-abled individuals who might otherwise have difficulty using a site to navigate and interact with data.
A common accessibility consideration when designing a user interface might be for users with limited or impaired eyesight. A common but simple design practice might integrate high contrast color schemes into the styling. In the event of near-total visual impairment, however, it might be necessary for a user to employ tools such as screen readers in order to meaningfully interact with a website.
Different screen reading software include: NVDA, JAWS, and WebAnywhere. Screen readers scan the page for different html elements, each of which has an implicit semantic meaning within the context of a given html page. So for example, a button element is contextually different from a span element. So the first and perhaps most important step in designing accessible websites is to use the correct html element for a given context. If it's something that a user should click on, then it should probably be a button, not a paragraph.
There are, unavoidably, times when ambiguity is necessitated given other design considerations. This is to say, sometimes there might be a need to use a div instead of a button, perhaps for stylistic reasons within a sub-menu. This being the case, somebody using a screen reader might run into issues when trying to discern (keeping in mind, they can only hear what's on the screen, not actually see it) which item they should be interacting with.
In order to disambiguate such occurrences, a standardized set of roles and attributes are used in order to contextually differentiate the actual interactive content on a page. Accessible Rich Internet Applications (ARIA) supplement HTML to extend the accessibility technology beyond the implicit DOM element contexts.
Roles are what are used to assign a specific semantic definition to an HTML element. They describe the context of the element within an Accessibility Object Model (AOM), similar to a DOM--a tree of the HTML elements with the accessibility descriptors.
Normally, a screen reader would read an element in the AOM at its default value: as a nav, button, input, etc. When, for whatever reason, the semantic html element is not used (like using divs within a list for example) the ARIA role attribute allows for specification of a different role on the element.
It might look something like this:
//no roles specified, implicit context
<select name="options">
<option value="option 1"> pick me </option>
<option value="option 2"> no, pick me </option>
</select>
//no implicit context, roles specified
<div name="options" role="select">
<div value="option 1" role="option"> pick me </div>
<div value="option 2" role="option"> no, pick me </div>
</div>
In general, it is better to default to an HTML element with an implicit contextual value. If the need arises to specify the interactive properties of an element, the property aria-label can be used to provide a description beyond the default implicit definition.
So for example, with a button on a page that maybe based on its position implies to a visually-abled user what it's function is; if there is a red button in the corner of a popup window, it might imply its purpose is to close the window. So the aria-label could be used thusly:
<button aria-label="button closes window"> close </button>
The alt attribute is another such label attribute used to describe an image in an image tag, so that a screen reader will default to reading that value rather than a long and unwieldy src attribute which has no meaning to somebody who cannot see. In addition, an empty alt attribute should be placed within image tags regardless, to cut down on proverbial visual noise, as again, the only way a visually impaired person is interacting with the page is through audio cues.
<img src="https://imgs.search.brave.com/eCoy9f72j3Mwq6O9Ame3hYwAwQJFo6c7dyDLtn2nLPI/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9pLmt5/bS1jZG4uY29tL3Bo/b3Rvcy9pbWFnZXMv/bmV3c2ZlZWQvMDAx/LzYwMS8yMTcvZmYx/LmpwZw" alt="Frank Reynolds with two guns saying quote so anyway I started blasting"
Ultimately, accessibility is mindful design. There are no programmatic paradigmatic shifts necessary to implement features that extend usability to include people who otherwise not be able it interact with the content. Accessibility requires simply recognition of a differently-abled perspective and inclusion of those elements on top of existing features to facilitate usability for a wider range of users.
Top comments (0)