Fix pages malfunctions that occur when using a screen reader

[StephDriver]

• from #325

• [ ] investigate whether these issues are present with other screenreaders

update the following to make them more compatible with screen readers

• [ ] carousel
• [ ] site search
• [x] quotations
• [ ] register page

---

malfunctions (from audit)

what we do page carousel

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

* 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>

[joemull]

Will test with multiple tech setups.

[joemull]

Pair programming notes:

• [ ] Featured journals carousel: tabbing through the focusable elements (the "Read More" buttons) prompts the browser to scroll horizontally, but the JS widget does not respond properly, causing controls like the arrow buttons and dots at the bottom to become invisible.
• [ ] Search: as described above.
• [x] Full stops: these have been fixed.
• [ ] Register page: as above.