WAI-ARIA 요소 - role="slider"

숫자를 조절하는 컨트롤 요소인 WAI-ARIA의 커스텀 슬라이더 위젯의 소개, 접근성이 지켜진 커스텀 슬라이더 위젯을 위한 올바른 마크업 방법 및 주의점에 대해 살펴보도록 하겠습니다. 또한, 스크린 리더 사용자를 포함한 키보드 사용자의 키보드 상호작용에 대해서도 살펴봅니다.

 

슬라이더 컨트롤 요소란?

슬라이더 요소는 숫자를 마우스 또는 키보드로 줄이거나, 늘릴 수 있는 막대 형태의 요소로, 안드로이드 운영체제에서는 시크 바(seek bar) 라고 불리며, 수치를 조절하는 컨텐츠에 주로 사용됩니다.

 

 

커스텀 슬라이더의 등장 배경 : range 입력 서식의 소개

웹에서의 슬라이더는 크게 두 가지 방법으로 제공할 수 있습니다.

첫 번재는 <input> 태그를 이용한 네이티브 마크업 방법이 있으며, 두 번째는 자바스크립트의 라이브러리와 접근성 API로 만드는 커스텀 슬라이더가 있습니다.

range 입력 서식은 HTML5부터 도입되어 Chrome이나 Firfox, Edge 등의 많은 최신 브라우저에서 지원하는 <input> 요소 입니다.

 

input type="range"의 장점

1. 짧고 간결한 코드
   HTML에서 지원하는 네이티브 기능이기 때문에 HTML에 한 줄의 코드만으로 구현이 가능하다는 장점을 가지고 있습니다.
2. HTML과 CSS 지식만으로도 접근성을 지키기 용이하며, 디자인하기 간편하다.
   커스텀 슬라이더에 접근성을 제공하기 위해서는 자바스크립트의 지식이 필요하지만, range 입력 서식의 경우, 표준 HTML을 기반으로 하기 때문에 커스텀 슬라이더보다 비교적 적은 지식만으로도 만들 수 있습니다.
3. UI 용 스크립트를 사용하지 않기 때문에 개발 측면과 사용 측면에서 모두 가볍다.
   UI를 만들기 위해 자바스크립트를 사용하지 않으므로, 서버의 트래픽을 절약할 수 있기 때문에 대형 사이트의 경우, 자연스럽게 사용자에게 쾌적한 환경을 제공하게 됩니다.
4. 기기 간의 호환성이 좋다.
   웹 표준에서 제공하는 기능이기 때문에 모바일 운영체제에서의 호환성도 장점이라 볼 수 있습니다. 디바이스 고유의 조작 방법을 지원함에 있어서 별도의 프로그래밍 기술이 필요하지 않습니다.

 

input type="range" 의 단점

1. 브라우저에서 지원하는 기능에 차이가 있어 디자인의 일관성을 지키기 다소 어렵다. (디자인상의 크로스브라우징)
   반면에 range 입력 서식 사용하기에 다룰 내용이지만, 브라우저에 따라 CSS의 표시 방식이나, CSS의 지원 속성 차이로 인해 크로스브라우징에 어려움이 있습니다.
2. 구형 브라우저와의 호환성이 떨어진다. (기술상의 크로스브라우징 문제)
   range 서식의 가장 치명적인 단점으로, 오래된 운영체제를 사용하여 어쩔 수 없이 구형 브라우저를 사용해야 하는 사용자의 경우, range로 제공된 슬라이더 컨트롤을 사용할 수 없다는 치명적인 문제가 있습니다.
   국내의 경우, 다양한 버전의 OS 사용자가 공존하고 있습니다. 그 중에는 업데이트가 종료되어 최신 브라우저를 설치할 수 없는 사용자층도 존재합니다. 이러한 호환성 문제와 크로스브라우징 무제를 해결하기 위해 커스텀 슬라이더 요소로 대체하고 있습니다.
3. 한 개의 트랙에 값이 두 개 이상이 들어가는 멀티 슬라이더 구조를 지원하지 않는다.
   한 가지의 숫자 값을 조절할 수 있게끔 슬라이더를 제공하는 것이 range 입력 서식의 기본 기능이며, 한 개의 값만 받을 수 있다는 것이 한계점입니다. 트릭을 통해 멀티 슬라이더를 구현할 수 있으나, 정식적인 지원이 아니므로, 멀티 슬라이더를 구현하기 위해서는 커스텀 슬라이더와 마찬가지로 자바스크립트 지식이 필요합니다.

 

 

