Problem:
ChromeVox reads a bunch of gibberish for the mobile search link magnifying glass icon.

level A WCAG failure, SC 1.1.1 non text content

resolution:

provide a text alternative for the icon, make sure it's translatable

Use something like this:

<a href="/search">
  <span class="search-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Search</pan>
</a>
CommentFileSizeAuthor
#6 interdiff_2942496-2-6.txt830 bytesEli-T
#6 2942406_6_fix_pan.patch879 bytesEli-T
#2 2942406-2.patch878 bytesmarkconroy
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

andrewmacpherson created an issue. See original summary.

markconroy’s picture

markconroy CreditAttribution: markconroy at Annertech commented
Status: Active » Needs review
FileSize
2942406-2.patch878 bytes

Hi Andrew,

I'm not sure if I have the reworked html from the search block twig file correct, but here's a first attempt at a patch. I put the icon svg inside the span that has the aria-hidden attribute.

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented

That's the right approach. I'm reading the patch on a phone, will try it tomorrow, should only takes a few minutes.

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented
Status: Needs review » Reviewed & tested by the community

Perfect. Tested the patch, inspected the markup, tried it in a screen reader.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott at Thunder commented
Status: Reviewed & tested by the community » Needs work 
+++ b/core/profiles/demo_umami/themes/umami/templates/components/search/block--search-form-block.html.twig
@@ -36,7 +36,8 @@
+    <span class="visually-hidden">{{ 'Search'|t }}</pan>

/pan? I guess the browser was doing something clever and auto-fixing the html.

Eli-T’s picture

Eli-T
he/him
Primary language English
Location Manchester
CreditAttribution: Eli-T commented
Status: Needs work » Needs review
FileSize
2942406_6_fix_pan.patch879 bytes
interdiff_2942496-2-6.txt830 bytes

Fix incorrect closing tag noted in #5

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commented
Status: Needs review » Reviewed & tested by the community

Good catch. I compared both patches. When you view the HTML in firefox dev tools, it shows a closing /span and that mistake isn't clear.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott at Thunder commented
Status: Reviewed & tested by the community » Fixed

Committed 3c43071 and pushed to 8.6.x. Thanks!

  • alexpott committed 3c43071 on 8.6.x 
    Issue #2942406 by Eli-T, markconroy, andrewmacpherson: Text alternative...

  • alexpott committed 1dfe994 on 8.5.x 
    Issue #2942406 by Eli-T, markconroy, andrewmacpherson: Text alternative...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.