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 was wondering if the ‘disabled state’ of the buttons NSW Digital Design System - Buttons been tested for WCAG AA accessibility?
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 - #FFFFFF but 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
#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
#7a7d7f background colour #22272b for copy, this meets AA accessibility for large but not small
#e3a0af background and #ffffff for copy, this doesn’t meet AA accessibility for either small or large
I also had a question and an observation around the Footer NSW Digital Design System - Footer
- 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.
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.
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.
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!
thank you @amy.howard for the answers and for getting back so quickly.
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.
Great spot @Monica! We’ll adjust the title to make it clear that the logo orientation is on mobile view to avoid any future confusion. Thanks!
thank you @amy.howard I think that will make it easier for people.