웹 접근성을 생각한 radio button style custom

아직 그림판 만들기 3을 제대로 작성하지 않아 추가를 해야하지만,

css로 작업한 작업물이 웹 접근성을 떨어트리는 것이 있어 그것을 수정하려고 합니다.

 

웹 접근성이란?

고령자, 장애인 등과 같이 정보 소외 계층이 비장애인과 동등하게 원하는 정보를 자유롭게 접근하고 이용할수 있도록 보장하는 것

 

모든 것은 키보드로 접근이 가능해야 한다를 지키지 못했더라구요. 그래서 그 부분을 수정하려고 합니다.

 

제가 지키지 못한 대부분의 이유는 display를 none으로 설정 했기 때문입니다.

 

그럼 수정한 코드를 보여드리겠습니다!

 

    <!--index.html-->
    <div id="brush-type-section">
        <h4>브러쉬 모양</h4>
        <ul id="brush-zone">
            <li>
                <input type="radio" name="brushType"  id="line-brush" value="/">
                <label for="line-brush"> / </label>
            </li>
            <li>
                <input type="radio" name="brushType" id="circle-brush" value="O" checked>
                <label for="circle-brush"> O </label>
            </li>
            <li>
                <input type="radio" name="brushType" id="square-brush" value="ㅁ">
                <label for="square-brush"> ㅁ </label>
            </li>
            <li>
                <input type="radio" name="brushType" id="eraser-brush" value="지우개">
                <label for="eraser-brush">지우개</label>
            </li>
            <li>
                <input type="radio" name="brushType"  id="paint-brush" value="페인팅">
                <label for="paint-brush"> 페인팅 </label>
            </li>
            <li>
                <input type="radio" name="brushType" id="board-reset" value="초기화">
                <label for="board-reset"> 초기화</label>
            </li>
        </ul>
</div>

 

#brush-zone{
    list-style-type: none;
    margin: 25px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;

}
#brush-zone li{
    position: relative;
    margin: 5px 5px 5px 0;
    width: 60px;
    height: 40px;
    border: 1px black solid;
    border-radius: 3px;
    text-align-last:center;
}
#brush-zone li:hover{
    background: lightseagreen;
    color: white;

}
#brush-zone input, #brush-zone label{
    display: block;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
#brush-zone input[type='radio']{
    opacity: 0.011;
    z-index: 100;
}
#brush-zone label{
    cursor: pointer;
    z-index: 90;
    line-height: 2.4em;
}
input[type='radio']:checked + label{
    background: lightseagreen;
    color: white;
}

input[type='radio]의 display를 none으로 설정하는 바람에 키보드로는 접근을 할 수 없었습니다.

 

이렇게 하면 키보드로 접근은 되는데 키보드로 접근을 성공했는지의 여부를 알 수 없었습니다.

이것도 css로 해결이 가능합니다!

 

:focus-within 이라는 선택자를 사용하면 됩니다.

#brush-zone li:focus-within{
    border: #005ccc 2px solid;
    width: 58px;
    height: 38px;
}

 

이렇게 하면 키보드로 움직일 수도 있고, 키보드 접근이 성공 했는지도 확인 할 수 있게 되었습니다!