Accessibility is not
a feature.

WCAG-EM

Are you looking for a UX professional who can evaluate accessibility conformance of your product? I am here to help you.

Accessibility and inclusive design are not just nice-to-have features or cultural values; they are essential for every business. Integrating inclusive design practices throughout the product development cycle can result in a better return on investment. Notably, one in every six people in the UK has a disability, and people with disabilities have a surprisingly high buying power. Considering the diverse population in the UK, accessibility and inclusive design should be prioritized from the outset. This approach not only reduces the need for product redevelopment but also mitigates the risk of litigation from potential customers.

I can conduct expert review for accessibility and provide a comprehensive WCAG-EM report as a result.

Accessible components

Whether you need design guidelines that prioritize accessibility or the creation of accessible components, I am here to help.

A keyboard accessible 5-stars rating

As I chose Bootstrap for CSS, I added all the classes according to their uses simultaneously as well. Since we aim to create an accessible user interface, I have included the WAI-ARIA attributes such as role, aria-label and aria-checked to provide improved semantics for the HTML document. I mulled over for quite a while and I decided role="radiogroup" for the wrapper div which contains all the icons and anchors. Since all the anchors actually work like radio buttons which should tell a user whether each of them has been checked or unchecked, I have come to the conclusion that this would be the best solution for this case.

I left the aria-label value for the same div just empty as that would be dynamically added by JavaScript followed by a user's choice. And I defined role="radio" to each anchor. This would be helpful for users with disabilities as assistive devices would let them know what they are and users can presume what they need to do with them. Moreover, they become more semantic with those attributes as each anchor contains aria-label and its value accordingly. I have already tested with VoiceOver on Mac, each time I move around the anchors, it read out the value of aria-label and role. Great!!!

As you can see in the JavaScript code snippet above, there are two types of event listeners, the click event is for users who use a mouse/trackpad and the keypress event is for users who mainly use a keyboard. I created all the variables on the top of the code block so, I can easily refer to them whenever I need them. We all know that what HTML elements need to be manipulated according to users' interaction. First, all the anchors would work like radio buttons here. The whole code snippet is basically to add an event listener for each anchor element and it runs the rest of the codes inside of the correct event type according to a user' input device. To reduce the repetition of the codes, I have wrapped the codes in the forEach method. If I didn't do it this way, I have to create the same event listener for each anchor element, that is to say, 5 times in total per event type! This way we can provide more readable codes for a team and we can work more efficiently. To maximise the code reuse, I created a function called interaction. Whether it is a mouse or keyboard interaction, fundamentally how they work is identical. I used the forEach method in order to iterate the same work over all the elements and the rest of the code is just to interchange the classes between bi-star and bi-star-fill based on the condition I wrote.

As I used ForEach twice, there are two index type, i and j. i index indicates the index of the anchor element which is clicked by a user amongst 5 of them and as j index is for the nested loop, the array indicated by j index will iterate every time a user clicks an anchor element. For example, the if( i === j ) statement is to enable the repeated interaction in case that a user clicks or keypresses multiple times on the same element, that is to say, aria-checked value can also switch between true and false interchangeably. Finally, each time a user interacts with the 5-star rating, the aria-label value will also change accordingly.