July 18, 2020
There are currently 1.74 billion websites available to us today and the experience of interacting with any given site is inherently visual. Unfortunately, for people with visual impairments, web pages are often designed in such a way that much of the web is unusable. So what can we do as web developers to make sure anyone who uses a screen reader can use and navigate our web apps the same way we intend for anybody to be able to user them?
I'll be the first to admit, until I really started to look into website accessibility my knowledge of it was pretty limited. I knew that alt tags were a necessary attribute for any image element and that screen readers relied on the content added to alt tags to communicate to the user what was being displaying on the screen. However, outside of that, and a few other small bits and pieces, that's pretty much where my accessibility knowledge ended. When I started to realize how many websites fall short of providing a truly accessible experience to all potential users, I decided to start learning about what it takes to build a website that checks all the accessibility boxes.
Understanding How Screen Readers Work
People with learning disabilities and visual impairments, along with the elderly and people who are learning a new language, rely on assistive technology, such as screen readers, to navigate the web and understand a website's contents. Sighted users can scan an entire screen almost instantaneously, taking in a number of factors such as design, layout, images etc. However, screen readers are unable to do this and need to move through any page in a linear fashion. Like when a sighted reader reads, a screen reader will read content from left to right, top to bottom, converting digital text into synthesized speech. As they cannot explain what an image looks like, they will read image text, which is why alt tags are so important.
To move from one element to the next on a page, a user will hit the 'Tab' key. This highlights the importance of website design because users with screen readers need to be able to navigate your entire web app with only the use of a keyboard. If the default keyboard navigation is not logical and intuitive, this may lead to a confusing and frustrating experience for users with screen readers. As web developers, we need to make sure we structure source code so that reading/navigation is correct and style our page in a way that controls the visual elements.
Screen readers also rely on the lang attribute in the html tag:
<html lang="en"> This declaration tells a screen reader to how to pronounce words. Omitting this can potentially result in a screen reader that sounds like it has a very thick accent which can make the experience a little challenging for the user.Another thing to consider when thinking about how a screen reader would translate your page to a user is the explicitness and descriptiveness of the text used for links and buttons. Both these elements have no surrounding content so users have no context when their screen reader readers the text of a link or button. When a button simply says something generic like, 'click here' the user is given no indication as to what clicking on the button will actually do. Think about the purpose of your links and buttons and use text to effectively communicate its purpose.
Things That Are Important for the Vision Impaired That Don't Have a Screen Reader
Not everyone who has a vision impairment or learning disability will use a screen reader but there are still a number of things to consider when designing a website to make sure it's truly accessible.
- contrasting colors: Colors need to have contrast for readability. If your font color doesn't contrast against your background color, it becomes hard anyone who is color blind to see. This also applies to graphs and other data sets; each bar/line etc should have clear contrast. Think back to your school years when you learned about primary and secondary colors and were introduced to the color wheel - if the colors are opposite on the wheel, they contrast. The following image from Creative Photo Design gives a good visual of what it looks like when a font color contrasts with the background versus when it doesn't.
- text size: you typically want to aim for body fonts to be no smaller than 16px so that is can be easily read by any visitor to your site. Other text may fall below this but try to ensure that anything that is important is 16px of larger. Ideally, your website should allow for manual text size adjustment as some visitors need to increase the page up to 200% in order to read all content.
- limit the number of colors: this one really applies to any user, not just those with a vision impairment. The more colors on a webpage, the harder it becomes to identify primary actions and links. However, while difficult for a sighted user, it is even more challenging for someone who is color blind. A good rule of thumb is to select 4 or 5 colors that will be the colors used across your site. Coolors is a great online tool for coming up with cool color combinations - just be sure the selection you go with includes contrasting colors.
- keep your links underlined: color blind users often rely on commonalities to give them queues. For example, it's common knowledge that underlined text, especially blue underlined text, typically means the text contains a link. Unfortunately, many sites will remove these lines while others will underline text that isn't a link. Keep it simple for your users - leave your links underlined.
A Lighthouse Audit of rachellerathbone.com
Let's see what I can do on this very website to make it more accessible to my users. From the developer console I'm going to navigate to the Lighthouse tab which is a Chrome feature that allows web developers to audit various aspects of their site.
I'm only interested in the accessibility feature for the purpose of this post so with that single box checked let's generate that report...
Not too shabby. You may have noticed I had 'mobile' checked in the last screenshot. I ran an audit for desktop as well and got the same score of 93. Now, let's go ahead and see what I can improve.
There are 2 things I need to work on: contrast, which we now know is important for people with color blindness, and the order of my list elements, which affects the way a screen reader communicates content to the user.
Staring with the contrasting color failure, it looks like there are several elements with poor foreground to background contrast:
These elements are my navigation links which are white against a pink background:
The date element for each post:
And my copyright in the footer:
So this shouldn't be too hard to fix. The only issue for me is that a good contrasting color for pink is green which I can't say I want to use on my site. It may contrast but it also isn't the combo/look I'm after. Black would be my next best bet but I don't think I want to go with true black so I'm going to take
#000 and lighten it a little. Using hex color tool I want to select a color that isn't the blackest black but also doesn't fall too much into the grey area as, going of my date elements, that would just fail the audit as well.#424242 is grey but looks like it will be dark enough to pass the contrast portion of the audit. I'll update the hex code in my css and generate a new report to see if it passes...Perfect. I'm up another 2 points and I'm no longer failing on contrasting colors. Let's tackle the next issue.
There are 2 issues here but they both appear to be coming from the same place, my navbar, which leads me to believe one fix will resolve both issues. Let's have a look at what might be going on.
I see what the issue is here. I should have
ul > li > a but instead I've nested my list items and links like so: ul > a > li #facepalm. Let me switch those around.And now I'll run the Lighthouse audit again...
I'm super tempted to declare this a mic-drop moment but, as great as this is, the reality is that the auditing tool for accessibility can't replicate and test all the needs of our vision impaired users. This gets a good chunk of the way to the finish line but it is recommended we also manually check the following ourselves:
To determine how accessible your site is to your users, I highly recommended giving the Lighthouse accessibility feature a whirl, in addition to completing the manual audits listed above.
...