Kevin Powell - Community•9mo ago

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).

17 Replies

MarkBoots•9mo 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

dabrianatorOP•9mo ago

thats what i was thinking. and netlify seems to have implemented it that way though their implemetation is styled a bit differently

MarkBoots•9mo ago

i will see if i can make a little demo

dabrianatorOP•9mo ago

no need to trouble yourself. I'm pretty handy with CSS already. I appreciate it though!

MarkBoots•9mo 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

dabrianatorOP•9mo ago

i see. so multiple labels are acceptable?

MarkBoots•9mo ago

yea, can't see a reason why not

dabrianatorOP•9mo ago

cool. i'll try to use this pattern

MarkBoots•9mo ago

good luck!

dabrianatorOP•9mo ago

i'll update here if i find any other solutions

dabrianatorOP•9mo ago

here's my implementation https://frontend-mentor-pricing.vercel.app/

Frontend Mentor - Pricing Component with Toggle

Solution for Frontend Mentor Pricing Component with Toggle using only HTML and CSS. ZERO JavaScript.

🜲 ɢʀᴀɴᴛ•9mo ago

how do people toggle something with css? a quick answer would be fine then i can do research

clevermissfox•9mo ago

Checkboxes and/radio inputs

dabrianatorOP•9mo 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;
}

🜲 ɢʀᴀɴᴛ•9mo ago

yes you would use checkboxes but what do u do

clevermissfox•9mo 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.

dabrianatorOP•9mo ago

If you want to see my code I have the GitHub repo linked on the page

Gaming

Programming

Best way to make this Frontend Mentor challenge accessible?