WTF: WCAG Technique Failure – Span Tags as Links

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

Each WCAG criterion includes detailed parameters and requirements for content to successfully meet the criterion.  There may also be very specific examples and scenarios of content that fails the criterion.   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 that is created by adding Javascript to a SPAN tag to create and interactive 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

WCAG Failure 42 covers adding an event handler script to a SPAN tag so that it functions as a link. WCAG Failure 59 covers the use of generic (non-semantic) HTML and then omitting the 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. 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. In short, this is a completely non-accessible element that represents a cascade of WCAG failures.

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>