웹 접근성을 지켜야 하는 이유(+스크린리더)

📚내용 정리

1. 웹 접근성이란?
2. 웹 접근성의 이점
3. 스크린리더란?
4. 스크린리더 사용자 고려하기

---

시작하며

나는 이미지가 깨져도 어떤 이미지인지 알기 위해서 alt 값을 입력해야 한다는 단편적인 지식만 가지고 있었다. 공부를 위해 여러 참고 사이트들을 보며 '이미지에 alt 값을 적지 않은 경우는 왜일까? 틀린 코딩인가?'라는 의문을 가졌고, 최근 트위터(x)에 alt값을 누르면 보여지도록 하는 업데이트가 있었는데 상세하게 이미지를 설명하고 있는 문장을 보며 alt값 그리고 접근성에 대해 다시 제대로 공부해 봐야겠다는 생각이 들었다.

---

✍웹 접근성이란?

인적, 환경적 요인에 제약없는 웹 정보 접근

즉, 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것이다. 시력이 저하되거나 색맹이 있는 사용자를 위한 폰트 사이즈 조절, 시각장애인을 위한 대체 텍스트 제공, 검색창에 음성 인식 기능을 사용하여 상지 장애가 있는 사용자들의 편의성을 높이는 등을 예시로 꼽을 수 있다.

웹 접근성은 반드시 준수해야 하는 법적 의무사항이지만 지켰을 때의 이점 역시 존재한다.

---

✍ 웹 접근성의 이점

• 사용자 층의 넓어짐
• 규정과 법적 요구 사항에 대한 준수
• 서비스를 이용하는 모든 사용자들에게 이로움
  (음성 검색 기능은 일시적으로 손을 사용하기 어려운 사용자에게도 도움을 줄 수 있다.)

---

✍ 스크린리더란?

스크린의 정보를 음성으로 출력해 주는 화면 낭독 프로그램

저시력 시각장애인과 난독증과 같은 학습장애, 인지장애인과 노인, 다문화 가족 등의 웹 접근성을 지원하는 보조 기구다. 하지만 텍스트 데이터를 제외하고 시각적인 힌트(이미지 등)로 제공된 내용을 사용자에게 알려주는 것은 힘들기 때문에 코드를 작성할 때 대체 텍스트를 입력해 줘야 한다.

---

✍ 스크린리더 사용자 고려하기

나는 스크린리더 사용자를 고려하기 위해서는 스크린리더가 어떻게 작동되는지 알아봐야 한다고 생각했다. 마침 공부를 하며 대체 텍스트를 빽빽하게 적어 둔 웹 문서가 있어 페이지를 직접 읽어 봤다.

크롬에서 제공하는 스크린리더를 사용했습니다

깨달음의 연속이었다. 우선 내 태그에는 불필요한 alt 속성이 많았고, 그동안 참고 사이트에서 alt값이 비워져 있던 이유는 디자인 요소와 같이 본문 내용과 상관없는 이미지는 alt값을 비워야 하기 때문이란 걸 깨달았다. 막상 svg 요소나 background로 이미지를 사용했을 때는 대체 텍스트가 비워져 있어 제대로 제공되지 않는 정보가 많았다. '내가 실 사용자로서 내 사이트를 접했다면 기분이 나빴을 수도 있겠구나' 싶었다. 앞으로는 보다 접근성이 좋은 웹 페이지를 만들기 위해 몇 가지 속성을 공부했다.

---

aria-hidden

aria-hidden 값을 false, true로 선언하여 사용할 수 있다. 스크린 리더 사용자에게 정보 오버로드 방지할 수 있으며 검색 엔진 최적화 (SEO) 개선할 수 있다.

true: 스크린 리더와 같은 보조기술 사용자의 콘텐츠 탐색을 제한
false: 접근성 API가 스크린 리더와 같은 보조기술 사용자에게 숨겨진 콘텐츠를 노출

aria-label

화면에 현재 요소를 설명할 텍스트가 없을 경우 사용하는 설명용 텍스트를 담고 있다.

aria-labelledby

aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다. id값을 이용해 연결해 줄 수 있다.

alt

렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값임과 동시에 스크린리더에서 이미지를 설명하는 대체 텍스트로써 역할한다. 디자인 요소 등과 같이 불필요한 이미지에는 값을 작성하지 않는 것이 좋다.

role

role은 웹 접근성을 위해 생겨났으며 위젯, 구조 및 동작에 대한 의미 정보를 올바르게 전달하기 위해 생겼다. elements의 확장 개념으로 좀 더 명확한 구조와 의미를 설명하는 역할로써 img 태그가 아닌 요소에 이미지를 (svg, background img 등) 사용할 떄도 역할을 명시해 주는 것이 탐색에 도움이 된다.

---

> 추가적으로 알게 되는 내용이 있을 때마다 업데이트됩니다!