[HTML] 웹 접근성 지침

웹 접근성(Web Accessibility) 이란?

장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

 

웹 접근성 지침 이란?

• 웹 콘텐츠에 관한 내용
• 사용자들이 사용하는 도구 개발에서 지켜야할 점
• 브라우저나 확장 프로그램을 만드는 사람들이 주의해야 할 점 등…..

위와 같은 점 등을 구분해 가이드라인을 만든것

Home

Home

 

웹 접근성 지침은 W3C에서 설립한 WAI(Web Accessibility Initiative)에서 전문적으로 연구하며 가이드라인을 제공한다.

 

WCAG(Web Content Accessibility Guidelines)

WCAG란?

• 웹 콘텐츠 접근성 가이드라인 표준 권고안
• 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침
• 웹 서비스를 제작하는 사람들이 기획/디자인/개발 과정에서 고려해야 할 요구사항
• 접근성은 시각, 청각, 지체, 음성, 인지, 언어, 학습 및 신경 장애를 포함한 광범위한 장애를 포함한다.

속어, 약어 사용을 지양

• 불필요한 전문용어, 속어, 약어 사용을 지양해야한다.
  • 장애인, 비장애인, 외국인 등의 사용자가 정보를 이해하기 어려움
• 약어는 풀어서 작성
• 속어나 비속어는 사용하지 않을것

 

콘텐츠의 제목과 단락을 명확히 구분

• 스크린 리더 : 화면 정보를 음성으로 읽어주는 주는 프로그램
• 콘텐츠 내 제목과 단락을 구분하는게 스크린 리더가 글 내용 파악하는데 좋다.
  • HTML 작성시 제목 요소와 단락 내용의 의미에 맞게 나눌것
  • 스크린 리더는 제목 요소를 기준으로 목차를 만들거나 이전, 이후 문단으로 이동하는 기능을 제공할때가 많다.
  • 문단으로 내용을 적적히 나누면 스크린 리더가 속도를 조절해 더 명확히 내용을 전달한다.
  • 
• 레이아웃 작성시 <article>, <nav>, <footer> 등의 요소 사용하는게 좋다.
  • 스크린 리더가 정보 탐색시 기계에 추가로 정보를 제공해서 각 요소의 내용에 맞게 읽는 방식을 조절가능

 

키보드 동작을 제공

• 웹페이지를 만들 때 시멘틱 태그를 사용하지 않고, 시각적으로 꾸미기 위해 일부 속성을 사용하지 않는다면 기본요소들이 제공하는 키보드 동작들을 모두 사용하지 못한다.
• 또한 스크린리더는 해당 요소가 선택할수 있는 요소인지, 이벤트 발생 요소인지 파악하지 못한다.
  • 예를 들어 <button>, <input>, <select> 요소 등을 사용하지 않고 <div> 태그와 CSS로 비슷하게 구현할때 엔터키, 탭키 를 사용해 해당 요소로 이동시키는 동작과 같은 상호작용들을 누릴수 없다.
  • <select> 도 <div> 태그로 만든다면 이벤트를 추가하지 않는이상 화살표로 아이템 선택, 탭 이동 등의 동작이 제대로 작동하지 않는다.
• <div> 태그를 사용해 구현해야한다면 몇가지 추가 코드로 사용목적과 유사하게 만들어야한다.

• role: 해당요소의 원래 목적을 작성
  • <div>를 <button>의 목적으로 사용할때 role=”button” 으로 작성시 스크린리더 등의 기계에서 버튼으로 인식한다.
• tab-index: 해당요소를 탭키로 도달하게 하는 속성
  • 탭키로 이동할 다음 키보드 위치를 지정한다.
• 키보드 이벤트 리스너 추가하기: 버튼 동작이 엔터, 스페이스로 동작하도록 js를 이용해 이벤트를 추가

 

Focus 하는 지점을 명확히

웹사이트는 키보드만으로 모든 기능이 동작해야한다.

특히 장애가 있으면 키보드를 사용한 웹조작 비중이 높아진다.

키보드 사용자는 탭키로 링크, 버튼, 텍스트 입력창을 찾는다.

항목에 Focus 된다면 시력이 있는 사용자를 위해 윤곽선이 나타나야 한다.

outline CSS를 0이나 none으로 설정시 Focus 된 요소인지 식별이 불가능해진다.

마우스 사용불가 사용자들을 위해 윤곽선을 지우는것은 지양해야한다.

만약 윤곽선을 지운다면 현재 어떤 요소를 focus 하는지 추가로 나타내야한다.

 

멀티미디어 요소에 접근성을 부여

스크린 리더는 텍스트에 접근해 해당요소를 읽지만

이미지, 동영상, 오디오는 모든 스크린리더에서 접근 불가

시각장애인이나 청각 장애인을 위해 이런 요소들이 어떤 의미인지 전달해주는 속성이 있다.

<img src="coffee.png"> //스크린리더가 "coffee.png image" 라고 읽는다.
<img src="DSC02999.JPG"> //이런 경우는 어떤 이미지인지 알기 힘들다.

