Accessibility - More Selective Screen Reader

[ghost]

A wireframe design and justification that builds on the current showcase of the screen reader feature for accessibility. The screen reader will need to be more selective in its functionality. Have a button that would allow the user to select a particular block of text clearly.

[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

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

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

[GeorgiaHCA]

Brilliant work @jiraslama and @katoss - I'm so glad you were able to respond to this nuanced feedback from a community member with a flexible solution. Great design and user-testing in sync. I think this would be a great one to test with dyslexic community members to see if it helps them find the platform more useable.

[fjThomasStanley]

Backlog refinement (22/09/2020) - We need a discussion about how ARIA can be added to preexisting and future platform components. We need this discussion with George Taylor (Fujitsu) as George has been looking into the technicalities of screen reader implementation.

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