[a11y] Focusable element containing or child of an element with aria-hidden attribute

[Damien Senger]

I found several interactive elements with an aria-hidden attribute or child of an element with an aria-hidden attribute.

Having an interactive element hidden to users of assistive technology is one of the failure of the success criterion 4.1.2. of the WCAG 2.1.

I understand that the goal of this is to remove the image (redundant link) for users of AT (assistive technologies) but some of these users are sighted and in this case could be disturb by an interactive element not reachable by their tooling system.

Also, the current situation is blocking users of AT from accessing the PDF file.

In our case, I would:

1. Remove the aria-hidden from the link

2. Add an role="presentation" on the SVG icon

3. Indicate an empty alt attribute for the image (it is decorative in this case, the action of this button is described by the next span)

4. Adding a screen-reader only content in the <span class="see-more"> indicating the name of the case study at the end of the current sentence (so a SR would read "Read the Case Study (.pdf) of my redesign of an online assessment tool").

You could apply the same information in the "Read the case study (.pdf)" button in the same block. This copy is lacking context for users of assistive technologies (WCAG 2.1 success criteria 2.4.4 & 2.4.9)

[Damien Senger]

This recommendation also applies to the two arrows on the "They trust me" section.

[stephanie walter]

migrate to https://bitbucket.org/ninja_n_kitten/stef-wp-theme/issues/8/a11y-focusable-element-containing-or-child