Make Your Website Accessible

Semantic elements are the elements with meaning. Screen readers can describe the meaning to the user, and navigate the elements accordingly. Don't use semantic elements for layout only purpose. For example, <table> can be used in layout to show unrelated data in some particular way. Don't do this. Screen readers will try to interpret them as rows and columns in a table and that will confuse users. On the other hand, if your data and their relation have some form of meaning, use semantic data to organize them. For example, we can use <div> with CSS style to make some text look like heading. If the the text is actually in heading, we need to use heading elements such as h1, h2 and h3. Use semantic elements to help screen readers and only use them when the data meet the semantic of the element. Some other semantic elements are <header>, <nav> etc.

A picture is worth a thousand words. I know the images are important. They're funny. They're telling a lot of stories. Some of them can only be conveyed via a picture. Think of this. Not all users are able to see the picture. As you know, the technology right now cannot analyze a picture and say what is on it precisely. Not to mention it must be in the context of your website. Use the alt attribute in the <img> element. Give it some concise description of the image. The screen reader can read the text to the user. Please help the user to understand what you try to say with a picture.

Don't assume all the users always use the mouse in your website. No. Come up with a good way to navigate your website with only keyboard. The most important key is the TAB. It should navigate the next logical element on your website. If your web page is a form, users should be able to use tab to go through all of the input fields. If you have many different sections in your web page, use some form of navigation bar to help users to go to each section quickly.

If you can use semantic elements, that's great. But if you find yourself in a situation that semantic element isn't an option, follow WAI-ARIA. It contains a set of aria-* attributes you can use to describe your information to users with disabilities. Some common and important attributes are aria-label, role, etc. Here are the list of aria-* attribute.

I've mentioned screen readers above. Please test your websites using a screen reader. Listen to what the screen reader tells you. Not to look at what's presented on the website. This will give you a sense how users with disabilities understand your website. Similar to a user study, try to find out what the gap is for a person with disabilities and close that. There are Narrator on Windows, Jaws etc. Play with them and get familiar.