접근가능(키보드) checkbox/radiobutton/

checkbox

html

<form>
  <fieldset>
    
    <legend>
      <h3>What type of accessibilty issues do you see most often?</h3>
    </legend>

    <div class="wrapper">
      <input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-issues">
      <label for="a11y-issue-1">There are no issues.</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-2" name="a11y-issues" type="checkbox" value="no-focus-styles">
      <label for="a11y-issue-2">Focus styles are not present.</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-3" name="a11y-issues" type="checkbox" value="html-markup">
      <label for="a11y-issue-3">HTML markup is used in a bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
    </div>
    
  </fieldset>
</form>

css

html {
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 20px 50px
}

/* Inherit box-sizing to make it easier to change the property
 * for components that leverage other behavior.*/
*,
*::before,
*::after {
  box-sizing: inherit;
}

/*style form to limit width and highlight the long label*/
form {
    margin: 1rem auto;
    max-width: 750px;
}

/*style wrapper to give some space*/
.wrapper {
    position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*style label to give some more space*/
.wrapper label {
    display: block;
    padding: 12px 0 12px 48px;
}

/*style and hide original checkbox*/
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*position new box*/
.wrapper input + label::before {
  border: 2px solid;
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*create check symbol with pseudo element*/
.wrapper input + label::after {
  content: "";
  border: 4px solid;
  border-left: 0;
  border-top: 0;
  height: 20px;
  left: 14px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(45deg);
  transition: opacity 0.2s ease-in-out;
  width: 12px;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
  opacity: 1;
}

/*focus styles—commented out for the tutorial, but you’ll need to add them for proper use
.wrapper input:focus + label::before {
  box-shadow: 0 0 0 3px #ffbf47;  
  outline: 3px solid transparent;
}*/

https://codepen.io/tutsplus/pen/rqrpqw

Custom Accessible Checkboxes: Pseudo Element Check

 

Custom Radio Button Styles

<form>
  <fieldset>
    
    <legend>
      <h3>What type of accessibilty issues do you see most often?</h3>
    </legend>

    <div class="wrapper">
      <input id="a11y-issue-1" name="a11y-issues" type="radio" value="no-issues">
      <label for="a11y-issue-1">There are no issues</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-2" name="a11y-issues" type="radio" value="no-focus-styles">
      <label for="a11y-issue-2">Focus styles are not present</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-3" name="a11y-issues" type="radio" value="html-markup">
      <label for="a11y-issue-3">HTML markup is used in bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
    </div>
    
  </fieldset>
</form>

html {
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 20px 50px
}

/* Inherit box-sizing to make it easier to change the property
 * for components that leverage other behavior.*/
*,
*::before,
*::after {
  box-sizing: inherit;
}

/*style form to limit width and highlight the long label*/
form {
    margin: 1rem auto;
    max-width: 750px;
}

/*style wrapper to give some space*/
.wrapper {
    position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*style label to give some more space*/
.wrapper label {
    display: block;
    padding: 12px 0 12px 48px;
}

/*style and hide original checkbox*/
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*position new box*/
.wrapper input + label::before {
  border: 2px solid;
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
  border-radius: 50%;
}

/*radio pseudo element styles*/
.wrapper input + label::after {
  content: "";
  opacity: 0;
  border: 10px solid;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 10px;
  transition: opacity 0.2s ease-in-out;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
  opacity: 1;
}

/*focus styles*/
.wrapper input:focus + label::before {
  box-shadow: 0 0 0 3px #ffbf47;  
  outline: 3px solid transparent; /* For Windows high contrast mode. */
}

https://codepen.io/tutsplus/pen/XxBqwz

Custom Accessible Radio Buttons: Pseudo Element as Check

 

https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074

 

How to Make Custom Accessible Checkboxes and Radio Buttons

https://codepen.io/mpeace/pen/EKZqJP

Custom Checkboxes and Radio Buttons - Accessibility

https://m.blog.naver.com/PostView.nhn?blogId=qkrchgml4&logNo=220869883245&proxyReferer=https%3A%2F%2Fwww.google.com%2F

[Html/CSS] CSS를 이용하여 Tab menu 만들기

https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html

ARIA Radio Group and Radio Example

https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/js/radio.js