[CSS] ⑦ 접근성(Accessibility)

 

▶접근성

웹 접근성은 모든 신체적 한계, 환경적 한계를 고려해 개발하는 것을 의미합니다.

우리나라의 장애인 차별 금지법에도 웹 접근성과 관련된 내용이 작성되었기 때문에 의무적으로 지켜야 하는 사항입니다.

웹 접근성을 따르는 개발은 장애가 있거나 노령으로 인한 신체 변화, 여러 기기 환경을 사용하는 모든 사람이 웹 사이트와 도구 등을 사용할 수 있도록 개발하는 것을 의미합니다.

그렇다면 프런트엔드 개발자는 어떻게 웹 접근성 지침을 준수할 수 있을까요?

 

▷웹 접근성 지침

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

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

 

이 글에서는 그 중 WCAG(Web Content Accessibility) 기반으로 몇 가지 가이드라인과 적용 방법을 설명할 것입니다.

WCAG에서 다루는 Content는 웹 페이지, 프로그램의 정보를 의미합니다.

즉 텍스트나 이미지, 사운드 같은 정보들을 어덯게 작성해야 더 많은 사람이 쉽게 이해하는지 작성한 단일 공유 표준입니다.

 

▷속어, 약어 사용을 지양하라

불필요한 전문 용어나 속어, 약어를 사용하는 것은 지양해야 합니다.

속어나 약어 등을 사용하면 장애를 가진 사람, 가지지 않은 사람 모두가 정보를 이해할 가능성이 매우 낮아지며 외국인 또한 사이트를 이해하기 매우 힘들어집니다.

약어는 풀어서 모두가 이해할 수 있도록 작성하며 속어나 비속어는 사용하지 않는 것을 권장합니다.

 

▷콘텐츠의 제목과 단락을 명확하게 구분하자

스크린 리더는 컴퓨터의 화면을 읽어 주는 프로그램입니다.

시각적으로 정보를 획득하기 어려운 사람들을 위해 화면에 나타나는 정보를 기계가 음성으로 읽어 줍니다.

콘텐츠 내 제목과 단락을 명확히 구분하는 것은 스크린 리더가 글의 내용을 파악할 때 도움을 줍니다.

HTML을 작성할 때 제목 요소와 단락을 내용의 의미에 맞게 나누는 것이 중요합니다.

스크린 리더는 제목 요소를 기준으로 목차를 만들거나 이전, 이후 문단으로 이동하는 기능을 제공할 때가 많습니다.

또한 문단으로 내용을 적절하게 나누면 스크린 리더가 속도를 조절해 더 명확하게 내용을 전달합니다.

<!-- GOOD -->
<article>
	<h1>WHO 사무총장 "마스크 착용 상기시켜 준 BTS 고맙다."</h1>
   	<p>WHO 사무총장은 트위터에서 "이번 주 가족들이 모여 추석 연휴를 축하하는 가운데 BTS 제이홉이 아미(팬클럽)에 마스크 착용을 상기시켜 줘서 고맙다."고 적었다.</p>
   	<p>"BTS가 마스크 착용을 상기시키고 팬과 지구촌 시민들의 본보기가 되었다. 고맙다."라는 말을 게재하기도 했다.</p>
</article>

<!-- BAD -->
<div>
	WHO 사무총장 "마스크 착용 상기시켜 준 BTS 고맙다."
   	<br><br>
   	WHO 사무총장은 트위터에서 "이번 ㅜ 가족들이 모여 추석 연휴를 축하하는 가운데 BTS 제이홉이
   	아미(팬클럽)에 마스크 착용을 상기시켜 줘서 고맙다."고 적었다. "BTS가 마스크 착용을 상기시키고
   	팬과 지구촌 시민들의 본보기가 되었다. 고맙다"라는 말을 게재하기도 했다.
</div>

또한 레이아웃을 작성할 때 HTML5에서 제공하는 <article>이나 <nav>, <footer>등의 요소를 사용하는 것이 좋습니다.

이를 통해 스크린 리더가 정보를 탐색할 때 기게에 추가로 정보를 제공해 각 요소의 내용에 맞게 읽는 방식을 조절할 수 있습니다.

 

▷키보드 동작을 제공하자

<button>이나 <input>, <select> 요소 등을 사용하지 않고 <div>나 CSS를 이용해 비슷하게 구현해 사용할 때도 있습니다.

하지만 이때 기본 요소들이 제공하는 키보드 동작들은 모두 사용하지 못합니다.

엔터 키나 탭 키를 누를 때 해당 요소로 이동시키는 동작과 같은 상호작용들을 누릴 수 없습니다.

<select> 요소 또한 <div>로 만들면 이벤트를 추가하지 않는 이상 화살표로 아이템을 선택하거나 탭으로 이동하는 여러 동작이 제대로 동작하지 않습니다.

또한 스크린 리더는 해당 요소를 선택해야 하는 요소인지, 이벤트를 발생시키는 요소인지 파악하지 못합니다.

 

