Results from Screen Reader testing.

[StephDriver]

Summary

Action Required

• Some parts of the pages are not visible to screen reader #362
• Fix pages malfunctions that occur when using a screen reader #363

Context

Tested with iOS 17.3.1 using the accessibility option to 'read screen' on an iPhone 13 pro max. Some page items seem to be missing. This needs to be investigated.

Missing items

Footer

• the 'get our newsletter' link
  expected: "... Be the first to know. Your email. Get our newsletter. Twitter. Facebook. Mastodon..."
  actual: "... Be the first to know. Your email. Twitter. Facebook. Mastodon..."
• the logos for OLH, Janeway and Birkbeck.
  expected: after reading out the social media links, it should read out the three logos, and then read the footer links (publisher policies etc).
  actual: reads the social media links, then reads the footer links, the logos are missing entirely.

Who We Are Page

• the green, gold and diamond open access boxes.
  expected: "... Professor of History, Harvard University. Green open access....OLH open access model. Journals: 32..."
  actual: ".. Professor of History, Harvard University. Journals: 32...

• the award logos under the grants and awards section. They also have alt text within the html, but this is not being read out.

Open Access Movement page

• the green, gold and diamond open access boxes [same issue as above on the Who we are page, they are missing completely]

Resources Page

• the filter input at the top of the "open access advocacy" section
  expected: "... past decade. Open access advocacy. Filter. Name..."
  actual: "... past decade. Open access advocacy. Name..."
  NOTE: the filter in the next section "The OLH archive." does get read out - so what is the difference between them?

Contact page

• the submit button at the bottom of the contact form.
  expected: "hCapture terms of service. Submit." and then the footer.
  actual: "hCapture terms of service" and then the footer.

Login Page

• the log in button
  expected: "... email. password. Log in. Register an account..."
  actual: "... email. password. Register an account..."

Register Page

• the register button
  expected: "By registering an account you agree to our Privacy Policy. Register. [and on to the footer]"
  actual: "By registering an account you agree to our Privacy Policy. [and on to the footer]"

malfunctions

what we do page

• carousel of featured journals malfunctions with the blue pips showing which page one is on disappeared when this is read by screen reader. NB an issue on smaller screen widths, and not all screen reader users lack sight, there will be users who need the screen reader for text alongside viewing the physical layout and images. They need to work predictably together.

Site Search

When searching, the results show some text around the found search text. Visually, this is a handful of words followed by an ellipsis. But when read aloud, the text is not truncated in this manner, but the whole article is read.

for example, search for 'comic' and the the first return has the text truncated after 'flipping' but the screen reader continues as if the rest of that whole page had been returned. This includes reading out the tags at the top of the linked page.

There is also no distinction made to show this is an item returned in the search.

expected: "Searching for comic. Search Result 1. New OLH poster, the Comic Superheroes Poster. Posted by Paula Clemente Vega on 11 November 2021 open access journal flipping. Search Result 2..."
actual: "Searching for comic. New OLH poster, the Comic Superheroes Poster. Posted by Paula Clemente Vega on 11 November 2021 open access journal flipping blog journals announcement posters milestone. Our journal flipping poster is now available to download, print and share..."

missing full stops

This seems to be an issue with how quote attributions are written, such that there is no full stop at hte end. Note that when faced with this, the screen-reader goes straight to the next word it can find without pause regardless of location, i.e. doesn't realise that it is moving to a new paragraph. This means for a series of quotes there is no pause between teh atribution for the previous quote and the new quote, which makes it confusing as to who said what.

In the example below, there is no pause between the word University and the next quote.

Register Page

Hide visual only information - aria hidden label needed

* required field
This is information for visual navigation - indicating which fields are required by an asterisk. The same information is correctly being conveyed to screen reader users via 'required' inside the input tag. The text explaining this visual feature needs to be hidden from screen readers.
expected: "Register. Email [required]. Salutation. First name [required]..."
actual: "Register. required field. Email [required]. Salutation. First name [required]..."

<p class="text-white px-2 pb-4">
    * required field
  </p>