Make Front of House Icons and Tables Accessible #4215

[StephDriver]

closes #4215
closes #4055

[StephDriver]

I categorised icons according to the below by inserting a comment above each icon - which I then removed before finalising the PR, so those comments can be found in the commit history to track the 'why' of each change.

Icon Categories

We use both decorative and semantic icons in the Front of House. In every case, icons are inserted using the syntax: <i aria-hidden="true" class="fa fa-icon-name"></i>. Where these are decorative, that is all that is required. Where the icon is being used to indicate a date, then the date which follows should be able to be programatically determined by using the <time> tag. The final category are semantic icons, where a non-visual alternative is required, and this is coded using the <span class="sr-only">text alternative </span> syntax.

Icons should not be included in any other way unless no fa version exists.
known exceptions:

• ORCID logo (inserted as image).
• X logo (a hidden span with unicode).
• unicode × (×) used for close buttons

Decorative

these icons are purely decorative, and should include aria-hidden="true"

<i aria-hidden="true" class="fa fa-search"></i>

Semantic

these icons should be aria-hidden=true as with decorative, but have adjacent <span class="sr-only"> text alternative</span>. Note, the sr-only span may be a few lines before or after the icon, depending only on where it make the most sense if read aloud in the context of other content.

<span class="sr-only">{% trans 'Externally hosted article:' %} </span>
{{ article.title|safe }}&nbsp;
<i aria-hidden="true" class="fa fa-external-link small-icon-text"></i>

or

<i aria-hidden="true" class="fa fa-play" ></i>
<span class="sr-only">{% trans 'Play' %}</span>

Special Cases

Date

These icons are used to indicate a date, and should be marked as decorative with the date itself marked up with the <time> html tag. Note that the <time> tag is not yet supported by WAI-ARIA but is recommended for future proofing. Screen reader support is variable, and from manual testing, the internal <span role="time"> was found to be needed to prevent some screen-readers from reading out the date twice. This is therefore the format to be used:

<i aria-hidden="true" class="fa fa-calendar"></i>
<time datetime="{{ article.date_published|date:"Y-m-d" }}">
    <span role="time">{{ article.date_published|date:"Y-m-d" }}</span>
</time>

Email (within a loop)

These icons are semantic, however as many of our email icons are as part of 'email author' links where a loop is used because there could be more than one author. In order to meet WCAG 2.4.4 these sr-only spans need to include the author name so as not to create multiple indistinguishable 'email author' links. A similar approach should be taken for any other semantic icons used with logic loops which could output multiple copies.

<a itemprop="email" href="mailto:{{ author.email }}" >
    <i aria-hidden="true" class="fa fa-envelope email-link" ></i>
    <span class="sr-only">{% trans 'Email' %} {{ author.full_name }}.</span>
</a>

ORCID logo as a link to an author's ORCID profile

Handle as Semantic Icons. These are not strictly icons, as it is included as a local .png. However, as with author emails, it is important to make the text alternative for these links unique, by including the author's name. Note, when testing with VoiceOver, using an aria-label on the <a> tag did not work well, as it ended up with the ORCID numbers being included in the link description that was read aloud.

<a href="https://orcid.org/{{ author.orcid }}">
    <span aria-hidden="true" 
        style="background: url(https://orcid.org/sites/default/files/images/orcid_16x16.png) no-repeat;" 
        class="orcid-img">
    </span>
    <span class="sr-only">{{author.full_name}} {% trans 'ORCID profile.' %}</span>
</a>

or

<a href="https://orcid.org/{{ author.orcid }}" class="">
    <img src="https://orcid.org/sites/default/files/images/orcid_16x16.png" alt="">
    <span class="sr-only">{{author.full_name}} {% trans 'ORCID profile.' %}</span>
</a>

X

Our icon set doesn't include the X logo. But the unicode 𝕏 (𝕏) looks identical, so we have used that. Note the span that includes the X needs to be aria-hidden=true .

<span aria-hidden="true"> &#120143;</span>
<span class="sr-only">{% trans 'Share on X' %}</span>

× for close

We have used the unicode × on close buttons in many places. This is already accessibly marked up, so has been not been changed during this update.

<button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
</button>

[StephDriver]

Testing

Results

Theme	Template	Tested
Clean	core/homepage_elements/search_bar.html	✅
Clean	core/news/item.html	✅
Clean	elements/article_listing.html	✅
Clean	elements/journal/editorial_social_content.html	✅
Clean	elements/journal/issue_sidebar.html	✅
Clean	elements/preprint_block.html	passed on sight
Clean	elements/public_reviews.html	passed on sight
Clean	elements/sections_block.html	✅
Clean	journal/article.html	✅
Clean	journal/homepage_elements/carousel.html	✅
Clean	journal/print.html	no styling on page, remove this.
Clean	press/core/news/item.html	passed on sight
Clean	press/nav.html	✅
Material	core/homepage_elements/search_bar.html	✅
Material	core/nav.html	✅
Material	core/news/item.html	✅
Material	elements/article_listing.html	✅
Material	elements/journal/issue_list.html	✅
Material	elements/journal/issue_sidebar.html	✅
Material	elements/license_block.html	✅
Material	elements/nav_element.html	not used
Material	elements/pagination.html	✅
Material	elements/preprint_block.html	passed on sight
Material	elements/public_reviews.html	passed on sight
Material	elements/sections_display.html	✅
Material	journal/article.html	✅
Material	preprints/article.html	not used
Material	preprints/editors.html	passed on sight
Material	preprints/list.html	deprecated
Material	press/core/news/item.html	passed on sight
Material	press/nav.html	✅
Material	repository/home.html	✅
Material	repository/list.html	✅
Material	repository/nav.html	✅
Material	repository/preprint.html	✅
OLH	core/base.html	✅
OLH	core/homepage_elements/search_bar.html	✅
OLH	core/nav.html	✅
OLH	core/news/item.html	✅
OLH	elements/journal/box_article.html	✅
OLH	elements/journal/editorial_social_content.html	✅
OLH	elements/journal/issue_sidebar.html	✅
OLH	elements/journal/preprint_article_listing.html	not used
OLH	elements/public_reviews.html	passed on sight
OLH	elements/section_block.html	✅
OLH	elements/submit/author.html	not used
OLH	journal/article.html	✅
OLH	journal/print.html	no styling on page, remove this.
OLH	press/core/news/item.html	passed on sight
OLH	repository/elements/preprint_home_listing.html	✅
OLH	repository/home.html	✅
OLH	repository/list.html	✅
OLH	repository/preprint.html	✅

Notes

• "passed on sight" are items where code was reviewed by @ajrbyers
• ✅ passed a manual review of the page
• "not used" / "deprecated" are templates no longer in use
• "no styling on page" refers to two templates were icons shouldn't be used anyway, these were then removed.