중요하지만 익숙하지 않은 접근성과 표준 😵‍💫

웹 접근성(Web Accessibility)이란, 웹 사이트에서 제공하는 정보를 신체적, 환경적 조건에 관계없이 동등하게 이용할 수 있도록 보장하는 것입니다. 현대의 웹 사이트는 특정 기기나 운영체제에만 최적화되어 있는 경우가 많아 사이트가 제공하는 정보를 정상적으로 이용하기 어려운 경우가 많습니다. 특히 노약자와 장애인을 포함한 사회적 약자들은 혜택을 받아야 하는 분들임에도 오히려 정보를 제공받는 면에서 소외되곤 합니다. 그렇기에 웹 접근성은 정보의 격차가 발생하는 부분을 줄여, 서로가 정보를 동등하게 얻고 공유하는 것을 궁극적인 목표로 하고 있습니다.

웹 표준(Web Standards)은 말 그대로 웹에서 표준적으로 사용되는 기술이나 규칙을 말하며, 표준화 단체인 W3C에서 권고하는 표준안을 따르고 있습니다. 웹 표준이 없던 시절에는 사이트를 만들더라도 브라우저마다 지원하는 태그가 달라, 언제나 두 개 이상의 사이트를 만들어야 했습니다. 그렇기에 표준이 등장한 것이고, 어떤 브라우저에서 사용하더라도 웹 페이지가 동일하게 보이고 정상 작동할 수 있게 되었습니다.

웹 표준을 준수하게 되면 다음과 같은 장점을 얻을 수 있습니다.

📍 웹 접근성 수준 향상

웹 사이트에 접속하는 환경은 스크린 리더, 최신 브라우저, 모바일 등 다양합니다. 이러한 다양성이 때로는 개발을 어렵게 만드는 원인이지만, 표준이 있기 때문에 어느 환경이든 동일하게 정보를 제공받을 수 있습니다. 따라서 웹 표준을 준수한 사이트는 다양한 환경이나 기기에서도 내용이 올바르게 표시되어 접근성이 향상될 수 있습니다.

📍 검색 친화적인 사이트 구현

meta 태그를 이용한 정확한 문서 정보의 제공과 적절한 제목(Heading 태그)의 사용, 의미 있는 마크업은 검색 시 노출되는 결과에 많은 영향을 끼칩니다. 그렇기 때문에 이를 잘 작성했다면, 별도의 홍보 비용을 들이지 않더라도 검색 시 상위 리스트에 노출될 확률이 높아집니다.

이처럼 웹 표준을 준수하게 되면 기본적으로 접근성 향상에 도움이 됩니다. 그렇기에 많은 기업들이 일찍부터 접근성 향상을 위한 첫걸음으로 웹 표준을 준수하고자 했습니다. 대표적으로 네이버, 다음이 있습니다.

웹 접근성 지침

웹 접근성 지침은 W3C에서 설립한 WAI(Web Accessibility Initiative)에서 연구하며 가이드라인을 제공합니다. 다양한 부분에 걸쳐 웹 개발 시 지켜야 하는 사항과 주의해야 할 점을 제시하고 있습니다. 본문에서는 콘텐츠를 만들 때 지켜야 하는 가이드 일부만 소개합니다.

콘텐츠의 제목과 내용 구분하기

스크린 리더는 텍스트를 읽을 때, 사용한 태그에 따라 읽는 방법(속도, 강조 등)을 조절합니다. 그렇기 때문에 되도록이면 내용 해석을 잘할 수 있도록 콘텐츠의 제목과 내용을 명확하게 하는 것이 좋습니다.

<!-- Bad -->
<article>
  제목<br /><br />
  내용
</article>

<!-- Good -->
<article>
  <h1>제목</h1>
  <p>내용</p>
</article>

상호작용 요소에 키보드 동작 제공하기

<input>, <select>처럼 상호작용이 일어나는 요소를 디자인을 위해 <div>로 만드는 경우가 있습니다. 하지만 이렇게 되면 상호작용 요소들에 사용할 수 있었던 키보드 동작(엔터, 스페이스, 탭)을 사용할 수 없게 됩니다. 만약 <div>로 만들어야 한다면, 요소에 다음 속성을 추가해야 합니다.

role: 요소의 역할을 지정하여, 스크린 리더에게 추가 정보를 제공합니다. (ex. role=“button”) tab-index: 탭 키로 해당 요소에 접근할 수 있도록 합니다.

<div role="button" tab-index="0" id="custom-button">div로 만든 커스텀 버튼</div>

포커스 지점을 명확하게 하기

모든 웹사이트는 키보드만으로도 이용할 수 있어야 합니다. 그렇기 때문에 현재 포커스 중인 요소를 한눈에 식별할 수 있도록 해야 합니다. 만약 포커스 되는 요소의 스타일을 outline: 0이나 outline: none으로 지정한다면, 화면에서 식별할 수 없게 되므로 지양해야 합니다. 만약 의도적으로 외곽선을 제거한 것이라면, 식별할 수 있는 다른 수단을 제공해야 합니다.

멀티미디어 요소에 설명 추가하기

스크린 리더는 텍스트에 접근해 요소를 읽을 수 있지만, 이미지와 같은 멀티미디어 요소는 무엇을 의미하는지 읽을 수 없습니다. 따라서 이미지를 띄우는 img 태그를 사용한다면, 대체 문자인 alt 속성까지 값을 지정하기 바랍니다.

