Is your WordPress website’s navigation accessible? Website accessibility is a growing industry trend, and when you’re evaluating how accessible your website is, navigation is a great place to start.
Navigation is the backbone to your website: can visitors of all abilities, education, and devices find the content they’re looking for and keep track of their location on your website? It’s easier said than done. The Web Content Accessibility Guidelines offers ten criteria to follow for accessible navigation in their WCAG 2.0 guidelines.
In 2016, WordPress mandated that “All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA.” However, this mandate did not apply to custom-built WordPress themes or the more than 40,000 WordPress plug-ins available.
If you have a custom-built WordPress website or utilize a plug-in, it’s important to educate yourself on the WCAG guidelines to ensure for accessible website navigation.
WCAG 2.0 Navigation Criteria:
- Bypass Blocks: Users are able to bypass blocks of content that are repeated on multiple web pages. Repeated blocks of content like navigation links, headers, and ads are often repeated on multiple pages and make it difficult for users with screen readers to reach the main content of a web page. Creating links to skip blocks of repeated material or grouping blocks of repeated material in ways that can be skipped (frame elements, heading elements, list controls, etc.) helps circumvent this.
- Page Titles: Page titles clearly and accurately describe the contents of the page. Descriptive page titles let you know where you are on the website without having to read the whole page. For more information on Title Tags and Accessibility, read our recent Title Tag and Accessibility blog post.
- Focus Order: This requirement ensures that when users navigate sequentially through content, they can do so consistently via the keyboard, such as tabbing through the many form fields of a form in order.
- Link Purpose (In Context): The purpose of each link should be clear to users so they can decide whether they want to follow the link or not. Context should be provided from the text of the link itself or text preceding the link.
- Multiple Ways: There should be more than one way to locate a web page within a set of web pages, making it easy for users to locate content in a way that best meets their needs. For example, having a search mechanism on your website as well as a navigation bar.
- Heading and Labels: Similar to page titles, Headings and Labels must clearly describe the topic or purpose of the content that follows so those using screen readers can easily navigate the page.
- Focus Visible: The keyboard focus indicator must be visible so a keyboard operable user can determine the components on which keyboard operations will interact. One example of a focus indicator is a button that can change color or produce a box shadow that indicates the button is in focus.
- Location: A user can orient himself within your website via links or a breadcrumb trail.
- Link Purpose (Link Only): A mechanism, such as a link description, should make the purpose of a link fully understandable out of context.
- Section Headings: Section Headings are used to organize content, making it easy to understand and navigate.
How to Check if Your WordPress Plug-Ins are Accessible
If you have a WordPress website, chances are you’re using multiple plug-ins to help your website run efficiently.
When the WCAG announcement was made in 2016, WordPress determined the the accessibility of plugins is the responsibility of each plug-in author.
Therefore, it’s imperative that you reach out to the developers of the plug-in directly and ask if their plug-in is WCAG 2.0 accessible. If they are unsure or unresponsive, use the criteria above to determine if you should continue using the plug-in.
For more information on these specific modifications and making your website WCAG 2.1 accessible, be sure to check out the full set of guidelines on W3C’s website.
Need help making your website WCAG 2.1 accessible?
Our team of programmers is passionate about making your website accessible to all.
Give us a call today at 518-743-9424 or contact us online to get the conversation started!