Web accessibility is important for all websites, including food blogs.
Visitors with disabilities (visual, auditory, physical, speech, cognitive) should be able to read and interact with your website with ease. Have you ever tested out a screen reader on your site?
Here’s how a screen reader works.
The Web Content Accessibility Guidelines (WCAG) provides requirements and guidelines on how to make web content more accessible to people with disabilities. It’s a fantastic resource, but it can also be overwhelming if you’re just getting started.
To begin, it’s important to know that there are 3 levels of web accessibility compliance:
- Level A: the most basic web accessibility features
- Level AA: meeting the most common barriers for disabled people
- Level AAA: the highest level of accessibility
The success criteria for each level of accessibility are based on four principles. From WCAG:
Anyone who wants to use the Web must have content that is:
- Perceivable: this means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses).
- Operable: this means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform).
- Understandable: this means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).
- Robust: this means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible).
If any of these are not true, users with disabilities will not be able to use the Web.
A good goal for food blogs is to strive for level AA conformance. In this post, we share 6 ways to bring you closer to that goal and make your site more accessible.
Plus, we share instructions for creating an Accessibility Policy (just like Cookie + Kate!) to demonstrate your commitment to web accessibility.
6 ways to make your site more accessible
- Include (and improve) image alt text
- Do not embed important text inside images
- Use descriptive link text
- Add captions your videos
- Add heading tags based on page structure, not styling
- Make sure your site’s design has strong color contrast
1. Include (and improve) image alt text
Alt text describes an image for a site visitor who is using a screen reader while accessing your site.
It should be written in full sentences and should describe what’s in the image and should not contain the post title, blog name or be stuffed with keywords. We like this alt text guide from Moz.
To strengthen your site’s image alt text, install the free plugin Alt Text Tools to see where image alt text is missing or needs to be improved. Focus on your top 50 posts first, and update from there.
2. Do not embed important text inside images
In its Image SEO overview Google says:
Don’t embed important text inside images: Avoid embedding text in images, especially important text elements like page headings and menu items, because not all users can access them (and page translation tools won’t work on images). To ensure maximum accessibility of your content, keep text in HTML, provide alt text for images.
3. Use descriptive link text
Berkeley Web Access explains it best:
When including links in your content, use text that properly describes where the link will go. Using “click here” is not considered descriptive, and is ineffective for a screen reader user.
Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.
The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.
For example, if you are pointing visitors to a page called “About Us”:
- Try not to say: “Click here to read about our company.”
- Instead, say: “To learn more about our company, read About Us.”
To begin, scan the links (internal and external links) in your top 10 traffic-generating posts. Are they descriptive? If not, update them. Then move on to the next 10 posts, and the next 10 posts. This is an easy and quick way to make your site more accessible.
4. Add captions to your videos
Video captions are a good resource for those who are deaf and hard of hearing, but they’re also used widely for situational disabilities.
Have you ever tried to watch a video on public transportation or in a loud room without captions? We have, and we usually scroll right past it because we can’t understand what’s being said.
Here’s how to add captions to video by platform:
5. Add heading tags based on page structure, not styling
Always select the heading tag that best suits the structure of the post. H1 should be your post title, H2s should be your subheadings, followed by H3s, H4s, etc. as needed.
Screen readers use headings to navigate the content of the page. This is an easy way to ensure your posts are organized and easy for screen readers to understand.
Here’s a super helpful UX and acessibility tip related to headings from certified accessibility specialist (CPACC) Kim Krause Berg:
We know it’s tempting to select a heading based on the font size or styling. Styling can easily be updated via the block editor, or better yet in the stylesheet for your theme.
6. Make sure your site’s design has strong color contrast
Having enough contrast between the different colors on your website allows for people with different visual abilities to properly see the content on your web pages. This includes body copy, buttons, links, icons and more.
See these examples for comparison:
Has sufficient color contrast
Does not have sufficient color contrast
The color contrast guidelines from W3C WAI are really helpful.
The contrast checker from WebAIM is also a helpful tool to get an idea of whether the background and foreground colors used on your site have enough contrast.
Make a commitment to web accessibility
A big part of making your site accessible is being committed to ongoing learning and improvements, and having an open mind about what you can do to support all site visitors.
That’s what Cookie + Kate makes clear in their accessibility policy.
You can generate your own accessibility policy for free using this accessibility statement generator. Adding the new policy to your site’s footer should be quick and easy.
Note: Foodie Digital participates in affiliate programs for select recipe card plugins and hosting providers. The opinions we share are based on our own in-depth research, and the ongoing need for our members to use SEO tools that are future-proofed, credible, professional and well supported.