A11y Audit - Screen Reader Testing

[StephDriver]

Context

Manual Testing of a sample of pages for screen reader capacity. This is for functionality, not user experience. The aim is to identify 'low hanging fruit' issues which can be addressed before future more exhaustive testing including direct user feedback.

Testing is non-exhaustive.

[edit] It was going to include multiple OS and browsers, and several different journals, with the first tests on iOS Voiceover on Safari because that's the one I know the best so I am more likely to catch such issues and reduces lead time on training on a new system. Early results from this after 2 sample articles show that the many of the errors identified are then clearly visible in the code. They are not 'I wonder how a different screen reader would handle this' but rather 'this heading should be an H5 instead of an H4' which would affect all users/screenreader softwares. So this exercise has been revised: it will be a representative sampling just with iOS Voiceover, then after the identified issues have been addressed, we will have another go at the original plan for testing with multiple different screen readers, browsers etc.

Approach

• test some pages manually
• collate findings
• define issues arising
• place issues in https://github.com/BirkbeckCTP/janeway/milestone/38 or or later phases (e.g. for user content issues)
• cross link issues back to these results
• discuss with development team.

[StephDriver]

Sample 1 - Article OLH Theme but with article for download only.

using iOS Safari and Voiceover

traversing from top to bottom of page.

1. ✅ Journal banner image is read out correctly as the name of journal and identified as a landmark
2. ❌ OLH Theme Navigation fixes #4225
   hamburger menu is incorrectly identified as "9711 link". Menu can be entered, which opens up the drop down options but the next tab is to the search icon (magnifying glass) and not into the dropdown.
3. ❌ Contextual link fixes arising from a11y audit #4221
   Search icon is not identified simply read as 'link'
4. ✅ When Search icon has been activated, then the next is correctly identified as 'search field'
5. ❌ tiny readability fixes arising from a11y audit #4214
   Research Articles is identified as Main and Landmark, [should this be singular not plural?] but not as any kind of heading.
6. ❌ Improve page structure #4232
   The article name is correctly read out but as a heading level 2. There has been no heading level 1 before this.
7. ❌ Improve page structure #4232
   Author is not a heading of any kind.
8. ✅ Author's name and affiliation is correctly read.
9. ❌ Icon A11y improvements #4215
   The icon after author's name is not identified, simply 'link' <a itemprop="email" href="[redacted]" class="fa fa-envelope email-link"></a>
10. ❌ OLH Theme Navigation fixes #4225
    "button" read next (hamburger menu below author line). no identity. Can be activated but next tab is to the word 'options' which has not been related to the button.
11. ✅ Screenreader issues within the options menu itself have recently been addressed in issue menu item missing a text alternative #3936.
12. ✅ Abstract is identified as Heading level 3, which follows correctly from the article title being an H2 (see above for article title heading issue).
13. ❌ Improve page structure #4232
    Keywords has no structure - should be a heading, probably an h4
14. ❌ Improve page structure #4232
    Likewise, how to cite, has no structure, and probably should be an h4
15. ❌ Contextual link fixes arising from a11y audit #4221
    the doi link should be contextual not exposed.
16. ❌ Improve page structure #4232
    Downloads has no structure - should be a heading, probably an h3.
17. ✅ known structural issues with metrics have just been addressed in metrics using headings without content #3912
18. ✅ Creative Commons attribution is correctly read out, with full details and is a link to more.
19. ❌ Improve page structure #4232
    Download, Heading Level 3. This seems to be correct structure, but is a repeat of the earlier "downloads" section (see above)
20. ✅ Issue, heading level 3. This is correct structure
21. ❌ Typography alone should not be used to delineate list items #4211
    issue details are read out as "volume 10 bullet issue 1 bullet 2023" which is confusing - make the 'bullets' decorative? <a href="/issue/910/info/">Volume 10 • Issue 1 • 2023</a>
22. ✅ identifiers, heading level 3, this is correct structure
23. ❌ Contextual link fixes arising from a11y audit #4221
    doi should be a contextual link.
24. ❌ Update missing image descriptions identified during front end audit #4217
    "Janeway logo final" is read as the title of the logo at hte bottom. The 'final' is unhelpful. <title>Janeway-Logo-Final</title>
25. ❌ Typography alone should not be used to delineate list items #4211
    "vertical line ISSN: 2053 1915 vertical line published by" - confusing, make 'vertical lines' decorative. If the dash is important for the ISSN then this needs to be forced to read out rather than ignored as punctuation (depending on punctuation settings of user).
26. ✅ University of Wales press is correctly identified as a link
27. ❌ Typography alone should not be used to delineate list items #4211
    "vertical line" - make this decorative.

Safari on Mac

These are only notes problems not already described.

28. ❌ Improve page structure #4232
    unhelpful use of landmarks (banner, main, Favourite Space Pictures region, content information) of which banner and main are the only two that are helpful - content information takes you to the janeway logo at the bottom of the page.

[StephDriver]

Sample 2 - Article in Material Theme

using iOS with Safari and Voiceover

traversing from top of page to bottom

1. ❌ User Content
   "Glossa al of general linguistics, link, image, navigation, landmark"
2. ❌ Material Theme Navigation Fixes #4226
   home, link, list start - but nothing visible on the page and is a duplicate of the link above.
3. ❌ Material Theme Navigation Fixes #4226
   Visually, at phone screen width there is a hamburger menu, but to the screen reader, no such thing exists, but instead the whole uncollapsed menu is read out despite being hidden. These menu items are not identified as a menu or as navigation.
