Create: Skip to Recipe Accessibility For Screen Readers is Live!

man using a computer in his kitchen.

Mediavine recently launched an awesome feature in the latest version of Create (1.6.7), and while most publishers may not have noticed it, we promise you’ll appreciate it.

We’ve added what we’re calling Skip to Recipe and Skip to Instructions support for screen readers.

In terms more commonly used in the accessibility world, we added an additional skip link, or bypass block, to take readers straight to the recipe.

In all likelihood, only visually impaired readers will enable the screen reader, but making sites accessible to all readers is increasingly important on today’s web.

Leif Lessons

  • The latest version of Create, 1.6.7, features Skip to Recipe and Skip to Instructions accessibility support for screen readers.
  • Since up to 4% of the planet may rely on screen readers to browse the internet, making your website accessible is crucial for user experience.
  • Beginning with Create 1.6.7, Mediavine automatically adds a Skip to Recipe or Skip to Instructions link alongside the link to the content.
  • If you do not have a screen reader enabled, your content remains unchanged and these links do not appear.
  • If you want to offer the traditional Jump to Recipe or Instructions experience to the rest of your readers, you will still need to add the button manually.

Why is Accessibility so Important?

Despite the recent Gil. v. Winn Dixie ruling, accessibility for visually impaired readers is still extremely important. 

Over 250 million people are visually impaired worldwide, or 3-4 percent of the planet. If you don’t make your website accessible to those individuals, it becomes virtually unusable to a larger segment of the population than you might think.

We always recommend publishers try enabling the screen reader that’s built in to your operating system. (They’re generally under system settings). 

Try browsing your own site and getting to your recipe / how-to card. Then imagine having to experience the entire web that way. 

Chances are without features like we’ve just described — and launched across the Mediavine community — it’s an absolutely terrible experience.

The screen reader literally reads the screen — as in every link and piece of content on it — in order to help readers find the section of content they want. 

What you may think of as quick scrolling becomes a nearly impossible journey for the visually impaired.

Enter our version of the bypass block, or skip links.

What is a Bypass Block? Do I Need One?

A bypass block is a pattern used to solve for large blocks of text or navigation that readers will want to bypass or skip past. It’s part of what’s known as WCAG Level 2 A, or what the W3C considers the minimum for making your site more accessible.

One of the most notable proposed solutions by the W3C is to insert a link at the top of the page that links directly to your content.

If you’re running Trellis, well, we’ve got you covered.

Trellis adds this link to your main content automatically for you. Trellis is built with page speed, SEO, advertising best practices and accessibility in mind.

What About Skip-to-Recipe Accessibility?

Readers who want to skip directly to the recipe, or how-to instructions, are something we’re all familiar with. Visual impairment or not, this is a popular feature.

Now, beginning with Create 1.6.7, Mediavine automatically adds this link directly to the recipe or instructions card alongside the link to the content.

screenshot of mediavine create feature for accessibility.
The screen reader provides a button in the top left of the browser to help the user quickly find the content.

The W3C also encourages publishers to link to multiple sections and not just the main content. For example, it suggests providing a jump directly to the navigation, content, footer, etc. 

When you have a website such as a food blog, an arts and crafts guide, etc, you can naturally see where these links could be just as important.

What is the User Experience Like?

The nice thing is, if you don’t have a screen reader enabled, this button will be hidden and the user experience will remain unchanged.

As we mentioned earlier, you can “see” what this looks like if you enable the screen reader function of your operating system. 

With a screen reader enabled, it adds a “Skip to Recipe” or “Skip to Instructions” button to the top left corner of the page that the screen reader will read to the user immediately.

This makes for strong accessibility and makes it very easy for users with visual impairments to bypass all your navigation and any content they want to.

Bottom line: Readers who need this feature can be cooking or crafting within seconds rather than minutes — or growing impatient and giving up altogether. 

It’s a much, much better experience.

Is this Feature SEO Friendly?

We would never lead you astray in this regard. 

Google hasn’t directly discussed accessibility and its impact on SEO, but we’re confident that when following best practices, an accessible site is also an SEO-friendly one.

In fact, most of the accepted best practices when it comes to accessibility are also listed or recommended as SEO best practices by Google itself.

Much of our SEO guidance — like using alt text for images or increasing font size — helps you attain accessibility goals as well, according to Google’s direct advice.

It’s a safe bet that making your site more accessible will help with SEO as well. If you need more evidence, Google uses this bypass block / skip links in Google Search itself.

Again, while the impact of a bypass block is never directly stated by Google, it is embraced by the W3C and Google itself. You can be confident that it adheres to SEO best practices.

Should I Still use a Jump to Recipe / How-To button?

A quick reminder of what we’re talking about here: The Skip to Recipe and Skip to Instructions links only appear for users with a screen reader enabled. 

If you want to offer the traditional Jump to Recipe or Instructions experience to the rest of your readers, you will still need to add the button.

Jump to Recipe can provide a terrific (and popular) user experience for readers who want to skip past your content, as we said earlier.

Just remember that this feature, should you choose to provide it, must be handled separately for the visually impaired vs. the majority of your readers.

With Create, Mediavine proudly offers the first recipe card to solve for both. 

Now, publishers can be accessibility compliant, provide a better experience for all readers, and maximize their ad earnings thanks to technology like our arrival unit.

Related Posts

Mediavine is written in white on a teal background Thank You, Amber Bracegirdle: Reflections on a Decade of Impact

Thank You, Amber Bracegirdle: Reflections on a Decade of Impact

2 min read
eric hochberger

Over 20 years in business, Mediavine has been an independent publisher and the voice of thousands of independent publishers. Forging a path of innovation within digital publishing and advertising, Mediavine …

Read More