Accessibility - Font Size Increase Function

[ghost]

A wireframe design and justification that showcases a option to increase the users font size. This function will be part of a accessibility panel to be accessible on every page of the platform.

[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

• A C d: “Usually they [people with autism] request larger font sizes, because then there is less text on the site that they are reading and they can cope with it better.
• A C d: positive towards alternative template and fonts as accessibility settings for people with visual impairments

[ghost]

For community review

https://k6ej5a.axshare.com/#g=1&p=1-landing-page-presentation-tech-expanded-access-o&view=b&c=1

[ghost]

Design Justification for accessibility menu panel

The menu covers a number of accessibility issues ie:
341 Colour Scheme Function, 343 Contrast Function, 344 Font Size Increase Feature etc

A accessibility interactive accessibility panel has been added to the right of the aims section on the landing page as blue arms outstretched icon with title currently shorted to Access - this should be present on all pages so that the accessibility panel features can be accessed at all time as required.

The accessibility menu will animate from the right to left as a scrollable overlay. The applied accessibility features can be activated and show to the left of the panel as the feature would be applied across the site.

The structure of the accessibility panel - Titled Accessibility Menu
The top of this will incorporate the language selector drop down component already designed and coded by dev on the left as place holder.

The help icon will activate the instructional overlay as previously wireframes.

The Accessibility menu consists of the current features within the 3 adjustment categories.The 3 Adjustments Categories are to be presented in accordions similar to the landing page and will cover the following adjustments.

1. Navigation Adjustments
2. Colour Adjustment
3. Content Adjustment

Each of the features within these categories can be activated as demoed overlay and multiple functionality applied. This activation overlay provides a brief description of the features functions and show that is active.

Contents 1 - 3

1. Navigation Adjustments

• Screen Reader
• Voice to Text
• Voice Commands (for consideration)

When navigation adjustments are selected the given adjustments functional UI is shown below as Screen Reader Link and ref to Nav Adjustments UI's Shown at the bottom of the panel menu for the other 2.

2. Colour Adjustment

• Custom Colour (change the site's colours) Background

• Custom Colour Headings

• Custom Colour Content

• Background Preset Colours (Pastels, pink and community pastel colours)

• Bright / High Contrast (changes sites brightness and contrast)

• Dark / High Contrast (changes sites background to black with bright fonts as selected)

• Contrast Mode (changes sites colours to contrasting colours as selection)

3. Content Adjustment

• Font Sizing (Increase & Decrease Font Size)

• Line Spacing

• Word Spacing

• High Contrast / Low Luminance Text (add overlay button and active description)

  Options X 4
  High Contrast 1 (white background, black text)
  High Contrast 2 (black background, yellow text)
  Low Luminance 1 (black background, brown text)
  Low Luminance 2 (light brown background, dark brown text)

• Magnifier (Increase & Decrease View Size) (add overlay button and active
  description)

[ghost]

Screen Grabs of Accessibility Panel for Dev

https://k6ej5a.axshare.com/#g=1&p=4-access-panel&view=b

Ref to Font Size +/-

[GeorgiaHCA]

Definitely an important option for lots of users and I'm glad you've done this work on accesibility. Thanks @jiraslama and everyone else who pointed this out in feedback. Think this is ready to be added to the development board for the prototype.

[GeorgiaHCA]

Please create links between the dev board and this one so they are connected. 🌟 ⭐ :)

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