WTF: WCAG Technique Failure – Span Tags as Links

Is your theme code made up of “div soup” instead of semantic HTML? Semantic HTML is better for SEO/AEO and accessibility.

In this article, we’ll look at failures for WCAG 2.1.1 – Keyboard and WCAG 4.1.2 – Name, Role, Value related to the Divi theme’s Back To Top link. Instead of semantic HTML, Divi adds JavaScript to a SPAN tag to create the element.

WCAG 2.1.1. Keyboard

The purpose of this criterion is to make sure that interactive elements are operable by keyboard-only users. To meet this criterion as it relates to links, a keyboard user should be able to use their TAB key to focus on the element and then use their ENTER key to activate (click) the link.

WCAG 4.1.2 Name, Role, Value

The purpose of this criterion is to ensure elements are coded properly so that they work with as many assistive technologies as possible. To meet this criterion as it relates to links, either the link needs to be coded using semantic HTML (<a> tag with href) or role=”link” needs to be added to the element that is functioning like a link.

WCAG Failures

An interactive element fails WCAG when a JavaScript event handler is added to a SPAN tag so that it functions as a link. An element will fail WCAG when it is coded using generic (non-semantic) HTML without a role attribute that tells assistive technology users how that element is being used.

By default, Divi themes include the following code for their Back to Top link:

<span class="et_pb_scroll_top et-pb-icon et-visible"></span>

Clicking this link moves the user to the top of the page. However, instead of using semantic HTML, they use a SPAN tag and JavaScript. This is a completely non-accessible element that represents a cascade of WCAG failures.

• There is no role attribute to indicate that this code functions as a link.
• Because SPAN tags do not typically gain focus the way semantic links do, keyboard users cannot access this element and screen reader users do not hear this element in the list of links available on the page.
• There is no accessible name for this element that tells users the purpose of this element.

Fix Divi A11y Version 1.3 – Back to Top Link

In version 1.3 of the Fix Divi A11y plugin, we’ve included an accessible version of the Back to Top link that uses semantic HTML and includes an ARIA Label.

<a href="#main-content" id="scroll-top" class="fixdivi_et_pb_scroll_top et-pb-icon" aria-label="move to the top of the main content"></a>

The WTF: WCAG Technique Failure article series highlights real-world examples of failures for specific WCAG criteria.