Blog

Web Accessibility has become a hot topic in recent years in web development and will continue to be, but what is web accessibility?

To quote W3C, "Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them." [Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C]

From a software engineering standpoint, projects managers, engineers, testers, and many more departments should be aware of Web accessibility from the beginning of a project until the website or app is shut down/taken off a server (its whole lifespan). Not everyone is lucky enough to start at the very beginning of a project, but an engineer should always add accessible features when they can. This should always be taken into consideration when developing front-end sites/apps for customers or end-users.

Why does it matter? It is incredibly important to provide everyone with equal opportunity, a basic human right, and Web Accessibility is required by law in some situations (W3C). We should all do our part to make the web more accessible.

Where to start

There will be times when it would be a good idea to check your website accessibility. There are many ways to do this, but I tend to start with a couple of techniques that will drastically improve the accessibility of a website, and even improve the look and feel of the website. The first step is to use the accessibility analyzer extension. This will run through your current web page to check for some of the most common mistakes or commonly overlooked accessibility "infractions"

You can find WAVE here on the Google Chrome Web Store

The 2nd tactic is the a11y project checklist. A11y is short or stands for accessibility. The 11 in a11y is for the eleven characters in-between 'a' and 'y' i.e. a[ccessibilit]y. From their website, "The A11Y Project is a community-driven effort to make digital accessibility easier", and their checklist for web accessibility is a great quick start to boost the accessibility of a given site. Checklist - The A11Y Project

My top 3 checklist items

Alt tags on images

What are alt tags? Alt tags were added to the HTML spec long ago, and their original use was to display text instead of an image that could not be rendered. Now, that functionality still exists, but something else also uses that alt tag: screen readers. Screen readers are software-driven applications that help sight-impaired individuals read and use a website or web application without physically seeing what is on the page. It will go through the site and dictate what it has access to, or what it understands from the website or page the user is currently on. (Windows+ctrl+enter will start up the windows narration on your computer, for example.) The screen reader sees an <img /> element in HTML and reads the contents of the alt tag.

Screen readers know the element is an image, so don't start an alt tag with "Image of"

❌ <img src="dog.png" alt="Image of a dog fetching a ball"/>

✔ <img src="dog.png" alt="Dog fetching a ball"/>

Color contrast

Color is important for many reasons on a website, especially for user experience, branding, or other marketing purposes. With that in mind, especially at the beginning of a project, it is important to set a color palette and/or style guide in place with colors that have an acceptable contrast ratio. That means that if you are looking at a website, and some text is not legible due to its color, it does not have a large enough value for its contrast ratio, and you want to avoid that. Typically, any strain on someone's eyes caused by low contrast ratios is not good. It is especially difficult for users with sight impairments because the strain is amplified in their case, causing an unequal experience amongst users. The extensions above like WAVE will note these contrast issues, and many websites have "infractions" for color contrast since it is easily missed. Chrome and other web browsers have a built-in utility that will show you contrast values followed by a ❗ or ✔ to tell you if it is acceptable. The shortcut for this inspector selector is ctrl+shift+c, and you will find the contrast ratio under the Accessibility section of the context menu while hovering elements. (shown below)

Focus States

 Focus is a word we all use in our daily lives, whether we are mentally trying to focus on something by thinking about said thing. When we are physically focusing on something, we are likely staring at it, and this is more coupled with the term "focus" in web development. Focus state is when an item is currently being used or "looked" at. The caveat here is that there is another state called "active" and the line is fuzzy between the two. For example, if I click something on a web page, the element may be now "active"; however, if I then hit the tab key, this will shift "focus" to the next item on a page in many websites. It may not make the next item active. This is most common in lists of links with buttons, for example.

• On the Checklist - The A11Y Project page, I clicked on the "Content" link, which focused is represented by a pink line (high contrast), then I hit the tab key shifting focus to the "Global Code" link, again represented by the high contrast pink line. 👏

Why is focus state important? Users with mobility impairments may only use a keyboard to navigate through a website (which is why tab index is important, however, this is a different topic). While a user is navigating a website, it is especially helpful for them to determine what element of a website is focused. It is important since this could dictate the next link or button they could click on bringing them to an entirely different web page. If a user mistakenly navigates to a different website, it could cause confusion or further difficulty resulting in an unequal user experience. This is where the styling of focus states comes in. Remember that pink line from the ally project website? Well, the styling rule is:

.v-toc__nava:focus:after,.v-toc__nava:hover:after{

    border-bottom-color:#fb37ff;

}

a:focus,.v-toc__nava:hover{

    border-bottom-color:#2f7851;color:#000;

}

If I disable those style rules, here is what the page looks like when Global Code is focused, shown at the bottom as if I were hovering the link:

The point of this code block is to highlight the usage of the :focus pseudo selector. It is a selector that lets you transform the look and feel of an item when focused that works out of the box. For example, if I have a class called .nav-link I can add another style rule like

a.nav-link:focus{

    border:3px#1111aasolid;

}

I did this on the a11y project site using dev tools in my browser, and here are the results:

Now a user could see what item is focused on 😃

Only one item has focus at a time, and you can find it easily in dev tools by using the javascript snippet document.activeElement

I hope this helps you decide on some changes to a website you may be working on! Web Accessibility is important to help ensure each user has the same type of experience on the web, and there are many more topics than just the ones I referenced in this post. It is important to take it seriously and implement as many as we can. I hope this post helps you realize that Web Accessibility is important and that you will put the effort into improving your sites. Let's all work to ensure each user has a good experience on the web.