Accessible
Interaction Design
Interaction Design
Interaction & Usability
Image: Close up of a backlit computer keyboard in rainbow colours.
Overview
Design of the interface plays a key role in making the information perceivable for diverse users but how the web page is constructed is equally as important.
Well-structured HTML code along with meaningful labelling allows assistive devices such as screen readers to efficiently navigate the information on the page. In this section, we will explore some of the coding best practices for web accessibility. Often these features are not obvious in the interface design but are essential to the functionality of the web content.
Developing an Understanding
Digital information and the internet have made information more readily available to those who rely on assistive devices. That being said, there are still many access barriers that exist with online content which prevent some users from participating in common, everyday activities. One study opens in new window by an accessibility software company in 2019 found that 70 percent of the websites it surveyed, ranging from ecommerce to news to government services, contain “accessibility blocks,” or quirks in the design that make them unreadable with assistive technology (Wired, 2019).
Images without alternative text, form fields without labels, and navigation traps can seriously impede a user who relies on assistive technology to accomplish tasks such ordering groceries or booking an appointment.
Considering accessibility from the design of the website throughout the development can ensure that the websites and web apps are built in a way that can be understood by assistive technologies such as screen readers, refreshable braille displays, and screen magnifiers (a11yproject, 2021).
It’s also important to recognize that not all media consumers are using a laptop or desktop computer with a mouse. There are many adaptive technologies that assist users with mobility disabilities to navigate web pages though the keyboard only, through voice command, or sip and puff opens in new window switch devices. How a website is structured and coded is essential for ensuring that all users can find and use the content on the page.
The AccessibleWeb.com blog opens in new window created a series of posts with videos demonstrating the various assistive technologies used by the disability community. Their most recent video describes sip and puff technologies.
Deepening your Understanding
Accessible web development is a complex topic and can get be very technical if you are not a developer. That being said, it can be helpful to evaluate your webpages through various lenses to help anticipate potential access barriers. Here is a brief summary of interactive elements to consider.
Controls
Items such as links, buttons, form inputs and any item a user will interact with should:
- have a minimum space of 32 pixels around them
- not be smaller than 44 x 44 pixels
- have text labels
Keyboard Access
For users that are not using touch screens or a mouse to navigate the page will require:
- a visible focus indicator so they know where they are on the page
- a logical navigation order, typically top left to bottom right
- skip navigation links for efficient navigation of the page
Page Structure
How information is presented and the HTML tags used to identify the content components helps users comprehend how the page is organized without relying on visual cues. When coding a web page, you should:
- use HTML tags semantically. Use HTML tags that represent the meaning of the content such as
<table>for a data table - present content in a logical sequential order in the HTML code
— Adapted from Designing for Accessibility and Inclusion, Smashing Magazine opens in new window
Spotlight: The Accessibility
As part of an Enabling Change initiative between the Province of Ontario and Toronto Metropolitan University, The Accessibility Maze is an online game developed to help those who are new to web accessibility experience barriers first-hand.
The game introduces several common barriers players must work around, mirroring the experience of those who encounter these obstacles daily, and provides quick lessons on how to avoid or correct them.
Teach Access opens in new window is a not for profit organization in the U.S. who works with the tech industry, academic institutions and disability advocacy groups to help make web accessibility a key component of any web design and development instruction at all levels of education. Teach Access envisions a future where technology is born accessible and inclusive for all (teachaccess.org, 2021).
One of their many initiatives is the Teach Access Tutorial which is a comprehensive online teaching tool that covers many aspects of web accessibility from the design to development phase.
