Accessing our site using the WCAG guidelines
With web content reaching more and more people, the need for accessibility is greatly increasing. As such, here at Develo, we are turning more of our focus onto making our websites accessible. In this article, I will be running through why this is important for you and for consumers, as well as the steps we’ve taken to make the Develo website more accessible and increase its reach and usability.
The Web Content Accessibility Guidelines (WCAG) describe how to make web content more accessible to individuals with impairments. Did you know 3.8 million U.S. adults aged 21-64 are blind or have trouble seeing, even with glasses, amplifying the need for content that can be read by screen readers? Which only further emphasises the importance of catering your website to be accessible.
- More than 466 million people worldwide have a hearing disability, raising the issue of requiring videos to have captions or audio to be transcribed.
- 3.8 million U.S. adults aged 21-64 are blind or have trouble seeing, even with glasses, amplifying the need for content that can be read by screen readers.
- Around 80 million people in the European Union (EU) currently have a disability.
- According to WHO (World Health Organisation) statistics, globally, at least 2.2 billion people have a near or distance vision impairment.
The information on a web page or online application is referred to as "content" which includes the following:
- Information directly seen by an end-user such as text, images, and sounds
- The code that sets up the structure and aesthetic of the page
Your audience can consume your information, use of services and buy your products through an accessible website or application, regardless of their device or disability.
This means that a website must accommodate the needs of the underserved, guaranteeing no one is excluded from a full website experience. Some of the accessibility obstacles a web user may encounter include vision impairment, hearing impairment, colour blindness, fine motor skill limitations, and reading difficulty.
How can you ensure your website is Accessible?
Checklist
The World Wide Web Consortium (W3C) gives us detailed instructions on how to achieve basic (and recommended) web content accessibility. We've included some of the most important elements in the list below, so if your website can pass the test, you're well on your way to providing an accessible client experience:
1. Screen-reader Compatible Web Pages
Electronic "screen readers," are devices often used by the visually impaired to browse the internet, and must be able to read web pages.
2. Images with alt tags
Images must have "alt tags" (metadata) to assist visually challenged users in identifying the image using text or a screen reader. Alt-tags are well-known among SEOs as a strategy to improve photos for high rankings in Google Images.
3. Tables with alt-tags
Tables must contain alt-tags (similar to image alt-tags) to help explain each column via text if they're used on any web pages. The text will then be read aloud by the user's screen reader, describing the contents of the table.
4. Independence of the Style Sheet
Your web pages shouldn't require a stylesheet to show in a comprehensible manner. Screen readers, the majority of which are unable to load style sheets, should be able to read them.
5. Forms that are easily accessible
Even without a mouse, web forms should be usable, and each field in the table should have a label so they can be identified by screen readers.
6. Easy to use on a keyboard
A mouse or touchpad should not be required to use your website. It’s key to allow users the ability to use their keyboards to navigate through any website.
7. Color Schemes That Are Inoffensive
Your website should not include any colours or colour combinations that are either necessary for proper website operation or that may raise issues with those with colour blindness in users of your website, products, or services.
8. Website Design That Isn't Harmful
Images or videos which can trigger seizures should not be served on your website.
9. Plugin Text Links
If your website requires a specific plugin to function properly, you should include a text link to that plugin.
Testing the accessibility of the Develo website
There are a myriad of tools available to help with the accessibility of a website. These will allow for the site to be evaluated by a third-party tool and identify areas that can be improved in terms of accessibility.
I did a test on the Develo Design website and found a few issues:
Using this information, I can identify areas of improvement, and I will now set upon the task of improving them to eliminate these issues.
Amending the Develo Site to ensure Accessiblity
Adding alt text to background images
First I'll focus on these 4 main errors, pointing to links that are missing text. Using this tool I can identify that the culprits are these images on a slider on the homepage which are linked without having any text within them:
The first point of action was adding content to these links which were missing text. These links are just anchor tags, with an inline style attribute setting the images as background images. So an alt tag couldn't be used.
The first attempt at alleviating this was to add a title attribute. While this satisfies the requirement of adding identifying content to the anchor tag, the World Wide Web Consortium (W3C)’s guidelines state here that;
“Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS)”
Due to this, I then decided to use the alternative method mentioned in that link, which suggests adding text within the link and hiding it. This would increase compatibility with screen readers, and subsequently increase the reachability of this website in terms of wider accessibility towards those visually impaired.
After doing another accessibility test, I can conclude that this change has fixed the flagged errors:
Contrast Errors
The second point of action is addressing the issue with contrast errors. I’ve identified that 10 of these contrast errors are due to the text on this section being too light compared to the background:
To solve this issue, I used google chrome’s built-in accessibility checker which suggests a colour to use to make sure the colour fits the AAA standards. More information on these colour standards can be found here
After clicking the icon to suggest a colour, I now see that the best colour to match AAA standards is #455962, with a contrast ratio of over 7.0
After making this change, the section does not look drastically different, but the readability has been greatly improved:
Now, all that’s left are these remaining two contrast errors, which I will resolve using the same method:
Before:
After:
Now it's your turn!
What this means for you is, these guidelines are a simple way to ensure your website can be used by as many people as possible, maximising overall user engagement, purchases, and marketability. For more information including the full list of criteria to follow to meet accessibility standards follow this link https://www.w3.org/WAI/WCAG21/quickref/.