그런데도 <div> 요소를 반드시 사용해야 한다면 몇 가지 추가적인 코드 작성으로 사용 목적과 유사하게 만들어야 합니다.

• role : 해당 요소의 원래 목적을 작성합니다. <div>를 <button>의 목적으로 사용할 때 role=button으로 작성하면 스크린 리더 등 기계에서 해당 요소를 버튼으로 인식합니다.
• tab-index : 해당 요소를 탭 키로 도달하게 하는 속성입니다. 해당 속성을 통해 탭 키로 이동할 다음 키보드 위치를 지정합니다.
• 키보드 이벤트 리스터 추가하기 : 버튼 동작이 엔터나 스페이스로 동작하게끔 자바스크립트를 이용해 이벤트를 추가하는 것이 좋습니다.

<div
	tabIndex="0"
   	role="button"
   	id="button-id"
   	className="div-as-button"
>
	div로 만든 버튼
</div>

 

▷Focus하는 지점을 명확하게 하자

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

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

키보드 사용자는 일반적으로 탭 키를 이용해 링크나 버튼, 텐스트를 입력하는 부분을 찾습니다.

항목에 Focus가 된다면 시력이 있는 사용자를 위해 윤관선으로 나타내야 합니다.

이런 윤곽선은 기본으로 나타나는데 outline CSS 프로퍼티를 0이나 none으로 지정할 경우 Focus가 된 요소인지 화면에서 식별할 수 없게 됩니다.

하지만 윤곽선을 지우는 것은 마우스를 사용할 수 없는 사람들에게 현재 포커스 지점을 알려 줄 수 없어 지양해야 하며, 만약 윤곽선을 지운다면 현재 어떤 요소를 Focus하는지 추가로 나타내야 합니다.

위는 focus (O), 아래는 focus(X)

 

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

스크린 리더는 텍스트에 접근해 해당 요소를 읽지만, 이미지나 동영상, 오디오는 모든 스크린 리더에서 접근할 수 없습니다.

이미지나 동영상은 시각 장애가 있는 분들은 접근하기 힘들고, 오디오는 청각 장애가 있으면 접근하기 힘듭니다.

하지만 다행히도, 이러한 요소들이 어떠한 의미인지 전달해 주는 속성들이 있습니다.

<img src="babyAndDool.png">

스크린 리더는 이미지를 "babyAndDool.png, image"라고 읽습니다.

이처럼 파일 이름이 해당 이미지를 잘 설명한다면 문제가 없지만 파일 이름이 해당 이미지와 관련이 없는 이름이거나 너무 포괄적인 의미인 경우 어떤 이미지인지 판단하기 어렵습니다.

<img scr="babyAndDool.png" alt="인형을 안고 있는 아기" title="아기와 인형"/>

위 코드처럼 alt와 title 속성을 작성한다면, 스크린 리더는 "인형을 안고 있는 아기"라고 읽습니다.

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

alt를 지정하면 마우스를 올릴 때 해당 이미지에 대한 title이 노출됩니다.

마우스를 올릴 때 title이 노출되는 모습

 

이 외에 해당 이미지가 문서에서 특별한 의미가 없다면 background 이미지로 작성하거나 alt 속성에 빈 문자열을 지정하는 것을 권장합니다.

 

여기서 작성한 방법 외에 애니메이션이나 깜빡이는 효과, 색상 선택에도 주의를 기울여야 하며, ARIA(Accessible Rich Internet Applications) 등 더 살펴보고 주의해야 하는 부분이 존재합니다.

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

여러 디자인과 서비스의 명세에 따라 제어할 수 없는 요소들 또한 존재하기 때문에 더욱 어렵습니다.

하지만 가이드라인을 준수하는 것은 더 많은 사람이 편견 없이 사이트를 이요하는 데에 굉장히 중요한 부분입니다.

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

 

[NOTE]

추가로 요즘 많이 사용하는 프런트엔드 프레임워크에서도 각각 어떻게 웹 접근성을 추구하는지 문서를 제공합니다.

만약 해당 프레임워크를 사용한다면 링크에 들어가 꼭 확인해 보길 바랍니다.

• Angular : https://angular.io/guide/accessibility
• React : https://reactjs.org/docs/accessibility.html

Angular

Accessibility – React

 

 

---

여기까지 접근성에 대해 알아보았습니다 :)

웹 페이지의 기틀을 만들 때 필요한 HTML, CSS의 기본 내용을 살펴봤습니다.

HTML 요소의 종류와 분류, 문서의 골격을 시맨틱하게 작성하는 법과 검색 엔진 최적화 기법에 대해서 살펴봤습니다.

또한 CSS를 통해 스타일을 적용하는 법과 명시도, flex를 이용한 레이아웃 작성법, 미디어 쿼리에 대해서도 코드와 함께 어떻게 동작하는지 확인하였습니다.

블로그에서 다루지 못한 수많은 HTML 요소와 CSS 프로퍼티가 존재하지만,

살펴본 내용을 기반으로 앞으로 더 많은 기술을 배우고 적용해 보도록 합시다 :)