When the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in 1994, it had a goal to make the internet accessible to all (amongst other things). Fast forward to today, 97.4% of home pages aren’t accessible to people with disabilities.
What Is Web Accessibility and Why Is It Important?
Web accessibility (a11y) is the practice of building digital products in a way that is accessible to people with disabilities and that conforms to the Web Content Accessibility Guidelines (WCAG).
The WCAG 2.1 level AA is currently the most referenced web accessibility documents by governments the world over. But the WCAG standards aren’t just referenceable materials, they are documents detailing how accessible websites should be built. Everyone on the web development team from the programmers to the designers and the product managers should be well versed in the practices outlined in the WCAG standards.
Websites that aren’t accessible are at risk of being sued, gaining a negative brand image, and losing out on potential revenue.
As a web developer, what can you do to help make the web accessible? In this article, I discuss common ways of making an accessible HTML website.
HTML Semantics
In web design, semantics refers to writing meaningful HTML code that uses self-explanatory tags that make sense to both the developer and the browser engine that renders the a11y tree. Screen readers can announce an element’s role name, state, and value when it is semantically correct.
More on Semantics
Accessibility tree: This modified DOM tree allows the screen reader user to understand the affordances of the different components of a web page.
Affordances: The capability of something gives the user a clue as to how to use it. A doorknob, for example, suggests to anyone approaching the door that it may be opened by turning the knob. A web app’s affordances are essential to ensuring a smooth user experience. A good example is the hamburger menu icon (the three horizontal dashes at the top of a web page), which indicates that the user can access a hidden menu by clicking.
Alt Text for Images
As a web developer, you’ve likely heard of alternative text. Alt text does a lot for a webpage. It tells search engine crawlers the contents of your images and is an opportunity to provide more information to rank higher in SERPs.
However, the most important use of alt text is to provide context for people using screen readers and for those who cannot see your images for any reason (e.g., low vision, a poor connection, or a broken source link). Whenever a screen reader encounters alt text, it simply reads it to the user. Browsers can also be set to display alt text onscreen in place of the image for users with low bandwidth.
To change or improve alt text, simply choose to edit image options, then add alt text where indicated. It’s best to go with a contextual, straightforward description of the image. So, if you’re featuring an image of a middle-aged man sitting on a wooden chair by the window, then your alt text should read exactly that: <img src=”middleaged-man.jpg” alt=”a middle aged man sitting on a wooden chair by the window”>.
ARIA
ARIA stands for accessible rich internet applications. Using HTML attributes, ARIA enables developers to express a wide range of HTML semantic concepts. It extends the possible uses of HTML elements beyond those that are currently allowed by semantic HTML tags. As a first rule of ARIA, use a native HTML element or attribute if it has the semantics and behavior you require instead of repurposing an existing element and adding ARIA.
HTML elements that lack semantic specifications such as span and div can be defined and assigned roles, states, and labels with ARIA. An element’s roles are its specific functions on a page; its states are its conditional status (such as a checkbox being checked or unchecked); and its labels are its title.
ARIA can modify existing semantic elements and the accessibility tree without affecting any other thing about the page presentation or interactive behavior
Ways in which ARIA can affect the a11y tree include:
- Express semantic relationships between elements. For instance what button controls what functionality, or to present a child menu as a child of a parent menu using the “aria-owns” attribute, aria-activedescendant, aria-describedby, aria-posinset, or aria-setsize attributes.
- Role-playing. This represents a shorthand for a particular UI pattern. E.g the checkbox pattern that has states of “checked” and “unchecked”.
Closing Thoughts
Web accessibility is most effective when adopted as part of the web development process from the start. The true measure of accessibility is whether users can use your products. Web accessibility is an iterative process. You should perform regular tests (engage people with physical impairments and use screen readers).
Ultimately, maintenance of an accessible website can be a daunting task for most development teams, which is why automated web accessibility solutions like Equally AI are poised to provide excellent accessibility.
