웹접근성과 웹표준

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>

WAI-ARIA

WAI-ARIA 사례집

특별한 도움을

필요로 하는 이들을 위해

길을 닦는 것은

모두를 위해

길을 닦는 것과

같습니다.

Thanks!

웹접근성 향상을 위한 방법

By seulbinim

Made with Slides.com

웹접근성 향상을 위한 방법

웹접근성을 향상시키기 위해 필요한 가이드라인과 웹표준 기술에 대해 살펴보십니다.

  • 236

More from seulbinim