웹접근성과 웹표준

seulbinim@gmail.com
김데레사
(Web Accessibility & Web Standards)

차별 및 제한없이 동등하게...
The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.

웹의 힘은 보편성에 있다.
장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다.

Tim Berners-Lee

카푸친 원숭이 실험

웹접근성(Web Accessibility)
웹사이트에서 제공하는 정보를 차별 및 제한없이 동등하게
이용할 수 있도록 보장하는 것

장애인 및 고령자를 포함한
모든 사람
다양한 platform 및
Device와 웹브라우저 등
모든 환경


장애가 장애가 되지 않는 세계



고객 감동은
바로 이런 모습과 태도가 아닐까요?

Thanks!

웹표준 (Web Standards)
웹에서 표준적으로 사용되는 기술이나 규칙
견고한
구조 설계를 위한
HTML
레이아웃 및
스타일을 위한
CSS
동작 및 제어를 위한 DOM과 Javascript

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>

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;
}

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) {})
}
}

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>

WCAG
(Web Content Accessibility Guideline)



특별한 도움을
필요로 하는 이들을 위해
길을 닦는 것은
모두를 위해
길을 닦는 것과
같습니다.

볼 수 없는 것이 아니라 보는 방법이 다를 뿐입니다.
걸을 수 없는 것이 아니라 걷는 방법이 다를 뿐입니다.
말할 수 없는 것이 아니라 말하는 방법이 다를 뿐입니다.

Thanks!

웹접근성 이란?
By seulbinim
웹접근성 이란?
웹접근성이란 무엇이고 왜 필요한지 살펴봅시다.
- 222