5 Tips On How To Improve Accessibility On Your Website
What's up, everyone!? 🤙 I haven't posted for a while, but... I'm back! 🤟 Today I'm going to give you 5 tips on how to easily improve accessibility on your website! 🤓
#1 Use semantic HTML tags
Semantic HTML tags are very essential because when a screen reader or any other sort of assistive device scans a web page, it gets information about the Document Object Model (DOM), or the HTML structure of the page.
HTML elements that you should consider using when creating any page are header, nav, main, article, aside, footer. Elements like div or span are recommended to be used only for layout purpose.
When it comes to the headings, it’s recommended to use one h1 tag per page, and it should match the page title. Other headings should logically represent the page content for screen readers, so they will read the website like kind of a book.
#2 Include alt attribute in img elements
Let’s start with what is alt attribute. When it comes to accessibility, alt text is used in screen readers to better understand an on-page image. However, it also helps in other cases. For example, it will show up in place of an image when the image can’t be loaded and it is also used to provide better image descriptions to search engine crawlers, which helps them to index an image properly.
How to write good alt text?
Describe the image as precisely as you can
Keep it short (let’s say around 125 characters)
Avoid keyword stuffing
Don’t include “photo of”, “image of” etc.,
Use longdesc=“” when you need to describe more complex images, which require a longer description
Image buttons should have an alt attribute that describes the function of the button i.e.: “sign up”.
#3 Use ARIA for non-standard interactive elements
Accessible Rich Internet Applications (ARIA) is a set of attributes, which define ways to make content and web apps more accessible to people with disabilities. It gives HTML the possibility so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism.
HTML5 semantic elements already have built-in ARIA elements, so you don’t need to worry about it in case of them!
Example of ARIA properly used:
<div id=“percent-loaded” role=“progressbar” aria-valuenow=“75”
aria-valuemin=“0” aria-valuemax=“100”>
</div>
#4 Try to avoid the CAPTCHA
Probably all of us were accused of being a robot more than a once. I’m not risking to say that we all love CAPTCHA as much as we love PHP 💜. However, when it comes to accessibility, it’s good to not implement CAPTCHA at all 🤓.
In case if you really, really need it then have in mind to make it simple to understand and to include alternatives for users with disabilities, such as:
- Providing more than two ways to solve the CAPTCHAs
- Providing access to a human representative who can bypass CAPTCHA
- Not requiring CAPTCHAs for authorized users
#5 Associate labels with form controls
Labels ale really important when it comes to the forms. They’re describing the purpose of the form control. Therefore you should provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the label element.
Example:
<label for=“firstname”>First name:</label>
<input type=“text” name=“firstname” id=“firstname”>
However, if you want to hide the label as its purpose is clear from the surrounding content, then it’s recommended to use aria-label or aria-labelledby, so the form controls could be easily described by screen readers and other assistive technology.
Example:
<input type=“text” name=“search” aria-label=“Search”>
<button type=“submit”>Search</button>
<input type=“text” name=“search” aria-labelledby=“searchbutton”>
<button id=“searchbutton” type=“submit”>Search</button>