Why Web Accessibility Matters
Website accessibility is an issue that often gets swept under the rug, and concerns of design or style take precedence. Many people aren't taught best practices for making sites that are accessible people with disabilities, therefore making large portions of the web inaccessible to many. One study found that over 70 percent of sites were inaccessible to people who are blind. Another study found that over 40 percent of state government sites failed accessibility tests. In times like this, it's even more apparent how much people rely on the internet, for concerns ranging from work, to healthcare, to governmental support, to e-commerce, and equal accessibility to the internet is a vastly important issue.
To demonstrate accessibility testing, I decided to check the homepage of dev.to. To test, I followed along the list of checks by Web Accessibility Initiative, and I used two Chrome extensions: WAVE Evaluation Tool and Web Developer. While this check isn't comprehensive, I thought it was a good place to start.
Page Title
The first thing to check is the page title. The dev.to homepage title is 'DEV Community', followed by two emojis. According to W3, it's important to check that the title 'adequately and briefly describes the content of the page', and that the title is distinct from other pages on the site. It's also best practice for titles to be 'front-loaded', meaning that the important elements of the title are at the start.
If I click on a different page, such as 'Write a Post', the title changes to 'New Post - DEV Community', therefore clearly differentiating it from the home page, and also front-loading the title with important information.
Alt Text on Images
The next thing to check is that images all have text alternatives, or 'alt text', which gives important, appropriate text. People who don't see an image may have the alt text read aloud to them by a screen reader, or if they have slower internet speed they may have images turned off. W3 suggests that alt text should 'convey the same meaning as the image'. If an image is functional (like if it links to another page), the alt should include that information.
As there are many images on the dev.to homepage, I could not check them one by one to see if they had an alt text. This is where the Chrome extension WAVE came in handy. WAVE showed me that there was 1 image that did not have an alt text, and 2 images that linked to other pages and did not have an alt.
Headings
Headings separate text, denoting different parts to a web page. Headings also (for the most part) should be hierarchically ordered, so an <h6> heading should not be at the very top of the page, with multiple <h1>'s beneath it. W3 says that nearly every page should have at least one heading, headings are used meaningfully, and ideally headlines do not skip levels.
You can check headings with Chrome Devtools, but for many sites, there's so much information in there that it can be kind of difficult to parse out the heading tags alone. The Web Developer extension is very helpful for checking headlines (to try it yourself, click on Information > View Document Outline). From there, I saw the following outline:
<h1>(Missing headline)
<h2>(Missing headline)
<h3>(Missing headline)
<h4>Alisa Bajramovic
<h4>Community sponsors
<h4>Key links
<h3>Blog post
<h4>Blog post author
...
<h2>Register Today
<h3>(Missing headline)
<h4>Stories
<h4>Listings
<h4>...
On the homepage, there is no <h1> headline, 'Dev.To' is not in a headline, and headlines skip levels. There is a lot of room for improvement in how the headlines are structured on this page.
Contrast Ratio
Contrast between foreground and background is critical for people to be able to read a web page. W3 walks through how people with different visual impairments, such as those who lose contrast sensitivity from aging or those who have dyslexia, need different forms of contrast. Their suggestion is that browsers 'should allow people to change the color of text and background, and web pages need to work when people change colors.'
For my preliminary purposes, I just checked Dev.to's home page using the WAVE extension. The extension found one example of Very Low Contrast, meaning it had a contrast ratio of less than 4.5:1. The example that it found was the #help tag on a post, which had a background of #ff3232, and a foreground of #ffffff.
Resize Text
Web pages need to be able to support people zooming in on them, without the page requiring people to scroll horizontally. I tested zooming on the text only on the home page, and the text got larger without requiring me to scroll horizontally.
Keyboard Access
Many people are unable to use a mouse or touchpad to interact with webpages, and instead interact with them using the keyboard alone. To test if a website is keyboard accessible, you can click on the address of the webpage, and then only use the Tab key to move throughout the page (be sure this function is enabled in your computer settings). To go backwards, you can use Shift-Tab. To go through drop-down lists, use Arrow Keys, and then Enter to select something.
It's important that all elements, such as buttons and links, are able to be reached by tabbing, and that there is some visual indicator of what element you are on, such as a box or highlighting. It's also important that tabbing through elements can be done in a way that is logical.
I tried this out on the Dev.to home page, and for the most part, I was able to Tab to elements. There were, however a few problems:
- When I got to the 'Write a Post' button, there was no visual indicator that that button was selected
- Because of the 'infinite scroll' nature of the home page, every time I got near the end of the blog list, I kept on tabbing to more blogs. That meant that I was never able to 'reach' the links in the right-side pane.
Forms and Labels
The final major check I did was on forms and labels. It's important that forms, whether they be search bars, radio buttons, check boxes, etc., are correctly labelled. That is, it's important that labels are associated with every form control. Correctly labeling forms enables people who use screen readers or keyboard controls to navigate forms.
The only form I found on the home page was the search bar at the top. When I inspected it in Devtools, I found that the form did not have 'id', 'label', or 'for', therefore making the form inaccessible.
This evaluation is not comprehensive, and the world of website accessibility is far bigger than what I have covered here. I would love to open up a discussion about accessibility, both on and off the dev.to platform.
I strongly encourage everyone to read through and download these tools, to check their own websites for accessibility ratings, and to make changes.
Top comments (2)
Hey, nice to see an audit of DEV's accessibility! Have you raised these issues in their GitHub repo?
I think some already exist in some format (e.g. I know there have been discussions on contrast issues in colour themes, and I raised one previously about heading levels), but I think some others could be quicker fixes, like the missing
<h1>element and missing label for the search field - would be great to have some issues raised so we can go fix them 😄Great idea! I'll be sure to do so.