Ashley Sheridan​.co.uk

Tags:

It's Global Accessibility Awareness Day today, and more of us than ever are relying on online services and resources due to the Covid19 pandemic. With a huge swathe of the world being forced to work from home, we're seeing a greater need to ensure our products, tools, and websites are accessible to everyone.

The WebAIM one million project paints a pretty bleak picture, as it looks like websites are actually becoming less accessible, with 98.1% of the web pages tested having detectable failures, up from 97.8% the prior year.

The Top Accessibility Issues Found

The WebAim project has categorised the problems it found with its automatic testing, and the main culprits of last year have remained, so if you're looking to start implementing better web accessibility in your own projects, this short list might be a good place to start.

Low Contrast Text

Poor text contrast was one of the most prevalent issues found on websites, and often stems from design being given more importance than accessiblity.

Take Twitter for an example. Among the text contrast issues are:

• The number of notifications shown on the bell icon in the left menu, white on the Twitter blue giving a ratio of only 2.83:1
• The "What's happening?" placeholder text shown in the text area left for you to write a Tweet with a contrast ratio of 2.93:1
• The disabled Tweet button beneath the text area with a very low ratio of 1.68:1
• All Tweet links, inluding hashtags and mentions have a contrast ratio of 3.27:1

If the colours of Twitter were changed to make these parts more accessible, they wouldn't be "on-brand", so this is most likely a deliberate choice by designers to ignore the colour issues.

Good colour contrast is really important for people who suffer from one of the main forms of colour blindness. If you fix your contrast problems, you can be fairly certain that any visitors with colour blindness can still read your content.

Images and Alt Text

Almost ⅓ of websites had images missing the alt attribute. Many others were found to have the attribute set to an empty string and others found to contain words that should generally be avoided (such as "image", "graphic", etc).

For better image accessibility, try following these points:

• Every <img> tag must have an alt attribute
• If an image has an empty alt attribute, consider making it a background image
• Don't use text like "Image of..." or "Picture of". Screen readers already tell visitors that it's an image, you don't need to duplicate that
• The text should be a _replacement_ for the image, not a _description_ of the image. Sometimes a description makes sense as that replacement, but not always. Try swapping the images for their alt text, and see if the page still makes sense

Empty Links & Buttons

Often, empty links/buttons aren't truly empty, they just don't contain any textual content. Consider image links, where the image has an empty alt attribute, or buttons with an SVG icon. Add an accessible label, either using aria-label, aria-labelledby, or as inline text that's hidden in a way that can still be picked up by screen readers.

Missing Form Input Labels

Every input should have a label. For button types, that's usually the text that's displayed on the button itself. For all other types, every input should have a <label> that wraps the input or is associated with the for="id" method. That means every individual checkbox, every text field, every select.

Missing Document Language

If there was one thing I would point to as being the easiest to implement, it would be setting the page language using the lang attribute. The benefit of this is that a screen reader can correctly pronounce your content.

Even if your page is all in English, you can't always assume your users are. They might be able to read English, but could come from anywhere, and their screen reader would most likely fall back to their system language if you don't indicate what your website is written in.

For pages that have mixed language content, try to indicate the change in language with the same lang attribute on the element containing the other content.

What We Can Do

Clearly, if things continue the way they are, then this problem is going to get progressively worse. There are some in the web development industry calling for browsers to do more, and fix things automatically. This isn't something I think should be done, even if it were easy to do.

Don't Leave it to Browsers

Developers are already struggling to fix their websites and emails after some bad conversion guesswork by operating systems and browsers on how dark modes should be applied. If a browser were to also try altering colours for better contrast, it might still get things badly wrong in the cases where you have a 3-way contrast requirement.

Artificial intelligence is still not accurate enough to identify images, so relying on AI to identify and label images is not viable. AI also can't give the context behind an image; is that just a picture of:

• A car parked on a roadside
• The new concept Car 2000 from Motors Inc.
• Example car showing an intact wing that I need a replacement for
• My car showing the brand new wheels that I just bought

All of these are potentially valid descriptions, but they all convey different information, and this is something that a computer will never be able to compete with. Only the content creator knows what information that image really needs to convey.

Language detection of documents is still difficult, especially if your website contains a lot of user generated content (e.g. comments) in other languages. Chrome still struggles with this and offers up automated translations because it made the wrong guess at the document language.

It's still up to us to push forward and produce accessible content, and we should try to encourage others to do the same. We all need to take some responsibility, and push out awareness to those that don't yet think about accessibility as part of their design and development process.

Do One Thing Yourself

Instead, make a pledge to do at least one small thing a day (or a week if you can't manage every day). Try one of these:

• Put aside your mouse and test your website with a keyboard for an hour
• Run some automated tests against your website and look at the results.
• Try a screen reader for an hour, see how it reads out everything from the content to the functional aspects of your website
• Write up a ticket (if your workplace uses such a system) listing some things that need to be fixed
• Fix an issue with your website, either:
  • adding a label to every element in a form
  • add alt text on all images on a single page
  • Fix the colour contrast on your website footer
• Show someone else at your workplace how to use an accessibility tool
• Write about something you've fixed, or how to use an accessibility tool