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
Taken from [How to Make Custom Accessible Checkboxes and Radio Buttons](http://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxe...
codepen.io
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
Taken from [How to Make Custom Accessible Checkboxes and Radio Buttons](http://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxe...
codepen.io
How to Make Custom Accessible Checkboxes and Radio Buttons
Form elements like checkboxes and radio buttons look different depending on the user’s browser and operating system. For this reason designers and developers have long been styling their own...
webdesign.tutsplus.com
https://codepen.io/mpeace/pen/EKZqJP
Custom Checkboxes and Radio Buttons - Accessibility
Visually replace default system checkboxes and radio buttons with custom versions to allow for design consistency across browsers and platforms. - D...
codepen.io
[Html/CSS] CSS를 이용하여 Tab menu 만들기
Tab menu를 만들기 위해서 구글링을 해본 결과 구글링은 없는 게 없다!! 찾아보니 만드는 방법은 여러 가...
blog.naver.com
https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html
ARIA Radio Group and Radio Example
Pizza Crust Regular crust Deep dish Thin crust
www.w3.org
https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/js/radio.js