Billions of people around the world use various web applications in their everyday lives. As web developers, we strive to build strong websites that can be used and enjoyed by everyone. But what is accessibility and why should we care about it?
Web accessibility is the practice of building websites that can be used by everyone. This includes those with disabilities, those with slow network connections or users on mobile phones. Everyone should have the ability to easily navigate and interact with all of the web content on the site.
Why is it Important to Design for Accessibility?
A large portion of websites online are not accessible for all users, and it creates a barrier to access information for some groups of individuals. The goal of accessibility is to not exclude anyone from information, products or services online.
A focus on accessibility promotes inclusion of all groups including the following:
- Individuals with visual disabilities
- Individuals with auditory disabilities
- Individuals with motor disabilities
- elderly individuals
- those in developing countries affected by varying connection speeds
- those in rural areas affected by varying connection speeds
A focus on accessibility is also really important for businesses. When a business creates strong accessible designs and web products, the user experience is much stronger and customers are left more satisfied with the end product.
What are the four principles of accessibility?
The Web Content Accessibility Guidelines(WCAG) are a set of guidelines and standards for accessibility. The WCAG has come up with the acronym POUR which stands for Perceivable, Operable, Understandable, and Robust.
Perceivable - Users should be able to perceive content through one of their senses (visual, sound or touch).
Operable - Users should be able to use all interactive elements on the page, and it should work with assistive technologies like screen readers.
Understandable - Users should be able to clearly understand the content on the website.
Robust - Users should be able to choose the technology they want to help them interact with on the website.
To learn more about these principles, please visit the W3C documentation.
What are examples of web accessibility?
There are many things you can do to ensure that your website is accessible to all. I will show you a few examples of what you can implement in your sites.
Semantic HTML
Semantic HTML describes the meaning of the content to the browser and developer. Examples of semantic HTML elements include main, article, and nav elements. When creating your markup, you should always strive to use semantic HTML when possible. Other elements like div and span tags hold no special meaning and act as generic containers.
Semantic HTML helps users relying on assistive technologies understand the meaning behind the content. Avoid using markups like this:
<div>
<div>
This is not semantic at all. I should probably use a semantic markup.
</div>
</div>
Instead, you should write markup like this:
<main>
<p>This is an example of semantic HTML. Semantic markup is the way to go.</p>
</main>
Alt text
Alt text is short descriptive text associated with an image or media element. It is used to help assistive technologies like screen readers understand the content. Inside your code, you would add an alt attribute inside the img element like this:
<img
src="src-link-for-image-goes-here"
alt="man sitting at desk writing code on their desktop"
/>
That short descriptive text will help those with visual disabilities understand what the image is supposed to be about.
Creating meaningful Links
When you are adding links on your website, it is really important that your link text is descriptive. You want to avoid creating link text like this:
<p>
<a href="link-goes-here">Click here</a> to learn more about This Dot Labs.
</p>
"Click here" is not that descriptive, and doesn't tell you anything about where the link is going.
This would be an example of using descriptive anchor text.
<p>
To learn more about our services, please visit the
<a href="https://www.thisdot.co/">This Dot Labs website</a>.
</p>
Where can I learn more about web accessibility?
There are many great resources where you can learn more about accessibility. Here are a few options to choose from.
- W3C Web Accessibility Initiative
- JavaScript Marathon: Developing Accessible Websites & Web-Based Apps with JavaScript
- The Meaning of Web Accessibility: Accessible HTML & Assistive Technologies w/ Nic Steenhout
Conclusion
When you are building out your websites, please make sure that your content is accessible to everyone. A large portion of websites online are not accessible for all users and it creates a barrier to access information for some groups of individuals.
Remember that accessibility is not a feature, but a requirement when building strong web applications.
About the author
