Accessibility: 10 Things to Consider
Hellooooo! New web developers can be messy in many ways. Not writing optimized code, no comments on code, messy code, not efficient enough code are things that senior developers have to deal with when they hire a new developer. These are things that new web developers have to learn. With time, they all get in shape one way or another. Today, I’m going to discuss something different called web accessibility and all the new developers should keep in their mind that when they are developing a website, the website is accessible for all. Hang in there mate!😉
Web accessibility doesn’t mean that it’s only to be made for people who can’t see or can’t hear. So, what does it mean? It means that a website is usable to anyone and anyone can receive what any website has to give. It doesn't matter if anyone is deaf or not! Here are the 10 things to look up when making a website:
1. Headings
Headings can be beneficial. If there’s proper heading, a user can gaze through and easily tell what any section is about. Developers suggest that the main heading should be H1 and the sub-headings should be H2 for better accessibility.
2. Keyboard Only
Some people are physically unable to navigate websites with a mouse and they might be able to use only a keyboard to access websites. For this reason, the website should be checked if it works only by the keyboard. The checking shouldn’t be hard. Check that to navigate the tab button on the keyboard is working. All the features should be accessible to users. All the operations on the website should operable by a user that is using a keyboard only.
3. Images
Images can be special features of a website. It can contain valuable information. Even if it doesn’t, developers should work on it to make it readable to people who have problems with their vision. Simply, the alt attribute should be given with a short description of the <img> elements. Descriptions can be given to complicated images like graphs, charts, diagrams, etc. to lessen the burden of complicated details.
4. Menu
Many menus on websites have a dropdown or flyout feature. It may be only accessible with a mouse hovering or clicking over it. Some features can be hidden in the menu. This can be the reason for the struggle for many users. This shouldn’t be overlooked and developers have to make sure they code properly when making a menu with special features.
5. Forms
When building forms, using labels is a good practice. Accurate labels can remove the struggle for screen readers because it prompts what each field is asking for. So, whenever a website is using forms on their website, they need to make sure they are labeling it accurately. They can use elements like labels, legends, and fieldsets.
6. Tables
Tables are still useful to represent data in columns and rows. Some simple tags can be used to do the work. Otherwise, users can find it very difficult to comprehend the data used in tables. For simple tables, <th> tag should be used to declare table header for all the columns and rows. Some tables can be complicated and nested. Making sure a unique id attribute for table headers is used can be helpful.
7. Colors
Combining colors to make a website can be tricky if you’re not a UI/UX developer. Colors should be effective on a website. Some people might not be seeing colors as you do. Did you ever hear of color blindness? They can differentiate between colors. That’s why color shouldn’t be used to communicate information. If your website is providing a link with blue color text, make sure that the link is also underlined. That way they can understand that the provided text is a link. You should also think about using background color behind texts and make sure the color contrast is ok.
8. Links
Links can be tricky for screen readers as they have many techniques to navigate through a website. Links should be understandable to them and should be independent alone. A list of links pulled up is one of the techniques by which they can be benefitted. Also for those who use speech recognition, voice commands like “click” by the following link can be used.
9. Text
Most of the developers now have to make sure their site is responsive. Even the texts used in a website should be responsive so that when any user with visual difficulties can have a good experience when surfing through a website. So, using resizable text is a good practice. You can use relative size instead of an absolute unit such as pixel.
10. Accessibility In Mind
When developers start to make a website from the scratch, they need to make sure that they use proper tags, elements, and things I’ve mentioned in the previous points. That way a lot of hassle can be avoided when you finished making your website and then you see that the requirement says it has to be accessible. Although, I’m not sure it can be a requirement. But consider it is.
That’s it for today folks! Hope this article helps you to make your website more accessible to anyone who’s a visitor. Thank you for reading😊