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

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

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

using iOS Safari and Voiceover

traversing from top to bottom of page.

:white_check_mark: Journal banner image is read out correctly as the name of journal and identified as a landmark
:x: #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.
:x: #4221 Search icon is not identified simply read as 'link'
:white_check_mark: When Search icon has been activated, then the next is correctly identified as 'search field'
:x: #4214 Research Articles is identified as Main and Landmark, [should this be singular not plural?] but not as any kind of heading.
:x: #4232 The article name is correctly read out but as a heading level 2. There has been no heading level 1 before this.
:x: #4232 Author is not a heading of any kind.
:white_check_mark: Author's name and affiliation is correctly read.
:x: #4215 The icon after author's name is not identified, simply 'link' <a itemprop="email" href="[redacted]" class="fa fa-envelope email-link"></a>
:x: #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.
:white_check_mark: Screenreader issues within the options menu itself have recently been addressed in issue #3936.
:white_check_mark: Abstract is identified as Heading level 3, which follows correctly from the article title being an H2 (see above for article title heading issue).
:x: #4232 Keywords has no structure - should be a heading, probably an h4
:x: #4232 Likewise, how to cite, has no structure, and probably should be an h4
:x: #4221 the doi link should be contextual not exposed.
:x: #4232 Downloads has no structure - should be a heading, probably an h3.
:white_check_mark: known structural issues with metrics have just been addressed in #3912
:white_check_mark: Creative Commons attribution is correctly read out, with full details and is a link to more.
:x: #4232 Download, Heading Level 3. This seems to be correct structure, but is a repeat of the earlier "downloads" section (see above)
:white_check_mark: Issue, heading level 3. This is correct structure
:x: #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>
:white_check_mark: identifiers, heading level 3, this is correct structure
:x: #4221 doi should be a contextual link.
:x: #4217 "Janeway logo final" is read as the title of the logo at hte bottom. The 'final' is unhelpful. <title>Janeway-Logo-Final</title>
:x: #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).
:white_check_mark: University of Wales press is correctly identified as a link
:x: #4211 "vertical line" - make this decorative.

Safari on Mac

These are only notes problems not already described.

:x: #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.

Sample 2 - Article in Material Theme

using iOS with Safari and Voiceover

traversing from top of page to bottom

:x: User Content "Glossa al of general linguistics, link, image, navigation, landmark"
:x: #4226 home, link, list start - but nothing visible on the page and is a duplicate of the link above.
:x: #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.
:x: #4226 items in the menu (articles, submissions, journal policies, about) are read followed by "arrow underscore drop underscore down" and identified as links. arrow_drop_down
✅ Search, link
✅ Login, link
✅ Register, link, list end
:x: #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.
:x: #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).
:x: #4232 There is no heading level 1 at all.
✅ abstract, heading level 2
✅ paragraph text is fine, until...
:x: #4238 ɛna which has been put in like that, with the symbol, and so voiceover reads it as 'na' unable to parse the epsilon.
✅ Keywords, heading level 2
✅ How to cite, heading level 2
:x: #4221 doi link should be contextual
✅ Download, heading level 2
✅ Download PDF, link
✅ Download XML, link
✅ known structural issues with metrics have just been addressed in https://github.com/BirkbeckCTP/janeway/issues/3912
:x: #4215 The 'eye' icon next to views has no description at all, found by voice over, but has no description to give. 
:x: #4215 likewise, the 'download' icon. 
:x: #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.
:x: #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).
x: #4245 When following the link to a reference (link goes to References section), there is no way to return to the original position.
:x: #4245 Endnote indices do not indicate that they are endnotes rather than just a number - contextual links needed.
:x: #4238 The symbols aren't read by voiceover, making, for example, this section unintelligible. This issue continues throughout the article.
:x: #4245 Missing internal cross-ref. "see discussion in §3 below" without any link.
:x: #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.
:x: #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.
✅ Section 3 heading is consistent as an H2
✅ Section 3.1 heading is consistent as an H3
✅ Section 3.1.1 heading is consistent as an H4
:x: #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.
:x: #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.
✅ 3.2.1.2 is consistent with other headings (i.e. not same error as 3.2.1.1) and shown as an H5
:x: #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. fm
✅ of the [±D-linked] feature the ± symbol here is correctly being read out, and the [ ] ensure a change of pace indicating the insertion.
:grey_question: No changes required because these phases are in common usage within English, see #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.
:x: [for later phase of A11y work] #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.
:x: #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.
:x: 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.
✅ Abbreviations is H2
:x: #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.
✅ Acknowledgements is H2
✅ Competing Interests is H2
✅ Notes is H2
✅ Endnotes have links back to their position within the text, but (see next)...
:x: #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.
✅ References is H2
:x: #4221 doi in references are exposed, rather than as contextual links
:x: [for later phase of A11y work] #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
? #4244 references are a list and should be coded as such, rather than as individual paragraphs? A list can be traversed.
:x: #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.
:x: #4232 Share is an h4, indicating that it is a subsection of References
✅ lack of alt text for share icons already being addressed in #3936
✅ Authors is consistent with Share, at H4, (see above for issue with Share at H4)
:x: #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.
:x: #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>
4214

