1 of 22

Accessibility improvements

CI Project

May 2021 - Present

2 of 22

Font size controls – GLT presentation

2

SNSW’s objectives

Accessibility improvements

3 of 22

Font size controls – GLT presentation

3

Commentary

Service NSW strives to create inclusive website experiences. Our aim is to provide equal access to information for all our customers, regardless of their ability or environment.

4 of 22

Font size controls

4

Font size controls

Accessibility Improvements

5 of 22

Font size controls

5

Desk research

Font size controls

6 of 22

Font size controls

6

Desk research / Theory

Empathise with the demographic by understanding their pain points

Aim towards an inclusive experience

Cater to the ageing demographic

7 of 22

Font size controls

7

Desk research / Best practice

#1

Less code to maintain as the user’s zoom preference is stored within the browser.

#2

68% of respondents used 2 or more types of assistive technology, with 23% using 4 ore more different types.

WebAIM

#3

Reasons for browser zoom settings

Most (if not all) modern browsers let the user zoom in and out through in-built functionality.

8 of 22

Font size controls

8

Desk research / Best practice

“Many people with a low vision do not use magnifying software, and they may not be familiar with their browser’s text size adjustments.”

W3.org

#1

“Changing browser font size is now more difficult for those with lower digital literacy skills.”

NNgroup

#2

“Changing font size is by far the most common type of custom style applied. 24% of respondents utilise more than one of these style types, with some users reporting all of them.”

WebAIM

#3

Reasons for font resize options on site

W3.org

“Many people with a low vision do not use magnifying software, and they may not be familiar with their browser’s text size adjustments.

This may be particularly true of older people who are learning about computers late in life and who may be experiencing age-related vision loss.

It may also be true of some people with cognitive disabilities who require increasing font size.”

NNGroup

“Changing browser font size is now more difficult for those with lower digital literacy skills.

As of IE5, toggle browser font size is no longer available on the toolbar by default and requires the user to customize, which is advanced for the aging demographic.”

WebAIM

“Changing font size is by far the most common type of custom style applied. 24% of respondents utilise more than one of these style types, with some users reporting all of them.

Paragraph, line, letter, and word spacing are used rather infrequently – of note because of the new WCAG 2.1 success criterion now requires pages to support user customisation of these styles.”

9 of 22

Font size controls

9

Desk research / Case studies

UnitingCare QLD

10 of 22

Font size controls

10

Desk research / Case studies

Sydney Morning Herald

11 of 22

Font size controls

11

Spike: Design and development

Font size controls

12 of 22

Font size controls

12

Spike / RMS playback

Playback from external designers

What: To understand whether the font size control functionality would be possible to the other platforms if contained in the global navigation. �

When and who: 19 April MyAccount and RMS designers

Relevant insights:

There may be technical constraints that may limit the feasibility of this feature
Change language functionality doesn’t not work on MyAccount products
Both MyAccount and RMS designers see the value in this feature and think it would directly benefit the customers
MyAccount uses javascript for the global navigation which means that there is no connection
There are different environments for different product teams and we could potentially run into implementation issues if global
Consideration to the placement of A+ A- in the global header pushes MyAccount to the centre (needs to be a consideration)

Before progressing any further with the project, we met with designers from MyAccount and RMS transactions. �We wanted to get an idea of any constraints or difficulties we may face with other platforms, as well as desirability. ��We were able to gather relevant insights.

There may be technical constraints that may limit the feasibility of this feature
Change language functionality doesn’t not work on MyAccount products
Both MyAccount and RMS designers see the value in this feature and think it would directly benefit the customers
MyAccount uses javascript for the global navigation which means that there is no connection
There are different environments for different product teams and we could potentially run into implementation issues if global
Consideration to the placement of A+ A- in the global header pushes MyAccount to the centre (needs to be a consideration)

13 of 22

Font size controls

13

Spike / RMS playback

Playback from RMS transactions

What: To understand whether the font size control functionality would be possible to the RMS platform if contained in the global navigation. �

When and who: 22 April (Craig Mitchel and Thejashri PV)

Relevant insights:

There are multiple transactions 15-16 within the RMS product
It will be moving from Salesforce to a new React stack
3 transactions which are a month away from going into the new stack
They want to avoid anything being adopted on the Salesforce stack due to phase out
Payment and non-payment transactions: Potentially not engaged to the senior level

Fixed font size with RMS transactions
Would be good if the change is integrated with the CCP platform

Craig would be interested in integrating this feature into React
The font size toggle must be dynamic to headers and body

Once we evaluated the insights from the designers of the MyAccount and RMS transactions teams, we decided it would be best to get a better understanding from a technical and product perspective.

We met with Craig Mitchel and Thejashri from the RMS transactions team.

Some of the relevant insights:

There are multiple transactions 15-16 within the RMS product
It will be moving from Salesforce to a new React stack
3 transactions which are a month away from going into the new stack
They want to avoid anything being adopted on the Salesforce stack due to phase out
Payment and non-payment transactions: Potentially not engaged to the senior level

Fixed font size with RMS transactions
Would be good if the change is integrated with the CCP platform

Craig would be interested in integrating this feature into React
The font size toggle must be dynamic to headers and body

14 of 22

Font size controls

14

Spike / RMS playback

Playback from MyAccount

What: To understand whether the font size control functionality would be possible to the MyAccount platform if contained in the global navigation. �

When and who: 27 April (Brendan Kerrison and Ivan Jimenez)

Relevant insights:

H1, H2, H3 concerns

How is it maintained platform to platform

How does the font size scale?
Does it carry over to other elements such as the global header?
Salesforce platform, same issues as RMS. Doesn’t want it to be integrated into the outgoing platform
Implement as the same approach as RMS

15 of 22

Font size controls

15

Design & test

Font size controls – Engadine

16 of 22

Font size controls

16

Design / Design

Global sub-navigation – Variation 1

Dropdown variation placed in the global navigation

Prototype link

17 of 22

Font size controls

17

Design / Design

Global sub-navigation – Variation 2

Icon variation placed in the global navigation

Prototype link

18 of 22

Font size controls

18

Design / Design

In-page variation

Icon variation placed in the global navigation

Prototype link

19 of 22

Font size controls

19

Design / Testing

Customer testing

20 of 22

Font size controls

20

Customer interviews / Insights

Engadine customer insights

#1 – Lack of browser zoom functionality awareness

#2 – Positive reaction with the font size options provided

#3 – Difficulty to find font size controls in the global navigation

#4 – Participants had a clear preference towards the in-page variation

"I think the text size with the three different fonts is better, because it's more visual"

"People won't have to read, especially for those from difference countries, they just click on the big A and it changes the size"

"Oh, medium and large (fonts), I like that"

Large font size: "That is very good now!"

"Maybe you can make a quick note on the page on how to make [the font] bigger. I didn't know how to do that unless you shown me or told me"

#1 – Lack of browser zoom functionality awareness

4 of the 5 participants weren’t aware of browser zoom functionality and depended on inconvenient alternatives to make the text larger

#2 – Positive reaction with the font size options provided

The on-site functionality and font sizes provided in the prototypes met participant expectations
“The larger size makes it much easier for me to read”

#3 – Difficulty to find font size controls in the global navigation

#4 – Participants had a clear preference towards the in-page variation

Participants found the in-page option easier as it was in context to the page, with one participant noting it’s due to the font size controls sitting on top of a white background
“This [3^rd] option is the way to go, it’s much simpler”
“Now this is clear. Position is good and easy to find”

21 of 22

Font size controls

21

Implementation

Font size controls

22 of 22

Font size controls

22

Design / Implementation

Implementation on our staging environment

Dev environment link