dabrianator
Explore posts from serversKPCKevin Powell - Community
•Created by dabrianator on 3/7/2024 in #front-end
Best way to make this Frontend Mentor challenge accessible?
I was looking at this UI challenge by Frontend Mentor and I was wondering what would be the most accessible way to implement it?
https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC
The design features a toggle switch that will show different prices depending on the option that is toggled. My main question is, what would be a good way to implement the toggle switch?
I tried looking popular websites to see how they implemented similar features and it seems like every website I visit has a completely different implementation.
I’ve seen an implementation as plain buttons, radio buttons, some with role=“tab”, etc.
Thanks!
Relevant links:
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
https://www.w3.org/WAI/ARIA/apg/patterns/switch/
22 replies
KPCKevin Powell - Community
•Created by dabrianator on 5/15/2023 in #front-end
ARIA label for multiple currencies
Hello. I have a button with an item title + price as the aria label
ex: Blue shorts $39.99
read as (Blue shorts thirty nine dollars and ninety nine cents)
And the item can be sold in canada where it would be
Blue shorts CA $39.99
This would be read as (Blue shorts "See Ey" thirty-nine dollars and ninety-nine cents)
should I leave it to be read by screen readers in that way? Or should be something like
Blue shorts $39.99 Canadian/CA/???
5 replies