Photo by Quaritsch Photography on Unsplash
Web Accessibility and HTML's Role in it
Understand what web accessibility is all about, as well as how HTML contributes to it.
This week, on accessibility.
You may have seen it represented as "a11y" by those too lazy to type in the 11 characters between the "a" and the "y" :)
It's cool though. No judgment from me. I actually love it.
What is Accessibility?
The word "accessibility" has several related meanings:
the quality of being able to be reached or entered
the quality of being easy to obtain or use
the quality of being easily understood or appreciated
the quality of being easily reached, entered, or used by people who have a disability
Let's talk about WEB accessibility then. Here's an excerpt from the World Wide Web Consortium website, discussing web accessibility:
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:
perceive, understand, navigate, and interact with the Web
contribute to the Web
Web accessibility encompasses all disabilities that affect access to the Web, including:
auditory
cognitive
neurological
physical
speech
visual
Web accessibility also benefits people without disabilities, for example:
people using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
older people with changing abilities due to aging
people with “temporary disabilities” such as a broken arm or lost glasses
people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
people using a slow Internet connection, or who have limited or expensive bandwidth
As you can see, web accessibility does not affect just people with certain impairments, but everybody that uses the web.
Why is Accessibility Important?
INCLUSION
It's as simple as that. The web should be designed in such a way that as many people as possible can benefit from, as well as contribute to it.
For that to happen, all the different groups of individuals accessing the web have to be considered and served accordingly.
Accessibility is not just a best practice but, in many countries, a legal requirement.
The goal of web accessibility is to make online content and services accessible to all users, regardless of their abilities or disabilities.
The Role of HTML in Web Accessibility
Alright, you now know what accessibility is, and why it is important.
How can you, as a web developer, make sure that your websites are made as accessible as possible?
Let's start at the very foundation of a web page: HTML.
HTML is an important technology for web accessibility. Its role is to provide the structural and semantic foundation for accessible web content.
Semantic HTML Elements
I wrote all about HTML semantics in my previous article.
Since HTML elements provide meaning and structure to web content, they help assistive technologies and browsers understand the content's hierarchy and purpose.
For example, proper use of heading elements (<h1> to <h6>) in HTML helps create a logical document structure. This is vital for screen reader users who rely on headings to navigate and understand content.
Semantic Tables
Still under semantics, tables should be used for tabular data and headers (<th>) should be used to associate table headers with data cells. This helps screen readers interpret table content.
Alternative Text for Images
Many accessibility features are baked into HTML which must be utilised properly and taken seriously (-_-)
A very good example of this is the alt attribute for images.
How many times have you put a random piece of text as an image's alt attribute?
<img src="..." alt="A random piece of text">
Can't count? Well, neither can I (>_<)
I'll let you know that the alt attribute provides alternative text for screen readers, and you will be doing users of these technologies a disservice by neglecting it.
I teach my students that the alt attribute should describe an image as literally as possible. See the image below:
A good alt description would be "Brain with cogs".
Only for purely decorative images should you have empty or redundant alt text.
Forms and Inputs
Check this out:
<input type="text" name="fn" placeholder="First name">
I'll give you some time to figure out what's wrong with this input, from an accessibility standpoint.
Haven't seen anything yet? You're the worst of them! (-_-)
I kid.
First of all, there is no label for this input.
"Oh, but there's a placeholder."
Screen readers can't read placeholder text, dummy! (o_o)
Don't mind my language.
You NEED to have a label for your inputs to provide context and instructions, else, it's just a text field floating on the page.
Another issue: what's with that name?
fn? What in the world is that?
Input elements should also have meaningful names and descriptions.
Let's effect these changes and see then:
<label for="firstname">First name</label>
<input type="text" name="firstname" id="firstname" placeholder="First name">
Much better :)
Multimedia Accessibility
HTML5 introduced elements like <audio> and <video> for embedding multimedia.
Captions and transcripts should be provided for multimedia content.
Keyboard Navigation
HTML should ensure that all interactive elements are keyboard accessible.
This means users can navigate and interact with content without a mouse.
You may not need it, but certain people do.
ARIA Roles and Attributes
You're probably familiar with attributes having aria-this, and aria-that. These are very important attributes when it comes to building accessible web applications.
ARIA (Accessible Rich Internet Applications) attributes can be added to HTML elements to provide additional accessibility information.
For example, role="button" can be added to non-button elements to indicate interactivity.
Testing and Validation
Web accessibility can be tested using tools like screen readers, keyboard navigation, and automated accessibility testing tools.
Validating HTML for correctness with tools like the W3C Markup Validation Service is also crucial.
I'll be honest, I don't do this myself (;_;) and I may have to look into it.
But you can! (^_^)
Progressive Enhancement
The concept of progressive enhancement involves starting with a solid, accessible HTML foundation and then enhancing the experience with CSS and JavaScript.
This ensures that even if JavaScript fails or is turned off, the content remains accessible.
Continuing Education
Finally, web developers and designers should stay updated on evolving web accessibility standards and best practices to create more inclusive digital experiences.
Parting Words
Defining accessible content with HTML will be made much easier for you as a developer when you realise that you are building with the USERS' best experience in mind.
In other words, your feelings don't matter (^_^)
So stop being lazy with accessibility.
The past few weeks have been spent talking about HTML. Next week, I think I'll put out something on CSS.
Follow this blog, engage, and share the content if it's helped in any way.
We go jam next week.