4. ❌ Material Theme Navigation Fixes #4226
   items in the menu (articles, submissions, journal policies, about) are read followed by "arrow underscore drop underscore down" and identified as links. <i class="material-icons right">arrow_drop_down</i>
5. ✅ Search, link
6. ✅ Login, link
7. ✅ Register, link, list end
8. ❌ Material Theme Navigation Fixes #4226
   "Menu, link, end, navigation, end, banner". This is the hamburger menu, and when activated the menu does pop up, but you can't navigate the list, as you already have - what pops up visually is the list that I've just described above, but it has already been navigated, when advancing one reaches the article title instead. Further, there is no way now to dismiss this menu without refreshing the whole page, activating the menu link again does nothing.
9. ❌ Improve page structure #4232
   Article title is read out correctly but identified as an image - so is the alt for the image, then when moving on, one gets "Research Article" followed by the title again (!) none of which is identified as a heading (should be H1).
10. ❌ Improve page structure #4232
    There is no heading level 1 at all.
11. ✅ abstract, heading level 2
12. ✅ paragraph text is fine, until...
13. ❌ Greek letters as symbols a11y update #4238
    <i>ɛna</i> which has been put in like that, with the symbol, and so voiceover reads it as 'na' unable to parse the epsilon.
14. ✅ Keywords, heading level 2
15. ✅ How to cite, heading level 2
16. ❌ Contextual link fixes arising from a11y audit #4221
    doi link should be contextual
17. ✅ Download, heading level 2
18. ✅ Download PDF, link
19. ✅ Download XML, link
20. ✅ known structural issues with metrics have just been addressed in metrics using headings without content #3912
21. ❌ Icon A11y improvements #4215
    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>
22. ❌ Icon A11y improvements #4215
    likewise, the 'download' icon. <i class="fa fa-download"></i>
23. ❌ Improve page structure #4232
    One Introduction, heading level 2 - This puts the article start on the same heading level as the metadata above it. Structurally this doesn't make much sense. I can see this being on the same level as abstract, i.e. level 2, in which case there should be an H2 for meta under-which keywords, how to cite etc are H3, or There should be an H2 here for 'article' and the Introduction should be an H3. Noting this here, but going down the list I am now looking for consistency of headings with this introduction as it is, at H2.
24. ❌ Improving a11y for inaccessible writing conventions #4243
    examples here are being shown visually indented and with just a number in brackets to differentiate them, no label that this is an example or when the example ends and normal paragraph begins. There should be some non-visual differentiation of these sections. Likewise references to these examples should be more than just numbers in brackets (eg. marked up as 'example 1' not just '(1)' in both the example itself and in references to that example).
25. x: Revise article internal cross references #4245
    When following the link to a reference (link goes to References section), there is no way to return to the original position.
26. ❌ Revise article internal cross references #4245
    Endnote indices do not indicate that they are endnotes rather than just a number - contextual links needed.
27. ❌ Greek letters as symbols a11y update #4238
    The symbols aren't read by voiceover, making, for example, this section unintelligible. This issue continues throughout the article.

28. ❌ Revise article internal cross references #4245
    Missing internal cross-ref. "see discussion in §3 below" without any link.
29. ❌ Contextual link fixes arising from a11y audit #4221
    Link text of "2011" which is not descriptive, but makes sense visually with how referencing is done. Screen-reader users use link navigation as one way to traverse the page, so contextual, differentiated links are important as part of the user's concept of page layout and where they are within that page. Use Aria-label to give additional context to such links.
30. ❌ Improving a11y for inaccessible writing conventions #4243
    Two Tone in Akan, heading level 2. The screenreader doesn't differentiate that the '2' at the start of this is section two. And with this particular heading there is clear potential for misunderstanding (2. Tone.. or Two Tone..) So I wonder whether the aria markup should add a prefix 'section' especially as in the cross referencing these are referred to as sections.
31. ✅ Section 3 heading is consistent as an H2
32. ✅ Section 3.1 heading is consistent as an H3
33. ✅ Section 3.1.1 heading is consistent as an H4
34. ❌ Improving a11y for inaccessible writing conventions #4243
    this formatting causes problems because the implementation of the small caps formatting is with span classes that break up the words, so voice over reads the initial letter on its own, and then the rest of the word.

35. ❌ Improve page structure #4232
    3.2.1.1 Focus and Linking is inconsistent at H4 (should be H5) - looks like the divs may be wrong too, this is not being coded as within the 3.2.1 div, but at the same level.
36. ✅ 3.2.1.2 is consistent with other headings (i.e. not same error as 3.2.1.1) and shown as an H5
37. ❌ Improving a11y for inaccessible writing conventions #4243
    using small caps for this doesn't change the tone of the voiceover, which is how markup such as strong and em are indicated audibly. So there is no audible signal that this 'fm' is different, the formatting is purely visual. <span class="small-caps">fm</span>
38. ✅ of the [±D-linked] feature the ± symbol here is correctly being read out, and the [ ] ensure a change of pace indicating the insertion.
39. ❔ No changes required because these phases are in common usage within English, see Add support for language of parts to TinyMCE #4218
    The use of 'in situ' is not marked up as Latin, similarly 'ex-situ'. The page language is set to English, so any text which is not in English should be marked up.
40. ❌ [for later phase of A11y work] Support abbreviation markup #4209
    abbreviation not marked up. This is just written as text: but “there is no reference (in the strong sense) to a specific moment” (p. 6). This seems to us to be a more adequate but the p. is an abbreviation for page, probably should be marked so that it gets read out as page, to avoid confusion.
