# 기초

웹 접근성(a11y 라고도 함)는 장애인, 느린 연결, 노후되거나 손상된 하드웨어 등 불리한 환경에 있는 사람 등 누구나 사용할 수 있는 웹사이트를 만드는 것을 말합니다. 예를 들어, 비디오에 자막을 추가하면 청각 장애인과 난청인 사람 그리고 시끄러운 환경에서 전화를 할 수 없는 사용자에게 도움이 됩니다. 마찬가지로 텍스트의 대비가 너무 낮지 않은 지 확인하면 시력이 좋지 않은 사용자와 밝은 햇빛에서 휴대전화를 사용하려는 사용자 모두에게 도움이 됩니다.

준비는 되었지만 어떻게 시작해야 할지 모르시나요?

World Wide Web Consortium (W3C) (opens new window)에서 제공하는 웹 접근성 계획과 관리 가이드 (opens new window)를 참조하세요.

사용자가 여러 웹 페이지에서 반복되는 콘텐츠를 건너뛸 수 있도록 기본 콘텐츠 영역으로 직접 이동하는 링크를 각 페이지 상단에 추가해야 합니다.

일반적으로 App.vue 상단에서 수행되며, 모든 페이지에 첫 포커스 가능한 요소가 됩니다.

<ul class="skip-links">
  <li>
    <a href="#main" ref="skipLink">본문으로 건너띄기</a>
  </li>
</ul>

1
2
3
4
5

포커스가 되지 않았을 때 이 링크를 숨기려면 다음과 같은 스타일을 추가할 수 있습니다.

.skipLink {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}
.skipLink:focus {
  opacity: 1;
  background-color: white;
  padding: .5em;
  border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

사용자가 경로를 변경하면 포커스를 건너뛰기 링크(skip link)로 되돌립니다. 아래에 제공된 ref에 포커스를 호출하면 됩니다.

<script>
export default {
  watch: {
    $route() {
      this.$refs.skipLink.focus();
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9

See the Pen Skip to Main by Maria (@mlama007) on CodePen.

# 콘텐츠 구성

접근성의 가장 중요한 부분 중 하나는 디자인이 접근성 구현을 지원할 수 있는지 확인하는 것 입니다. 디자인은 색상 대비, 글 꼴선택, 글자의 크기 및 언어뿐만 아니라 응용 프로그램에서 콘텐츠가 어떻게 구성되는지를 고려해야 합니다.

# 제목(Headings)

사용자는 제목(heading)을 통해 애플리케이션을 탐색할 수 있습니다. 애플리케이션의 모든 부분에 설명이 포함된 제목을 사용하면, 사용자는 각 섹션의 내용을 쉽게 예측할 수 있습니다. 제목과 관련하여 권장되는 몇 가지 접근성 사례가 있습니다.

랭킹 순서 중첩제목: <h1> - <h6>
섹션내에서 제목을 건너뛰지 마십시오.
텍스트에 스타일을 설정하는 대신 실제 제목태그를 사용하여 제목을 제공해야 합니다.

제목(Headings)에 대해 더 읽어보기 (opens new window)

<main role="main" aria-labelledby="main-title">
  <h1 id="main-title">Main title</h1>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- 내용 -->
  </section>
  <section aria-labelledby="section-title">
    <h2 id="section-title"> Section Title </h2>
    <h3>Section Subtitle</h3>
    <!-- 내용 -->
    <h3>Section Subtitle</h3>
    <!-- 내용 -->
  </section>
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 랜드마크(Landmarks)

랜드마크는 애플리케이션 내의 섹션에 대한 프로그래밍 방식 접근을 제공합니다. 보조 기술에 의존하는 사용자는 애플리케이션의 각 섹션을 탐색하고 콘텐츠를 건너뛸 수 있습니다. ARIA 역할 (opens new window)을 사용하여 이를 달성할 수 있습니다.

HTML	ARIA 역할	랜드마크 목적
header	role="banner"	주요제목 : 페이지 제목
nav	role="navigation"	문서 또는 관련 문서를 탐색 할 때 사용하기에 적합한 링크 모음
main	role="main"	문서의 기본 또는 핵심 콘텐츠입니다.
footer	role="contentinfo"	상위 문서에 대한 정보 : 각주/저작권/개인 정보 보호 정책 링크
aside	role="complementary"	주요 콘텐츠를 지원하지만 자체 콘텐츠로 구분되고 의미가 있습니다.
사용불가	role="search"	이 섹션에는 응용 프로그램의 검색 기능이 포함되어 있습니다
form	role="form"	양식 관련 요소 모음
section	role="region"	관련성이 있고 사용자가 탐색하기를 원하는 콘텐츠입니다. 이 요소에 대한 레이블을 제공해야합니다.

Tip:

레거시한 HTML5 시멘틱 엘리멘트를 지원하지 않는 브라우저 (opens new window)와의 호환성을 최대화하려면 중복된 랜드마크 역할 속성이 있는 랜드마크 HTML 엘리멘트를 사용하는 것이 좋습니다.

랜드마크에 대해 자세히 알아보기 (opens new window)

← 서버 사이드 렌더링 Semantics →

# 기초

# Skip link

# 콘텐츠 구성

# 제목(Headings)

# 랜드마크(Landmarks)