접근 가능한 토글

소개

토글은 참/거짓 스위치처럼 보이는... 스위치... 아마 스마트폰 설정에서 비슷한 컨트롤을 찾을 수 있을 것입니다.

내부적으로는 컨트롤의 TRUE/FALSE 유형이므로 기본적으로 더 화려한 스타일입니다input[type="checkbox"].

그리고 접근 가능하게 만드는 것이 까다로운 이유가 여기에 있습니다.

평소의 방법

일반적으로 HTML 및 CSS로 이러한 토글을 구축하려면 멋진 스타일label 요소 내에 시각적으로 숨겨진 확인란이 필요합니다. 이것이 대부분의 튜토리얼에서 알려줄 것입니다.
label 요소는 전체 토글이 "상호작용"(즉, 클릭 가능)인지 확인합니다.
display: none로 체크박스를 숨길 수는 없습니다. 보조 기술에 보이지 않게 하기 때문입니다. 화면에는 보이지 않지만 액세스할 수 있게 만드는 요령은 다음과 같습니다.

label.toggle {
    position: relative;
    ...

    [type="checkbox"] {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    ...
}

문제와 해결책

주의 사항: 토글(체크박스)은 label로 래핑되어 있으므로 실제 텍스트 설명을 제공해야 합니다(a11y 경찰 👮에 의해). 그러나 우리는 컴포넌트가 그 텍스트 설명이 어떻게 보여야 하는지 지시하는 것을 원하지 않습니다. 왜냐하면 그것은 여러 가지 다른 방식으로 사용될 수 있기 때문입니다.

경우에 따라 텍스트가 토글 앞에 있을 수도 있고, 토글 뒤에 있을 수도 있고, 위에 있을 수도 있습니다.

텍스트가 더 길고 스타일이 지정되는 경우도 있고 그렇지 않은 경우도 있습니다.

따라서 label 🤷‍♂️를 사용할 수 없습니다. 그러나 일반 div 또는 span를 대신 사용하면 토글의 "클릭 가능성"이 손실됩니다.

따라서 실제 요령은 확인란을 토글 래퍼( div 또는 span )만큼 크게 확대하고 다르게 숨기는 것입니다.

div.toggle {
    position: relative;
    ...

    [type="checkbox"] {
        width: 100%;
        height: 100%;
        opacity: 0.00001;
        ...
    }

    ...
}

먼저 체크박스가 전체 너비와 높이를 가지는지 확인합니다. 그런 다음 opacity: 0.00001; 로 확인란을 거의 숨깁니다.

불투명도는 0(완전히 표시되지 않음)에서 1(완전히 표시됨) 사이의 값을 가질 수 있습니다. 우리는 0에 매우 가까운 값을 사용하므로 기본적으로 화면에는 보이지 않지만 보조 기술에는 표시됩니다.

그게 다야. 아래는 전체 데모입니다 :)



^ 실제 확인란 배치를 보려면 불투명도 속성을 제거하십시오.


몇 가지 참고 사항:

토글을 생성하는 데 JS를 함께 사용하는 경우 거의 모든 요소를 ​​사용할 수 있습니다. 하지만 피하고 싶었다.

모든 양식 요소는 label 안에 배치되어야 하지만 World of Components에서는 이러한 저수준 구성 요소가 주변의 모든 것이 어떻게 보여야 하는지 지시하는 것을 원하지 않습니다. 구성 요소는 독립적이어야 하며 주변 환경에 영향을 주지 않아야 합니다(적어도 이것이 제 철학입니다).