41. ❌ Improving a11y for inaccessible writing conventions #4243
    example (27) is followed by (27') for comparison, but these are read out identically. Where punctuation is used to differentiate there needs to be additional markup for screenreaders.
42. ❌ BirkbeckCTP/bau#38
    something strange going on with this ordered list - its not all one list, and so voiceover doesn't read it out correctly, it does not identify these as list items.

43. ✅ Abbreviations is H2
44. ❌ review article list structures #4244
    The definitions for abbreviations should be a list, not comma separated values within a paragraph. A list can be traversed. They should also be marked up with <abbr> tags.
45. ✅ Acknowledgements is H2
46. ✅ Competing Interests is H2
47. ✅ Notes is H2
48. ✅ Endnotes have links back to their position within the text, but (see next)...
49. ❌ Revise article internal cross references #4245
    ['] used with the carat as the only link text within notes are problematic. All of them end with these, so there is nothing to differentiate them, and repeated 'carat, link' is unhelpful when traversing the document by links.
50. ✅ References is H2
51. ❌ Contextual link fixes arising from a11y audit #4221
    doi in references are exposed, rather than as contextual links
52. ❌ [for later phase of A11y work] Support abbreviation markup #4209
    DOI is read out as a word to rhyme with boy, this needs to be marked up as an abbreviation and to be read as D O I
53. ? review article list structures #4244
    references are a list and should be coded as such, rather than as individual paragraphs? A list can be traversed.
54. ❌ Add support for language of parts to TinyMCE #4218
    in Bearth, Thomas. 2002. Fokus im Akan – Outline. Handout of a the Fokus im Akan needs language to be specified. Similarly other reference titles that include phrases in other languages.
55. ❌ Improve page structure #4232
    Share is an h4, indicating that it is a subsection of References
56. ✅ lack of alt text for share icons already being addressed in menu item missing a text alternative #3936
57. ✅ Authors is consistent with Share, at H4, (see above for issue with Share at H4)
58. ❌ Contextual link fixes arising from a11y audit #4221
    ORCiD logo, read out as 'ORCiD logo, link' but no differentiation as to which author or that this link leads to the ORCiD site - i.e. same description for both links which means they lack context when traversing by link.
59. ❌ Icon A11y improvements #4215
    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>
60. tiny readability fixes arising from a11y audit #4214
    ? Download is consistent at H4 - but could be improved by 'download article' or similar, to avoid confusion.
61. ✅ Download PDF, link
62. ✅ Download XML, link - could be improved by 'download article as XML' or similar, to make completely clear what is to be downloaded.
63. ✅ Issue is H4, consistent
64. ❌ Typography alone should not be used to delineate list items #4211
    "2024 bullet Volume 9" is confusing, mark the bullet as decorative.
65. ✅ Dates is H4, consistent
66. ❌ Table A11y updates #4055
    dates are given in a table. This has no column header. I suggest "Date" as the header, or not to use tables here.
67. ? Make Dates more readable #4210
    consider using dates in a format where the month is written out, because that reduces ambiguity between US and UK orderings (and sounds nicer when read aloud!) see examples from UK Government stylesguide
68. ✅ License is H4, consistent
69. ❔ Contextual link fixes arising from a11y audit #4221
    License was done better in Sample 1, where there was a brief description of what the license meant.
70. ❌ Contextual link fixes arising from a11y audit #4221
    The external link to the license info is an icon without alt-text, but it does have a rel=license attribute. But the licence name is in a <p> tag with no id - so it doesn't link to that licence.
71. ✅ Identifiers is H4, consistent
72. ❌ Contextual link fixes arising from a11y audit #4221
    DOI issues as already described above
73. ✅ Peer Review is H4, consistent
74. ❌ Icon A11y improvements #4215
    <i class="fa fa-check-circle-o" style="color: green"></i> no alt for the icon, but also not marked as decorative.
75. ✅ File Checksums (MD5) is H4, consistent
76. ❌ Typography alone should not be used to delineate list items #4211
    "Vertical line ISSN" the | is being read aloud in the footer area.
77. ❌ Language selection a11y improvement #4248
    English En selection - reconsider position - would a user get all the way down to the bottom of the page in a language they didn't understand? Also, when there is only one language on this selector, should it be there at all?

[StephDriver]

Sample 3 - Article in Clean Theme

using ios with safari and voiceover

1. ✅ skip to main content link
2. ✅ Journal logo, with description of journal name followed by 'logo' and as a link to the homepage for the journal. Marked as a banner landmark
3. ✅ hamburger menu - toggle navigation button, landmark navigation - all great!
4. ✅ navigation styled as list each item reads in correct order, and the visible arrows indicating dropdowns are (correctly) not read out loud.
5. ❌ Clean Theme Navigation Fixes #4227
   menu items with dropdowns don't distinguish themselves from those which are links to other pages.
6. ❌ Clean Theme Navigation Fixes #4227
   articles item (read out as "articles, link") opens a dropdown the first item of which is articles (read out as "articles, link). This is highly confusing!
7. ❌ Clean Theme Navigation Fixes #4227
   likewise the second item under 'submissions' is also called 'submissions'
8. ❌ Clean Theme Navigation Fixes #4227
   and again, 'About' has the first subitem as 'about'
9. ❌ Clean Theme Navigation Fixes #4227
   Login and Register are a new list of two items, but part of the menu navigation landmark... confusing.
10. ✅ navigation landmark ends and states it is in the banner landmark
11. ✅ main landmark
12. ❌ Update missing image descriptions identified during front end audit #4217
    image description is article title which not only doesn't describe the actual image, but the title then follows as a heading - consider a 'describedby' reference to the heading instead.
13. ✅ Article title as an H1
14. ✅ author email envelope icon correctly handled so that it doesn't show up as a silent link on its own, but is part of the 'Contact' link both visually and when read aloud.
15. ✅ Abstract is an H2
16. ❌ Consider Roman numeral use #4223
    first section heading is correctly an H2, but the I. Roman numeral denoting it as the first section does not get read out as "one" but "I" get later for section 2, the "II." is read out as 2. This is a problem with the screenreader not being able to distinguish for single 'I' that it is a roman numeral. Similar issues are known with other single letter Roman numerals. See notes.
17. ❌ Revise article internal cross references #4245
    endnote not a contextual link (just the number read out)
18. ✅ endnotes have a link back to the original reading position
19. ❌ Revise article internal cross references #4245
    the end not link back to the original reading position is not contextual (just read as 'carat') such that all end notes have links that are read out identically.... imagine navigating by link 'carat, link, carat, link, carat, link...'
20. ❔ No changes required because these phases are in common usage within English, see Add support for language of parts to TinyMCE #4218
    dramatis personae should have language markup
21. ✅ Kinds of lies is an H2
22. ✅ White Lies is an H3
23. ✅ Fibs is an H3
24. ❌ Improving a11y for inaccessible writing conventions #4243
    the quote “[t]here are three degrees is read out as "t here are three degrees" and there needs to be better way to distinguish [t]here from there which doesn't end up hiding there resulting word from the audio. Not a bit issue in this example, but it could introduce ambiguity elsewhere.
25. ❌ review article list structures #4244
    the quoted poem That Night a Fire did ... should be marked up as a blockquote, not as a list. Currently this is mostly distinguished from neighbouring text by visual layout.
26. ✅ Barefaced Lines is an H3
27. ✅ Bullshit is an H3
28. ❌ Revise article internal cross references #4245
    cross reference to Sections VIII-IX. should include an internal link
29. ✅ Falsehoods Believed to be True is an H3
30. ✅ Other forms of deceit is an H3
31. ✅ Lies in politics is an H2
32. ❌ blockquotes unformatted in Clean #4200
    missing blockquote markup and formatting. find himself involved in ... such things... prior to endnote 25. Blockquote without a cite attribute (suspect this is because there is the endnote for citation, but that information should be in cite attribute too.
33. ✅ How it is said is an H2
34. ✅ Dammed Lies is an H2 - headings seem fine within the article, so will not note more within the article unless there are errors.
35. ❌ Add support for language of parts to TinyMCE #4218
    should have language mark up: <em>perjurii poena divina, exitium; humana, dedecus</em>
36. ❌ Consider Roman numeral use #4223
    use of Roman Numerals within the text (not just as headings) to denote a list within the paragraph, for example: It might refer (i) to actual results, i.e., to the empirical impact—if that can be measured—that each lie actually has on the enterprise of human communication. Or (ii) it might refer and so on. The initial (i) is read as i and then the (ii) as 2 - see notes on Roman numerals.
37. ❔ Improve page structure #4232
    Notes is an H2. While this is consistent - is it useful? Would a series of front matter - article - end matter make this more navigable.
38. ❌ review article list structures #4244
    references are given as individual paragraphs, a list would be more navigable.
39. ❌ Revise article internal cross references #4245
    reference links should be contextual
40. ❌ Improve page structure #4232
    Download is an H2, the same as References before it, making them neighbouring sections. But Downloads should be the first item in a whole new section - the article itself ended after References.
41. ❌ Improve page structure #4232
    heading 'information' is not informative! Maybe "Publication Information"?
42. ✅ the tick logo after Peer Reviewed is correctly ignored.
43. ✅ License description is read out and link is contextual
44. ❌ Copy to clipboard for How to Cite #4236
    citations. need to provide an easy way to copy the citation - this text is being provided for the purposes of being copied, make it a simple to get it to the clipboard.
45. ❔ Copy to clipboard for How to Cite #4236
    Consider whether citations for copying should have contextual doi links or plain text (as current).
46. ❌ How to Cite screenreader navigation fails #4235
    popup for citation doesn't disappear when focus shifts outside. For example, opening citation, then navigating by heading or link moves to new place in document, but popup remains on screen. Then you can navigate the whole original document, but if you go back to the Citation section, and then go down the links, having reached harvard-style-citation you are taken back into the model, no way to get to other subsequent items in the citation list. From the open citation pop up you cannot navigate forwards by heading, but you can navigate backwards, and then once in the main document, you can navigate at will.
47. ❌ tiny readability fixes arising from a11y audit #4214
    "Harvard-Style Citation" should be "Harvard-style Citation"
48. ❌ Improve page structure #4232
    Harvard-Style Citation is an H5, but the heading on the main page before the popup was an H2
49. ❌ Improve page structure #4232
    table of contents - this is a strange location for this - maybe put it at the top of the page. And also need to have a 'back to table of contents) link at end of each heading listed from their position in the text.
50. ❌ Improve page structure #4232
    footer is not identified with the 'contentinfo' role.
51. ❌ Update missing image descriptions identified during front end audit #4217
    OLH logo does not have alt-text
52. ❌ tiny readability fixes arising from a11y audit #4214
    "published by Open Library of Humanities" should that be 'the'?
53. ❌ tiny readability fixes arising from a11y audit #4214
    "login greater than" for Login>
54. ✅ : privacy policy lead to "page not found", fixed by @S-Haime while I was till working on this.
55. ❌ Telephone-like numbers need formatting that they aren't telephone numbers #4228
    the issn number is picked up by ios Safari as if it were a telephone number (turns it into a link and offers to call it). This behaviour can, and should be overridden in the HTML. And similar overrides considered for all numbers we use that won't be telephone numbers!
56. ❔ Improve page structure #4232
    there is an option to log in at the bottom of the page, but not to register
57. ❌ Readability - overriding user's prefered font #4230
    the only text to appear in User's override font was 'contact' as described above. This means if someone has set a font they find easier to read it does not apply to the main article text.

[StephDriver]

Sample 4 - Article in OLH theme (full article displayed on page)

This has been written with reference to sample 1, only adding in differences (not identified before, or different behaviour).

1. ❌ OLH Theme Navigation fixes #4225
   the navigation menu itself doesn't work appropriately when navigating by link, particularly having entered a dropdown, you can fall off the bottom of the menu and end up either back in the main article or back on the main part of the menu - but the screen still showing the drop down, and then not be able to get back. The back button at the top of a dropdown also is not selectably having navigated away from it - e.g. having gone down the list from within the dropdown, and then going back up, instead of reaching' back' one ends up in the main navigation on the 'home item.' In short: navigation menu needs reviewing and updating to work with screenreader navigating by links and/or tabs, both backwards and forwards.
2. ✅ Article name is given as an H1 (nb unlike in sample 1, there is no article banner image which may be why this one has correct heading and that one did not).
3. ✅ the user specified default font is used for much of the text, including all the large blocks of text
4. ❌ Improve page structure #4232
   Abstract is an H3, but having had the article title as an H1, this should be an H2.
5. ❌ review article list structures #4244
   keywords should be a list, not a comma separated values within a paragraph tag.
6. ❌ Improve page structure #4232
   Rights should be a heading
7. ❌ Contextual link fixes arising from a11y audit #4221
   License should be linked and described (as in other samples).
8. ❔ Download versus View PDF confusion #4229
   download / view PDF have same functionality in some browsers, unless you override?
9. ✅ Funding is an H2, whichi s consistent with the H1 being the article heading.
10. ❌ Contextual link fixes arising from a11y audit #4221
    Funding link does not match context - it links to articles funded by them, not to the organisation. Potentially both should be included, the funder's site, and a link to the articles funded by them.
    <a href="/mmb/funder_articles/http://dx.doi.org/10.13039/100016537">National Cattlemen's Beef Association</a>
11. ❌ Improve page structure #4232
    license information is repeated in the metrics block.
12. ✅ Introduction is an H2.
13. ✅ Materials and Methods is an H2
14. ❔ BirkbeckCTP/bau#38
    #7440.8 is understandably read as "number seven thousand four hundred and forty dot eight". Might be worth looking at why this is not 'point eight', but the main thing is working (the hash being read as number).
15. ✅ Sample collection and fabrication is an H3
16. ❌ Support abbreviation markup #4209 [for later phase of A11y work]
    the abbreviation IRB is not read out as "irb" - mark up as an abbreviation? to make sure letters are read out.
17. ❌ Support abbreviation markup #4209 [for later phase of A11y work]
    markup for abbreviations missing when abbreviations are used in the body of text
18. ✅ degrees Celcius figures read correctly.
19. ❌ Revise article internal cross references #4245
    figure 1 cross ref is adjacent to figure one, such that the link is pointless.
20. ❌ Update missing image descriptions identified during front end audit #4217
    figure 1 - voiceover attempts to read the text within the png. but as the order is about the visual layout, this makes no sense.
21. ❌ Figure modal a11y improvements #4239
    link to enlarge the figure is just 'figure 1' this needs to be more descriptive.
22. ❌ Figure modal a11y improvements #4239
    having enlarged the figure, the modal is not navigable - no way to dismiss it.
23. ❌ Revise article internal cross references #4245
    both the link to the figure at the end of the previous paragraph, and the figure itself are contextually given as 'figure 1' but one is a cross reference to that part of the page, and the other opens the enlarged version. They are also adjacent so this reads as "figure 1, link, figure 1, image, link"
24. ✅ Trained sensory panels is an H3 (no further comment on article headings unless they are incorrect)
25. ✅ : contextual links such as '1999' are not actually contextual - they need more description and just using the year makes it highly likely there would be two links with same text pointing to different places. <a class="xref-bibr" href="#r39">1999</a> this is a known issue, already being addressed in do these links (in same context) go to the same page? #3939
26. ✅ −80°C read correctly.
27. ❌ [for later phase of A11y work] Support abbreviation markup #4209
    A 2.54-cm-wide cut not read correctly - cm not read as centimetres, but as c m I think this is to do with the use of hyphens, as later in the same paragraph, 2.54 cm is read as "two dot five four centimetres"
28. ❌ Support abbreviation markup #4209 [for later phase of A11y work]
    similarly, 3-min is read as "3 min" rather than "3 minutes"
29. ❌ Greek letters as symbols a11y update #4238
    standardized to 2,000 μg/mL of protein. the mu was not read as micro. Note the mu is read out in a different voice (Greek voice?) and so it is very difficult to recognise. I expected "micrograms per millilitre" It is being read as "mu g slash m L". Slash is generally not being read as 'per'.
30. ✅ when on its own with a space either side mL is being correctly read as millilitres.
31. ❔ Greek letters as symbols a11y update #4238
    An α of 0.05 was set for a level of significance. this is read as 'An greek letter alpha of ..." is that the desired behaviour?
32. ❌ Figure modal a11y improvements #4239
    similar issues with Table 1 as with Figure 1 above. Cannot navigate to the close button, and end up outside the modal, but without it being dismissed.
33. ❌ Table A11y updates #4055
    table does not have unique headers for rows and columns, and what row headers exist, are only shown visually with <strong> tags rather than <th>
34. ❌ Improve page structure #4232
    tables and figures should feature in the headings structure. Currently just styled text <span class="table-label">Table 1.</span>.
35. ❌ Table A11y updates #4055
    following footnotes inside the table (e.g. in table 7) link to footnotes by moving the page on the screen, but reading or tabbing onwards takes you back to the original location, so footnote cannot be read.
36. ❌ Table A11y updates #4055
    table footnotes do not have the letter of the footnote to which they relate.
37. ❌ Table A11y updates #4055
    table footnotes are in paragraphs, rather than as a list.
38. ❌ Telephone-like numbers need formatting that they aren't telephone numbers #4228
    references are in paragraphs rather than as a list, and their DOI links are non-contextual. Where other numbers appear, eg. 3222–3228. they are interpreted as phone numbers in ios safari - and should be marked up as not phone numbers.
39. ❌ Improve page structure #4232
    authors as H4 when previous heading, references, was an H2. Also, authors have already been listed at top of the page. The two authors sections are not identical, this one includes more information ('Department of Animal Sciences and Industry') than the one at the top of the page.
40. ✅ Publication Details is an H3 which is consistent with previous heading
41. ❌ Add context for page numbers for screenreaders #4247
    pages: 1-13 is read as "pages one thirteen" because the - is considered invisible punctuation as it could in say 'copy-editing` - this should read as "Pages one to thirteen" or similar. It should be described to be read that way.
42. ❌ Update missing image descriptions identified during front end audit #4217
    press logo at bottom of the page is missing an alt-text so the image file title is read out - this is a collection of numbers and letters. This is due to a missing closing " following the class attribute, which prevents the alt="" attribute being recognised <img src="/media/cover_images/d78e50a8-3542-4429-b049-20261739ee56.svg" class=" alt=" "="">.

[StephDriver]

Sample 5 - Non-article pages

ignoring navigation, header/footer etc if already appears on article sample. Looking for other content not yet tested.

5.1 OLH - homepage

1. ✅ Journal name is an H1 and marked as main and landmark.
2. ❔ Improve page structure #4232
   Journal tagline "the official journal of..." is an H2. is this good structure, or is it just formatting?
3. ❔ Update missing image descriptions identified during front end audit #4217
   should cover image be set to decorative? Is "[Journal name] cover image" as a description helpful in this context/position on the page?
4. ❌ User Content
   press link on this page gives an ERR_CONNECTION_RESET. This is not the same link address as appears in the footer on articles, so it seems to be a user-content error.
5. ❌ Typography alone should not be used to delineate list items #4211
   Issue title appears as an H1. It also has the 'bullet' spoken between each part of the title content e.g. "volume eight bullet issue one bullet two thousand and twenty four"
6. ❌ Improve page structure #4232
   Research Article is an H4, the previous heading is H1 (but should have been an H2) either way this shouldn't be an H4. It should also be plural as what follows is a list of articles.
7. ❌ markup decorative hr tags as decorative #4212
   the line under this seems to be decorative, but is read out as 'separator, dimmed'
8. ❌ Improve page structure #4232
   the article title is an H2, and is not a link to the article.
9. ❌ Contextual link fixes arising from a11y audit #4221
   the link to the article is described by the article number only, not the article title. e.g. "fifteen thousand, seven hundred and one, link"
10. ✅ subsequent article titles are at the same H2 level, this is consistent.
11. ❔ OLH theme: box links used in lists of articles are not accessible #4220
    when navigating by headings, the article headings are not described as links, but can be followed as if they are links to that article. When navigating by link, the link appears before the heading and is only described by the article number.
12. ❔ review article list structures #4244
    format authors as a list? Makes it more navigable.
13. ❌ Make Dates more readable #4210
    article publication date is not described - so the date is read out without any context.
14. ❌ Icon A11y improvements #4215
    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.
15. ❌ Typography alone should not be used to delineate list items #4211
    decorative bullets between article details are read aloud.
16. ❌ Add context for page numbers for screenreaders #4247
    the page numbers at the end of the article details, '1-9' are read as 'one nine' because the screenreader doesn't know that punctuation is important in this place - suggest marking up both to describe these as pages, and to indicate it is a range, e.g. 'pages one to nine' - but need to be careful with implementing this as I believe the UK is 'one to nine' but the US preference may be for 'one through nine'.
17. ❌ Lists of articles a11y improvements #4242
    this is a long list of articles, it would be good to have some numbering or pagination, or way to skip down to the 'most popular articles' at the bottom. Anything that shows this isn't a never ending list!
18. ❌ Improve page structure #4232
    Review Article is an H4, but is apparently a new section, but articles are H2. Also, make it plural.
19. ❌ Improve page structure #4232
    Correction is an H4 - same problem as above with Review Article. There is only one of these, so I will forgive it being singular, but might need to check it has a pluralisation.
20. ❌ Most Popular Articles is an H2, putting it on the same level as the article headings above it.
21. ❌ Improve page structure #4232
    articles listed under 'most popular articles' do not have marked headings. They are not in a list either - in short they are not navigable.
22. ❌ OLH theme: box links used in lists of articles are not accessible #4220
    popular article links are also just the article number, same behaviour as above with other articles in regards to the article title not being a link, but acting as if it were a link.
23. ❌ Improve page structure #4232
    above the article title is listed, followed by the authors and other details, in this section, the authors are listed first, followed by the article title - this is not consistent and therefore not expected. Similarly, these articles are not listed with any other details, e.g. publication date which is both inconsistent and feels like important information to include.
24. ✅ NB. footer has correct press link - unlike above for in the journal description - footer is same as on the article pages, which has already been tested in Sample 4 in previous comment.

5.2 - Material homepage

1. ❌ Improve page structure #4232
   no H1
2. ❌ Material Carousel a11y improvements #4237
   Carousel not identified as such. Navigating by heading gets to visible item on carousel, as an H2. But as this is a carousel, this keeps changing making it awkward when navigating past it, then back to find previous heading has changed.
3. ❌ Improve page structure #4232
   about this journal is not a heading.
4. ❌ Improve page structure #4232
   Latest News posts is not a heading.
5. ❌ Update missing image descriptions identified during front end audit #4217
   latest news image is not described.
6. ❌ Typography alone should not be used to delineate list items #4211
   bullet is read out aloud between volume number and publication year in carousel item.
7. ❌ Improve page structure #4232
   Research is an H2, putting it on same level as the carousel items.
8. ❌ Improve page structure #4232
   Article title is an H5
9. ✅ Article title is a link to that article
10. ❌ Improve page structure #4232
    author name read out after article, but without anything identifying this as the author's name.
11. ❌ Icon A11y improvements #4215
    article date and volume icons are focusable without having any description
12. ❌ Make Dates more readable #4210
    article date is not described as a date, so gets read out as as series of numbers, as the date icon is not described, these numbers have no context.
13. ❌ Typography alone should not be used to delineate list items #4211
    "volume 23 bullet 2024" -bullet should not be articulated.
14. ✅ following articles are consistently at H5
15. ✅ Perspectives is an H2, which is consistent with 'Research' which was the previous section heading.
16. ✅ Reviews likewise is an H2

5.3 - Clean homepage

1. ✅ About Journal is an H1, and in the main landmark
2. ❌ user content
   having the homepage headed up as 'about' is confusing.
3. ❌ markup decorative hr tags as decorative #4212
   "separator, dimmed" the <hr> following the about and before news is read aloud, but this is decorative.
4. ❌ Improve page structure #4232
   Latest News Posts is an H1. there should only be a single h1 heading on a page.
5. ✅ News heading is an H3 (which is where should be if the 'latest news posts' were corrected to an H2)
6. ❔ Improve page structure #4232
   news article byline is an H4 - but is this really a heading or is the heading being used to format text?
7. ❌ Make Dates more readable #4210
   date appended to news article not marked up as a date, so read as a series of numbers.
8. ❔ tiny readability fixes arising from a11y audit #4214
   the use of [...] at the end of a news article summary sets up an expectation of a link, but this is plain text.
9. ✅ featured articles is an H1
10. ❌ Improve page structure #4232
    there are no headings in any of the featured article cards. Each card should include a subheading (article title?)
11. ❌ Improve page structure #4232
    article authors appear before title of article, with nothing to audible to indicate that this is/are the authors.
12. ✅ article title is a link
13. ❌ Contextual link fixes arising from a11y audit #4221
    article title link is read out with the article number, something which isn't on the visual display e.g. "link to article [article number] [article title], link" which is unnecessarily verbose. The suffix ' link ' is automatically read by the screen reader which has recognised this as a link. The description "link to" is superfluous. The article number is probably surplus to requirements and distracting.
14. ❔ Clean theme should describe thumbnail article images on homepage #4213
    article images are ignored as decorative - are they decorative?
15. ❔ Improve page structure #4232
    Volume and Issue number is an H2 - is it part of the featured articles section? Visually this appears to be the next section, not a subsection.
16. ❌ Typography alone should not be used to delineate list items #4211
    Volume 15 • Issue 1 • 2023 the bullets are read aloud.
17. ✅ 'Essay' is an h3, which is consistent with the issue number being an H2
18. ❌ Improve page structure #4232
    the article (essay) title is an H2, but this is inside an H3 section. Should be an H4.
19. ❌ review article list structures #4244
    author name is not identified as such
20. ❌ Icon A11y improvements #4215
    date and volume icons are focusable but not described.
21. ❌ Make Dates more readable #4210
    date is not marked up as being a date
22. ❌ Typography alone should not be used to delineate list items #4211
    again bullets between volume and issue and date are read aloud
23. ❌ Improve page structure #4232
    Research Article is an H3, which is consistent with Essay, but having just had an H2 for an article title, appears to be within that article rather than a whole new section.
24. ❌ Improve page structure #4232
    featured article cards higher up the page had information in a different order (author then title) compared to these article cards. This is unhelpful for navigation and readability.
25. ❌ Improve page structure #4232
    other is an H3, see comment above on Research Article
26. ❌ Improve page structure #4232
    there is nothing to tell you you've reached the end of the main content.

[StephDriver]

Other Observations

1. OLH Theme Navigation fixes #4225
   When navigating away from Sample 1 page, e.g. following a link to another page, the back button ends up returning to the article search page (from which this article was chosen) and not to the article itself. This is highly confusing.
2. Improve page structure #4232
   headings seem to be split when ever there is another tag inside them. I'm not sure whether this is a peculiarity of voiceover or a problem with our HTML. Need to investigate further. It is highly annoying! Because in this article there is a lot of use of <em> inside headings due to the subject matter, and so single headings end up being split as if three different by consecutive headings.
3. Improve page structure #4232
   despite both being H2, the "Download" heading is larger text than the "1 Introduction" heading. Is there consistency in how these styles are being applied, because otherwise they have the same font, and as font size is indicative of heading level, having H2 of inconsistent size is confusing.
4. Improving a11y for inaccessible writing conventions #4243
   is the use of [ ] within quotations enough to indicate to screen reader users that such words have been inserted into the original quote? Would a user expect to change their punctuation settings when this detail is needed, or would they want quotations marked up in such a way to make it more audible regardless of punctuation settings?
5. Improving a11y for inaccessible writing conventions #4243
   using small identifying marks such as 27 to 27' to differentiate between two items is difficult visually as well as for screen readers as described above.
6. BirkbeckCTP/bau#38
   my experience had no change in tone for <em> or <strong> but as the html appears to be correct, this may be an issue with my use of voiceover or my settings, so need to look at whether I have same problem with other sites.
7. tiny readability fixes arising from a11y audit #4214
   in the footer where it is Published by Open Library of Humanities should that be Published by the Open Library of Humanities
8. OLH Theme Navigation fixes #4225
   navigation menu - Login and Register appear side by side, but all other links have their own line
9. User Content
   the way the author line sits across the article image in narrow screens is awkward - cuts across the eyeline of one of the face images on the right.
10. Readability - overriding user's prefered font #4230
    further to Sample 3 - item 14, "contact" text itself is not formatted, such that it default to the user's browser settings, possibly the only text on the page that doesn't have a font set. If user has a very different default font to the theme, this looks very odd!
11. Consider Roman numeral use #4223
    Roman numerals are not just a screen reader A11y issue. There doesn't seem to be an accepted solution, with general advice being to limit their use. Avoid the use of Roman Numerals and unfamiliar symbols in text where possible. WC3 guidance
12. Add support for language of parts to TinyMCE #4218
    is lang markup needed for Latin phrases in common use within English?
13. Make use of Blockquote and Q tags consistent #4246
    review use of <blockquote> and <q> tags, and their cite attributes.
14. [for later phase of A11y work] Support abbreviation markup #4209
    abbreviations such as e.g. and i.e. are automatically read out as for example and such that respectively. While not a problem here, might be worth considering highlighting this behaviour to editors.
15. BirkbeckCTP/bau#38
    I am struggling to get the internal links back and forth to endnotes to work well. Need to find out whether this is my inexperience with screen readers or a functional issue with the code.
16. Typography alone should not be used to delineate list items #4211
    should the 'bullet' in lists be read out? or marked as decorative?
17. BirkbeckCTP/bau#38
    decimals read out as dot not point?
18. [for later phase of A11y work] Support abbreviation markup #4209
    abbreviations that can be read as words are read as words - need to mark them up as abbreviations where-ever used.
19. resolved are we differentiating in terms of language between Englishes [yes], and if so, does it affect voiceover? [not noticeably]
20. Improve page structure #4232
    something that has become annoying very fast has been navigating by headings, when there are lots of subheadings - need to learn whether this is about my knowledge - i.e. there is a simple way to navigate to the next same level heading, or whether this is purely about page navigability in which case some way to move between same level headings might be good for us to implement.
21. BirkbeckCTP/bau#38
    when following a link to another page, the position on the screen on the previous page affects where one lands - for example, if at the bottom of the screen (physical layout) when following a link, like one at the bottom of the page, then you land at of the screen on the linked page - so not quite at the top of that page. This affects how you then interact with that page, not having arrived at the start! Particularly obvious with the login link at the bottom of the article page, which then arrives on the press logo at the bottom of the login page.
22. Sitemaps should expose all links for each site #4231
    navigation between pages - there are no breadcrumbs, no sitemap!
23. OLH Theme Navigation fixes #4225
    navigation within pages - a skip to main content would be nice and something that makes it clear one has reached the footer. For long lists of articles, some way to know how long the list - either pagination or a 'showing results x of y would be helpful.
24. Make Dates more readable #4210
    dates written as "YYYY-MM-DD" are not very readable.
25. Clean theme news article truncation mishandling line-breaks  #4207
    clean bug - Where the news article is being truncated for the summary on the home page, if there is a line break this is not being translated into a space when concatenating with the next line, they are being run together.

[StephDriver]

Issues Identified:

Straightforward Changes

• Table A11y updates #4055
• blockquotes unformatted in Clean #4200
• Clean theme news article truncation mishandling line-breaks  #4207
• Typography alone should not be used to delineate list items #4211
• markup decorative hr tags as decorative #4212
• tiny readability fixes arising from a11y audit #4214
• Icon A11y improvements #4215
• Update missing image descriptions identified during front end audit #4217
• Contextual link fixes arising from a11y audit #4221
• OLH Theme Navigation fixes #4225
• Material Theme Navigation Fixes #4226
• Clean Theme Navigation Fixes #4227
• Telephone-like numbers need formatting that they aren't telephone numbers #4228
• How to Cite screenreader navigation fails #4235
• Add context for page numbers for screenreaders #4247
• Language selection a11y improvement #4248
• review article list structures #4244

Tech Discussion Required

• Make Dates more readable #4210
• Clean theme should describe thumbnail article images on homepage #4213
• OLH theme: box links used in lists of articles are not accessible #4220
• Readability - overriding user's prefered font #4230
• Sitemaps should expose all links for each site #4231
• Download versus View PDF confusion #4229
• Copy to clipboard for How to Cite #4236
• Material Carousel a11y improvements #4237
• Lists of articles a11y improvements #4242
• Revise article internal cross references #4245

Input from Editorial / Wider community needed

• Add support for language of parts to TinyMCE #4218
• Consider Roman numeral use #4223
• Improve page structure #4232
• Greek letters as symbols a11y update #4238
• Improving a11y for inaccessible writing conventions #4243
• Make use of Blockquote and Q tags consistent #4246

For Phase 2

• Support abbreviation markup #4209 - this is for WCAG 2.2 AAA, so not required in the current phase of the A11y project. Issue outlined for consideration in the next phase.

[StephDriver]

The results here are now integrated into the rest of the audit.