커스텀 슬라이더 제작하기

위에서 설명한 크로스 브라우징 문제 및 기술적 한계에서 벗어나 비교적 자유로운 웹을 구현하기 위해서 커스텀 슬라이더 요소를 사용합니다. 커스텀 슬라이더는 자바스크립트 라이브러리가 많이 개발되어 있습니다. 앞서 다루었던 range 보다는 전문적인 지식이 필요하지만, 기초적인 자바스크립트 지식만 있다면 해당 라이브러리와 접근성 API를 응용하여 접근성이 지켜진 위젯을 만들 수 있습니다.

가장 널리 알려진 라이브러리 중 하나는 jQuery의 확장 플러그인 jQuery UI에서 제공하는 silder 위젯과 nodeJS를 기반으로 하는 noUiSlider 등이 있으며, 더 다양한 UI 관련 라이브러리가 있으므로 웹 개발환경에 맞추어 만들 수 있습니다.

 

 

커스텀 슬라이더의 핸들 접근성

커스텀 슬라이더는 role="slider" 속성을 사용하여 만들 수 있습니다. 커스텀 슬라이더의 작동은 자바스크립트 라이브러리로 대체하기에 해당 라이브러리에서 접근성이 지켜지도록 라이브러리를 활용하여 html 마크업을 추가하면 됩니다.

 

role="slider" 속성은 어떤 요소에 주어야 하는가?

role="slider"는 핸들에 해당하는 요소로, 진행 바가 아닌 컨트롤 핸들에 제공되어야 합니다. 위에서 언급하였듯, 마우스 드래그로 슬라이더의 수치를 조정할 수 있게 해주는 버튼을 슬라이더 핸들이라고 말씀드렸습니다. 이와 마찬가지로 키보드 초점이 직접적으로 제공되는 것도 이 핸들이라고 보시면 됩니다. 핸들에는 반드시 index="0"과 role="slider"가 제공되어야 합니다.

 

소스코드 : 커스텀 슬라이더의 구조

<div class="slider-ui-contailer">
	<div class="slider-ui-track-bar">
    	<div class="slider-ui-handle" tabindex="0" role="slider"></div>
    </div>
</div>

role="slider"에 슬라이더 정보 제공하기

role="slider"는 단순히 수치를 올리거나 내릴 수 있는 컨트롤 가능한 요소라는 정보를 제공할 뿐, 별다른 기능을 가지고 있지 않습니다. 이벤트로 슬라이더의 값이 변경되어도 role="slider" 만을 사용한다면 스크린 리더 사용자에게 변경된 내용을 전달하지 않습니다. 따라서 다음과 같은 속성을 함께 사용해야 합니다.

 

 

중요 속성

1. aria-valuemin과 aria-valuemax
   range의 min속성, max속성과 동일한 기능으로, 슬라이더의 최소값과 최대값을 전달합니다.
2. aria-valuenow와 aria-valuetext
   현재 핸들이 위치한 값을 알려줍니다.
   2-1. aria-valuenow는 숫자만을 사용합니다. 별도의 기호가 필요 없는 경우, aria-valuenow를 사용하여 스크린리더 사용자에게 value값을 알려줄 수 있습니다.
   2-2. 별도의 기호나 단위 등을 값과 함께 텍스트로 제공하여야 할 때, aria-valuetext로 슬라이더 정보를 제공해야 합니다. 예를 들어 재생 시간을 제공할 때, aria-valuetext="O시간 O분, O초"와 같이 자바스크립트를 통해 전달받은 값을 텍스트와 결합하여 스크린리더에게 전달할 수 있습니다.
   2-3. 슬라이더 정보 중 현재 적용된 값 정볼를 스크린리더 사용자에게 제공하기 위해서는 valuenow나 valuetext중 한 가지는 반드시 필요합니다.
3. aria-orientaion
   슬라이더가 수직인지, 수평인지, 어떤 방향 키를 사용해야 하는지 스크린리더 사용자에게 알려주는 기능을 수행합니다.
4. aria-label, aria-labelledby
   슬라이더 영역의 이름과 무엇에 대한 값인지 레이블을 통해 스크린리더 사용자에게 안내할 수 있으며, 특히 멀티 슬라이더의 경우, 두 개의 핸들이 각각 무엇에 대한 핸들인지 명확한 구분이 가능하게끔 합니다. 예를 들어, 반복 구간을 설정 한다면, 첫 번재 핸들에는 aria-label="반복 시작 지점", 두 번째 핸들에는 aria-label="반복 종료 지점"과 같이 제공할 수 있습니다.

 

