This week I'd like to talk about web accessibility. It's a topic I find not only interesting but also really important. I was asked once during an interview how to make your page more accessible and I blanked. I had all the answers I just didn't piece them together properly. Recently I've reexamined the topic and I'd like to share some of the points I've come across.
What is Web Accessibility?
Well it's a pretty fitting name. It's making your web page more accessible to a larger audience. This means designing it in a way that allows for people of all varieties, disabilities included, to have equal access to your page. This is important for a multitude of reasons. From a business standpoint it makes sense you'd want your product to reach as many people as humanely possible. From an inclusivity standpoint it makes sense to build your page out in a way that allows those with disabilities to partake in standard societal practices such as browsing the web.
Luckily HTML5 brought along many features that allow for much more inclusive practices. It allowed for writing much more semantic HTML. Semantic HTML meaning the code is much more descriptive to what it performs and contains. This allowed for screen readers, that someone with a visual disability might use, to sort through much more organized and sectioned off web pages.
Ways to Improve Accessibility:
1. Header/Body/Footer
Using tags to identify the three major parts of the page is easy to overlook considering they're not required when building out your page. It's important when making your page accessible to not section it out into its proper segments however.
Use the header tags to store stuff such as your h1 tag which is the primary focus of the page as well as stuff like navigation bars or logo images.
Use the body tags to store your pages actual content whatever that may be. You can only use these once on each page which makes sense there shouldn't be two body sections. This is used to store the mass majority of your page, the content the user is likely on the page to see. This can include tags of almost all varieties to be frank and will take up the majority of your HTML document.
Use the footer tags to store stuff such as copyright information, contact info, a sitemap or a link to the top of the page. All things that are necessary for your page but aren't necessarily actual content of the page.
These not only help you organize your page but a lot of screen readers can use them to quickly navigate the page for the user.
2. h1 - h6 tags
So we all use these already on our pages but are we using them correctly? To be honest I definitely wasn't for a good while.
Here's the thing when it comes to the header tags. A lot of people myself included use them for their sizing as opposed to their importance. Don't do that. I'm going to say it one more time just to drive it home. Don't do that.
This matters for not only web accessibility but also for search engine optimization(SEO).
From what I've gathered the h1 tag should be used only once per page. This is the overall point of the page and will be the first thing a search engine is seeking to learn if the page is relevant to a search. If you use it all over the place because you need larger text your pages meaning is lost.
Following h2-h6 should be used in accordance with overall relevancy to the pages topic and to each other. These can be used multiple times throughout the page but each should be tagged accordingly.
<header>
<h1>This page is about Star Wars!</h1>
<header>
<body>
<h2>The Prequel Trilogy</h2>
<h3>Episode I: The Phantom Menace</h3>
<h3>Episode II: Attack of the Clones</h3>
<h3>Episode III: Revenge of the Sith</h3>
<h2>The Original Trilogy</h2>
<h3>Episode IV: A New Hope</h3>
<h3>Episode V: The Empire Strikes Back</h3>
<h3>Episode VI: Return of the Jedi</h3>
</body>
Notice how the tags are used in relation to their importance to the overall structure of the page. Not only that but I didn't jump from h2 to h5. The h3's are related to the h2 that precedes them. Structure your headers in such a fashion.
One last thing I have to mention on using your headers properly is to just use your CSS styling to adjust their sizing and style to what you need.
3. Labels on forms / alt attribute on images
When creating a form it's important to associate a label with a provided input field. It's easy to do you simply pass in the id of the input field into the 'for' attribute of the label. This identifies exactly what is supposed to go into the input field.
<form action="">
<label for="username">Male</label>
<input type="text" id="username" value="male"><br>
<input type="submit" value="Submit">
</form>
When using an image that is a visual representation of a topic on the page it's important to provide a value for the alt attribute.
<img src="deathstar.jpg" alt="The Death Star looming over Alderaan">
This attribute is important for not if the image fails to load but if a user can't personally experience the image.
An instance of when not to use it is if the image is purely for styling effects on the page or if it already has a caption under it detailing it.
Wrap Up
These are just an introduction into making your page more accessible. There's really a lot more to it but I feel like these are a strong starting point in understanding what it is, why it matters and how to approach it. These are things you likely knew about but maybe didn't know why it mattered in using them correctly like I didn't initially.
I'll be wrapping up there but here are some great resources to further read on the topic:
- https://www.w3.org/WAI/fundamentals/accessibility-intro/
- https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/
Thanks for checking this out if you did and as always.. Happy Coding!
Top comments (0)