? Download is consistent at H4 - but could be improved by 'download article' or similar, to avoid confusion.
✅ Download PDF, link
✅ Download XML, link - could be improved by 'download article as XML' or similar, to make completely clear what is to be downloaded.
✅ Issue is H4, consistent
:x: #4211 "2024 bullet Volume 9" is confusing, mark the bullet as decorative.
✅ Dates is H4, consistent
:x: #4055 dates are given in a table. This has no column header. I suggest "Date" as the header, or not to use tables here.
? #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
✅ License is H4, consistent
:grey_question: #4221 License was done better in Sample 1, where there was a brief description of what the license meant.
:x: #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  tag with no id - so it doesn't link to that licence.
✅ Identifiers is H4, consistent
:x: #4221 DOI issues as already described above
✅ Peer Review is H4, consistent
:x: #4215  no alt for the icon, but also not marked as decorative.
✅ File Checksums (MD5) is H4, consistent
:x: #4211 "Vertical line ISSN" the | is being read aloud in the footer area.
:x: #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?

Sample 3 - Article in Clean Theme

using ios with safari and voiceover

✅ skip to main content link
✅ 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
✅ hamburger menu - toggle navigation button, landmark navigation - all great!
✅ navigation styled as list each item reads in correct order, and the visible arrows indicating dropdowns are (correctly) not read out loud.
:x: #4227 menu items with dropdowns don't distinguish themselves from those which are links to other pages.
:x: #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!
:x: #4227 likewise the second item under 'submissions' is also called 'submissions'
:x: #4227 and again, 'About' has the first subitem as 'about'
:x: #4227 Login and Register are a new list of two items, but part of the menu navigation landmark... confusing.
✅ navigation landmark ends and states it is in the banner landmark
✅ main landmark
:x: #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.
✅ Article title as an H1
✅ 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.
✅ Abstract is an H2
:x: #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.
:x: #4245 endnote not a contextual link (just the number read out)
✅ endnotes have a link back to the original reading position
:x: #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...'
:grey_question: No changes required because these phases are in common usage within English, see #4218 dramatis personae should have language markup
✅ Kinds of lies is an H2
✅ White Lies is an H3
✅ Fibs is an H3
:x: #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.
:x: #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.
✅ Barefaced Lines is an H3
✅ Bullshit is an H3
:x: #4245 cross reference to Sections VIII-IX. should include an internal link
✅ Falsehoods Believed to be True is an H3
✅ Other forms of deceit is an H3
✅ Lies in politics is an H2
:x: #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.
✅ How it is said is an H2
✅ Dammed Lies is an H2 - headings seem fine within the article, so will not note more within the article unless there are errors.
:x: #4218 should have language mark up: perjurii poena divina, exitium; humana, dedecus
:x: #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.
:grey_question: #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.
:x: #4244 references are given as individual paragraphs, a list would be more navigable.
:x: #4245 reference links should be contextual
:x: #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.
:x: #4232 heading 'information' is not informative! Maybe "Publication Information"?
✅ the tick logo after Peer Reviewed is correctly ignored.
✅ License description is read out and link is contextual
:x: #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.
:grey_question: #4236 Consider whether citations for copying should have contextual doi links or plain text (as current).
:x: #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.
:x: #4214 "Harvard-Style Citation" should be "Harvard-style Citation"
:x: #4232 Harvard-Style Citation is an H5, but the heading on the main page before the popup was an H2
:x: #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.
:x: #4232 footer is not identified with the 'contentinfo' role.
:x: #4217 OLH logo does not have alt-text
:x: #4214 "published by Open Library of Humanities" should that be 'the'?
:x: #4214 "login greater than" for Login>
✅ : privacy policy lead to "page not found", fixed by @S-Haime while I was till working on this.
:x: #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!
:grey_question: #4232 there is an option to log in at the bottom of the page, but not to register
:x: #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.

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).