커스텀 슬라이더 핸들의 키보드 접근성

HTML5부터 지원하는 range 입력 서식에는 스크린리더 및 키보드 사용자를 위한 키보드 상홎가용 단축키가 존재합니다. 단축키는 다음과 같으며, role="slider"를 사용한 커스텀 핸들에도 반드시 해당 키 이벤트를 제공해야 합니다.

1. 상하, 혹은 좌우 화살표 키로 슬라이더의 수치를 조절할 수 있어야 합니다.
2. Home 키와 End 키로 최소값, 최대값 설정이 가능해야 합니다.
3. Page Up과 Page Down 키로 10% 단위로 수치를 조절할 수 있어야 합니다.

해당 기능 키들은 input type="range" 에서 제공되는 가장 기본적인 기능 키들이며, 스크린 리더 사용자나 키보드 사용자들은 해당 키를 통해 슬라이더의 값을 조절합니다. 커스텀 슬라이더를 제공할 경우, 키보드 사용자를 위해 이러한 키보드 이벤트를 개발자가 별도로 제공해야 합니다.

 

 

커스텀 슬라이더의 장단점

장점으로는 커스텀 슬라이더는 올바르게만 구현한다면 현시점에서 input type="range"보다 디자인적으로나 기술적으로나 장점이 더 많으며, HTML5를 지원하지 않는 구형 브라우저에서도 슬라이더 기능을 제공할 수 있다는 장점이 있습니다. 또한 디자인상으로 보았을 때, 일관된 디자인을 range보다 쉽게 제공할 수 있다는 장점이 있습니다. 이러한 장점들 덕분에 커스텀 슬라이더는 데스크탑 웹에 적합합니다.

 

반면에 모바일 디바이스의 볼륨키를 통해 슬라이더를 조절하는 동작과 같은 모바일 디바이스의 상호작용을 지원하기 어려운 디바이스의 호환성 문제가 있습니다. 따라서 모바일 웹에서는 커스텀 요소로 슬라이더를 지원하는 것보다 html5 내장 네이티브 요소인 input type="range"나 audio, video 요소를 사용하는 편이 적합하며, 서비스의 질을 높일 수 있을 것이빈다.

 

 

부록

role="range"를 사용한 color picker

https://nuli.navercorp.com/data/blog/rgbslider/range.html

설명 : HTML5부터 지원하는 input 요소의 유형인 range로 제공한 color picker 샘플입니다. 위 샘플을 통해 아티클에서 소개했던 장단점을 테스트할 수 있습니다. 이 외의 슬라이더를 제공하는 네이티브 요소로는 audio 태그의 플레이어와 video 태그의 플레이어가 있으며, 네이티브 태그의 장점인 기기간의 호환성을 체험할 수 있습니다.

 

jQuery UI와 WAI-ARIA를 통해 구현한 커스텀 슬라이더

https://nuli.navercorp.com/data/blog/projectslider/index.html

설명: Javascript의 html5 객체인 Audio 객체와 jQuery의 확장 플러그인인 jQuery UI의 Slider 함수를 활용하여 생성한 슬라이더에 WAI-ARIA를 적용한 커스텀 음악 플레이어 요소입니다. PC 브라우저에서 일관된 디자인을 보여주는 장점과 구형 브라우저로 슬라이더를 테스트할 수 있습니다. 네이티브 요소가 아니기 때뭉네 모바일 디바이스의 볼륨 키로 슬라이더를 조절할 수 없는 단점을 확인할 수 있습니다.

 

ES6의 변수로 제공된 스크립트이기 때문에 구형 브라우저에서 오류가 발생할 수 있으며, Audio 객체는 HTML5에 추가된 자바스크립트 DOM 객체이므로 구형 브라우저에서 재생이 불가합니다.

 

 

슬라이더와 관련된 용어 정리

1. 트랙 (Track)
   핸들이 포함된 기다란 막대를 Track이라고 합니다. 진행 막대(Progress bar)나 slider에 사용되는 기다란 막대는 모두 Track이라고 부를 수 있습니다.
2. 핸들 (Handle)
   Track 막대 사이에 있는 마우스 그래그 가능한 버튼을 핸들이라고 합니다.

 

 

 

 

참고:)

https://nuli.navercorp.com/community/article/1132993

WAI-ARIA 바르게 사용하기 7부 – role=”slider