"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - Tim Berners-Lee, W3C Director and inventor of the World Wide Web
The web has revolutionized modern life and leveled the playing field, bringing people together. However, equal access does not equate to equity of access. Equality? Equity? What's the difference? An analogy I like to relate the two is that of a bicycle. Say you give everyone the same bicycle. That's equality. However, everyone is different. We're a beautifully varied group of people with different needs so the same bike is not going to fit every person. Kids need kid bikes, some people need small bikes, some people need tall bikes. Some people ride tricycles. Some people peddle with their hands. Some people use a recumbent bike. Everyone gets a bike but that bike suits the individual. That's equity. 🚲💨
More than ever it is so important to create an equitable, accessible, usable, and inclusive user interface. Creating accessibility is not just relegated to the content of a site or app but it is something that we need to tackle on the development level in order to create and design products that are efficient for all users and overall inclusive so that everyone can be involved. This is not just an extra step in your process but the only way we should be coding!
Accessibility makes your site more user-friendly, it provides mainstream accessibility capabilities that can work in tangent with assistive technologies for users. It makes your site or application more adaptive for people with auditory, cognitive, neurological, physical, speech, or visual differences that affect interaction with the web. By utilizing these guiding principles we can address the uneven user experience for people with disabilities so that they may equally access, navigate, and contribute to websites, applications, and their tools.
A few key ways to make your application more accessible:
Alternative Text
- ALT text for images describes the image. This is read by screen readers. Providing ALT text has become more popular on social media in recent years with users providing their own descriptive texts for their images to make their pages more inclusive. Alternative text is read by screen readers and should be clear and concise in the description. It is also useful if the user has a slow internet connection so they have a description of the image without needing it to load. If it is an image that is purely decorative then assign it a "null" value
alt = " "
in the alt text so that the screen reader can gloss over it.
Bonus: ALT text helps with SEO!
* On the flip side provide captions for video/auditory content!
Clear Headers, Links, and Text
Headers: Screen readers are linear and go from top to bottom so it is key to make sure that you structure your pages in a clear and meaningful way. This includes structural headings which describe your page's hierarchy going from H1, to H2, H3, and so on. These are read out to the user as "Heading level one," etc. Headings should also be styled to group content so they are easier to read and understand for the user.
-
Link texts: should describe what the URL is going to do, avoid creating ones that say "Click here" or "Read more". Assistive software can navigate through links by creating a list of them.
-
Tips for creating good links:
- Avoid URLS because screen readers will read them out in their entirety to the user.
- Use keywords and be concise
- Integrate it into the content but make sure it reads well out of the context of the text.
- Specify if it is going to download something and what it will be downloading.
- Don't be repetitive with links to the same destination.
-
Tips for creating good links:
-
Contrast is key: Some folx need contrast to distinguish the text from the background. For others, bright colors(high luminance) aren't legible compared to those with a lower luminance. Be mindful of using color to relay information to the user and don't just rely on color perception to differentiate information.
Make use of labels!
Overall a consistent style, naming convention, and layout will help to make a site more user-friendly. Using concise headings and context cues can help users to determine where they are in your application and help with navigation.
Accessibility is important to me because of my own personal experiences with hearing loss. Yet I knew very little about accessibility in the broader sense when I began to research this topic. Some things I knew about, like screen readers and subtitles, but there is so much more to making the web accessible than I can cover in a simple blog post and I am still so new to this!
As I continue to learn, keeping other people's experiences in mind is going to make me a better developer in the end. If you have any tips on making the web/apps more accessible please drop a comment below!
Key sources:
Top comments (6)
This blog is awesome Alexandra! I loved the tip about using contrast to distinguish the text from the background - I never thought of that! I will definitely be using this blog to help implement these features in my future projects ✨
Thanks for the kind comment! I plan on updating with more ways to make projects more accessible. I really recommend the links at the bottom of my post as well :)
Thanks! I'm planning on expanding this post as I continue to learn more about accessibility.
Hi Alex! I really appreciate that you wrote this blog post and that you're one of the developers who cares about this subject! This is soooo important yet oftentimes overlooked. Thank you!
Thank you Sylwia!