While working on the feature we realised we wanted to also ensure full accessibility compliance. During the design phase, I realised early on that traffic light colours that would be used, could easily cause issues for those with red/green colour blindness.
To resolve this, we added the patterns that can be seen in the designs. These patterns were based on common patterns for these same colours across other websites, as well as using some heraldry symbols.
You can read more about how colours and patterns were used in Heraldry here.
The next most important feature in terms of accessibility was how we could ensure voiceover still worked and worked well on a feature like this.
The complexity lay in how this screen was structured, the selection areas are essentially floating and at different x and y values to get them laid out over the correct area on the body.
This meant that we needed to create a focus order that selected the correct area, and also announced a phrase that made sense to those using voice over.