FLUID-5680: Icon content should be hidden from assistive technologies

Metadata

Source
FLUID-5680
Type
Improvement
Priority
Trivial
Status
Closed
Resolution
Fixed
Assignee
Kaye Mao
Reporter
Kaye Mao
Created
2015-06-09T14:01:24.858-0400
Updated
2016-08-12T07:56:09.518-0400
Versions
  1. 1.4
  2. 1.5
Fixed Versions
  1. 2.0
Component
  1. Prefs Framework
  2. UI Options

Description

Suggestions for fixes as part of the WCAG 2.0 accessibility audit of the UI options tools

  • hide decorative icon characters with the aria-hidden="true" attribute. Ex. <span class="fl-icon-font" aria-hidden="true"></span>.
  • use of characters like “+” in place of icons might confuse AT users as it is interpreted as “plus”.

-solves comment about "Update the labels for the slider images to better describe purpose. Ex instead of “Icon of 3 horizontal lines with narrow space” use, “Narrower spacing between lines”.

Comments

  • Justin Obara commented 2015-06-09T14:28:22.938-0400

    It's probably enough to remove the aria-label, and possibly also adding a role="presentation" if it is still being picked up by the AT.

  • Justin Obara commented 2015-06-12T09:05:15.533-0400

    for the "+" and "-" in the tab for the sliding panel, those values are supplied by the message bundle. It may take some reworking to switch to using an icon for those portions.

  • Kaye Mao commented 2015-08-11T14:47:58.025-0400

    Pull request https://github.com/fluid-project/infusion/pull/620

  • Justin Obara commented 2016-08-12T07:56:09.498-0400

    I believe this may have been reopened by accident instead of being closed.