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/
Frontend Mentor
Frontend Mentor | Pricing component with toggle coding challenge
This challenge will get you thinking about building an accessible custom toggle control and also test your layout skills.
Web Accessibility Initiative (WAI)
Tabs Pattern
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
Web Accessibility Initiative (WAI)
Switch Pattern
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
M
MarkBoots44d ago
for me 2 radio buttons make the most sense, it's one of the 2 options that you choose. the annually and monthly would be the labels for these radio buttons
D
dabrianator44d ago
thats what i was thinking. and netlify seems to have implemented it that way though their implemetation is styled a bit differently
No description
M
MarkBoots44d ago
i will see if i can make a little demo
D
dabrianator44d ago
no need to trouble yourself. I'm pretty handy with CSS already. I appreciate it though!
M
MarkBoots44d ago
think this would be my way to implement it
<div class="plan">
<!-- hidden -->
<input type="radio" name="plan" id="annually" value="annually" checked>
<input type="radio" name="plan" id="monthly" value="monthly">

<!--label text annually -->
<label for="annually">Annually</label>

<!--switch with labels on top of eachoter -- only show the one that is not active -->
<div class="switch">
<label for="annually">1</label>
<label for="monthly">2</label>
</div>

<!--label text monthly -->
<label for="monthly">Monthly</label>

</div>
<div class="plan">
<!-- hidden -->
<input type="radio" name="plan" id="annually" value="annually" checked>
<input type="radio" name="plan" id="monthly" value="monthly">

<!--label text annually -->
<label for="annually">Annually</label>

<!--switch with labels on top of eachoter -- only show the one that is not active -->
<div class="switch">
<label for="annually">1</label>
<label for="monthly">2</label>
</div>

<!--label text monthly -->
<label for="monthly">Monthly</label>

</div>
so double labels, 1 for the text and 1 for the switch
D
dabrianator44d ago
i see. so multiple labels are acceptable?
M
MarkBoots44d ago
yea, can't see a reason why not
D
dabrianator44d ago
cool. i'll try to use this pattern
M
MarkBoots44d ago
good luck!
D
dabrianator44d ago
i'll update here if i find any other solutions
D
dabrianator42d ago
Frontend Mentor - Pricing Component with Toggle
Solution for Frontend Mentor Pricing Component with Toggle using only HTML and CSS. ZERO JavaScript.
🜲 ɢʀᴀɴᴛ42d ago
how do people toggle something with css? a quick answer would be fine then i can do research
C
clevermissfox42d ago
Checkboxes and/radio inputs
D
dabrianator42d ago
I used the :has() selector a lot with radio inputs
#hidden-thing {
display: none;
}

main:has(#show-hidden-thing:checked) #hidden-thing {
display: block;
}
#hidden-thing {
display: none;
}

main:has(#show-hidden-thing:checked) #hidden-thing {
display: block;
}
🜲 ɢʀᴀɴᴛ33d ago
yes you would use checkboxes but what do u do
C
clevermissfox33d ago
Mark has an example code block above. Using labels and hiding the checkbox. There are tons of examples to research and it depends on what you're trying to accomplish. A menu button? Toggle button ? Accordion? Tabs? The opportunities are endless so its difficult to answer your question.
D
dabrianator33d ago
If you want to see my code I have the GitHub repo linked on the page
Want results from more Discord servers?
Add your server
More Posts
position:fixed; scroll-yI have a mobile header with `position: fixed;` style. It has a lot of menu items that make the last Responsive Carousel V2Goal: Create a responsive carousel for all screensizes Here is my attempted solution - https://codeHow to use Git in command lineI can't understand this. I litterally just want to upload some files, but they make it impossible.Installing a library with JSHello, I'm trying to build a demo bar code scanner. I found this library: https://serratus.github.ioNested route problemI have a nested route system, One is in App.js and one in RoomGuard component The app.js has router Max width with fr in grid.Hi, I am trying to limit breakout in the grid to a amx width but would like to retain ints atributesopen full stackNot sure how useful this will be but it looks useful for understanding fullstack. Trigger warning: rchange default keyboard layout without changing the default language in windows 11windows 11 has plenty of flaws, and one of them is how badly it accommodates people who speak multipHaving problem in wrapping custom hooks with React componentThis is my code:- const App = () => { return ( <Router> <Routes> <RoFind new positions of elementsPlease watch the following video, in question 5 when I connect the answers together they are followiPosition Sticky stops working, after I set a sibling element to Position Absolute```html <header> <div class="logo"></div> <div class="header__links"></div> <nav class="nav"><question regarding "key" in jsIk this might seem a lil dumb but can someone explain to me why we use "key" in js or react as wellEven/odd row styling with CSS Grid and subgrid, is this a good idea?For work, I needed some table styling and decided to use CSS Grid. Because I need even/odd row stylihow to prevent last item of flex to grow```css section {display:flex; flex-wrap:wrap; gap:1rem} div {background-color:red; width:0; min-widtResponsive IdeasHello there! Thank you in advance for your help. I've been working on a Weather API that I need to fIssue in starting sassFirst off, i have exisiting .css file doing some mini project of mine then i encountered limitation Button coloring with a imaged backgroundIt's proving quite difficult to find the right color to make this not look out of place/tacky.. I tHelp me, help you, by helping me, so I don't ask so many questions(yep?)Here's the site: https://anglian-online.netlify.app/ Here's the code: https://github.com/callum-lainFor some reason the post value isn't being shown even tho in var_dump it shows that it's there.You can see that the `$_POST["ajaxMonth"]` has a string value of "2" in the first image however whenResponsive Carousel (TailWind + JS)Hello, I'm trying to build a responsive carousel. Ideally, what I'd like to happen is that the amou