마크업 - ChoDragon9/posts GitHub Wiki

웹 콘텐츠 접근성 가이드 라인

WCAG(Web Content Accessibility Guidelines)

WAI-ARIA 작성 방법

WAI-ARIA 작성 방법 | AOA11Y

role: 랜드마크 역할

  • 적용 방법: (1) 시멘틱 마크업 적용 (2) role 적용
  • <aside> = complementary
  • <footer> = contentinfo
  • <header> = banner
  • <main> = main
  • <nav> = navigation
  • <section> = region(aria-labelledby, aria-label를 가질 때 사용)
    • aria-label: 내부 콘텐츠가 아니라 설명하고 싶은 내용 작성

웹접근성과 웹표준

웹접근성과 웹표준 | AOA11Y

웹 접근성

  • 웹사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 하는 것
  • 웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다. - Tim Berners-Lee

HTML

  • 콘텐츠의 구조를 설계하고 의미를 부여하는 기술

WAI-ARIA

  • RIA를 위한 웹접근성 관련 기술
  • ARIA(Accessible Rich Internet Applications)

웹표준 마크업

CSS

  • display: none을 사용하면 스크린 리더가 읽을 수 없음
  • absolute와 left, top을 지정하면 저시력자가 읽기 어려움. 포커스가 상단으로 이동되는 이슈가 있음. (저시력자:전맹=8:2) 
    .a11y-hidden {
  position: absolute;
  top: -10000px;
  left: 0
}
  • 해당 포커스를 유지한 상태로 코딩. 최소한의 박스를 1px로 지정해야 함. 
    .a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
}

마크업

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>커피야(Coffeeya)</title>
</head>
<body>
  <header>
    <h1>COFFEEYA COFFEE</h1>
    <button type="buttton" aria-label="메뉴 열기" title="메뉴 열기">
      <span class="ir"></span>
    </button>
    <nav>
      <h2 class="a11y-hidden">메인 메뉴</h2>
      <ul>
        <li><a href="#">메뉴</a></li>
        <li><a href="#">멤버스</a></li>
        <li><a href="#">커피랩</a></li>
        <li><a href="#">공지사항</a></li>
        <li><a href="#">매장찾기</a></li>
      </ul>
      <button aria-label="메뉴 닫기" title="메뉴 닫기">
        <span aria-hidden="true">X</span>
      </button>
    </nav>
  </header>
  <main>
    <h2 class="a11y-hidden">커피야 음료</h2>
    <ul>
      <li>
        <!-- button은 figure를 자식으로 둘 수 없으므로 a 사용 -->
        <a role="button" href="#" aria-haspopup="dialog" aria-pressed="false">
          <figure>
             <img src="something.png" alt="" width="233" height="233" />
             <figcaption>아이스 라테</figcaption>
          </figure>
        </a>
        <div role="dialog" aria-modal="true" aria-labelledby="dialog-label">
          <h3 id="dialog-label">아이스 라테</h3>
          <p>은은한 라테 향기</p>
          <dl>
            <dt>칼로리</dt>
            <dd>(500kcal)</dd>
          </dl>
          <button type="button" title="닫기" aria-label="음료 정보 패널 닫기">
            <span aria-hidden="true">X</span>
          </button>
        </div>
      </li>
    </ul>
  </main>
  <footer></footer>
</body>
</html>

관련 표준 사항

  • 주로 사용하는 언어를 명시해야 한다.
  • 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
  • 프레임, 콘텐츠는 논리적인 순서로 제공해야 한다.
  • 스크린 리더 등 보조 기기를 사용하는 사용자가 콘텐츠의 의미를 이해할 수 있도록 제공해야 한다.
    • div를 사용한다면 role로 의미를 명시해야함
    • 시각적으로 보이지 않은 제목은 CSS로 숨김 처리
    • 읽으면 안되는 것은 aria-hidden="true" 처리
  • 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
    • figcation을 제공하면 img[alt]은 공백으로 제공할 수 있다.
  • 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
  • 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

위 글 요약

  • 주로 사용하는 언어를 명시한다. <html lang="ko-KR">
  • 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
  • 콘텐츠는 논리적인 순서로 제공해야 한다.
  • 콘텐츠의 의미를 이해할 수 있도록 제공해야 한다.
    • div는 role로 의미 부여
    • 읽으면 안되는 것은 aria-hidden="true"
    • 시각적으로 보이지 않은 제목은 CSS로 숨김 처리
  • 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
    • figcation을 제공하면 img[alt]은 공백으로 제공할 수 있다.
  • 모든 기능은 키보드만으로 사용할 수 있어야 한다.
    • 키보드의 초점은 논리적으로 이동해야 하고, 시각적으로 구별할 수 있어야 한다.
⚠️ **GitHub.com Fallback** ⚠️