WAI-ARIA 요소 - role="slider"

숫자를 조절하는 컨트롤 요소인 WAI-ARIA의 커스텀 슬라이더 위젯의 소개, 접근성이 지켜진 커스텀 슬라이더 위젯을 위한 올바른 마크업 방법 및 주의점에 대해 살펴보도록 하겠습니다. 또한, 스크린 리더 사용자를 포함한 키보드 사용자의 키보드 상호작용에 대해서도 살펴봅니다. 슬라이더 컨트롤 요소란? 슬라이더 요소는 숫자를 마우스 또는 키보드로 줄이거나, 늘릴 수 있는 막대 형태의 요소로, 안드로이드 운영체제에서는 시크 바(seek bar) 라고 불리며, 수치를 조절하는 컨텐츠에 주로 사용됩니다. 커스텀 슬라이더의 등장 배경 : range 입력 서식의 소개 웹에서의 슬라이더는 크게 두 가지 방법으로 제공할 수 있습니다. 첫 번재는 태그를 이용한 네이티브 마크업 방법이 있으며, 두 번째는 자바스크립트의 라..

2023.01.24

HTML5 Multimedia - Audio Elements

1. Audio Elements - video elements와 비슷하다. - 별도의 플러그인 설치를 필요로 하지 않는 오디오 자료를 표시 - Control API 제공 src 오디오 자원의 경로 지정 사용시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 오디오 코덱 정보를 지정 /* 크로스 브라우징을 위한 문법 */ Download bass.mp3 * 웹접근성 위배 - 소리가 있는 컨텐츠에 대한 autoplay - 소리가 있는 컨텐츠에 대한 loop 대표 브라우저 별 사용 가능 확장자 크롬 mp3 / ogg / wav 사파리 mp3 / ogg / wav ..

2021.11.11

HTML5 Multimedia - Video Elements

1. Video Elements - 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시 - Control API 제공 src 비디오 자원의 경로지정 사용 시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 poster 포스터 이미지를 지정함 (영상이 없을 때, 시작 전에 보여지는 이미지) 영상의 크기와 동일한 크기의 이미지를 준비한다. controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 비디오 코덱 정보를 지정 muted 비디오 사운드 제거 preload 영상을 로딩하면서 재생이 동시에 이루어짐 (필수) /* 크로스 브라우징을 위한 문법 */ Your browser is old. Download th..

2021.11.11