In the last year, I’ve had the opportunity to audit several WordPress Recipe Blog websites for accessibility. The results have ranged from a handful of things that should be remediated all the way to recommending a complete overhaul of the website. However, I’ve noticed a few accessibility issues that are almost always present.
Today, I want to cover the 10 most common accessibility issues I see on food blogs. With a few exceptions, they are mostly non-technical and things someone with no development experience should be able to handle. And I’ll help – by explaining the issue, why it’s an issue, and how to fix it. Even if you don’t have a recipe blog, the items addressed here will still benefit you.
Fractions and Incremental Measurements in Recipe Blogs
Without question, the most common WordPress recipe plugin I see is WP Recipe Maker (WPRM) – and I can definitely see why! It’s easy to use and looks great out of the box. However, despite the fact that fraction buttons are offered within the recipe creator, I still see a lot of multi-character fractions (3/4 as opposed to ¾ which is a single character).
Why are multi-character fractions in recipe blogs a problem?
In the last several years, screen speech has become wildly popular in day-to-day life – and I’m not just referring to screen readers, which people who are visually impaired use to navigate their computers and the Internet. While things like Siri, Alexa, Cortana, and Google Home are getting “smarter” and more efficient each day, they’re still AI units reading text from a website. They can’t tell when a forward-slash is being used in place of a fraction.
So while a person may read “three-fourths of a cup”, an AI text-to-speech (TTS) technology will read “three slash four cups”. This can be confusing. The term “slash” is also frequently used as a replacement of “or” and “in addition” (eg, “I’ll be home by 1/2pm” or “You need to work on your science/math homework.”). So if someone is having a recipe read out loud to them by an AI, not everyone would immediately conclude it is “three-fourths”.
A somewhat amusing side-effect of multi-character fractions
However, what really caught my attention that this was an issue was with a screen reader (NVDA). Every single time someone wrote out an improper fraction of a cup (3/4 cup), the screen reader reads it as “three slash four Cuban pesos” because “cup” is the acronym for a Cuban peso. But, if the fraction was formatted correctly as a single character (¾) it was read properly every time.
How to make multi-character fractions a single character
If you’re using WPRM, you can find the fractions pop up in the editor as soon as you highlight the amount box.
Honestly, I’m not as familiar with other recipe plugins. If they don’t offer a similar feature, you can always copy and paste a fraction character from a website like Alt-Codes or learn the keyboard shortcuts (for example, you can press “alt+0188” on your keyboard for ¼).
Heading Hierarchy in Recipe Blogs
As far as “non-techy” people go, I have never met a group of more SEO savvy people than those in the food blogging community. Yet I still see improper use of heading hierarchy (nesting) across most of these sites, which is a major issue that can also adversely affect your SEO. Headings (called H1-H6) are not just a way to make a heading seem bigger or smaller where you want it to, or to achieve a specific color – all of that can be done with styling. They are a way for people and search engines to actually navigate a site and the only way to successfully do this is with properly nested headings.
Why is bad heading hierarchy in recipe blogs a problem?
Imagine not just being able to scroll down to a section of a page but relying on a table of contents generated by the headings on a page. That’s how some people navigate a website when they’re using the keyboard or a screen reader, but this is made MUCH harder and more confusing if proper heading hierarchy isn’t practiced.
A good way to think about headings is like one of those tall, metal filing cabinets. The drawer itself is an H1 (everything in that drawer will relate to whatever it is labeled as – let’s call it “House”). Inside the drawer will be several hanging folders (these are H2 and help group the sub-categories of that drawer; let’s call one of them “bills”). Inside the “bills” hanging folder will be several manila folders, labeled with the sub-categories of “bills” (probably divided up as “internet”, “water, “power”, etc – these are H3). And inside the folders are documents – as you can probably guess, these are H4. Aside from a sticky note you may have stapled to a document, I haven’t quite come up with a good metaphor for H5 and H6 since realistically, they are rarely necessary outside of a medical, educational, or legal website. But you get the idea. Organization and clear navigation are key when you are putting together an archive of important documents – and your website is no different!
How to Fix Bad Heading Hierarchy
Heading hierarchy isn’t too hard to figure out. Here are the rules to proper heading hierarchy:
- You must have NO MORE and NO LESS than ONE H1 heading on a page (this is generally the title of the page and implies the focus of the content on it).
- You must not skip heading levels. You can go H1 > H2 > H3 > H2 > H3, but you CAN’T go H1 > H2> H4 > H2 > H4 (if you’re using the WordPress block editor, this is easily visible and adjustable when you have your heading block highlighted)
- Headings should be clear and concise
- Do not use headings for styling purposes
And that’s about it! WordPress (and accessibility conscious theme developers) actually implement a lot of these headings automatically. Post and Page titles are automatically generating as level one headings (H1), on most accessible themes have a hidden H2 before widget areas and widget titles are generally H3. But when it comes to headings within content you’re creating, it’s your responsibility to ensure you’re using proper heading hierarchy. We event wrote a detailed blog post about headings.
Fun fact: these rules also apply to documents (like MS Word or a PDF) to make them accessible.
While I focus more on the accessibility aspect, Yoast has a great article that will inform you about why proper heading hierarchy is also important for SEO.
Color Contrast in Recipe Blogs
When I say “color contrast” I am referring to the contrast ratio between text (or icon) and its background. This is a big issue MANY websites ignore.
You may be able to read the text on this image; but, to someone else, the white text on this shade of blue makes the quote invisible entirely.
Why is low color contrast a problem?
Whether you were born with low vision or colorblindness, sustained an eye injury, or are just getting older, sometimes things are hard to read. This becomes even harder when someone is using yellow or neon text on a white background. I realize, as someone with no visual impairments and an appreciation for the entire rainbow, that sometimes it’s hard to put yourself in someone else’s shoes when you yourself can read white text on hot pink just fine. The fact is, without proper color contrast, not everyone can. This creates a barrier for some people to access your content.
How to fix color contrast
You can easily check your site for color contrast issues by using the WebAim’s WAVE accessibility tool. Simply enter your site’s URL and navigate to the “Contrast” tab. This is a simple way to check your color contrast. Personally, I prefer WebAim’s specific contrast checker or Deque’s contrast checker; however, you need to know the hexadecimal color(s) your site is using. Those pages will still give you some great information on what qualifies as contrasting and why (large text versus normal text and graphic components).
Ads in Recipe Blogs
Yes, unfortunately, your paycheck could also be your accessibility down-fall.
Why are some ads a problem?
Don’t get me wrong – I AM NOT telling you to discontinue ads. But a lot of ad providers are not keeping up with accessibility. I’ve encountered a ton of ads that create a keyboard trap (disallow a keyboard user from navigating forward or back), have no alt text, are broken, violate color contrast minimum, or prevent keyboard interaction entirely.
How to fix problematic ads
Unfortunately, there’s not an easy fix for this. While I am aware you’re not responsible for the ads themselves, you are still responsible for what is on your site. So if the ads provided on your site have accessibility violations, that still puts you at risk. We’ve even had audit clients who reach out to their ad providers who claim their ads are accessible (when they’re not) or say it’s too expensive to remediate. Unfortunately, in the accessibility community, both answers are unacceptable. If you had a brick and mortar store on a raised foundation and there were people in wheelchairs who were interested in your products but couldn’t access the store itself, wouldn’t the initial investment in a ramp be worth it in the end?
Not sure if your ads are accessible? I can help! This is really something anyone could do and I’m going to walk you through it! I’m most familiar with Chrome and FireFox, but Edge and Safari (etc) users should still be able to follow these steps.
First, download an accessibility browser extension (I prefer axe or Lighthouse). What is an accessibility browser extension? It scans the page you’re on and checks it for technical accessibility issues. It’s a great tool but not perfect – any automatic auditing software only catches about 30% of the existing accessibility issues on any given site and can sometimes even provide false positives (detect an issue that isn’t there or isn’t actually an issue). That’s why, if you ever plan on paying for an accessibility audit, you need to ensure the person doing it has the training required to properly diagnose your site and isn’t just relying on automated tools.
If you don’t already use an ad-block extension, download one of those also.
Make sure the ad block is on and navigate to your website. Right-click, then click “Inspect” (Chrome) or “Inspect Element” (FireFox) from the drop-down (this can also be accomplished by pressing “ctrl+shift+i” in most browsers). If this is your first time using the inspector, it will probably appear at the bottom or right of the browser window. There will be a bunch of tabs at the top. For the sake of this example, let’s use axe:
Click it and press “Analyze” — this will start an automatic accessibility audit on your site. When it’s done, it will provide you with the issues found on your site. What we’re going to focus on right now though is the amount it found. This is the base number of accessibility issues your site contains WITHOUT ads.
Take note of this number. Now disable your ad-block extension so the page contains ads, refresh the page, and repeat the previous steps. Did the number go up? Did it do up A LOT? Then in all likelihood, you have inaccessible ads running on your website and need to contact your ad provider. I have encountered one or two false positives in relation to an ad, but most of the time I watch the number of issues go from 12 to 80 with real and significant issues related to the ads on a page.
Unnecessary Features
Remember back in the 90’s when websites had things like glitter following the cursor or flames at the bottom of the screen? Well, there’s really nothing new under the sun and we still do those things to our websites – they’re just not as gaudy as the used to be. The fact is, people like to experiment with new technology.
Why are unnecessary features a problem?
Some of the sites I’ve reviewed have had things like snow sprinkling down to celebrate winter, hearts or emojis that float around when someone likes a post (anyone, not just the user itself), or floating arrows that point at elements to get your attention.
Unfortunately, these provide hurdles for a lot of people. A person with cognitive issues could have severe issues absorbing your content if every 15 sections they’re distracted by a new animation floating around the screen.
A mobile nightmare in recipe blogs
Additionally, most of these features take up valuable real estate on a mobile device which can often impair even an able-bodied person from reading your posts. I’ve seen emojis blast over half the screen and snow or autumn leaves constantly covering up words I’m trying to read. If I hadn’t been visiting these websites for work, I would have abandoned them and found another site to get a recipe for pumpkin pie.
An SEO disaster in the making in recipe blogs
These features are almost always created with a plugin that then displays this item using JavaScript. Every feature you put on your website increases your page’s time to load. Since a prime factor in SEO ranking is load time the you’re killing your SEO with something of no benefit.
It gets even worse if your potential readers have slower internet connectivity. They are likely just to hit the back button and find a recipe that loads faster.
How to avoid unecessary feature pitfalls
I get it – you want to celebrate the holidays and add quirky features that reflect who you are – and I’m not saying you shouldn’t! But even with all of these features available to you at the click of a button, sometimes it’s important to remember if you’re not adding to a user’s experience, you might be subtracting from it. So before deciding on a decorative or superfluous feature or plugin to add to your website, just ask yourself if it is absolutely necessary.
External Links in Recipe Blogs
There is a debate in the accessibility community: should external links open in a new tab? It seems not everyone can agree on yes or no, but EVERYONE agrees users need to be notified they’re leaving the site and what will happen when they click that link.
Why are external links a potential problem?
It’s not the external link itself, but the way it’s presented or acts. This is especially important for a user who may be blind because they can’t SEE a new tab opening and the screen reader doesn’t notify them of a new tab or external link natively. It is the digital equivalent of being shoved blindfolded into a van and dropped off in another part of the city. People who have cognitive disabilities may also become confused when they realized they’ve been diverted to a completely different site and are unsure where the original site is – do I just need to press back or is somewhere in another browser tab?
How to make external links accessible
Personally, my favorite plugin to accomplish this is WP External Links. It will automatically locate external links on your site and apply the settings you set up in the plugin. You can also add a title in the plugin’s settings that a screen reader will read to a user (and is visible when a mouse-user hovers on the link). The link to the plugin in this paragraph is an external link, so you can see how the external link icon looks – it’s being generated from that plugin! You can choose to not use an icon (though I encourage you to use one) or a different icon. Because of the title I implemented with this plugin, a screen reader would read that link as “link WP external links external link opens in a new tab,” informing a user who may be blind exactly what is going to happen when they click it. And that is what is most important.
Lazy Load Comments
If you’re not using a lazy load comment plugin, you should be. What is lazy load? Essentially, it tells a function not to run until it is needed. Very commonly used for images, it speeds up load times of web pages – sometimes drastically. This makes a great accessibility feature but your able-bodied users will appreciate it, too!
Why is not taking advantage of Lazy Load a problem?
Many of the recipe blogs I would audit had recipes that had comments in the hundreds. If they weren’t running a lazy loader on their comments, the page would completely lag out my screen reader and I couldn’t even get to the recipe. This was confirmed by an associate – even on her super speedy Internet, the pages never failed to completely lag out the screen reader.
How to display comments timely and correctly
We like Lazy Load for Comments, a simple, free plug and play option that even gives you the ability to choose how your comments are sorted. Giving the user the ability to load more comments at their discretion instead of wading through hundreds of them will provide a much nicer user experience for everyone. Especially if your site is set up with the “Add New Comment” BELOW the existing comments. And, side note, if given the option between “Load on Scroll” or “Load on Click” – go with on click.
Unique ID’s and the Subscription Box
Possibly one of the most prevalent issues I’m seeing on these blogs is ID conflicts. This one is a bit technical but can be resolved without code or development knowledge.
Why are duplicate ID’s sometimes problematic?
First of all, what is an ID? Well, it’s exactly what it sounds like – it’s a unique identifier used in HTML. Unlike HTML classes, only ONE of the same ID can exist on the same page. What I am seeing a lot of are newsletter subscription forms that are being generated by the same form used two or more times on the same page (say, one in the post meta, one in the sidebar, and one in the footer). These forms share the same ID which causes submission conflicts – ESPECIALLY for keyboard users. If the same form exists multiple times on a page, a keyboard user will type in their email address in one box but if they tab to the “Submit” button, it will likely take them to a DIFFERENT subscription form because the browser is confused as to which form it’s suppose to be focused on. This can even conflict with a mouse-user who clicks a check-box on one form and it checks the box on another form.
How to make quick and easy unique ID’s
A quick and dirty way to resolve this is to duplicate the subscription form for each place it’s needed. However, it causes some clutter in your form dashboard with all the duplicates. But unless there is styling done to the form that was targeting its ID, it’s something a blog owner with no technical experience could accomplish.
Another alternative depends on the form plugin you’re using. Some form plugins provide ID conflict extensions or have had third-party plugins developed that prevent ID conflict for cases exactly like this. After you install the plugin or extension, it should automatically add an extention to the form’s ID based on its order on the page (form-1-1, form-1-2, etc). This all happens in the backend code, mind you, so you won’t actually see it working unless you experience one of the aforementioned issues with conflicting ID’s.
If you’re comfortable messing around in the functions.php file, there are tons of code snippets available online you can look up based on what form plugin you’re using.
Social Share Plugins
Why are some social share plugins problematic?
This is a bit more of an ambiguous issue. I’ve come across several social share plugins that have issues with screen readers. Some only read the amount of shares you have on a platform without reading what platform it is, others just read the platform without implying it’s a “share on” button which is confusing (is it a link to the blog owner’s social media account or a share on your own button?).
How to pick a great social share option
Any blog owner knows how many social share plugins are out there. When choosing yours, don’t go completely by best reviews or the way it looks. Accessibility is only just now starting to get some traction in the development community and some of the popular plugin developers haven’t caught up. Check if the plugin states it’s accessible, read the support forum on the plugin to see if anyone mentions accessibility, get suggestions from community members, or ask your webmaster. If you’re already working with a developer, they can always style it to look the way you want.
Consistency in Recipe Blogs
Consistency and readability are also big issues. Why is a recipe’s title font enormous on one category page and tiny on a different category page? Why are links blue on one page and green on another? Why does the menu change on certain pages? Why did the social links go away on this page? These are things you may not think of as a big deal but they are.
Why is consistency in recipe blogs important?
This helps people, ALL people, navigate your site better. Yes, it’s VERY important for someone with a cognitive disability or someone who is blind to be able to rely on a site element to be in the same place every time, but that kind of consistency helps everyone – like someone in a hurry and now has to look for a site element that has changed position. Inconsistent site layouts (menus, social links, sidebars, etc) provides the same frustration as misplacing your keys or wallet, or when you realize your dog put one of your shoes somewhere. Imagine going to a house for the first time and getting used to where everything is but the next time you visit the bathroom is in a different place.
Consistency is key.
Things to keep in mind when keeping your look consistent
There’s no one way to fix inconsistent layouts because it’s a vast range of issues. A user could have one or more instances of inconsistency that could be a simple fix any user could remediate, or it could require a developer. Here’s a list of some things you can check on your own site:
- Ensure your pages are using the same main menu.
- If you have your social links on the site, make sure it’s the same list of links in every spot.
- Are your widgets the same on your page layouts unless otherwise expected? For example, on a shop or archive page, it’s expected the sidebar may be different for the sake of product filtering or mass blog navigation.
- Do all similar site elements share the same layout and styling across your site? For example, do your recipe cards look the same on your Index Page as they do on your recipe category pages? Do they provide the same information? Does a “Reader’s Favorites” widget look the same and provide the same information as a “Recipes Like This” widget?
- Are fonts clear and consistent?
- Can users find the same information in the same places on your page layouts?
Conclusion: Accessibility in Recipe Blogs
Accessibility helps everyone. And once you’ve learned a bit about it, you’ll find it’s pretty easy to grasp and implement. A heading here, some alt text there, and before you know it you’ve expanded your audience just by giving them the ability to navigate your site. I know there’s also a lot of resistance in the food blogging community to convert to Gutenberg, the WordPress block editor; but, it also makes accessibility A LOT easier to accomplish without being tech-savvy. For example, a lot of iframes (what you use to embed a video from YouTube or Vimeo) contain a “Title” attribute, which can be a serious issue for screen readers. However, using the block editor’s video embed block automatically provides one when you embed the video just by inputting its URL.
In all likelihood, you’re running the Classic Editor plugin. Not a lot of people seem to be aware there is an option in your blog’s Writing settings (which is toggled off by default) to run both the classic and the block editor at the same time, giving the user the option to choose which editor they want to use on a post-by-post basis.
How to allow both editors on your site if you’re running Classic Editor
- In the WordPress dashboard, navigate to Settings
- Find “Writing” settings
- There will be a Yes/No radio button labeled “Allow users to switch editors”
- Click “Yes” and save
I encourage turning this option on and dabbling with it a bit on some of your posts – you may realize content accessibility becomes a lot easier to accomplish.
This article doesn’t cover everything that could potentially be inaccessible on a website, but it’s a great jumping-off point for you to get your feet wet, even if you don’t have a lot of development knowledge.
Five Additional Accessibility Tips
Here are five more tips that don’t require a lot of elaboration.
Alt Text
Make sure all your images have alt text. If you have tons of existing photos and posts, you can use a plugin like Image Alt Text Generator Fix to automatically generate alt text for new and existing images.
Graphics with Text
Avoid using graphics with text in them. This prevents a user from using their accessibility tools to adjust the text to their liking – whether it’s resizing it, adjusting the font, changing it to a more readable color, or adding letter spacing.
:focus
This is more technical – when you hover over a link or button with your mouse and it changes, this is called a hover effect. A focus effect occurs when a keyboard user tabs through links. It’s not uncommon to see a lack of focus which prevents a keyboard user from knowing where they are on a webpage. Sites should always have a focus indication.
Vague Links
Unless meant to be intentionally ambiguous, things like “click here” and “read more” should be avoided. If a visually impaired user is tabbing through links on a page, all they’re going to hear is “click here” over and over again. Links and buttons should have descriptive text relevant to their target page.
Emails
We all know the old trick to prevent spam, right? Split up the email like this: person (at) domain (dot) com. Well, that actually doesn’t work anymore. Bots have evolved to get through those defenses and locate emails regardless. In fact, by not typing out the email correctly, you could be preventing email obfuscation software your site admin/host provider may be using on your website. Always type out emails as [email protected] for the sake of accessibility and your spam box.
Would you like to know where your website stands in regards to accessibility? Contact us today about a personalized accessibity audit. We specialize in accessible website design and development as well as website remediation.
Is there a way to remove the icon from your social media icons in the WP External Links plugin? I love how it works, but the added icon next to my social media icon really screws things up.
Hi Tiffany! Yes, there is! But it does involve a little CSS (I imagine the developer didn’t add this into the options because there are SO many different ways social icons are implemented that it would be impossible to predict them all). Put this in your styles.css (or, if you’re uncomfortable in a stylesheet, in your dashboard simply go to Appearance > Customize and in the Customizer go to “Additional CSS” and paste it in there):
.social-icons .wpel-icon.fa.fa-external-link {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
This will affect the social icons in your header.
I LOVE the styling above. This is how you hide something from view, but still make it visible to a screen-reader in logical reading order which allows you to still provide context to someone who may be visually impaired and can’t see the surrounding context for themselves.
Additional styling tip: if you want the external link icon to be a little smaller and superscript, add:
i.wpel-icon.fa.fa-external-link {
font-size: .75em;
vertical-align: super;
}
That will make the icon about 75% of the size of its surrounding text and bump it up a little (you can see examples in this post).
Good luck! Thanks for making your site more accessible!