Kevin Powell - Community•5mo 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•5mo 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

dabrianator•5mo ago

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

MarkBoots•5mo ago

i will see if i can make a little demo

dabrianator•5mo ago

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

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

dabrianator•5mo ago

i see. so multiple labels are acceptable?

MarkBoots•5mo ago

yea, can't see a reason why not

dabrianator•5mo ago

cool. i'll try to use this pattern

MarkBoots•5mo ago

good luck!

dabrianator•5mo ago

i'll update here if i find any other solutions

dabrianator•5mo 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.

🜲 ɢʀᴀɴᴛ•5mo ago

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

clevermissfox•5mo ago

Checkboxes and/radio inputs

dabrianator•5mo 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;
}

🜲 ɢʀᴀɴᴛ•5mo ago

yes you would use checkboxes but what do u do

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

dabrianator•5mo 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?