search

CuBoulder / express_mono

Monolithic Express Profile - contains all bundles
GNU General Public License v2.0
1 stars 2 forks source link

Accessibility issues with icons #807

Open kevincrafts opened 3 years ago

kevincrafts commented 3 years ago

After a meeting with the accessibility team, we discussed some issues they've ran into recently regarding icons. I'll try to explain our previous efforts of making icons accessible, what the current issues are, and some ideas on how to approach these.

Previous Accessibility Efforts

Most icons in Web Express are provided by FontAwesome. We're still using an older version (4.7) of the font, so we've been using recommendations from that version (https://fontawesome.com/v4.7.0/accessibility/).

Our view on adding these icons that they are used for pure decoration and visual styling, except in a few cases like the home icon in the main menu. In places where the icon is used on its own, like the main navigation menu, some text is also provided that will be read by a screen reader.

New Issues

The issues that the accessibility team have ran into are the placement of the icons within their parent element, such as headings and menu items, and what happens when a screen reader reads those elements.

For example, if an icon is placed in a menu item or a heading, the screen reader comes across an empty icon element first rather than reading the first actual letter of the heading or the navigation item.

Possible Solutions

Menu Links

This is what the current link markup looks like:

<li class=""><a href="/atoc/research"><i class="fa fa-fw fa-cubes"></i> <span class="">Research</span></a></li>

One option here would be to swap the positions of the icon and the link text, and use flexbox to display them in the proper order. This should allow a screen reader to read the text first. If the link is set to display as flexbox, the contents can be displayed in reverse order by setting the flex-direction attribute.

Headings

When an icon is added to a block title, it is put inside of the heading tag:

<h2 class="block-title"><i class="exbd-block-icon fa exbd-icon-color-blue exbd-icon-size-increase fa-info-circle" aria-hidden="true" role="presentation"></i><span class="exbd-block-title-text">Web Express Updates</span></h2>

We could look at the same option as the menu links, which would allow the icons to inherit the proper size from the heading, or the icon element can be moved outside of the heading element, but this would require additional css styling for the icon to be displayed properly.

jcsparks commented 3 years ago

Need to take a look at what the pricing model is for the latest version of FontAwesome.