Accessibility - Page Summary - Screen Reader

[ghost]

A wireframe design and justification that showcases the summary of what a given page is about. Which can be read by a screen reader.

[katoss]

Original user testing feedback

From https://github.com/alan-turing-institute/AutisticaCitizenScience/blob/master/community-recommendations/user-tests/sprint-6-feedback/summary-sprint6-feedback.md

Do you/your children use accessibility tools to access websites etc.?

• d: 4x “No”
• A D d: predictive writing/spell-checking, voice-to-text (on the phone)
• P i: “my son he prefers voice to text rather than typing”, “no one [in her family] uses screen readers”

Voice-to-text and screen reading

• P i: “The problem with screen readers is that they just start from the beginning and when it reaches the point you need, a lot of time has passed. It would be better if there was a button that would read you a particular block of text that you want. It is for people who can see the text and are not blind, but who feel like this could help them to understand.”
• P i: “None of them likes reading. They [her children] are all very creative about using voice to text, using voice commands. They don’t really use screen readers, but if there is an option to listen, to command, they would rather do that.”
• P i: “Judging by my children, if you use voice more, either reading it to you or input by voice, that would definitely increase participation of types like my children.”
• A D d: “Reading makes me feel really stressed. It is not just reading, but also the anxiety that comes with reading and writing. I think people don’t understand that.”, “It also makes me feel tired”
• A C i: confirms that screen reader is important
• A D d: “I think I would find it quite difficult to enter the experience that I just described, because I have got bad dyslexia. It would be easier for me to speak, because if I would write, it would be very different from what I just said. My spelling is quite limited, so it would be just basic words and sentences. So I could not say what I would want to say, because I would have to write down what I can spell. I would have to think about writing a simpler version, because I struggle with writing.”
• A D d: Would appreciate a voice-to-text function
• A (1) d: “Analysis or summary of what the page is. For example, read by audio or video.”

→ Even though many users are comfortable with reading and writing, a voice-to-text feature for input, as well as a (selective) screen reading function are regarded as indispensable accessibility tools

• P i: “In my family, autism is high-functioning, so we don’t need serious accommodations. But we did need help with speech and all of that. But the thing is that the senses of my children are different to some extent. So for them, to get the maximum out of information, it is best when they use as many senses as they possibly can. So when you read the text, one brain area is activated, when you look at pictures, another area. If there is voice explanation, it would be a third one. The more resilient the form is, the more ‘avenues’ it uses, the better.”

[ghost]

Embedded Screen Reader Demos

The Screen Reader UI is now more embedded into the accessibility menu panel under the navigation adjustment options. The previous toggle feature was removed and features inbuilt into the new accessibility panel - which provides space for a cleaner platform design. Feedback suggested requirement for the screen reader to be...
More Selective / Highlighted position on content /text / Page Summary / Page auto play

Issue Design: Screen Reader (HP,T) #325 linked to issues 339 & 340 updated
Accessibility - More Selective Screen Reader #319
Accessibility - Page Summary - Screen Reader #318

The demos shows 2 options

1. Embedded Screen Reader UI

Content Selected

https://k6ej5a.axshare.com/#g=1&p=0-home-light-screen-reader-option-1-select

Content Playing Highlighted

https://k6ej5a.axshare.com/#g=1&p=0-home-light-screen-reader-option-1-playing

2. Standalone Screen Reader UI with extra functionaly including fast forward, rewind and page auto play function.

https://k6ej5a.axshare.com/#g=1&p=0-home-light-screen-reader-option-2

1. Embedded Screen Reader UI

Both UI's take on the features of Embedded Screen Reader in style and selection function / highlighting of text / copy to indicate user position (screen read content)

Screen Reader Page Summary The Summary link provides a brief two line overview of the function of a given page which is linked to the page descriptive tags functions as shown as Issue 319 and within the demo.

Consider auto play Screen Reader Feature that reads through all the sectioned content on a page using semantic html5 structural elements of a given page and its content !

The Screen Reader has been made more selective in it functionality - allowing the user to clearly select given text - select that content - click to play - screen reader highlights text to indicate the position the screen reader is at when reading the text to the user.

Page Summary Example Overview

Landing Page [Home - Tagline - Supporting Autism]

"This page provides login to begin adding your negative experiences,
outlines the aims of the platform, defines how the platform work, provides a overview of Configurations and how to Get Involved whilst also navigating to core information about the platform - Sharing, Trust and Educate."

Design ref ARIA click / selector on links example as shown.

2. Separate Screen Reader UI bottom left of the page

The function of the standalone Screen Reader has extra functionality where the user can pause - rewind and fast forward scrub the play head - allowing the user to revisit a given point within a sections content.

Whilst also allowing the user to re-review a given block of text and move forward or backwards.

[ghost]

Screen Reader Options 1 & 2

Option 1 - Selection / Option 1 - Playing / Option 2 - Extended UI

https://k6ej5a.axshare.com/#g=1&p=5-screen-reader-updates

Option 1 - Selection

Option 1 - Playing

Option 2 - Extended UI

[GeorgiaHCA]

Really fantastic work @jiraslama ! Happy for this to go into testing 🌟 ⭐

[fjThomasStanley]

Backlog refinement (22/09/2020) - The page about could be shown in a collapsible panel that is shown by clicking on an about button (maybe positioned at the top of the page in the title bar) or the tagline component as referred to by alan-turing-institute/AutisticaCitizenScience#319 could act as the button. The screen reader can pick up on this panel to read out the descriptive contents.

[ghost]

https://k6ej5a.axshare.com/#g=1&p=0-home-light-screen-reader-summary

[gedankenstuecke]

Made issue #369 to create an accessibility checklist that can be used for the MVP and going forward. Closing this along with other accessibility checklist items for now.