This article is for readers who already know about implementing accessibility and is looking for an article that can review them on the subject.
A few weeks ago, Nick - Senior Developer at DEV/Forem - tweeted about gifting a book about accessibility. He did not want followers. He just required the receivers to write an article about the book.
Every year, WebAIM evaluates the accessibility of the top 1 million website homepages by running automated tests using their API. The results are surprisingly bad. These are the results from the February 2020 evaluation:
I. 86.3% had low contrast texts
- Color and contrast use is vital to accessibility. Some visually disabled users must be able to perceive content on web pages. Thus, WCAG defined a minimum contrast level of 4.5:1 except for Large Texts, Incidental(text/images of text which are inactive in a UI component), and texts on logos for a webpage to be more user-friendly. Read more.
II. 66% had a missing alternative text for images
Adding alternative texts on images is one of the easiest to do but challenging to implement correctly. Alt-text is vital because it makes sure that our images are well-perceived by everyone. Alt-text also helps users understand the purpose of an image. Finally, alt-text also helps with SEO.
Alternative text attributes should be accurate and aligned with the context of the image. It should be succinct and not redundant.
III. 59.9% had empty links
- Recently, upon checking the lighthouse score of a side project, I stumbled upon an error on the home page where google lighthouse pointed out links that had ambiguous texts such as "Read more". Check the commit f38fae5 on my GitHub to see it. It is better to be more descriptive on link texts rather than use "here", "more" or "continue" to lessen the hurt on your google lighthouse's score.
IV. 53.8% had missing form input labels
- A label describes the function of a form and should be seen adjacent to the input. Different users may or may not see the form label's connection, and it is critical to miss it on a website. One of the advantages of having form labels is that the form sets to focus when clicking the label. Here are examples.
V. 28.7% had empty buttons
- Buttons do things. Buttons are call-to-actions on a site that work the same way as links but perform actions such as a form submission, opening a modal, or an accordion. When deciding over a button rather than a link, a good reminder is when a link has no other value other than "#" and an onClick event listener is on a link.
VI. 28% had missing document language
- Document language is necessary because you want users to know that they are reading a webpage in their appropriate language and dialect. Essentially, a "lang='en'" is added to the tag to fix the issue. Easy peasy.
More issues have to be tackled in this topic. Furthermore, as a disclaimer, I'm continually learning about a11y and depend on google lighthouse to fix the a11y issues on websites I work on as a freelance developer.
Top comments (0)