[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation TestNAVER Engineering
자동화, 계륵에 살 붙이기
: Evolution of Android Automation Test
송의초경
N Tech Service/ Contents QA
NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation TestNAVER Engineering
자동화, 계륵에 살 붙이기
: Evolution of Android Automation Test
송의초경
N Tech Service/ Contents QA
NTS Contents QA 팀에서 근무하고 있는 송의초경입니다. 오디오 플랫폼에서 주로 QA를 진행했고 네이버 뮤직을 거쳐 현재는 오디오 클립 QA를 담당하고 있습니다. 자동화 거버넌스 TF에서 자동화 라이브러리의 유지 보수도 함께 담당하고 있습니다.
2. 목차
• WAI-ARIA란?
• Screen Reader 동작 원리, 접근성
API
• WAI-ARIA의 3대 요소: 역할(role),
상태(state), 속성(property)
• 각 요소의 설명/예제
3. WAI-ARIA란?
• Accessible Rich Internet Applications
• 장애를 가진 사람에게 웹 콘텐츠, 웹
어플리케이션이 조금 더 접근성을
갖도록 하는 방법들을 정의
• 특히 Ajax/HTML/JavaScript 등의 기술로
개발된 동적인 콘텐츠, UI 콘트롤 개발을
도움
7. 접근성 있다? 없다?
<span onclick="location.href='http://recopick.com'" tabindex="0">
레코픽 링크</span>
• 디자인을 수정한 라디오버튼, 체크박스, 콤보박스, …
• 오래된(Legacy) 잘못된 코드들
• 웹 앱이나 위젯 등의 RIA(Rich Internet Application) 제작 시
답 = 없다…
하지만 어쩔 수 없이 쓰게 되는 코드…
12. 역할(role) – 랜드마크(이정표) 역할
• 어떤 요소가 메뉴 영역인지 콘텐츠 영역인지
푸터 영역인지 등을 선언할 수 있습니다.
• 랜드마크 역할(Role)을 지원하는 스크린리더는
시각장애인이 랜드마크로 지정한 주요 영역을
단축키 혹은 간단한 제스쳐로 왔다갔다 할 수
있게 해줍니다. 이는 스킵 네비게이션이
발전한 형태입니다.
13.
14.
15. 역할(role) – 문서 구조 역할
• 아티클(article), 표 제목(columnheader), 헤딩(heading),
이미지(img), 장식용(presentation), 툴바(toolbar) 등
<figure role="img" aria-labelledby="fish-caption">
<a href="#fish-caption">아스키 아트 건너뛰기</a>
<pre>
o .'`/
' / (
O .-'` ` `'-._ .')
_/ (o) '. .' /
) ))) >< <
` |_ _.' '.
'-._ _ .-' '.)
jgs `__
</pre>
<figcaption id="fish-caption">
Joan G. Stark, "<cite>fish</cite>".
October 1997. ASCII on electrons. 28×8.
</figcaption>
</figure>>
16. 역할(role) – 위젯 역할
• 대부분의 위젯 역할(Role)이 하위호환성을 갖게
만들기 어렵다.
• 선언하면 작동되는 것이 아니고 자바스크립트로 모든
동작을 구현해야 한다.
• 대체로 상호작용이 필요한 역할들로서 단축키 할당,
키보드 접근성 등의 이슈를 고려해야 한다.
19. 상태(State)와 속성( Property)
• 자동완성(aria-autocomplete), 체크 여부(aria-
checked) 등을 포함하는 위젯 속성
• 실시간 업데이트(aria-live) 등을 포함하는
라이브 영역 속성
• 드래그 앤 드롭 기능을 포함하는 드래그앤드롭
속성
• DOM 요소들간의 관계를 정의하는 관계 속성
20. 예: 라이브 영역 속성
<div aria-live="polite"></div>
...
<div aria-live="polite">새로 올라온 얘기가 1개 더 있어요.</div>