Accessibility and usability. User-friendly experiences for all.
When it comes to user experience (UX) design, two key factors I must always prioritize are accessibility and usability. I am always designing with accessibility in mind - considering screen reader factors, compatibility, alternative text for images, color contrast, keyboard navigation, and more.
Below is an example from the UI Kit that was produced as part of Auckland Council Design System. Accessibility starts from the root. If we design with accessibility in mind right from the beginning, then we have a solid foundation that will domino through to the end product.
Issue: a number of current state base components interactive states had failed accessibility. There were inconsistencies with colour, usage and behaviour which therefore will affect all content that utilises these base components (almost every page). Changes to brand look and feel was out of scope - any updates made can not change the visual brand identity.
Solution: By taking a step back to unravel and get to the root of what was causing the issue. I collaborated with the Senior Developer to understand from a technical point of view to identify how these inconsistencies were occuring. Organised discussions with the Test Lead and an Accessibility Consultant to understand more in depth the accessibility requirements. Then the solution became quite simple. By identifying the necessary pseudo states for the various scenarios; standardising where possible and streamlining the Active:Focus state across all components I was able to redesign the underlying states that can be consistently carried out for all components that require an interaction. Creating a more consistent and intuitive experience.
Some examples of refined base components.
Checking Focus state to ensure it works for all gradients and secondary core colours for future proofing.
This also tidied up and removed all unneccesary CSS.