Web Accessibility is the practice of web design to make your website or web app usable a.k.a accessible to as many people as possible. More precisely, people can perceive, understand, navigate, and interact with the Web. We all know that attention and exposure are currency. The more people can use the website or app that you worked so hard making, the greater the chance you’d get a positive return from it. I’d also like to believe that the Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. Even though they are many sites and apps are developed with accessibility barriers that make them difficult or sometimes impossible for some people to use, it’s not too late to change that. It all starts with us, the new and upcoming developer.
Audience we should have in mind
Differently-abled individuals can come in many different forms. While visual and auditory impairments do mostly get adequate attention, there are numbers of other fields of differently-abled concerns that affect people’s access to the Web such as:
- physical ability
- neurological ability
- speech ability
- cognitive function
- changing abilities due to aging
There are also groups that experience “situational limitations” such as bright direct sunlight, only having access to small screen devices, being in an environment where they cannot listen to audio, or living in areas where internet speed is limited or expensive.
Basic consideration in Web design
there are a few starting points that we can get our feet running on web design with web accessibility mindfulness
1. Provide sufficient contrast between foreground and background
Having the right amount of contrast between foreground and background will improve readability, make sure either the tone, saturation, or brightness between said two elements have a significant while reasonable difference on their representing scales. However, this does not apply to logos, or incidental text, such as text that happens to be in a photograph.
2. Don’t convey information with color alone
While traffic light being the prime bad example of this, there’s a systematic order of color in traffic lights, red top, green bottom with amber in between. But our web is more complicated than three blocks of information, conveying information with color alone prone to difficulty for people with color blindness. Always provide indication through more medium than just color alone.
3. Ensure that interactive elements are easy to identify
Provide distinct styles for interactive elements, such as links and buttons, to make them easy to identify. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation. Ensure that styles and naming for interactive elements are used consistently throughout the website.
4. Provide clear and consistent navigation options
Make sure that navigation across pages within a website has consistent naming, styling, and positioning unless it’s the unsubscribe button, then you can make the button so small that no one can ever click on it. That’s an ethical issue, let’s try not to do that. But keeping consistency in navigation helps users understand where they are on a website or page.
5. Ensure form elements include clear labels
Let’s leave the debate of if taco or hot dog is a sandwich for some other day. Labels for form options should be provided adjacent to the field, without too much spacing.
6. Provide easily identifiable feedback
Have you ever came across a website that wanted a piece of particular information from you before processing, however, when entered incorrectly, it just left you hanging with no indication of what has gone wrong? Don’t let your next website be that website, provide clear feedback for users to identify the missing information so they don’t feel disoriented during the process.
7. Create designs for different viewport sizes
Big screens are fancy, small screens are portable, they both have pros and cons and fans that would prefer an experience on one over the other. There are also people with limitations on the type of device they have access to. Consider how page information is presented in different-sized viewports. Make sure all the content will be displayed with suitable styling to maximize readability and legibility.
8. Include image and media alternatives in your design
Imagery and videos are embedded in your web design for a reason, and we don’t want people with visual and audio impairment to be missing out on the information that we want to convey. Make sure alt attributes are always intact with all images, having a video with subtitle/caption or a visible link to a transcript file are some simple steps we can open up the content to a broader group of people.
Conclusion
Having your next website or application open for a broader spectrum of audience does not only potentially help you generate more interests, it also helps the Web to be a safer, more welcoming place. By practicing Web accessibility, we can make the Web more inclusive. If you ever need help with evaluation on your website’s accessibility, you may find a checklist here from W3C.
