Web Accessibility Checklist
Many of our most beloved websites choose style over substance when it comes to web accessibility, which means that users with visual or hearing impairments, physical limitations, or cognitive disabilities aren’t able to access and enjoy many of the online experiences that the rest of us take for granted.
Sure, sharing that cat video or the latest meme might be as easy as clicking a few buttons for you or me, but what about the 20% of the world population who live with some form of disability?
For those living with limited motor functions, simply clicking their mouse might actually require a significant effort. Meanwhile, laughing at that video on YouTube isn’t possible for the hearing impaired unless there is a transcript or closed captioning to accompany it.
It’s easy to not think about these things if you or someone you know aren’t affected by web accessibility issues, but luckily for all of us, our technology has reached a point where making websites accessible to everyone is easier than ever, as long as you’re willing to do things the right way.
So, how can you start making your website more accessible today?
Structure your page content correctly
How often do you skim through a web page, or even a newspaper or magazine article, looking for the big headings to find the content that you need? You’re probably doing it right now. Half of the people who landed on this page probably won’t even read this sentence. Their loss.
Well the same goes for assistive devices. They “read” web content following a logical structure. They are literal to a fault if your webpages aren’t structured properly.
For that reason, it’s essential for your webpage to use what’s known as “Semantic Markup” or “Semantic Structure”. WebAIM.org describes website semantic structure in greater depth.
The easiest way to establish semantic structure is with the use of proper Heading Tags or “H tags”.
Headings indicate the importance and hierarchy of your content, and would look something like this:
- Heading 1
- Heading 2
- Heading 3
- Heading 2
- Heading 3
- Heading 2
Proper heading structure allows you to navigate information easily and identify the most important information first.
Another way in which assistive devices navigate web content is through lists. Lists can be Ordered (showing a progression or sequence) or Unordered (no importance of sequence), but should never be used merely for indenting content or for visual effect.
Your lists should always include a description which indicates the contents within. If your list contains links, they should clearly identify the locations to where they will direct the user.
Use proper “alt” attributes on visual content
The “alt” attribute (alternative text) is a crucial element of every image, video, or other non-textual content. The function of the alt text is to provide assistive devices, and search engines, with an accurate description of the visual media being displayed on your website.
Since assistive devices and search engines can’t actually “see” images or video, they identify it by reading the HTML code for <img> or <video> tags. While these tags indicate that an image or video is present, it is the “alt” attribute that describes what is actually being shown on the page.
For example, an <img> tag without an “alt” attribute may look like this:
Not very helpful, is it? A better usage would look more like this:
<img src=”images/empire_state_building.jpg” alt=”View of Manhattan and the Empire State Building”/>
As you can see, the “alt” attribute provides a description of what the image is portraying.
You may have also noticed that the image file name was changed. This isn’t a requirement for web accessibility, as assistive devices will skip over the file name if it sees that the “alt” attribute is present, but it seemed lazy to not let you know that providing an accurate file name will benefit your SEO performance. You’re welcome!
Identify link locations
Especially if the link opens in a new window! For users with disabilities, they may not be able to easily identify where a particular link will take them.
Providing a clear description of where links will redirect users is good practice in general, but especially useful for disabled users who rely on assistive devices to navigate web pages.
Many assistive devices allow users to scan webpages by displaying a list of links. This means that they will be skipping the text in between, and lose some of the context surrounding those links.
While the average user might be able to interpret the preceding text to determine where a link that says “Click Here” might take them, an assistive device cannot provide that context and distinguish the link locations for 10 links that all read “Click Here”.
Provide a “skip navigation” link
Sometimes referred to as a “skip to content” link, this option allows disabled users to quickly navigate to their desired content in as few as two keystrokes.
This is an incredibly convenient tool for screen reader users, because screen readers are programmed to automatically begin reading through all of the navigation options on a website first, as they are located at the top of the page. You can imagine how annoying this could be to a screen reader user if your website has 7 navigation dropdown menus which each contain a further 5 navigation options.
The Web Accessibility in Mind (WebAIM) website provides an easy to follow guide for implementing a Skip Navigation link on your webpages.
Consider good design and readability for all users
Not all people with disabilities use assistive technology. Furthermore, proper web design will enhance the experience for all users, even those who are not living with a disability.
We’re not saying that you should only consider function over fashion, but when it comes to web accessibility, visual elements that don’t serve a purpose beyond their cosmetic layer are unlikely to add any value to your website.
Think about it this way: if users without disabilities have trouble navigating your website and finding the information they need, how do you think a disabled user will feel?