interactive rating component

Community feedback

• 

  T

  Grace•31,010

  @grace-snowPosted over 1 year ago

  Well done on updating your solution, this is much better :)

  A few more pointers

  • be very careful using opacity: 0 as a way to accessibly hide inputs. The latest tests show that might not work on ChromeVox. So it's better to stick with the tried and tested sr-only/visually-hidden css snippet
  • There are no focus-visible styles on this, making it impossible for keyboard users to know if they are on the inputs or not. You can do this with something like input[type="radio"]:focus-visible + label { outline: 3px solid whatever-color; }
  • A small improvement would be to wrap the inputs in a fieldset and add the aria-labelledby attribute to it, with its value as the ID of the heading.

  This overflows my iPhone mini slightly and its touching the screen edges on all sides. That is about 320px wide (or high in landscape orientation). That is the same as the minimum requirement under WCAG where there should be no horizontal scroll needed. The following CSS tweaks would fix that:

  
  /* style.css | https://xdcron.github.io/IRC/style.css */
  
  .inputs {
  /* gap: 1rem; */
  gap: 0.3rem;
  justify-content: space-between;
  }
  
  .circle {
  /* width: 3rem; */
  /* height: 3rem; */
  width: 2.8rem; // about 44px 
  height: 2.8rem;
  }
  
  form {
  /* padding: 1.6rem; */
  padding: min(4vw, 1.6rem);  // allow the padding to shrink on small screens
  margin: 0.5rem;
  }
  
  

  Marked as helpful

  1

  ---

  

  Caleb•180

  @xdcronPosted over 1 year ago

  @grace-snow thank you i will fix those right now

  0