공부 | HTML, CSS 웹 접근성(스크린리더) 정리

웹 접근성(스크린리더)

❓상황

스크린 리더에 탐지되지 않게 하는 방법을 강의로 처음 접하게 되었고, 이를 학습하여 정리하였음.

 

📖 스크린리더란?

스크린리더는 컴퓨터의 화면을 다양한 언어로 음성으로 표현하는 것을 뜻한다.
흔히, 트위치에서 스트리머에게 후원을 할때 후원 텍스트를 기계가 읽어주는 것을 생각하면 된다.

 

🧮 정리

HTML : aria-hidden

aria-hidden 속성은 HTML Tag 요소의 속성으로 사용된다.
aria-hidden 속성이 입력된 HTML Tag가 접근성 API에 노출되었는지 여부를 나타낸다.

접근성 API에 노출이 되었다면, 스크린리더가 음성으로 표현할 수 있고,
반대로 접근성 API에 노출이 되지 않았다면, 스크린리더가 음성으로 표현할 수 없다.

<div>
    <div>
        <h2>
            <span aria-hidden="true">😤</span>
            제목입니다.
        </h2>
    </div>
</div>

예시로 스크린리더가 읽을 필요없는 아이콘을 가진 HTML Tag 속성에 부여하면 된다.

 

언제 사용할까?

아이콘 또는 이미지와 같은 순전히 장식적인 내용
반복되는 텍스트와 같은 중복된 내용
메뉴와 같은 오프스크린 또는 축소된 콘텐츠

 

주의사항

1. 요소에 aria-hidden="true"를 추가하면 해당 요소와 해당 하위 요소가 접근성 트리에서 모두 제거된다.
즉, aria-hidden 속성은 하위 노드에도 영향이가기 때문에, 속성 부여시 주의해야한다.

2. 다음과 같은 경우 aria-hidden="true"를 추가해서는 안 됩니다.
HTML 속성에 hidden 특성이 있는 경우
CSS : display: none;
CSS : visibilty: hidden;
위의 3가지의 경우에는 이미 접근성 트리에서 제거되었기때문에, HTML Tag에 aria-hidden 속성을 부여할 필요가 없다.

3. button이나 input 태그와 같은 focusable한 태그에는 사용하지 말아야한다.

 

CSS : display: none;

aria-hidden 속성 말고, 접근성 트리에서 제거 할 수 있는 방법이 또 있었는데, 그 중 하나가 display:none;이다.

display: none; 스타일을 적용한 HTML 요소는 render tree에서 삭제되기 때문에,
화면상에서도 보이지가 않고, 스크린리더가 읽을 수도 없다.

<div>
    <div>
        <h2>
            <span style="display: 'none';">😤</span>
            제목입니다.
        </h2>
    </div>
</div>

 

CSS : visibility: hidden;

visibility: hidden 스타일은 display: none; 스타일과 마찬가지로 화면에 보이지 않고, 스크린리더가 읽을 수 없다.

<div>
    <div>
        <h2>
            <span style="visibility: 'hidden';">😤</span>
            제목입니다.
        </h2>
    </div>
</div>