Are you new to web accessibility? Did you agree to make your website accessible only to turn around and start Googling furiously? Well, have no fear! You’re not alone and there are tools to help you.
Accessibility is a bit of a buzzword in the tech community and, like most buzzwords, people recognize its importance without truly understanding what it entails or how to implement it.
Web accessibility is ensuring that all users, regardless of ability, can access, understand, interact with and navigate web content. The core issue with web accessibility is that accessibility issues are difficult to measure and evaluating them can be very subjective. There’s not always one “right” answer, and it also evolves as technology changes.
This post is intended to give you a quick overview of accessibility as well as some tips for taking care of that inaccessible low-hanging fruit.
Measuring Accessibility
The Web Content Accessibility Guidelines (WCAG) sets guidelines and thresholds for what it means to be accessible.
WCAG has enabled the development of accessibility tools that quickly evaluate web content. However, while some accessibility issues are easily to detect and fix, knowing the technical requirements of accessibility is only the first step.
The spirit of true web accessibility means evaluating your web content holistically and keeping usability in mind. A site passing all of the measurable accessibility guidelines could still miss the mark if their site map is a mess and difficult to navigate.
Making accessible web content is an iterative process and it’s not easy, but it’s an endeavor worth pursuing.
3 Quick Tips
If you’re just getting started on accessibility, taking a pass through your site for low-hanging fruit is a great way to gain momentum and start training your eye for accessibility.
Here are 3 tips on how to fix some of the most frequent offenders in web accessibility.
1. Use headings to add hierarchy
Headings allow visual users to skim the page and find the information they’re looking for. A frequent misunderstanding of heading elements (H1 or Heading 1, H2 or Heading 2, etc.) is that they only provide a change in font to break up the content of the page.
While the visual component of headings is useful, they also have specific HTML elements that can be detected by screen-readers. A non-visual user can use a screen-reader to scan through the heading elements the same way a visual user would.
So in addition to actually using the headings and not just font changes, it’s important to use the headings in numerical order and not to skip headings. If a heading is missing or everything it’s a weird order, it’s difficult for a non-visual user to get a proper sense of the outline of the page.
What to Do
- Use header elements in proper order (HTML elements h1, h2, h3, h4, h5, and h6)
What Not to Do
- Rely solely on font changes to designate new sections
- Skip headers
Learn more about Headings Accessibility »
2. Use the list elements
List elements are very helpful to visually separating out groups of items from the muck of paragraphs. For non-visual users, they can use screen-reading devices to detect list elements, learn how many items there are, and skip through items in the list.
When lists are just typed numbers or typed bullet points in paragraph text, it’s more difficult for non-visual users to figure out where the list starts and ends. They also have no option to skip the list entirely completely if it doesn’t pertain to them, and scanning is pretty key when it comes to web content consumption.
(Ironically, I’m breaking this rule by using headers instead of list elements. To comply with the spirit of accessibility, I’ve included the number of items in the “3 Quick Tips” (H2) and then used H3’s for each numbered section, so it’s still easily scannable. )
What to Do
- Use the number list for multiple items where the number or order matter (HTML elements ol and li)
- Use the bulleted list for multiple items when the order doesn’t matter (HTML elements ul and li)
What Not to Do
- Type out numbers in paragraph text for numbered lists
- Type out or copy-and-paste bullet points for unordered lists
- List items inline with commas and skip the list entirely
List elements in HTML are <ul> or <ol> and then <li> for each item.
Learn more about making accessible lists »
3. Write helpful and descriptive alt text for images
The images we use on our web pages are providing our user with information of some kind, even if it’s just the feel and mood of the page. This information is still pertinent to non-visual users, which is where alt text comes in.
When writing alt text for an image, think about why the image is relevant to the content on the page and then describe its key components or purpose in 1-2 sentences. If an image requires more than 2 sentences to describe, such as an infographic or chart, consider adding a caption or an aria-label.
Alt text is specified like so: <img src=”filename.jpg” alt=”helpful alt text goes here“>.
What to Do
- Use alt text that’s brief and descriptive for all of your images (“alt” attribute for the HTML element img)
What Not to Do
- Exclude alt text for images
- Use alt text that’s too short and not informative
- Use alt text that’s too long and takes focus away from the main content for a non-visual user
Learn more about image accessibility »
It’s Dangerous to Go Alone, Take This!
I hope this article provided a helpful starting point for your web accessibility journey. For more information, check out the following resources and guides.
Resources for understanding and researching accessibility:
- Web Content Accessibility Guidelines (WCAG)
- WebAIM (Web Accessibility in Mind)
- Web Accessibility Initiative (WAI)
Tools to evaluate your page:
- WAVE Extension: great for getting an overview of a page
- tota11y: great for reviewing one item at a time