alt와 title 속성을 작성한다면 스크린리더는 alt 속성값을 읽는다.

alt 속성을 통해 이미지가 시각적으로 어떤 모습인지 올바르게 전달해야하며, 개인적 견해를 작성하는것은 지양해야한다.

<img src="coffee.png" alt="컵에 담긴 따뜻한 아메리카노" title="아메리카노">

alt를 지정하면 이미지에 마우스를 올렸을때 이미지에 대한 title이 노출된다.

만약 이미지에 특별한 의미가 없으면

⇒ background-image 로 작성하거나

⇒ alt에 빈문자열을 지정

ARIA(Accessible Rich Internet Applications) 등 더 살펴보고 주의해야하는 부분이 존재한다.

웹접근성 가이드라인을 모두 완벽히 맞추는것은 사실상 불가능하다.

하지만 가이드라인 준수는 더 많은 사람들이 불편 없이 사이트 이용하는데 중요한 부분이다.

더 나은 웹 생태계를 위해 프엔 개발자는 이런 가이드를 항상 고려하고 지키려는 노력을 해야한다.

 

WAI-ARIA

(Web Accessibility Initiative’s Accessible Rich Internet Applications)

W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다.

스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술

컨텐츠 내용이나 구조가 바뀌는 상황에서 페이지 전환 상태나 정보를 WAI-ARIA로 알려준다.

//Before

<li tabindex="0" class="checkbox" checked>
  체크1
</li>

role, aria-checked ARIA 속성을 사용하여 해당 영역이 체크박스인지, 체크가 되었는지 안되었는지 까지 명시 가능

//After 

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
  체크1
</li>

 

주의사항

<div role="button">주문하기</div>

위와 같이 role="button" 를 주어도 키보드로 해당 div에 접근이 안된다.

불필요한 ARIA 속성을 주지말고, 시맨틱한 태그를 사용할것

태그들에는 암묵적 role(역할)과 적용할 수 있는 role이 정해져 있다.

ARIA in HTML

role별로 필수 속성, 지원가능 속성

ARIA in HTML

 

aria-label

• 화면에 현재 요소를 설명할 텍스트가 없을 경우에 사용하는 설명용 텍스트를 담고있다
• 모든 HTML 요소에 사용가능
• 이미지를 사용해 시각적 표현을 할 경우 대체 텍스트 역할

<button class="bt_menu" aria-label="navigation menu"></button> //햄버거 메뉴 버튼

• 우리 눈에 보이지 않더라도 브라우저에게는 전달이 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용
• 텍스트와 aria-label을 같이 쓰면 스크린리더는 aria-label을 읽는다.

<button class="bt_menu" aria-label="navigation menu">메뉴 버튼</button>

// "navigation menu"와 "메뉴 버튼" 둘중에 "navigation menu"을 읽는다.

 

aria-hidden

• 정보로서 아무런 가치가 없는것들을 스크린리더가 무시하도록 하는
• 요소에 aria-hidden="true"를 추가하면 해당 요소와 해당 요소의 모든 자식이 접근성 트리에서 제거
• 의미없이 장식적인 컨텐츠, 반복 혹은 중복된 컨텐츠에 사용

 

role

• 관계가 있지만 html 마크업으로는 관계성을 부여하기 어려울때 역할을 명시해주기위해 사용
• role=”” 형식으로 사용하는데, “”안에 들어갈수있는 내용은 정해져있음(아래 링크 확인)
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
• 예를 들어 <button>인데 그렇게 쓸수가 없는 이유가 있는 경우, <div role=”button”> 처럼 사용할수있음

 role

• role=”region”
  • 랜드마크(중요하게 쓰이는) 컨텐츠를 표현할때 사용 (예를 들어 캐로셀 이미지)
  • 스크린리더가 쉽게 엑세스 할 수 있도록 해준다고함
• role=”tablist”
  • 탭 리스트
• role=”tab” id="product-carousel-tab-1"
  • 클릭하면 패널에 보여줌 id를 부여하여 해당 이미지와 패널을 직접 연결(input과 label의 관계처럼)
• role=”tabpanel” aria-labelledby="product-carousel-tab-1"
  • tab을 클릭하면 클릭한 그 tab을 보여주는 패널화면 

•  

<div role="region">
      <ol>
        <li role="tabpanel" **aria-labelledby="product-carousel-tab-1"**>
          <figure>
            <img src="./assets/images/img-product-01.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 1</figcaption>
          </figure>
        </li>
        <li role="tabpanel">
          <figure>
            <img src="./assets/images/img-product-02.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 2</figcaption>
          </figure>
        </li>
      </ol>
  
      <ol role="tablist">
        <li role="tab" **id="product-carousel-tab-1"**>
          <button type="button">
            <img src="./assets/images/img-product-01.jpg" alt="1번 이미지">
          </button>
        </li>
        <li role="tab">
          <button type="button">
            <img src="./assets/images/img-product-02.jpg" alt="2번 이미지">
          </button>
        </li>
      </ol>
    </div>

aria-labelledby

• 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용