치맥세미나 1회 발표 WAI-ARIA (신영화)

1. WAI – ARIA
Shin Y.H

2. Intro
WAI – ARIA
한 번쯤은 들어보셨죠?
어떻게 사용하고 있는지? 실제 어떻게 들리는지?
뭐가 좋은 건지? 쓴 것과 안쓴 것의 차이점은 어떤지?
이런 것들을 함께 고민해보고 싶습니다.

3. WAI-ARIA의 정의(배경)
WAI – ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)
W3C 웹접근성 담당 조직 리치 인터넷 어플리케이션을 위한 W3C 접근성 명세
RIA : 기존 웹 사이트가 갖는 단점인 늦은 응답 속도,
데스크톱 어플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭
RIA가 많아지면서 정적인 HTML을 JS등으로 처리하게 되는데
이 과정에서 장애인분들이 사용하기에 한계가 많아 개선이 필요함
ex)Ajax를이용한실시간갱신내용은스크린리더기로읽었을때의한계

4. WAI-ARIA의 기본 속성
열할 (role)
1. 탭 목록, 탭, 탭 패널 <role =“tablist | tab | tabpanel”>
2. 툴팁 <role =“tooltip”>
3. 알럿<role =“alert”> ..
상태 (state)
1. 선택 상태 <aria-selected =“true | false | undefined”>
2. 확장 상태 <aria-expanded =“true | false | undefinded”> ..
속성 (property)
1. 실시간 <aria-live=“polite | assertive | off”>
2. 모달 <aria-modal =“true | false”> ..
※ 참고 문서 : 레진 WAI-ARIA 가이드 라인

5. 주요 사이트(?)에서의 WAI-ARIA는?
role=“button, navigation, tab, tablist, alertdialog, presentation, contentinfo”
aria-hidden, aria-selected, aria-haspopup
role=“button, region, search, combobox, listbox, presentation, option, menu, menuitem”
aria-expanded, aria-label, aria-dropeffect, aria-hidden, aria-dropeffect,
aria-grabbed, aria-autocomplete, aria-haspopup
role=“search, dialog, button, navigation, complementary
aria-controls, aria-label, aria-haspopup, aria-expanded, aria-live, aria-labelledby,
aria-hidden, aria-current, aria-atomic
N사는 탭 & 버튼만 있나??.. G사는 검색 창 하나 뿐인데!! L사는 역시!!

6. WAI-ARIA
탭 목록, 탭, 탭 패널 <role =“tablist | tab | tabpanel”>
“오늘 탭 1/4, 선택됨 내일 탭 2/4, 모레 탭 3/4, 월간 탭 4/4”

7. WAI-ARIA
탭이라는 역할(role)과
현재 어느 탭이 선택되어 있는지의 상태(state)를 알 수 있습니다.
role=“tablist
role=“tab”
aria-selected=“true”
접근성은 개선된 것 같은데..
UI개발에서 좋은 점은 없을까요?

8. WAI-ARIA
CSS [attribute] selector를 사용하면
불필요한 selector를 사용 안해도 됩니다.
※ CSS
일반 적으로 .on 이나 .selected 와 같다 보니 멀티 class가 추가되고..
동일한 class 네이밍으로 인해 사이드 이슈도 발생합니다.
※ 유지보수도 어려워집니다.. 전 개인적으로 .on .off가 싫어요..
※jQuery

9. WAI-ARIA
참~~ 쉽쥬??
좀더 파보겠
습니다.

10. WAI-ARIA
WAI-ARIA의 탄생 배경이라고 할 수 있는
실시간 갱신(업데이트)은 어떨까요?
페이지 내에 새롭게 업데이트 되는 정보는
WAI-ARIA로 어떻게 설정하고 읽혀지는지 알아봅시다.

11. WAI-ARIA
aria-live를 사용하면 페이지의 어느 위치에 있든 상관없이
새롭게 업데이트된 정보를 사용자에게 즉시 알려줍니다.
※ e-mail 유효성 검사<aria-live=“false”></> 기본 값(default)
<aria-live=“polite”></> 중요도가 낮은 내용에 사용
현재 진행중인 음성 또는 타이핑을 방해하지
않고 뒤 늦게 정보를 전달
<aria-live=“assertive”></> 중요도가 높은 내용에 사용
현재 진행중인 음성 또는 타이핑을 중단하고
갱신된 내용을 바로 전달

12. WAI-ARIA
이해를 돕기 위해 aria-live사용 유무에 따라 어떻게 들리는지 확인해봅시다.
월을 선택한 뒤 버튼을 클릭하면
해당 월의 제철 과일 정보가 노출
▶ 정보 갱신(업데이트)
! aria-live를 사용하지 않은 경우
“select 한뒤 Go버튼을 누른 뒤 정보가 노출되나 읽지 않고 종료함 ”

13. WAI-ARIA
이해를 돕기 위해 aria-live사용 유무에 따라 어떻게 들리는지 확인해봅시다.
월을 선택한 뒤 버튼을 클릭하면
해당 월의 제철 과일 정보가 노출
▶ 정보 갱신(업데이트)
! aria-live를 사용한 경우 <aria-live=“assertive”>
“select 한뒤 Go버튼을 클릭하는 순간 갱신된 정보(과일정보)를 읽음”

14. WAI-ARIA
저는 솔직히 WAI-ARIA를 굳이 써야 돼?
라고 생각했었습니다.
“ 구조만 잘 짜고 누락되는 정보만 없게 하면 되지 ”
“ 이미지에 alt값 넣고 대체 텍스트 다 넣어 ”
“ 논리적인 순서로 tab키 이동되게 해 ”
. .

15. WAI-ARIA
하지만 WAI-ARIA를 사용해서 정보만이 아닌
역할, 상태, 속성 모두 제공해주는 것이
최선이라고 생각합니다.
여러분들의 생각은 어떠세요?
새롭게 공부해야 하지만 이제 부터 사용해볼까요?

16. WAI-ARIA
감사합니다.