웹접근성과 웹표준

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

Made with Slides.com

웹접근성 이란?

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

  • 221

More from seulbinim