<!-- Bad -->
<img src="coffee.jpg" />

<!-- Good -->
<img src="coffee.jpg" alt="맛있는 커피" />

alt가 지정된 img 요소는 스크린리더가 읽을 때, 맛있는 커피 이미지라고 읽습니다. alt에 들어갈 내용은 이미지를 설명했을 때 단번에 이해할 수 있는 내용이 좋습니다.

WAI-ARIA

WAI-ARIA(줄여서 ARIA)는 스크린 리더와 같은 보조 기기가 읽을 수 없는 요소들에 대해 필요한 정보(역할, 속성, 상태)를 제공하여, 콘텐츠에 원활하게 접근할 수 있도록 W3C에서 만든 기술 사양입니다. 예전에는 레이아웃 구조를 <div>로만 작성했기 때문에 보조 기기가 내용을 제대로 읽지 못했습니다. 이 부분은 시맨틱 태그의 등장으로 어느 정도 개선되었지만, 동적인 콘텐츠들은 여전히 읽는 데 많은 어려움이 있습니다. 그래서 ARIA는 이러한 컨텐츠들에 탐색에 도움이 되는 추가 정보를 담아 원활한 이용이 가능하도록 만들어 줍니다. 아래는 li 요소를 스타일링해서 체크박스로 사용하고 있는 코드입니다.

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

이는 일반인이 웹 사이트에 접속해서 사용하기에 별다른 문제가 없습니다. 하지만 시각적으로 불편한 분들은 스크린 리더의 도움을 받아 사이트를 이용하는데, 스크린 리더는 이 요소가 체크박스 역할을 하는지 도저히 알 수 없습니다. 바로 이런 경우 ARIA를 사용하면 됩니다.

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

role 속성으로 해당 요소가 체크박스의 역할을 한다는 것을 명시했고, aria-checked 속성으로 현재 체크박스가 가지고 있는 상태까지 함께 명시했습니다. 이렇게 하면 스크린 리더로 읽더라도 해당 요소가 체크박스의 역할을 하고 있고, 현재 어떤 상태인지까지 읽을 수 있습니다.

위 코드는 어디까지나 예시이며, 체크박스는 일반적으로 input을 이용해 구현합니다. 그리고 HTML5의 대부분 요소는 기본적으로 role을 가지고 있기 때문에, ARIA를 사용할 때 주의해야 합니다. button 태그의 경우 암묵적으로 role=“button”을 갖게 되는데, 이 경우에는 role 속성을 쓸 필요 없습니다. 그렇기 때문에 처음부터 용도에 맞게 표준을 지키면서 마크업하는 것이 우선이고, 요소에 맞지 않는 role을 지정하지 않아야 합니다. 만약 특정 요소에 별도의 역할을 부여하고 싶다면, W3C ARIA에서 확인해 보시기 바랍니다. 그럼 자주 사용하는 두 가지 속성 aria-label과 aria-labelledby 정도만 알아보겠습니다.

aria-label

aria-label은 모든 HTML 요소에 사용할 수 있으며 요소를 설명합니다.

일반인이 햄버거 모양의 버튼을 볼 때, 이 버튼이 네비게이션 메뉴의 역할을 한다는 것을 쉽게 알 수 있습니다. 하지만 스크린 리더를 이용하는 분들은 별도의 추가 정보가 없다면 절대로 알 수 없습니다. 여기서 aria-label 속성을 사용한다면, 해당 버튼이 네비게이션 역할을 한다는 것을 보조 기기에게 알려줄 수 있습니다. 바로 이렇게 말이죠.

<button class="menu-btn" aria-label="navigation menu">
  <i class="fas fa-bars"></i>
</button>

보조 기기는 해당 요소를 읽을 때 내부에 다른 문자(Static Text)가 있더라도, aria-label의 값을 우선으로 읽습니다.

aria-labelledby

aria-labelledby는 좀 더 디테일한 설명을 붙일 때 사용할 수 있습니다.

<div id="radio_label">My radio label</div>
<ul role="radiogroup" aria-labelledby="radio_label">
  <li role="radio">Item #1</li>
  <li role="radio">Item #2</li>
  <li role="radio">Item #3</li>
</ul>

이 속성은 요소의 id를 값으로 받기 때문에, 외부의 요소나 숨겨져 있는 요소(display: none, visibility: hidden)까지 참조 가능합니다. 그리고 aria-label 속성과 함께 사용되었다면, aria-labelledby 속성이 우선시 됩니다. 레이블을 많이 사용하는 이유는 일반적으로 대화형 UI의 경우 반드시 레이블을 제공해야 하기 때문입니다. WAI-ARIA는 상황에 따라 다른 속성을 제공해야 합니다. ARIA 속성은 본문에서 소개한 것 외에도 정말 많기 때문에, 좀 더 자세히 알고 싶은 분들은 레진 WAI-ARIA 가이드라인을 참고해 보셔도 좋을 것 같습니다.

References

• 레진 WAI-ARIA 가이드라인
• WAI-ARIA 접근성1. 소개 및 주의사항, 태그별 role의 사용
• WAI-ARIA 접근성2. 영역에 대한 설명, 레이블 (aria-label, aria-labelledby)
• [MDN] Accessible Rich Internet Applications, ARIA
• [W3C] ARIA in HTML