Enviar pesquisa
Carregar
모바일 웹 어플리케이션 접근성
•
10 gostaram
•
3,078 visualizações
Eun Cho
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 51
Baixar agora
Baixar para ler offline
Recomendados
Daum 로그인 API (함태윤)
Daum 로그인 API (함태윤)
Daum DNA
모바일 배달앱 접근성
모바일 배달앱 접근성
선영 박
[7/27 접근성세미나] 모바일 앱, 사용성에서 접근성까지
[7/27 접근성세미나] 모바일 앱, 사용성에서 접근성까지
Nts Nuli
Webkit overview
Webkit overview
Eun Cho
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
Nts Nuli
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
Nts Nuli
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
Hankyo
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
[제14회 JCO 컨퍼런스] 개발자를 위한 서버이중화 by JAVACAFE
흥래 김
Mais conteúdo relacionado
Semelhante a 모바일 웹 어플리케이션 접근성
PWA (Progressive Web Apps)
PWA (Progressive Web Apps)
유 성민
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
NAVER D2
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
Sang Seok Lim
Open ALMS 2.0 제품 소개서
Open ALMS 2.0 제품 소개서
Jaebok Oh
HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)
미래웹기술연구소 (MIRAE WEB)
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
NAVER D2
6. nexcore alopex runtime
6. nexcore alopex runtime
JinKyoungHeo
하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify (강정희, AWS 솔루션즈 아키텍트) :: AWS DevDa...
하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify (강정희, AWS 솔루션즈 아키텍트) :: AWS DevDa...
Amazon Web Services Korea
12-1 ignite(2)
12-1 ignite(2)
tikasy
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍
Lee Ji Eun
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
JongKwang Kim
Service Worker 를 이용한 Offline Web Application 구현
Service Worker 를 이용한 Offline Web Application 구현
병태 정
[스마트스터디]아마존 클라우드프론트를 이용한 안-정적인 모바일 서비스
[스마트스터디]아마존 클라우드프론트를 이용한 안-정적인 모바일 서비스
smartstudy_official
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
Sungwoo Choo
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신
NAVER D2
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
Hark ( Daniel ) SOHN
Html5의 현재와 미래
Html5의 현재와 미래
mosaicnet
WAI-ARIA (신영화)
WAI-ARIA (신영화)
대영 최
안-정적인 모바일 서비스 만들기
안-정적인 모바일 서비스 만들기
AWSKRUG - AWS한국사용자모임
F3 네이버오픈api만드는매쉬업
F3 네이버오픈api만드는매쉬업
NAVER D2
Semelhante a 모바일 웹 어플리케이션 접근성
(20)
PWA (Progressive Web Apps)
PWA (Progressive Web Apps)
[121]네이버 효과툰 구현 이야기
[121]네이버 효과툰 구현 이야기
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
Open ALMS 2.0 제품 소개서
Open ALMS 2.0 제품 소개서
HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
6. nexcore alopex runtime
6. nexcore alopex runtime
하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify (강정희, AWS 솔루션즈 아키텍트) :: AWS DevDa...
하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify (강정희, AWS 솔루션즈 아키텍트) :: AWS DevDa...
12-1 ignite(2)
12-1 ignite(2)
구글 인박스 히드라 프로그래밍
구글 인박스 히드라 프로그래밍
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Service Worker 를 이용한 Offline Web Application 구현
Service Worker 를 이용한 Offline Web Application 구현
[스마트스터디]아마존 클라우드프론트를 이용한 안-정적인 모바일 서비스
[스마트스터디]아마존 클라우드프론트를 이용한 안-정적인 모바일 서비스
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
[D2 오픈세미나]4.네이티브앱저장통신
[D2 오픈세미나]4.네이티브앱저장통신
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
자동화 점검툴(forApp)을 이용한 모바일 접근성 개선방안
Html5의 현재와 미래
Html5의 현재와 미래
WAI-ARIA (신영화)
WAI-ARIA (신영화)
안-정적인 모바일 서비스 만들기
안-정적인 모바일 서비스 만들기
F3 네이버오픈api만드는매쉬업
F3 네이버오픈api만드는매쉬업
모바일 웹 어플리케이션 접근성
1.
모바일 웹 어플리케이션
접근성 조 은 NHN Technology Services UIT Development Office cho.eun@nhn.com http://techhtml.org
2.
모바일 웹
3.
모바일 웹 접근성
4.
모바일 웹 접근성
지침
5.
모바일 웹 접근성
지침
6.
모바일 앱 접근성
지침 한국형 웹 콘텐츠 접근성 지침
7.
모바일 앱 접근성
지침 한국형 웹 콘텐츠 접근성 지침
8.
하던 것만 잘
지켜도…
9.
하던 것만 잘
지켜도… 그러나
10.
하던 것만 지켜도… 그러나 모바일
웹 어플리케이션 모범 사례 http://html5.clearboth.org/mwbp
11.
다양한 입력장치를 고려하세요. http://html5.clearboth.org/mwbp
12.
포인터 터치 화면 제어
13.
자바스크립트 없는 버전도 지원할
필요가 있을 수 있습니다. http://html5.clearboth.org/mwbp
14.
모바일 앱 접근성
지침 한국형 웹 콘텐츠 접근성 지침 모바일 웹 어플리케이션 모범사례+
15.
한국형 웹 콘텐츠
접근성 지침 모바일 웹 어플리케이션 모범사례+
16.
널리 모바일 웹
접근성 체크리스트 http://nuli.nhncorp.com/accessibility/nwcag/checklist
17.
WAI-ARIA W3C Recommendation
18.
요소에 역할, 상태,
속성을 부여하자
19.
요소에 역할을 부여하자
20.
<ul> <li><a href=“#webtoon”>뿜/웹툰</a></li> <li><a href=“#videos”>동영상</a></li> <li><a
href=“#app”>앱/게임</a></li> </ul> <section id=“webtoon”> <h1 class=“blind”>뿜/웹툰</h1> </section> <section id=“videos”> <h1 class=“blind”>동영상</h1> </section> <section id=“app”> <h1 class=“blind”>앱/게임</h1> </section>
21.
<ul> <li><a href=“#webtoon”>뿜/웹툰</a></li> <li><a href=“#videos”>동영상</a></li> <li><a
href=“#app”>앱/게임</a></li> </ul> <section id=“webtoon”> <h1 class=“blind”>뿜/웹툰</h1> </section> <section id=“videos”> <h1 class=“blind”>동영상</h1> </section> <section id=“app”> <h1 class=“blind”>앱/게임</h1> </section>
22.
<ul> <li><a href=“#webtoon”>뿜/웹툰</a></li> <li><a href=“#videos”>동영상</a></li> <li><a
href=“#app”>앱/게임</a></li> </ul> <section id=“webtoon”> <h1 class=“blind”>뿜/웹툰</h1> </section> <section id=“videos”> <h1 class=“blind”>동영상</h1> </section> <section id=“app”> <h1 class=“blind”>앱/게임</h1> </section>
23.
<ul> <li><a href=“#webtoon” role=“tab">뿜/웹툰</a></li> <li><a
href=“#videos” role=“tab">동영상</a></li> <li><a href=“#app” role=“tab">앱/게임</a></li> </ul> <section id=“webtoon” role=“tabpanel”> <h1 class=“blind”>뿜/웹툰</h1> </section> <section id=“videos” role=“tabpanel”> <h1 class=“blind”>동영상</h1> </section> <section id=“app” role=“tabpanel”> <h1 class=“blind”>앱/게임</h1> </section>
24.
Role의 4가지 카테고리
25.
Role의 4가지 카테고리 Document
Structure Roles Abstract Roles Widget Roles Landmark Roles
26.
Role의 4가지 카테고리 Abstract
Roles 온톨로지를 위해 사용하는 역할입니다. 콘텐츠에 사용해서는 안됩니다.
27.
Role의 4가지 카테고리 Widget
Roles 위젯에서 사용하는 유저 인터페이스를 나타낼 때 사용합니다.
28.
Role의 4가지 카테고리 문서의
구조를 나타낼 때 사용합니다. Document Structure Roles
29.
Role의 4가지 카테고리 페이지의
네비게이션을 나타낼 때 사용합니다.
30.
Role의 4가지 카테고리 페이지의
네비게이션을 나타낼 때 사용합니다. Landmark Roles
31.
Ajax 접근성
32.
페이지 일부분을 업데이트하기
위한 정보를 서버에 바로 요청
33.
사용자 입력 값의
유효성 검사에 용이
34.
이 때 동적
변경 영역을 Live Region이라 합니다
35.
스크린리더에 따라 못 읽어
줄 수도 있다.
36.
AJAX의 단점을 해결할
4개의 속성들
37.
aria-busy (state) aria-live aria-atomic aria-relevant AJAX의 단점을
해결할 4개의 속성들
38.
AJAX의 단점을 해결할
4개의 속성들 aria-live 콘텐츠가 업데이트 될 때 그 내용을r 보조기기에 알려주는 시점을 결정합니다.
39.
<ul> <li><strong>아이유</strong></li> <li><strong>아이유</strong> 봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong>
은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul>
40.
aria-live=“polite” aria-live=“off” aria-live=“assertive” <ul aria-live=“polite”> <li><strong>아이유</strong></li> <li><strong>아이유</strong> 봄사랑벚꽃말고</li> <li><strong>아이유</strong>
단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> 업데이트를 알리지 않음 입력이 끝나면 전달 업데이트가 발생하면 바로 전달 (default)
41.
aria-atomic 콘텐츠가 업데이트 될
때i 변경된 요소만 알려줄 지 모두를 알려줄 지 결정합니다. AJAX의 단점을 해결할 4개의 속성들
42.
aria-atomic=“false” aria-atomic=“true” <ul aria-live=“polite” aria-atomic=“true”> <li><strong>아이유</strong></li> <li><strong>아이유</strong>
봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> 모든 내용을 알림 업데이트 되는 요소만 알림 (default)
43.
aria-busy (state) Live Region
내의 요소가i 업데이트를 진행 중인지 여부를 결정합니다. AJAX의 단점을 해결할 4개의 속성들
44.
aria-busy=“false” aria-busy=“true” <ul aria-live=“polite” aria-busy=“true”> <li><strong>아이유</strong></li> <li><strong>아이유</strong>
봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> Live Region은 여전히 업데이트 되고 있습니다. Live Region에 더 이상 업데이트 할 것이 없습니다. (default)
45.
aria-relevant Live Region의 내용이
변경 될 때i 어떤 변경유형을 감시해서 알려줄 지 결정합니다. AJAX의 단점을 해결할 4개의 속성들
46.
aria-relevant=“removals” aria-relevant=“additions” aria-relevant=“text” <ul aria-live=“polite” aria-relevant=“additions”> <li><strong>아이유</strong></li> <li><strong>아이유</strong>
봄사랑벚꽃말고</li> <li><strong>아이유</strong> 단발</li> <li><strong>아이유</strong> 은혁</li> <li><strong>아이유</strong> 다이어트</li> </ul> Region 내의 DOM에 요소가 추가되었을 때 Region 내의 DOM에 요소가 삭제되었을 때 요소의 콘텐츠가 변경되었을 때 aria-relevant=“all” 위의 세가지 조건 모두 감시 (default) (default)
47.
그러나
48.
WAI-ARIA는 보조하는 기술일 뿐, 그게
주가 되어서는 안된다.
49.
결론
50.
힘들다고 주저말고 귀찮다고 포기말고 하던대로
열심히
51.
감사합니다.
Baixar agora