WCAG Guideline 1.3: Adaptable
Today, we discuss the WCAG Guideline 1.3 — Adaptable. Explore what adaptable content is, and how developers can make web content more adaptable.
Happy reading!
What is “adaptable” content?
This is content that can be presented to the user in different layouts or modalities without losing information or structure. That is only possible if the structure of content can be programmatically determined.
There are several factors to consider when dealing with the adaptability of web content. They include content relationships, sequence, sensory characteristics and purpose.
Let’s take a look at some rules to be followed when developing front-end web content, for the sake of adaptability.
Stop using <div> for everything
When coding for adaptability, we must utilise Semantic HTML as much as possible, using the right elements for the right purposes. We should not rely on styles to convey structure because they are not always useful.
This involves the use of landmark elements (e.g., <header>, <nav>, <footer>, <aside>, etc.), ARIA roles and label properties, and properly utilising basic elements like headings, lists, tables and forms.
The benefit is that users will be able to easily identify the structure and flow of content, navigate efficiently, and filter content using assistive technology or adaptive strategies.
CSS is not a panacea
The deception of the stylesheet lies in its ability to represent content as things they are not. As a result, true properties of elements can be masked by false presentation. This is bad, really bad, for users.
Many times, we come across things that look like buttons, but are quintessentially just…nothing. That’s a story for another day.
The reason for CSS’ creation is the separation of concerns (i.e., presentation from content); its purpose is purely cosmetic. Before writing styles for your HTML, ensure each element carries its inherent meaning and functionality, independent of author styles.
Here’s a demonstration of the W3C WAI website viewed on a real HTML-only browser. Will your website adapt well in this condition?
Here’s another demonstration of a browser extension that reads landmarks and page outlines for accessible navigation.
Such tools are used by people with diverse conditions, and well-coded, adaptable web content will be of enormous benefit to them, and everyone in general.
Stay tuned for more!
Thanks for reading! Found this helpful? Be sure to leave a like and share!
Social accounts:
This article was written as an accessible alternative to the post shared on my LinkedIn account.
