Correct web accessibility issues
Elements in the Data Explorer that fail to meet the accessibility standard need to be corrected:
Buttons do not have an accessible name, no button text:
-
All pages: Web accessibility button -
All pages: Login button -
All pages: Language selector -
Search result page: header search edit box -
Search result page: facet names -
Search result page: spotlight input fields -
Viz page: multi-selection button
Insufficient colour contrasts of default text/background colours:
-
Home page: sub-level category txt grey current: #7A7A7A
change to: "TXT - light"#444
(see UI guidelines) -
Search result page: facet value count txt grey colour: #7A7A7A
change to: "TXT - light"#444
(see UI guidelines) -
Search result page: result dimension list colour: #0000008A
change to: "TXT - light"#444
(see UI guidelines) -
Search result page: result update date colour: #0000008A
change to: "TXT - light"#444
(see UI guidelines) -
Search result page: result separator line colour: #CCCCCC
change to: "TXT - Muted"#666
(see UI guidelines) -
Orange highlight on buttons: In addition to the orange background highlight, the text font colour need to change to "TXT - dark" #182026
-
Viz page: 'Privacy Policy' link colour in Share dialog, and 'API documentation' and 'contact us' links in Developer API: #106ba3
change to: "Primary"#0549ab
-
Viz page: Success notifications in Share dialog:
The white text on green background contrast is insufficient:
--> Change text colour to "TXT - dark"#182026
-
Viz page: Success notifications in Share dialog:
The red text on white background contrast (when the email address is missing) is insufficient:
--> Change text/line colour to new! "Secondary accent-1"#b31010
; -
Viz page: Dataflow title and dimension separator dot colour in sub-title: #0297C9
change to: "Body"#494444
(see UI guidelines), including also for ChartGenerator -
Viz page: Table/Chart border colour (top/button): #0297C9
change to: new! "Default"#007bc7
, including also for ChartGenerator -
Viz page: sub titles colour: #7A7A7A7A
, change to: "Body"#494444
(see UI guidelines) -
Search result + Viz page: Text colour of hover state of facet/filter items, change to: "Primary" #0549ab
The current contrast is insufficient:
--> Hovered facet/filter items must use "Primary"#0549ab
text colour (see: Active Hover "Button default" in UI doc) -
Viz page: Text colour of The 'Terms & Conditions' link when you hover over the copywrite symbol
The contrast is insufficient and the current background colour used is undefined:
--> Tooltip should use styles of "Information tooltip": text colour: "TXT - dark"#182026
, background: "Neutral lighten-5"#ffffff
. The link colour should be "Primary"#0549ab
. The hovered link should be new! "Default"#007bc7
. -
all pages: Update the "Default" colour from #0e90e0
to new! "Default"#007bc7
in order to be AA-compliant -
Viz page: The orange warning text for too many observations (Example) is not AA compliant:
Thus the following change is to be implemented:- Instead of direct warning message, show the Warning icon (let's try with size 20x20px) vertically aligned with the dataflow title (background: "highlight-1" (orange), text: "TXT - dark"
#182026
):
- When the user goes with the mouse over the icon, the warning message is shown as tooltip (background: "highlight-1" (orange), text: "TXT - dark"
#182026
):
- Instead of direct warning message, show the Warning icon (let's try with size 20x20px) vertically aligned with the dataflow title (background: "highlight-1" (orange), text: "TXT - dark"
Additional notes:
- All Australian Government websites must meet Web Content Accessibility Guidelines (WCAG 2.0) AA standard: https://www.w3.org/TR/WCAG20/ This standard is considered best practice for all web development so you don't exclude potential users.
- An important part of the standard is that all text must have sufficient contrast from the background colour. This ensures that text can be read by low-vision users, (and makes it easier for everyone to read).
- There are many free online tools that allow you to quickly and easily check whether your text has sufficient contrast e.g. https://www.visionaustralia.org/services/digital-access/resources/colour-contrast-determinator
Edited by Mike Velluet