When building and designing a website, accessibility is a crucial aspect that can sometimes go overlooked. When certain web aspects are not developed with the intentions to be accessible to all, this may drive potential users away. Luckily, in today's world there are websites that utilize AI and other recognition tools that will give feedback on the accessibility of a website. In this post I will be covering three of these tools, and the results of their audit of the same website - CHAARG, which is a national health and fitness club for female co-eds.
Web.dev
The process of running an audit on web.dev is incredibly easy. All that is really required of you is to copy/paste your URL into the "test your link" field. Enter, and BAM! - you have your audit. The areas that are tested are performance, accessibility, best practices, and SEO (search engine optimization). CHAARG scored a 10, 90, 57, and 83 respectively. The biggest problem is obviously in the website's performace. Some of the suggestions that were given were to remove unused CSS and JavaScript code and to eliminate render-blocking resources.
Lighthouse
Lighthouse is a Chrome extension that when on a website and activated, it runs an accessibility audit. These results were not much different from those from web.dev. Every aspect had a rating almost exactly the same. The feedback from Lighthouse that seemed most critical to tend to for accessibility was to fix preload key requests - or prioritze gathering resources needed in later requests - and to ensure that text is still visible to the users when it is loading.
Wave
Wave is another Chrome extension that I used. This site also gives information on a website with the same categories as web.dev and Lighthouse. One thing that I appreciated about this interface was that there is a separate tab solely for errors, and it categorizes them by level of importance. I also really liked how this auditing platform shows the website in review, and has little icons that when hovered over on show a summary of the issue. A main suggestion here was to do with webfont loads (just as Lighthouse suggested), where a CSS font can be implemented in order to show some text on the screen as it is loading.
Top comments (0)