[접근성] ARIA역할 모델 중 "toolbar"로 알아본 ARIA 속성 적용법

rlorxl·2022년 5월 28일

HTML/CSS

목록 보기

2/2

웹 콘텐츠를 이용하는 다양한 사용자들을 위해 접근성을 고려한 마크업은 필수적으로 고려해야할 사항인것 같다.

웹 접근성의 영역은 장애인이 웹 콘텐츠를 사용할 수 있도록 하는 방법을 정의합니다. 특정 유형의 장애가 있는 사람은 콘텐츠와 상호 작용하기 위해 보조 기술 ( AT )을 사용합니다. 보조 기술은 콘텐츠 표시를 사용자에게 더 적합한 형식으로 변환하고 사용자가 다양한 방식으로 상호 작용할 수 있도록 합니다. 예를 들어, 사용자는 마우스로 드래그 앤 드롭하는 대신 화살표 키를 통해 슬라이더 위젯과 상호 작용해야 하거나 선택해야 할 수 있습니다.

웹 접근성에 대해 설명한 W3C원문의 부분 발췌 https://www.w3.org/

이처럼 보조 기술을 사용하는 사용자들의 콘텐츠 접근을 쉽게 하기 위해 역할 모델이 존재하고 각각에 관련된 여러가지 속성들을 적절히 사용하면 웹 콘텐츠의 접근성과 사용성을 향상시키는 데에 도움을 줄 수 있다.

시각적으로 불편함이 없는 사용자에게는 HTML에 의미를 가리키는 요소가 없어도 위젯이나 버튼등을 편하게 작동할 수 있지만 장애가 있는 사람은 버튼을 인식하거나 조작하기 어려울 수 있다. 때문에 마크업 시 요소마다 적절한 의미 요소를 주어 보조 기술이 콘텐츠의 역할이 무엇인지 인식해서 읽어줄 수 있고 사용자가 역할을 이해할 수 있도록 해주는것이 필요하다.

💡접근성을 고려한 마크업은 통상적으로 장애가 있는 사람을 위해서 뿐만 아니라 웹, 앱 콘텐츠를 사용하기 불편한 다양한 상황에 놓여 있는 모든 사용자들을 위해서라는 점을 항상 인지해야 한다.

W3C에서는 접근성을 높이기 위한 WAI-ARIA 디자인 패턴 가이드를 제공하는데 그 중 Toolbar에 포함할 수 있는 다양한 ARIA속성 적용법들을 알아보았다.

1. 역할 속성 부여하기

태그 이름으로 해당 요소가 무슨 역할을 하는지 명확하지 않을 때 role을 주어 역할 속성을 부여하면 태그의 역할이 좀 더 명확해진다.

aria-role="toolbar"는 버튼이나 체크박스와 같이 일반적으로 사용되는 버튼이나 컨트롤들의 그룹을 포함하는 컨테이너가 있을 때 사용한다. (일반적으로 3개 이상의 컨트롤이 존재할 때 적용하는것을 권장.)
aria-controls는 제어되고 있는 요소를 식별한다. 여기서 "textarea1"은 아래의 요소 중 <textarea>태그의 id값을 참조하고 있다.

2. 접근가능한 이름을 제공하기

메뉴에 둘 이상의 도구 모음이 있는 경우 접근 가능한 이름 지정이 필요한데 aria-labelledby와 aria-label로 이름을 지정할 수 있다. 여기서는 aria-label을 사용하고 있다.

aria-labelledby은 aria-label의 역할과 동일하다. aria-labelledby는 DOM의 다른 요소를 참조하여 접근 가능한 이름을 정의하는데 사용할 수 있다. 접근 가능한 이름을 생성하기 위해 참조할 수 있는 콘텐츠가 없으면 그냥 aria-label을 사용하면 된다.

<button>, <a>, <td>의 텍스트, <textarea>, <fieldset>, <table>의 컨텐츠, <label>의 for에 연결된 속성, <legend>와 <caption>의 텍스트등과 연결되어 사용한다.

aria-labelledby속성 값에는 보이지 않는 요소의 콘텐츠가 포함될 수 있다. 보조 기술 사용자와 다른 모든 사용자에게 동일한 콘텐츠를 제공해야 하지만 계산된 이름 문자열에 HTML hidden속성, CSS display: none및 CSS 가 있는 요소의 콘텐츠를 포함할 수 있다.(visibility: hidden)

<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

/ 둘 다 사용자에게 대화형 요소에 대한 인식 가능하고 접근 가능한 이름을 제공한다.

