Font Awesome icons cause screen reader weirdness

Bug #1484781 reported by Jono Mingard on 2015-08-14
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Medium
Jen Zajac
15.10
Medium
Jen Zajac
16.04
Medium
Unassigned

Bug Description

With the new Font Awesome icons in Mahara 15.10, the JAWS screen reader reads each icon as "Unknown character". This also messes up link order when using JAWS' "List links" feature.

Since the icons use the :before CSS pseudo-element, I suspect this is unfixable (and a problem with JAWS), but it's worth looking into whether there is a solution which allows Font Awesome icons to be used but doesn't compromise screen reader accessibility. It's also worth testing with NVDA to see if the same problem exists.

Affects latest master

Hi Jen,

Could you please check if there is anything that can be done here?

Thanks
Kristina

Changed in mahara:
assignee: nobody → Jen Zajac (jen-s)

Jono, can you please confirm on what specific icons the problem occurs?

From Julius:

Hello, Kristina.

In Dashboard, particularly the following links: Settings, Create, Share, Engage

I tested it again today and found that this is a screen reader-specific issue. I encountered it when using JAWS, but I do not encounter it when using NVDA.

Julius

Jen Zajac (jen-s) wrote :

My pet theory about the specific circumstances that cause an issue are that any icons that are within an 'a' (link) tag have this problem, but there must be more to it as there are more icons within links on the Dashboard than Julius mentions.

We could add aria=hidden to all of these elements but I think there is a bit of maintenance burden there as we'd have to make sure to keep that consistent going forwards.

Julius, do you have a feeling about the relative severity of this issue? The fact that it messed up the link list ability is definitely not good.

Jen Zajac (jen-s) wrote :

Having done some further reading, according to the spec (http://www.w3.org/TR/wai-aria/roles#textalternativecomputation point 3) JAWS is actually doing the right thing here. Font awesome claims to be screen reader accessible, but it appears this accessibility is based on screen readers not rendering text ::pseudo elements, which practically has been true for a while but isn't what the spec dictates (and isn't what JAWS is now doing).

Adding role=presentation or aria=hidden (or both) might be the only way to consistently alleviate the issue (see http://john.foliot.ca/aria-hidden/) for a discussion of which of those would be appropriate.

Jen Zajac (jen-s) wrote :

I'm also investigating if we can do:

@media reader, speech, aural {
    .icon-user:before {
        content: none;
    }
}

Julius Serrano (julius-f) wrote :

Hi Jen.

I would rate this issue as medium (low, medium, high).

Although it affects the link list feature of a specific screen reader (JAWS), all screen readers are still able to read the link texts and users are still able to understand the purpose of the links.

Changed in mahara:
importance: Undecided → Medium
status: New → Confirmed
milestone: none → 15.10.0
Robert Lyon (robertl-9) wrote :

The fix gone for in the patch is to add:
   role="presentation"

to the places where a font-awesome icon is displayed

But on https://github.com/FortAwesome/Font-Awesome/issues/6133 it talks about using:
   aria-hidden="true"

Seen as the role="presentation" does not seem to be working in JAWS we should try aria-hidden="true" to see if that make a difference

Reviewed: https://reviews.mahara.org/5633
Committed: https://git.mahara.org/mahara/mahara/commit/5a7040aeda1c8ad2596f14cee79433fc9aabc1fa
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 5a7040aeda1c8ad2596f14cee79433fc9aabc1fa
Author: Liam Sharpe <email address hidden>
Date: Wed Oct 28 12:17:38 2015 +1300

Added role=presentation to all icons - Bug #1484781

behatnotneeded

Change-Id: I536f7d4ab8bd96d653e0ae3bba635437f0d2c17c

Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/5822
Committed: https://git.mahara.org/mahara/mahara/commit/4ac89c31a719a9f63be6555c4d1a094fd2b09d0e
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 4ac89c31a719a9f63be6555c4d1a094fd2b09d0e
Author: Liam Sharpe <email address hidden>
Date: Mon Dec 7 16:04:48 2015 +1300

Bug 1484781: Added aria-hidden=true to all icons

behatnotneeded

Change-Id: I39faf88ac8932891a704868f5282a5794ae1387d

Mahara Bot (dev-mahara) wrote :

Patch for "15.10_STABLE" branch: https://reviews.mahara.org/5855

Mahara Bot (dev-mahara) wrote :

Patch for "master" branch: https://reviews.mahara.org/5918

Reviewed: https://reviews.mahara.org/5855
Committed: https://git.mahara.org/mahara/mahara/commit/106c06129fdda986af11543c039fd20d9f9d1648
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.10_STABLE

commit 106c06129fdda986af11543c039fd20d9f9d1648
Author: Liam Sharpe <email address hidden>
Date: Wed Oct 28 12:17:38 2015 +1300

Added role=presentation to all icons - Bug #1484781

behatnotneeded

Change-Id: I536f7d4ab8bd96d653e0ae3bba635437f0d2c17c

Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/5856
Committed: https://git.mahara.org/mahara/mahara/commit/a611604000b867fcfc895dcf9af48ebf7115aa74
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.10_STABLE

commit a611604000b867fcfc895dcf9af48ebf7115aa74
Author: Liam Sharpe <email address hidden>
Date: Mon Dec 7 16:04:48 2015 +1300

Bug 1484781: Added aria-hidden=true to all icons

behatnotneeded

Change-Id: I39faf88ac8932891a704868f5282a5794ae1387d

Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/5918
Committed: https://git.mahara.org/mahara/mahara/commit/7876fec623d56985feabdc9a99c9e3e528a891d6
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 7876fec623d56985feabdc9a99c9e3e528a891d6
Author: Liam Sharpe <email address hidden>
Date: Mon Dec 7 16:04:48 2015 +1300

Bug 1484781: Added aria-hidden=true to all icons

behatnotneeded

Change-Id: I01dc196e0c9931d5cb4be926e7d3c8ce17e06546

Reviewed: https://reviews.mahara.org/6187
Committed: https://git.mahara.org/mahara/mahara/commit/24a27e88117cbc866632bff597d3b7c8e30e29f3
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.10_STABLE

commit 24a27e88117cbc866632bff597d3b7c8e30e29f3
Author: Liam Sharpe <email address hidden>
Date: Mon Dec 7 16:04:48 2015 +1300

Bug 1484781: Added aria-hidden=true to all icons

behatnotneeded

Change-Id: I01dc196e0c9931d5cb4be926e7d3c8ce17e06546

Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers