웹접근성과 웹표준

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

웹접근성을 향상 시키기 위한 방법

웹접근성 지침 준수

웹표준 기술의 활용

웹접근성 지침

웹표준 기술

웹에서 표준적으로 사용되는 기술이나 규칙

견고한
구조 설계를 위한
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>