/ 링크, 비디오, 양식 컨트롤, 랜드마크 역할 및 위젯 역할 과 같은 모든 대화형 요소에 대해 DOM에 아무 것도 표시되지 않는 경우 액세스 가능한 이름이 제공되도록 하는 데 사용한다.

/ 둘 다 동일한 요소에 있는 경우 aria-labelledby가 우선 인식된다.

/ iframe의 title, 이미지에 alt속성을 부여 했을 때는 aria-label이 필요하지 않다. 그러나 존재하는 경우 이미지 또는 입력의 액세스 가능한 이름 보다 aria-label이 우선한다.

3. 키보드와 상호작용 돕기

마우스로 탐색하는 것 뿐만 아니라 키보드만으로도 상호작용할 수 있도록 요소에 포커스가 되었을 때 시각적으로 보일 수 있도록 스타일을 필수로 적용해 주어야하고, 포커스가 되었다는 것을 의미적으로도 표시해 주어야 스크린리더에서 혼란을 겪지 않을 것이다. 그리고 포커스가 화살표 키로 옮겨갈 수 있게 할 수 있는데 aria-orientation은 요소의 방향이 수평인지, 수직인지 또는 모호한지의 여부를 나타낸다.

aria-orientation="horizontal" : 수평방향 - 보통 slider, tablist, toolbar, menubar에 적용된다.
aria-orientation="vertical" : 수직방향 - scrollbar, tree, listbox, menu
aria-orientation="undefined" : 모호함

포커스 관리

tabindex
컨테이너가 로드, 생성될 때 첫 탭 시퀀스에 포함될 요소에 tabindex="0"를 지정하면 첫 포커스 위치를 지정할 수 있다. 나머지 포커스 가능 요소에는 tabindex="-1"을 지정한다.

📍roving tabindex
요소의 포커스상태를 유지하는 것.
roving의 뜻은 'traveling to place to place'로 tab과 shift + tab을 사용해서 포커스를 왔다갔다 할수 있게 제어하는 기술을 말한다. 초기에 포커스 되어있던 요소 다음으로 다른요소가 활성화되는 경우 상태를 토글하는 것이다.

📍추가 고려사항
키보드 입력을 통해 포커스 가능한 상호작용 항목을 만들기 위해 비 대화형 콘텐츠에 tabindex를 추가하는 것을 피해야 한다. 이를테면 버튼을 나타내기 위해 button 대신 div를 사용하는 것을 말한다. 대화형 요소(<a>, <button>, <details>, <input>, <select>, <textarea> 등)을 사용할 것.

aria-pressed
토글 버튼의 현재 눌린 상태를 나타낸다. 기본값 - 누름 지원 하지 않음 상태.
aria-pressed="true" 누름을 지원.
aria-pressed="false" 누름을 지원하지만 현재 누를 수 없음.

4. 버튼 속성

라디오 버튼 표시

role="radiogroup"은 라디오 버튼(동시에 한개 이상의 버튼에 표시할 수 없는 버튼)의 그룹을 나타낸다.
role="radio"는 라디오 버튼 그룹의 하나의 버튼요소이다.

aria-checked="true" : 체크 된 상태.
aria-checked="false" : 체크되지 않은 상태.

그룹의 한 항목이 선택되면 aria-checked속성이 로 설정되고 동일한 그룹에서 true이전에 확인 된 요소가 있는 경우 속성 값을 로 전환하여 선택 취소된다.
그룹에서 둘 이상의 항목을 선택하거나 항목 선택 및 선택 취소를 활성화하려면 aria-role="menuitemcheckbox"를 사용하는 것이 좋다.

aria-disabled="true"
요소 를 인식할 수 있지만 비활성화되어 있으므로 편집하거나 조작 할 수 없음 을 나타낸다. 예를 들어, 라디오 그룹의 관련 없는 옵션은 비활성화될 수 있다. 비활성화된 요소는 탭 순서에서 포커스를 받지 않고 하위 항목으로의 탐색을 지원하지 않는다. 속성을 설정하는 것 외에도 항목이 비활성화되었음을 나타내기 위해 스타일(회색 등으로)을 변경하는것이 좋다.

스핀 버튼

role="spinbutton"
사용자의 입력이 가능한 선택 버튼이며 키보드 화살표 키를 통해 증가 및 감소 기능에 접근할 수 있다.
aria-valuenow : 스핀버튼의 현재 값을 나타내는 속성.
aria-valuetext : 스핀버튼 요소에 대해 값을 이해할 수 있도록 설명하는 문자열.
aria-valuemin : 스핀버튼의 최소 허용값을 나타내는 속성.
aria-valuemax : 스핀버튼의 최대 허용값을 나타내는 속성.