차별 및 제한없이 동등하게...

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)

특별한 도움을

필요로 하는 이들을 위해

길을 닦는 것은

모두를 위해

길을 닦는 것과

같습니다.

볼 수 없는 것이 아니라 보는 방법이 다를 뿐입니다.

걸을 수 없는 것이 아니라 걷는 방법이 다를 뿐입니다.

말할 수 없는 것이 아니라 말하는 방법이 다를 뿐입니다.

웹접근성과 웹표준

차별 및 제한없이 동등하게...

카푸친 원숭이 실험

웹접근성(Web Accessibility)

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

고객 감동은

바로 이런 모습과 태도가 아닐까요?

Thanks!

웹표준 (Web Standards)

HTML(Hyper Text Markup Language)

CSS(Cascading Style Sheet)

javascript(ECMA Script)

WAI-ARIA

WCAG

볼 수 없는 것이 아니라 보는 방법이 다를 뿐입니다.

걸을 수 없는 것이 아니라 걷는 방법이 다를 뿐입니다.

말할 수 없는 것이 아니라 말하는 방법이 다를 뿐입니다.

Thanks!