Hide dashicons from screen readers

[mercime]

Make dashicons invisible to assistive technologies which can read CSS generated content. For example, when we add dashicon content e.g. \f336 via content: "\f336";, the screen reader will spell it out character by character, "backslash f 3 3 6" if we do not add aria-hidden="true" to the container.

[hnla]

Sigh, another bad case of assistive technology action, personally I don't hugely favour using content property in this way but in this context it's not content but decorative!

I don't think we can use aria hidden in all cases - can we- as we may hide genuine content in the container, if so we need to find a different approach to those dashicons and set them as inner spans and hide those.

On 08/04/2017 01:46, mercime wrote:

Make dashicons invisible to assistive technologies which can read CSS generated content. For example, when we add dashicon content e.g. |\f336| via |content: "\f336";|, the screen reader will spell it out character by character, "backslash f 3 3 6" if we do not |aria-hidden="true"| to the container.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/buddypress/next-template-packs/issues/124, or mute the thread https://github.com/notifications/unsubscribe-auth/AAee200TaEECKCZ9W_UPbO4-xpkVIqX_ks5rttjngaJpZM4M3iV7.

http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=emailclient Virus-free. www.avg.com http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=emailclient

<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

---

This email has been checked for viruses by AVG. http://www.avg.com

[mercime]

find a different approach to those dashicons and set them as inner spans and hide those

That's one solution or hardcode SVG icon and just add aria-hidden="true" in its markup like so <svg aria-hidden="true" role="presentation" ...> which is what I do in custom themes.

However, hardcoded SVG in template pack is not kosher as it will make it harder for themers to change SVG if they wish to. There's an alternative that I recall but haven't used yet. Need to recall book or blog post about that.

Instead of creating new ticket, I will use this one to address other CSS-generated content as well, specifically <span class="select-arrow"></span>. Committing fix to this in a few minutes.

Suspect there may be others, so keeping this open.

[mercime]

My bad, forgot to associate commit to this ticket :(

• Edit: sorry, the package.json just updated along with commit

[hnla]

If you can't find that alternative I think we'll need to just change to using spans for consistency and update the rulesets managing them

[hnla]

Think this is completed?

[mercime]

@hnla looks like it. Thanks.