사용자를 배려하면서 레이아웃도 보호하기
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; 일 경우
3. clip을 이용해 콘텐츠 설명하기
반면에 위에서 예시를 든 네이버를 참고해서 처리해보자. 요소를 엄청작은 상자에 가둔다고 생각하면 될것 같다. 레이아웃을 해치지 않으면서 보이지 않는 글자도 스크린리더가 읽어준다.<!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;
} */
h1 {
position:absolute;
overflow: hidden;
padding: 0;
margin:-1px;
width: 1px;
height: 1px;
clip: rect(0,0,0,0);
}
</style>
</head>
<body>
<h1>스크린 리더 테스트입니다.</h1>
<p>안녕하세요 제 말이 들리십니까?</p>
</body>
</html>
이것도 링크로 대체합니다.
4. 화면 밖으로 밀어버리기
position:absolute; 에 left: -10000px;값을 줘서 요소를 화면바깥으로 밀어서 보이지 않게 하는방법이다.
단, 시각장애인들 또한 완전히 시야가 없는것이 아닌경우가 많기 때문에 콘텐츠의 위치와 설명이 적절히 조화되어야 함을 항상 고려해야한다.
.sr-only {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}5. 스킵버튼 만들기
스크린리더를 사용해보니까 느낀건데, 누가 이걸 온종일 읽는걸 기다릴 수 있을까?
스킵버튼을 생성한다면 시간낭비없이 원하는 구획으로 바로 이동 할 수 있을 것이다.
<style>
.nav-skip a {
position: absolute;
top: -200px;
left: 0;
width: 300px;
line-height: 30px;
border: 1px
solid #fff;
color: #fff;
background: #333;
text-align: center;
}
</style> 메인 화면에서 요소를 화면밖 위로 올린 다음 Tab키를 누르면 활성화 되는 방식이다.
여러개를 만들어서 메뉴 네비게이션 처럼 사용해도 좋은 것 같다.
아래는 위의 스킵버튼에 :focus 를 사용해서 Tab을 누르면 해당 요소의 포지션값이 바뀌게 만들어 스킵버튼이 나타나는 방식으로 만들어본 예제이다.
스킵버튼 부분은 전혀 몰랐네요. 하나 배우고 갑니다~