Context Manual Testing of a sample of pages for screen reader capa

Other Observations <a class="issue-link js-issue-link" data-

birkbeckctp,janeway

Comments (8)

StephDriver commented on June 21, 2024

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

using iOS Safari and Voiceover

traversing from top to bottom of page.

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

Safari on Mac

These are only notes problems not already described.

❌ #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.

from janeway.

StephDriver commented on June 21, 2024

Sample 2 - Article in Material Theme

using iOS with Safari and Voiceover

traversing from top of page to bottom

❌ User Content
"Glossa al of general linguistics, link, image, navigation, landmark"
❌ #4226
home, link, list start - but nothing visible on the page and is a duplicate of the link above.
❌ #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.
❌ #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
❌ #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.
❌ #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).
❌ #4232
There is no heading level 1 at all.
✅ abstract, heading level 2
✅ paragraph text is fine, until...
❌ #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
❌ #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 #3912
❌ #4215
The 'eye' icon next to views has no description at all, found by voice over, but has no description to give. 
❌ #4215
likewise, the 'download' icon. 
❌ #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.
❌ #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.
❌ #4245
Endnote indices do not indicate that they are endnotes rather than just a number - contextual links needed.
❌ #4238
The symbols aren't read by voiceover, making, for example, this section unintelligible. This issue continues throughout the article.

❌ #4245
Missing internal cross-ref. "see discussion in §3 below" without any link.
❌ #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.
❌ #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
❌ #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.

❌ #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
❌ #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.
❔ 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.
❌ [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.
❌ #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.
❌ 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
❌ #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)...
❌ #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
❌ #4221
doi in references are exposed, rather than as contextual links
❌ [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.
❌ #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.
❌ #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)
❌ #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.
❌ #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
❌ #4211
"2024 bullet Volume 9" is confusing, mark the bullet as decorative.
✅ Dates is H4, consistent
❌ #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
❔ #4221
License was done better in Sample 1, where there was a brief description of what the license meant.
❌ #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
❌ #4221
DOI issues as already described above
✅ Peer Review is H4, consistent
❌ #4215
 no alt for the icon, but also not marked as decorative.
✅ File Checksums (MD5) is H4, consistent
❌ #4211
"Vertical line ISSN" the | is being read aloud in the footer area.
❌ #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?

from janeway.

StephDriver commented on June 21, 2024

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.
❌ #4227
menu items with dropdowns don't distinguish themselves from those which are links to other pages.
❌ #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!
❌ #4227
likewise the second item under 'submissions' is also called 'submissions'
❌ #4227
and again, 'About' has the first subitem as 'about'
❌ #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
❌ #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
❌ #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.
❌ #4245
endnote not a contextual link (just the number read out)
✅ endnotes have a link back to the original reading position
❌ #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...'
❔ 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
❌ #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.
❌ #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
❌ #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
❌ #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.
❌ #4218
should have language mark up: perjurii poena divina, exitium; humana, dedecus
❌ #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.
❔ #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.
❌ #4244
references are given as individual paragraphs, a list would be more navigable.
❌ #4245
reference links should be contextual
❌ #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.
❌ #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
❌ #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.
❔ #4236
Consider whether citations for copying should have contextual doi links or plain text (as current).
❌ #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.
❌ #4214
"Harvard-Style Citation" should be "Harvard-style Citation"
❌ #4232
Harvard-Style Citation is an H5, but the heading on the main page before the popup was an H2
❌ #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.
❌ #4232
footer is not identified with the 'contentinfo' role.
❌ #4217
OLH logo does not have alt-text
❌ #4214
"published by Open Library of Humanities" should that be 'the'?
❌ #4214
"login greater than" for Login>
✅ : privacy policy lead to "page not found", fixed by @S-Haime while I was till working on this.
❌ #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!
❔ #4232
there is an option to log in at the bottom of the page, but not to register
❌ #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.

from janeway.

StephDriver commented on June 21, 2024

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

❌ #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
❌ #4232
Abstract is an H3, but having had the article title as an H1, this should be an H2.
❌ #4244
keywords should be a list, not a comma separated values within a paragraph tag.
❌ #4232
Rights should be a heading
❌ #4221
License should be linked and described (as in other samples).
❔ #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.
❌ #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>
❌ #4232
license information is repeated in the metrics block.
✅ Introduction is an H2.
✅ Materials and Methods is an H2
❔ 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
❌ #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.
❌ #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.
❌ #4245
figure 1 cross ref is adjacent to figure one, such that the link is pointless.
❌ #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.
❌ #4239
link to enlarge the figure is just 'figure 1' this needs to be more descriptive.
❌ #4239
having enlarged the figure, the modal is not navigable - no way to dismiss it.
❌ #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.
❌ [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"
❌ #4209 [for later phase of A11y work]
similarly, 3-min is read as "3 min" rather than "3 minutes"
❌ #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.
❔ #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?
❌ #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.
❌ #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>
❌ #4232
tables and figures should feature in the headings structure. Currently just styled text Table 1..
❌ #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.
❌ #4055
table footnotes do not have the letter of the footnote to which they relate.
❌ #4055
table footnotes are in paragraphs, rather than as a list.
❌ #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.
❌ #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
❌ #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.
❌ #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=" "="">.

from janeway.

StephDriver commented on June 21, 2024

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

❌ #4232
no H1
❌ #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.
❌ #4232
about this journal is not a heading.
❌ #4232
Latest News posts is not a heading.
❌ #4217
latest news image is not described.
❌ #4211
bullet is read out aloud between volume number and publication year in carousel item.
❌ #4232
Research is an H2, putting it on same level as the carousel items.
❌ #4232
Article title is an H5
✅ Article title is a link to that article
❌ #4232
author name read out after article, but without anything identifying this as the author's name.
❌ #4215
article date and volume icons are focusable without having any description
❌ #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.
❌ #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
❌ user content
having the homepage headed up as 'about' is confusing.
❌ #4212
"separator, dimmed" the <hr> following the about and before news is read aloud, but this is decorative.
❌ #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)
❔ #4232
news article byline is an H4 - but is this really a heading or is the heading being used to format text?
❌ #4210
date appended to news article not marked up as a date, so read as a series of numbers.
❔ #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
❌ #4232
there are no headings in any of the featured article cards. Each card should include a subheading (article title?)
❌ #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
❌ #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.
❔ #4213
article images are ignored as decorative - are they decorative?
❔ #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.
❌ #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
❌ #4232
the article (essay) title is an H2, but this is inside an H3 section. Should be an H4.
❌ #4244
author name is not identified as such
❌ #4215
date and volume icons are focusable but not described.
❌ #4210
date is not marked up as being a date
❌ #4211
again bullets between volume and issue and date are read aloud
❌ #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.
❌ #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.
❌ #4232
other is an H3, see comment above on Research Article
❌ #4232
there is nothing to tell you you've reached the end of the main content.

from janeway.

StephDriver commented on June 21, 2024

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.

from janeway.

StephDriver commented on June 21, 2024

Issues Identified:

Straightforward Changes

Tech Discussion Required

Input from Editorial / Wider community needed

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.

from janeway.

StephDriver commented on June 21, 2024

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

from janeway.

Comments (8)

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

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

Other Observations

Issues Identified:

Straightforward Changes

Tech Discussion Required

Input from Editorial / Wider community needed

For Phase 2

Related Issues (20)

Recommend Projects

Recommend Topics

Recommend Org

Jobs