웹접근성과 웹표준
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6366435/B612.jpg)
seulbinim@gmail.com
김데레사
(Web Accessibility & Web Standards)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
차별 및 제한없이 동등하게...
The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.
웹의 힘은 보편성에 있다.
장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6617451/tim.jpg)
Tim Berners-Lee
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6783131/chrome-firefox-jaws.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6783133/talkback.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6783132/nvda.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6783139/ie.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6783134/voiceover.png)
웹접근성을 향상 시키기 위한 방법
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
웹접근성 지침 준수
웹표준 기술의 활용
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
웹접근성 지침
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
웹표준 기술
웹에서 표준적으로 사용되는 기술이나 규칙
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
견고한
구조 설계를 위한
HTML
레이아웃 및
스타일을 위한
CSS
동작 및 제어를 위한 DOM과 Javascript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
HTML(Hyper Text Markup Language)
콘텐츠의 구조를 설계하고 의미를 부여하는 기술
<body>
<header class="app-header">
<h1 class="brand"><a href="#">EDIYA COFFEE</a></h1>
<nav class="app-navigation">
<h2 class="a11y-hidden">메인 메뉴</h2>
</nav>
</header>
<main class="app-main">
<h2 class="a11y-hidden">이디야 음료</h2>
</main>
</body>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
CSS(Cascading Style Sheet)
콘텐츠의 배치 및 스타일을 위한 기술
.module-link {
display: flex;
flex: 1 1 auto;
flex-flow: row;
justify-content: center;
align-items: center;
padding: 1em;
font-size: 1.125rem; /* 18px */
font-weight: 700;
line-height: 1.2;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
Javascript(ECMA Script)
콘텐츠의 기능을 구현하는 기술
SoundControl.prototype.play = function() {
this.audio.pause()
this.audio.currentTime = 0
var promise = this.audio.play()
if (promise !== undefined) {
promise.then(function(_) {})
.catch(function(error) {})
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
WAI-ARIA
RIA를 위한 웹접근성 관련 기술
<body>
<ul class="ediya-menu reset-list">
<li class="ediya-menu__item">
<a href="#"
role="button"
aria-haspopup="dialog"
aria-pressed="false">
...
</a>
</li>
</ul>
</body>
WAI-ARIA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
WAI-ARIA 사례집
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6369188/assets_-LLRpKPGJIIoy21DabpF_-LSvkj-PB1qxAP3xLcz6_-LSwU39Q7tZ9wD6I9pEe_image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
특별한 도움을
필요로 하는 이들을 위해
길을 닦는 것은
모두를 위해
길을 닦는 것과
같습니다.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/760612/images/6345054/WTC_logo.png)
Thanks!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1100248/images/6614779/AOA_logo_w.png)
웹접근성 향상을 위한 방법
By seulbinim
웹접근성 향상을 위한 방법
웹접근성을 향상시키기 위해 필요한 가이드라인과 웹표준 기술에 대해 살펴보십니다.
- 235