The case for Web Accessibility
The internet should be open and accessible to everyone, regardless of an user’s abilities, right? Well, it's not.
The internet is amazing! It removes physical barriers to communication and interaction, helping people from all backgrounds connect and realize we have more in common than what we thought. Can you imagine a life without it? How about not being able to access your favorite sites or apps? Even worse, not being able to interact with the interface at all?
That's the case for many users with visual, auditory, mobility, seizure or cognitive disabilities.
A badly designed website or app can truly be a nightmare for those relying on additional tools to interact with the content in it. Watch this video on how a screen reader went over The New York Times homepage from 2014 and realize how complete sections of content are identified as "links". Imagine how frustrating that must be!!
Accessibility affects all users like those of old age, people with Chronic Medical Conditions, Cognitive Impairment from lack of sleep or medication, even those users outside in really bright sunny day.
Let's see a table of some but not all dissabilities and issues an user can encounter:
| Vision | Mobility |
| Low vision | Broken limbs |
| Color Blindness | Traumatic injury |
| Cataracts | Parkinson's |
| Cognitive | Hearing |
| Migraine | Deaf |
| Seizure | Environmental noise |
| Learning disabilities | Ear infection |
But Yuri, most websites are probably accessible! Hmm, not really my friend. This study from 2019 showed how 70 percent of the websites, contain “accessibility blocks” that make them unreadable with assistive technology.
And here where in February of 2019, 2020, and 2021 WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 websites and just 1 percent meet the most widely used accessibility standards.
What can we do about it ?
You should ask yourself, what if the user can't use a mouse? What if they can't hear? What if they're in a highly illuminated place? Have vision issues? Using assistive technology? Keeping those kind of thoughts in mind when making your project can help us create a more open web.
The Web Content Accessibility Guidelines WCAG provides an international set of guidelines that set the basis of most web accessibility laws in the world, it's based on four principles, the POUR principles:
- Perceivable: Available to the senses (vision and hearing) through browser or assistive technologies (Screen readers, screen enlargers, etc.) Text must be readable, images need alternative text, audio and video need transcripts.
- Operable: Users can interact with elements using the mouse, keyboard or an assistive device. They can interact with links, forms, input fields and more.
- Understandable: Content is clear and limits confusion and ambiguity. Straightforward writing that's clearly understandable.
- Robust: A wide range of assistive technologies, old and new, can access the content. With the help of Semantic Markup and Responsive Web Design.
Translating it to code
- Provide alternative text to your visual elements with a good description.
<img src="importantImage.jpeg" alt="Company logo">
- Have a logical document structure. Use headings, article, list, main and other useful HTML Semantic tags to clasify your content and make keyboard navigation easier.
Semantic means that the tag you're using indicates the type of information it has.
<h1> I'm a title </h1>
<main>
<h2> I'm a subtitle </h2>
<h3> So am i </h3>
</main>
- Help users jump to different sections using tags like main, header, footer, nav, article, section, and more.
<header>
<h1> Hi! </h1>
</header>
<main>
</main>
<footer>
</footer>
- Use tags like section and article instead of relying only on divs.
- Section helps you group related content.
- Article is for independent content.
- Div is used when there's no relation between contents.
<article>
<h2> Joining Hacktoberfest? </h2>
<p> It's a great opportunity to contribute to open source! .... </p>
</article>
- Ensure users can complete and submit forms using label and attributes.
<label for="email"> Email: </label>
- For multiple choice buttons, as in radio buttons, wrap the element in a fieldset tag.
<fieldset>
<legend> What MCU character describes you? </legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie"> Spider Man </label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate"> Captain America </label><br>
<input id="master" type="radio" name="levels" value="master">
<label for=”master”> Iron Man </label>
</fieldset>
- Write links that make sense out of context avoid phrases like 'click here' or 'see more'.
<p>
<a href="link"> Information about Applied Accessibility </a>
for information about Applied Accessibility.
</p>
Conclusion
Accessibility shouldn't be an after thought and it's more than a 'plus' to boost your SEO, it's about making the internet a more open and inclusive space for all of us. It's up to you to help shape the next generation of accessible internet.
As always thank you SOOO much for reading!! :)
I hope you learned something new today.
Don't hesitate to contact me and let me know what you think in the comments!
☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕
💙Follow me on Twitter to know more about my self-taught journey!
💜Make sure to check out my Web Design for Beginners Series and JavaScript for Newbies Series
❤️ Also subscribe to my Youtube Channel !
🖤And for more content and tips on TikTok !