All about Web Accessibility: Developer’s guide -Part 1 📔
Developers plays vital role to make or break an accessible website. So it is very important for developers to know about Web Content Accessibility Guidelines (WCAG), accessible coding practices and testing for web accessibility. You can read more all about Web Accessibility in my previous post.
Few points to keep in mind when working on accessibility:
1) Identify the page language
Identifying the page language helps screen reader to switch language profiles, adjust speaking rate of content in order to provide the correct accent and pronunciation. The lang attribute is used to determine the page language or a section of page language while developing a web page.<html lang="en">
</html>
2) Write your HTML smartly
Have you ever come across sites where everything, from text content to buttons, is written using div? Well, using div does give some amount of flexibility, but at the same time it loses out on all the magical and time-saving features HTML comes inherently. e.g. While making a button using div, you need to write a lot of CSS and attach all the mouse or keyboard events manually, to give it the form and function of a button.
Instead, using <button>tag gets you all the keyboard events for free! It not only saves valuable time but also helps in achieving accessibility. Assistive devices get information from DOM. It will ignore all the CSS and JS written by you. Using semantic HTML solves this problem effectively. Few tips:
- Structure/Nest your <h1to6> tags correctly. This will help assistive devices to create and speak out the text hierarchy correctly.It will add value to navigation.
- Use <p>, <span> or<h1to6> tags for text content.
- Make sure to create correct page layout… for example do not write header or footer inside main tag.
- Use html5 tags <header>, <main>, <section>,<article>, <aside>, <footer> for page layout. This will help the user to navigate from one section to another easily.
Semantic HTML helps Assistive technology to understand how best to convey each element to its user. For more information about Semantic HTML and accessibility, checkout this link
3) Labels are more important than you think:
You should associate a label with every form control. This helps screen readers to identify and read out the field. There are two ways to do this:
a)By adding label text<label for="name">Name</label>
<input id="name" type="text" name="username">
b) By using aria-label when you do not want to have a label on the screen<button aria-label="Submit the form: your form details will be sent for further processing"> Submit </button>
4) Use alternative text for your media:
It could be alt text for images, captions or audio description for web-based audio/video. This will help when visitors can’t see media in their browsers due to format or browser issue.
5) Error handling and mistake correction
It may get frustrating when user fills the form details. For example: Name should not have special characters or numbers, Password should be strong enough by including special characters and alphanumeric values, Phone number to be written in specific format adding or removing space from field.
- Show errors next or below the fields by highlighting the text and setting focus on respective field.
- Remove any space from phone number and other fields while validating user inputs.
- Provide help text / suggest corrections or audio content to help user understand the format of the field.
- Provide some means for reviewing, confirming, and correcting information before finalizing the submission.
I found this concept of password-setting created by which makes it easy for users to understand the stringent password requirements.
Always remember it is all about the user experience and not only about meeting the accessibility standards. Create an experience that delights users of all abilities.
Put your hands together and hit the clap 👏 button if you like it…
