웹 접근성에 대한 생각

 

 

 

semantic 태그란 의미가 있는 태그로, 이 의미가 있다는 건 무엇을 뜻하는지 생각해 보았다.

그렇게 알게된 점은 semantic 태그는 '웹 접근성' 과 밀접한 연관이 있고, 

나의 생각과 의견을 정리해본다.

 

만약, 내가 열심히 만든 웹사이트에 사용자가 접근할 수 없다면 그 웹은 쓸모가 없어진다.

웹 사이트를 제작하는 목적은 매우 다양하지만 대부분 제품 판매, 서비스 제공, 홍보목적을 가질것인데,

사용자가 사이트에 방문을 안 한다면? (접근을 못 한다면?) 

그 웹은 쓸모가 없어지는 것이다.

그렇기 때문에 웹 개발자라면 한 번쯤은 웹 접근성에 대해 생각해 봐야 한다.

 

그렇다면 내가 생각했을 때 접근성이 좋다란 무엇일까?

 

문서의 기본 언어를 설정하는 것.

브라우저에게 문서에서 어떤 언어를 사용할 것인지 알려준다면 굉장히 장점이 늘어날 것이다.

seo에도 좋고, 번역도구나, 브라우저가 알맞은 언어와 단어를 구분할 수 있도록 한다.

ios에서는 voiceover 속성을 사용하여 음성을 자동으로 전환도 해준다.

시작 장애가 있는 사용자분들은 JAWS 프로그램(텍스트 음성 변환 출력을 해주는)에서 

올바른 음성으로 로드해주기 때문에 편리하게 사용 할 수 있을 것이다.

html에서는 lang 설정과 사용자 크롬 브라우저의 언어 설정이 다른 경우에는

크롬 자동 번역 인페이스에 뜨도록 설정이 된다.

이렇게 lang 속성을 설정하는 것만으로도 웹 접근성은 좋아지고

lang 속성은 검색엔진 및 브라우저 지원 목적을 가지고 있다.

 

 

 

 img 태그에 alt 속성을 넣어주는 것.

alt 속성은 느린 네트워크 환경이나 src(소스 속성) 값의 오류, 시작 장애인분들의 스크린 리더의 사용 등으로 

사용자가 이미지를 볼 수 없을 때 이미지 대신 정보를 제공한다.

 

이미지가 단순히 디자인을 위한 것이고, 유용한 추가 정보를 제공하지 않는다면 css에서 배경이미지로 관리하는게 좋다.

 

<img src="1image.jpg" alt="" />

 

이미지의 alt 속성은 절대 생략해서는 안된다.

alt 속성을 생략하는 경우는 이미지가 콘텐츠의 중요한 부분인데 텍스트로 표현할 것이 없을 때만 생략할 수 있다.

이미지가 콘텐츠의 중요한 부분이 아닐 경우 속성을 빈 값(alt="")으로 두면 비시각적인 브라우저(음성 등)에서

랜더링시 제외 해준다.

 

 

h1 - h6 헤딩 태그를 적절하게 사용하기.

<h1> - <h6> 헤딩 태그를 사용하여 아웃라인을 잡아줌으로써 사용자에게 더 나은 페이지 구조를 알려줄 수있다.

무엇보다도 스크린리더를 사용하는 사용자가 탐색하는 데에 도움이 된다.

스크린리더는 여러 다른 방법으로 콘텐츠의 이동을하는데.... 

예를 들어, NVDA 스크린 리더를 사용하는 사용자는 단축키(H 와 Shift + H)를 통해

헤딩태그에서 다른 헤딩태그로 바로 이동할 수 있다.

 

 

article, aside, nav, section, header, footer 등으로 주제에 맞게 섹션을 나눠 마크업하는 것.

 

이렇게 섹션을 나눠 마크업을 하면 사용자가 사이트를 탐색하는데에 도움이 된다.

하지만 섹션을 나누는 요소들을 남용하면 안 된다.

이 태그들은 <div>요소의 대안이 아니고, 섹션을 나누는 부분을 다른 콘텐츠와 구별되는 

큰 집합으로 보고 사용하면 된다. 의미에 맞는 구분과 목적이 아니라면 CSS/JS를 위해 <div>를 사용하는 것이 낫다.

그리고 이렇게 섹션을 나눠준다면 스크린 리더 사용자들이(시각장애인, 청각장애인) 섹션과 섹션 사이를 바로 이동하면서 페이지를 탐색할 수 있다는 장점이 있다.

주 콘텐츠를 <main>으로 묶어, 사용자가 단축키를 통해 주 콘텐츠로 바로 넘어갈 수 있도록 할 수 있다.

main 태그는 문서나 어플리케이션의 주 콘텐츠 부분임을 알려주고, 문서당 한 개 이상은 사용되어야 한다.

 

WAI-ARIA를 사용해보자.

 

WAI-ARIA는 W3C에서 만든 기술로 단순 HTML로 표현할 수 없는 의미들을 태그에 부여하여

시각적인 불편함이 있는 사용자들이 원활하게 페이지 탐색 및 이용을 하도록 도와주는 역할을 한다.

 

예를들어 아래의 코드를 살펴본다면?

<li tabindex="0" class="checkbox" checked>
  Receive promotional offers
</li>

 

li태그에 checkbox 클래스를 넣어 css상으로 체크박스 형태의 모양을 만들어 사용하고 있다.

이 경우, 시각적 불편함이 없는 사용자들은 css 화면을 보고 해당 영역이 체크박스임을 인지할 수 있지만

스크린리더로 화면을 탐색해야하는 사용자들은 위의 css 정보를 얻을 수 없다. 

 

이때 스크린리더 사용자들을 위한 방법이 WAI-ARIA를 사용하는 것이다.

 

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
  Receive promotional offers
</li>

 element가 무슨 역할을 알려주기 위해 role 속성에 checkbox를 적어주면 된다.

하지만 

올바르지 못한 ARIA를 사용할 바엔 사용하지 않는 편이 좋다.

스크린리더를 사용하여 페이지에 접근하는 경우 ARIA의 정보에 의지하게 되는데...

바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 치명적인 영향을 주게된다.

예를들면?

<div role="button">확인하기</div>

 

div 영역을 버튼으로 사용하고 있다고 했을 때,

role="button"을 작성한다고 해서 실제 html 상에 키보드 포커싱이

일반 버튼처럼 역할을 주는 것은 아니다. (키보드로는 div가 접근이 안된다.)

 

스크린리더 사용자들이 키보드로 접근을 할 때,

a, button과 같은 시멘틱 태그가 아니라면 키보드로 해당 컨텐츠를 접근할 수 없다.

그렇기 때문에 위의처럼 코드로 작성을 하게 된다면

키보드로 div 영역을 접근할 수 있도록 tabindex속성을 주거나 (div영역에 포커스를 주는 것) 

a, button 태그를 사용해야한다.

 

 

이렇게 글을 정리하며, HTML을 의미있게 사용하도록 앞으로도 계속해서 고민해야겠다.