I was looking over the new DDS code and example pages yesterday (it is looking good and love the blue diamonds) and had a few questions and observations.
I used the WCAG contrast checker on Chrome to sample the colours to check as I was not sure they would meet the guidelines and found the following.
the brand dark #99a8c1 is what I sampled for the background with the copy in white - #FFFFFFbut this doesn’t meet AA accessibility for either small or large
Brand Dark outline & Brand Dark Outline Solid #ebebeb background and #8d9cb5 copy - this doesn’t meet AA accessibility for either small or large
Brand Light #66767f background colour and #22272b copy - this meets AA accessibility only for large size but not for small (which for buttons doesn’t really work well)
Brand Light Outline @22272b background and #66767f for text, this meets AA accessibility for large but not for small
White #7a7d7f background colour #22272b for copy, this meets AA accessibility for large but not small
Danger #e3a0af background and #ffffff for copy, this doesn’t meet AA accessibility for either small or large
is the link Built by the Digital Design System required and is it to link to the DDS?
On my machine the font in the grey area looks a little too small for readability - I can see you are using the XXS font setting and it could be my screen settings. The NSW Gov site is using this size, but the DPIE site has a much larger font size for that area, so just wanted to check it met with the min size for people with poor eyesight.
I thought I should share what I found so they can ben looked at and updated where required. As these are the core elements and they should meet the WCAG AA standards at a minimum as the agreed NSW Government requirement.
If you want further information or to ask any questions please don’t hesitate to reach out.
Me again, it wouldn’t let me post more than 2 links in the reply, so I had to separate this one out.
I noticed yesterday that the radio buttons NSW Digital Design System - Forms when neither option was selected (just above the error section) when tabbing (using a keyboard) skipped that section completely, you could tab through the checkboxes but not the radio buttons (it didn’t stop at the first one to use the arrow keys to get to the move to the next option)
Hi @Monica, thanks for your post! I hope I’ve been able to address your questions below, however please shout if I’ve missed anything.
Disabled buttons
These are inactive UI elements that are also not focusable. We will be updating our guidance to advise, where possible, only use where research shows it makes the experience easier for users as they do have low contrast and can confuse users.
Footer
Yes the “Built by the Digital Design System” is example text and can be removed. You are also able to use a larger typography style where desired.
Radio buttons
We looked at the issue with focus on radio buttons. The problem is with this particular example and not component itself. As we have multiple radio boxes on the page and they share a name only first one gets a focus. We are working to fix the example in next few days but you can safely use the component itself as it’s working as expected.
Thank you again for your questions and feedback, we really appreciate it!
I did find 1 other one yesterday @amy.howard the stacked logo (the reply box wont let me add in the URL) the vertical and horizontal examples look the same when viewing on a laptop / desktop screen, it isn’t until you reduce the width of the screen you see the vertical stacking change - maybe a note should be added so people know to resize the browser window so they can see the difference.
