For this week's accessibility report, I tested this blog to see if it adheres W3C principles and WebAim guidelines. As part of a class project and familiarizing myself with accessibility best practices, I will document any errors and attempt to fix them.
For testing purposes, I used different tools including Google's Lightweight, VoiceOver by Apple, WAVE, and Webaim checklist for conformance evaluation.
For my first audit, I used to wave to scan for errors on all pages, and as you can see in the screenshot below, they were plenty of empty links in the navigation and the footer sections of the page. Other significant errors, were low-contrast text, which surprisingly scored high with Lighthouse.
WAVE
Wave audit summary
Google Lighthouse
Google lighthouse audit before
Fixing empty links errors on the drop-down was reasonably straightforward. I went back to VS code and removed all the links that did not point to any page.
Drop-down menu code before
I had added these links for my previous projects, but as you can see, I should have probably removed them. The image below shows what the page looks like now, neat and organized code.
Empty-links drop-down menu fixed
As for the empty links at the social media icons, it was a little tricky to fix them. I initially thought that it was due to social media links being empty, however, when I added links to point to my Linkedin and Github accounts, for some reason the same errors were still showing up in Wave.
To fix this issue I used aria-label for each icon's anchor tags as suggested on this Drupal forum and that took away the errors.
Empyty-links errors footer fixed
For low-contrast errors, I created a styles.css file in the CSS directory and targeted the classes that were creating these errors. After making these changes, I tested again using both Wave and Lighthouse did not detect any errors.
No errors
I found Bootstrap very helpful when it comes to accessibility. I can't imagine how much time it would take to develop from scratch and having to worry about meeting accessibility standards; it would take a significant amount of time. One other cool thing I learned fixing low-contrast errors was the use of (!important) to override existing property values. It was particularly helpful since I have a bunch of links added to my index.html page. My overall take this week is that as a developer, accessibility should always be a priority for best practices.