Font Awesome icons cause screen reader weirdness

Hi Jen,

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

Thanks
Kristina

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

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.

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.

I'm also investigating if we can do:

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

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.

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

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

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

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

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

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

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

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

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

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