Icon A11y improvements

[StephDriver]

Icons are not being handled accessibly.

Icons are non-text content as per WCAG 1.1.1. The key technique is H86 They must also be semantically identified, as per ARIA24 Technique.

Most of our icons come from Font Awesome, but there are a few others, such as the ORCiD logo, that need individual handling.

For Font Awesome:

• [x] consider implementing Font Awesome's auto accessibility feature
• [ ] if not using auto accessibility then update manually (syntax further down that same page). For each icon:
  • consider whether it is decorative or semantic
  • update icon syntax accordingly.
• [ ] update ORCiD logos to be accessible.
• [x] share icons have already been updated in #3936

[StephDriver]

from #4194

• Sample 1, item 9. The icon after author's name is not identified, simply 'link' <a itemprop="email" href="[redacted]" class="fa fa-envelope email-link"></a>
• Sample 2, item 21. The 'eye' icon next to views has no description at all, found by voice over, but has no description to give. <i class="fa fa-eye"></i>
• Sample 2, item 22. likewise, the 'download' icon. <i class="fa fa-download"></i>
• Sample 2, item 59. envelope icon following first author is missing alt text, such that is is read simply as 'link' with no description at all. <a itemprop="email" href="mailto:[redacted]" class="fa fa-envelope email-link"></a>
• Sample 2, item 74. <i class="fa fa-check-circle-o" style="color: green"></i> no alt for the icon, but also not marked as decorative.
• Sample 5.1, item 14. the icons for calendar and book that adorn the article details have no description, but are also not marked as decorative, so they can be navigated to and then give silence.
• Sample 5.2, item 11. article date and volume icons are focusable without having any description
• Sample 5.3, item 20. date and volume icons are focusable but not described.

[StephDriver]

@StephDriver to find a list of all icons we actually use.

[StephDriver]

A search of the codebase showed up 126 icons, which I have grouped below as some are variations on each other.

1. fa-align-justify
2. fa-angle-right
3. fa-arrow-circle-down
   1. fa-arrow-circle-o-left
   2. fa-arrow-circle-o-right
   3. fa-arrow-circle-right
   4. fa-arrow-down
   5. fa-arrow-left
   6. fa-arrow-right
   7. fa-arrow-up
4. fa-arrows
5. fa-backward
6. fa-binoculars
7. fa-book
8. fa-calendar
   1. fa-calendar-check-o
9. fa-caret-down
10. fa-chain-broken
11. fa-check
    1. fa-check-circle
    2. fa-check-circle-o
    3. fa-check-square
12. fa-chevron-circle-down
    1. fa-chevron-circle-right
13. fa-circle
    1. fa-circle-o
    2. fa-circle-o-notch
14. fa-clipboard
15. fa-clock-o
16. fa-close
17. fa-cloud-upload
18. fa-code-fork
19. fa-cog
20. fa-cogs
21. fa-comment
    1. fa-comment-o
    2. fa-commenting
    3. fa-comments
22. fa-creative-commons
23. fa-dashboard
24. fa-download
25. fa-edit
26. fa-envelope
    1. fa-envelope-o
27. fa-exchange
28. fa-exclamation-circle
    1. fa-exclamation-triangle
29. fa-external-link
30. fa-eye
31. fa-facebook
    1. fa-facebook-square
32. fa-fast-forward
33. fa-file
    1. fa-file-archive-o
    2. fa-file-o
    3. fa-file-pdf-o
    4. fa-file-text
    5. fa-file-text-o
34. fa-files-o
35. fa-filter
36. fa-folder-open
    1. fa-folder-open-o
37. fa-gavel
38. fa-github-square
39. fa-globe
40. fa-google-plus
41. fa-history
42. fa-image
43. fa-inbox
44. fa-info
    1. fa-info-circle
45. fa-keyboard-o
46. fa-linkedin
    1. fa-linkedin-square
47. fa-list-ol
48. fa-lock
49. fa-minus
    1. fa-minus-circle
50. fa-money
51. fa-object-group
52. fa-paperclip
53. fa-pause
54. fa-pencil
    1. fa-pencil-square
55. fa-play
56. fa-plug
57. fa-plus
    1. fa-plus-circle
    2. fa-plus-square
58. fa-print
59. fa-quote-left
60. fa-recycle
61. fa-reddit
62. fa-refresh
63. fa-repeat
64. fa-retweet
65. fa-save
66. fa-search
67. fa-send-o
68. fa-server
69. fa-share-square-o
70. fa-sign-in
71. fa-sort
    1. fa-sort-amount-asc
    2. fa-sort-amount-desc
72. fa-spin
73. fa-star
74. fa-step-forward
75. fa-sticky-note
76. fa-tachometer
77. fa-tags
78. fa-thumb-tack
79. fa-times
    1. fa-times-circle
    2. fa-times-circle-o
80. fa-trash
81. fa-trophy
82. fa-twitter
    1. fa-twitter-square
83. fa-undo
84. fa-upload
85. fa-user
    1. fa-user-plus
86. fa-users
87. fa-warning
88. fa-wikipedia-w

[StephDriver]

I can't find all of these icons, but here's an attempt to show them (NB icons are in black, so this needs to be viewed in lightmode)

I suspect we are using multiple icons for similar purposes in different places.

Icon Groups

Arrows

Icon Name	Icon Symbol
angle-right
arrow-circle-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-right
arrow-down
arrow-left
arrow-right
arrow-up
arrows
caret-down
chevron-circle-down
chevron-circle-right

Brand / Share

Icon Name	Icon Symbol
creative-commons
envelope
external-link
facebook
facebook-square
github-square
globe
google-plus
linkedin
linkedin-square
reddit
retweet
send-o
share-square-o
twitter
twitter-square
wikipedia-w

Comments

Icon Name	Icon Symbol
comment
comment-o
commenting
comments

File Actions

Icon Name	Icon Symbol
calendar
cloud-upload
download
edit
eye
file
file-archive-o
file-o
file-pdf-o
file-text
file-text-o
files-o
folder-open
gavel
history
image
lock
minus
minus-circle
object-group
paperclip
pencil
pencil-square
plus
plus-circle
plus-square
print
recycle
refresh
save
sort
sort-amount-asc
sort-amount-desc
star
sticky-note
tags
trash
upload

Information

Icon Name	Icon Symbol
book
exclamation-circle
exclamation-triangle
info
info-circle
plug
trophy
warning

Media

Icon Name	Icon Symbol
backward
fast-forward
pause
play
repeat
step-forward

Search

Icon Name	Icon Symbol
binoculars
filter
search

Text Editor

Icon Name	Icon Symbol
align-justify
clipboard
list-ol
quote-left
undo

Users

Icon Name	Icon Symbol
cog
cogs
inbox
sign-in
user
user-plus
users

Yes / No (confirmation / cancel etc)

Icon Name	Icon Symbol
check
check-circle
check-circle-o
check-square
times
times-circle
times-circle-o

Unknown

Icon Name	Icon Symbol
chain-broken
calendar-check-o
circle
circle-o
circle-o-notch
clock-o
close
code-fork
dashboard
envelope-o
exchange
folder-open-o
keyboard-o
money
server
spin
tachometer
thumb-tack

[StephDriver]

backlog refinement

• systematising and fixing is a big piece of work, and should link into the new design system and is beyond scope of the original issue here.

This issue needs to scale back in order to meet the WCAG target - so just marking as decorative/ adding aria labels so that the icons currently in use are accessible, and making notes of the process for future work on the design system.

Prioritise typesetting.