:x: #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.
✅ 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).
✅ the user specified default font is used for much of the text, including all the large blocks of text
:x: #4232 Abstract is an H3, but having had the article title as an H1, this should be an H2.
:x: #4244 keywords should be a list, not a comma separated values within a paragraph tag.
:x: #4232 Rights should be a heading
:x: #4221 License should be linked and described (as in other samples).
:grey_question: #4229 download / view PDF have same functionality in some browsers, unless you override?
✅ Funding is an H2, whichi s consistent with the H1 being the article heading.
:x: #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>
:x: #4232 license information is repeated in the metrics block.
✅ Introduction is an H2.
✅ Materials and Methods is an H2
:grey_question: 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).
✅ Sample collection and fabrication is an H3
:x: #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.
:x: #4209 [for later phase of A11y work] markup for abbreviations missing when abbreviations are used in the body of text
✅ degrees Celcius figures read correctly.
:x: #4245 figure 1 cross ref is adjacent to figure one, such that the link is pointless.
:x: #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.
:x: #4239 link to enlarge the figure is just 'figure 1' this needs to be more descriptive.
:x: #4239 having enlarged the figure, the modal is not navigable - no way to dismiss it.
:x: #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"
✅ Trained sensory panels is an H3 (no further comment on article headings unless they are incorrect)
✅ : 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 #3939
✅ −80°C read correctly.
:x: [for later phase of A11y work] #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"
:x: #4209 [for later phase of A11y work] similarly, 3-min is read as "3 min" rather than "3 minutes"
:x: #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'.
✅ when on its own with a space either side mL is being correctly read as millilitres.
:grey_question: #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?
:x: #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.
:x: #4055 table does not have unique headers for rows and columns, and what row headers exist, are only shown visually with  tags rather than <th>
:x: #4232 tables and figures should feature in the headings structure. Currently just styled text Table 1..
:x: #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.
:x: #4055 table footnotes do not have the letter of the footnote to which they relate.
:x: #4055 table footnotes are in paragraphs, rather than as a list.
:x: #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.
:x: #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.
✅ Publication Details is an H3 which is consistent with previous heading
:x: #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.
:x: #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=" "="">.

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

✅ Journal name is an H1 and marked as main and landmark.
:grey_question: #4232 Journal tagline "the official journal of..." is an H2. is this good structure, or is it just formatting?
:grey_question: #4217 should cover image be set to decorative? Is "[Journal name] cover image" as a description helpful in this context/position on the page?
:x: 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.
:x: #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"
:x: #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.
:x: #4212 the line under this seems to be decorative, but is read out as 'separator, dimmed'
:x: #4232 the article title is an H2, and is not a link to the article.
:x: #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"
✅ subsequent article titles are at the same H2 level, this is consistent.
:grey_question: #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.
:grey_question: #4244 format authors as a list? Makes it more navigable.
:x: #4210 article publication date is not described - so the date is read out without any context.
:x: #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.
:x: #4211 decorative bullets between article details are read aloud.
:x: #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'.
:x: #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!
:x: #4232 Review Article is an H4, but is apparently a new section, but articles are H2. Also, make it plural.
:x: #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.
:x: Most Popular Articles is an H2, putting it on the same level as the article headings above it.
:x: #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.
:x: #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.
:x: #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.
✅ 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

:x: #4232 no H1
:x: #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.
:x: #4232 about this journal is not a heading.
:x: #4232 Latest News posts is not a heading.
:x: #4217 latest news image is not described.
:x: #4211 bullet is read out aloud between volume number and publication year in carousel item.
:x: #4232 Research is an H2, putting it on same level as the carousel items.
:x: #4232 Article title is an H5
✅ Article title is a link to that article
:x: #4232 author name read out after article, but without anything identifying this as the author's name.
:x: #4215 article date and volume icons are focusable without having any description
:x: #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.
:x: #4211 "volume 23 bullet 2024" -bullet should not be articulated.
✅ following articles are consistently at H5
✅ Perspectives is an H2, which is consistent with 'Research' which was the previous section heading.
✅ Reviews likewise is an H2

