스크린리더 사용자를 위한 요소배치

14261 단어 screen reader 웹접근성 front end 프론트엔드 스크린리더 제주코딩베이스캠프

사용자를 배려하면서 레이아웃도 보호하기

1. 보이지 않는 무언가가 있다.

🕵🏾‍♂️보이지 않는 요소는 왜 사용할까?

스크린 리더 사용자들에게 정확한 정보를 제공함과 동시에 화면을 보는 사용자들에게도 혼선을 주지 않도록 함이다.

내용은 보이지 않지만 html 상에서는 존재해서, 스크린리더가 해당 콘텐츠에 관련된 설명을 읽어 줄 수 있다.

네이버의 메인페이지를 살펴보면 스크린 리더 사용자들을 위해 검색아이콘(돋보기)을 설명해주는 요소를 찾아볼 수 있다.

.blind라는 클래스가 있는데 화면에서 보이지도 않고 내용만 검색이라고 되어있다.
거기다 clip을 사용해 0값을 줌으로서 아예보이지 않게 만들고 1,1px로 아주 작은 자리만 차지하고 있다.

2. display:none;을 사용하지 않는 이유

🤷‍♀️ 외않된뒈?

display: none; 를 부여받은 요소는 페이지 내에서 위치도 차지하지 않고 보이지도 않지만 html 내에서는 검출된다. 그러나 치명적인 단점이 있는데 요소를 아예 없는것처럼 취급해서 스크린 리더가 아예 읽지 않고 넘어간다는 점이다.

🤷‍♀️ 그럼 width:0; height:0; 하면 되잖아?

높이와 너비가 0으로 적용된 요소들은 html/css 상에서 존재하든 안하든 문서내 흐름에서 제외된다. 따라서 스크린리더는 해당요소를 생략하게된다.
또다른 문제점은, 검색엔진들은 의미없는 불필요한 요소들을 악의적인 의미로 인식하기 때문에 검색 패널티를 부과받을 수 있다.

아래는 display:none;을 적용한 예이다.
ios에서 제공되는 스크린 리더로 실행해보았다.

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>screen reader test</title>

<style>
   h1 {
       display: none;
   }
</style>

</head>
<body>
   
<h1>스크린 리더 테스트입니다.</h1>
<p>안녕하세요 제 말이 들리십니까?</p>
</body>
</html>

iframe이 막혀있는것 같습니다 링크로 대체했습니다.
display:none; 일 경우