5.3 - Clean homepage

✅ About Journal is an H1, and in the main landmark
:x: user content having the homepage headed up as 'about' is confusing.
:x: #4212 "separator, dimmed" the <hr> following the about and before news is read aloud, but this is decorative.
:x: #4232 Latest News Posts is an H1. there should only be a single h1 heading on a page.
✅ News heading is an H3 (which is where should be if the 'latest news posts' were corrected to an H2)
:grey_question: #4232 news article byline is an H4 - but is this really a heading or is the heading being used to format text?
:x: #4210 date appended to news article not marked up as a date, so read as a series of numbers.
:grey_question: #4214 the use of [...] at the end of a news article summary sets up an expectation of a link, but this is plain text.
✅ featured articles is an H1
:x: #4232 there are no headings in any of the featured article cards. Each card should include a subheading (article title?)
:x: #4232 article authors appear before title of article, with nothing to audible to indicate that this is/are the authors.
✅ article title is a link
:x: #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.
:grey_question: #4213 article images are ignored as decorative - are they decorative?
:grey_question: #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.
:x: #4211 Volume 15 • Issue 1 • 2023 the bullets are read aloud.
✅ 'Essay' is an h3, which is consistent with the issue number being an H2
:x: #4232 the article (essay) title is an H2, but this is inside an H3 section. Should be an H4.
:x: #4244 author name is not identified as such
:x: #4215 date and volume icons are focusable but not described.
:x: #4210 date is not marked up as being a date
:x: #4211 again bullets between volume and issue and date are read aloud
:x: #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.
:x: #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.
:x: #4232 other is an H3, see comment above on Research Article
:x: #4232 there is nothing to tell you you've reached the end of the main content.

Other Observations

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.
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  inside headings due to the subject matter, and so single headings end up being split as if three different by consecutive headings.
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.
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?
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.
BirkbeckCTP/bau#38 my experience had no change in tone for  or  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.
4214

in the footer where it is Published by Open Library of Humanities should that be Published by the Open Library of Humanities
4225

navigation menu - Login and Register appear side by side, but all other links have their own line
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.
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!
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
4218

is lang markup needed for Latin phrases in common use within English?
4246

review use of <blockquote> and <q> tags, and their cite attributes.
[for later phase of A11y work] #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.
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.
4211

should the 'bullet' in lists be read out? or marked as decorative?
BirkbeckCTP/bau#38 decimals read out as dot not point?
[for later phase of A11y work] #4209 abbreviations that can be read as words are read as words - need to mark them up as abbreviations where-ever used.
resolved are we differentiating in terms of language between Englishes [yes], and if so, does it affect voiceover? [not noticeably]
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.
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.
4231

navigation between pages - there are no breadcrumbs, no sitemap!
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.
4210

dates written as "YYYY-MM-DD" are not very readable.
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.

Issues Identified:

Straightforward Changes

4055
4200
4207
4211
4212
4214
4215
4217
4221
4225
4226
4227
4228
4235
4247
4248
4244

Tech Discussion Required

4210
4213
4220
4230
4231
4229
4236
4237
4242
4245

Input from Editorial / Wider community needed

4218
4223
4232
4238
4243
4246

For Phase 2

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.

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

openlibhums / janeway

A11y Audit - Screen Reader Testing #4194

Context

Approach

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

using iOS Safari and Voiceover

Safari on Mac

Sample 2 - Article in Material Theme

using iOS with Safari and Voiceover

4214

Sample 3 - Article in Clean Theme

using ios with safari and voiceover

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

Sample 5 - Non-article pages

5.1 OLH - homepage

5.2 - Material homepage

5.3 - Clean homepage

Other Observations

4225

4232

4232

4243

4243

4214

4225

4230

4223

4218

4246

4211

4232

4231

4225

4210

4207

Issues Identified:

Straightforward Changes

4055

4200

4207

4211

4212

4214

4215

4217

4221

4225

4226

4227

4228

4235

4247

4248

4244

Tech Discussion Required

4210

4213

4220

4230

4231

4229

4236

4237

4242

4245

Input from Editorial / Wider community needed

4218

4223

4232

4238

4243

4246

For Phase 2

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.