Post

접근성을 고려하여 HTML 작성하기

Posted Updated
By hyemin 16 min read

✨접근성을 고려하여 HTML 작성하기

원글: https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412

원글자는 접근성은 단순히 웹사이트를 출시하기 전에 할 일 중에 하나가 아니라, 웹디자이너 및 개발자로서 반드시 지켜야한다고 얘기합니다.

원글자가 제시하는 꼭 지켜야하는 HTML 팁을 번역하여 작성할 예정입니다.

📖목차

  1. 문서의 언어를 명시의 중요성
  2. hidden 속성을 사용하여 콘텐츠 숨기기
  3. 때로는 이미지에 빈 alt 속성 추가하면 좋음
  4. 버튼이 필요한 경우 button 요소 사용하기
  5. headings을 사용하여 마크업 구조를 올바르게 구성하기
  6. 랜드마크를 사용해서 사용자들이 사이트를 이동하는데 도움을 주기
  7. 웹 사이트의 주요 콘텐츠를 랜드마크로 만들기
  8. fieldset은 폼 요소를 그룹화하고 더 많은 컨텍스트를 제공

1. 문서의 언어를 명시의 중요성

문서에 어떤 언어를 사용하고 있는지 브라우저에 알려주면 많은 이점이 있습니다. 타사 번역 도구와 브라우저가 올바른 언어와 사전을 식별하는 데 도움이 되므로 SEO(검색 엔진 최적화)에 좋습니다. HTML 페이지에 올바른 언어를 정의하면 보조 기술이 올바른 음성 프로필이나 문자(언어)를 선택하는데 도움이 됩니다. Adrian Roselli가 자신의 웹사이트에서 lang 속성을 사용할 때의 이점을 몇 가지 더 정리해 놓았습니다.

1
2
3

<html lang="en">
  ...
</html>

lang속성을 사용하는 데모(예시) 영상을 유튜브에서 시청해보세요.

문서 내에 언어를 전환해야하는 경우 특정 태그에 lang 속성을 사용할 수 있습니다.

1
2
3
4

<p>
  There is a certain <i lang="fr" class="idiomatic">je ne sais quoi</i> in the
  air.
</p>

항상 올바른 언어를 정의해야합니다. 스티브 포크너가 제작한 영상에는 lang을 올바르게 작성하지 않을 경우 어떤 일이 발생하는지 나와있습니다. 모든 언어 코드는 IANA Language Subtag Registry에서 확인할 수 있습니다.

2. hidden 속성을 사용하여 콘텐츠 숨기기

시각적이거나 스크린 리더에서 콘텐츠를 숨기려면 hidden 속성을 사용하세요.

IE 10 이하를 제외하고는 hidden속성에 대한 브라우저의 지원은 매우 좋습니다. 오래된 브라우저에 지원하기를 원한다면 다음과 같은 코드를 css에 추가하면 됩니다.

1
2
3

[hidden] {
  display: none;
}

3. 때로는 이미지에 빈 alt 속성 추가하면 좋음

이미지가 콘텐츠로 사용되는 경우 alt속성을 적용하여 이미지 콘텐츠와 기능을 간결하게 설명하세요. 이 때 “picture”, “image”, “graphic of”로 시작하지 마세요. 스크린 리더는 어차피 그렇게 할 것이기 때문입니다.

이미지가 순전히 장식용이거나 중요한 정보를 추가하지 않는 경우 CSS를 사용하여 배경 이미지로 임베드하는 것이 좋습니다. HTML img 요소로 추가하려는 경우에는 alt를 비워주세요.

1

<img src="decorative_image.jpg" alt="" />

alt의 속성을 생략하지 않는 것이 중요합니다. 단순히 비워두는 것 입니다.

alt 속성을 작성하지 않으면, 이미지가 콘텐츠의 핵심 부분이며 텍스트에 상응하는 텍스트가 없음을 나타냅니다. alt 속성을 빈 문자열 (alt=”“)로 설정하면 이 이미지는 콘텐츠의 핵심 부분이 아니며 비시각적 브라우저의 렌더링에서 생략할 수 있음을 나타냅니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

alt 속성에 대한 몇 가지 추가 팁은 The Ally Project 페이지에서 확인할 수 있습니다. “Quick Tip: Using alt Text Properly”.

4. 버튼이 필요한 경우 button 요소 사용하기

일반적으로 만들어져있는 HTML 요소가 있는 경우, 직접 만드는 것보다 항상 만들어져있는 HTML요소를 우선적으로 사용해야합니다. 예를 들어 버튼이 필요한 경우 <div>가 아닌 <button> 요소를 사용하세요.

예를 들어 <button>에는 많은 이점/중요한 기능이 있습니다.

  • 포커스 가능
  • 클릭 가능 (마우스 및 키 이용)
  • 스크린 리더가 버튼으로 인식

Rob Dodson은 <div>보다 <button>의 이점을 자세하게 설명해주었습니다. 자세한 내용과 예시는 A11ycats의 영상 “Just use Button”을 시청하세요.

<button>을 사용할지 <link>를 사용할지 고민이 된다면 Marcy Suttons의 글 “Links vs. Buttons in Modern Web Applications”을 읽어보세요.

5. headings을 사용하여 마크업 구조를 올바르게 구성하기

HTML의 <h1> ~ <h6> headings 태그를 사용하면 사용자가 페이지의 구조와 개별 섹션간의 관계를 더 잘 이해할 수 있습니다. 또한 보조 기술을 사용하는 사용자들이 사이트를 탐색하는데 도움을 줍니다. 스크린 리더는 한 콘텐츠에서 다른 콘텐츠로 이동하는 다양한 방법을 제시합니다. 예를 들어 NVDA 스크린 리더를 사용하는 사용자는 단축키(H 또는 shift + H)를 사용하여 제목에서 제목으로 이동할 수 있습니다.

이 영상은 제목에서 제목으로 이동하는 모습을 담은 영상입니다.

제목을 중첩할 때 단계를 건너 뛰는 것은 피해야합니다. 또한 개요를 만들기 위해 여러개의 중첩된 <h1>을 사용하지 마세요. Adrian Roselli는 “There Is No Document Outline Algorithm”와 “The Truth about “The Truth About Multiple H1 Tags”글에서 그 이유에 대해 설명합니다.

＃단계를 건너뛰지마세요.

1
2
3
4
5
6
7

<!-- Don't skip levels: -->
<body>
  <h1>My website</h1>
  <h4>Heading</h4>
  <h2>Subheading</h2>
  <h3>Heading</h3>
</body>

＃존재하지 않는 아웃라인 알고리즘에 의존하지 마세요.

마크업 구조에서 <h1> 요소를 중첩해서 사용하는 것은 아웃라인을 혼동시키고, 의미를 잃게 할 수 있음

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

<!-- Don't rely on inexistent outline algorithms: -->
<body>
  <h1>My website</h1>
  <section>
    <h1>Heading</h1>
    <section>
      <h1>Subheading</h1>
    </section>
  </section>
  <section>
    <h1>Heading</h1>
  </section>
</body>

＃올바른 사용 예

1
2
3
4
5
6
7

<!-- Do this: -->
<body>
  <h1>My website</h1>
  <h2>Heading</h2>
  <h3>Subheading</h3>
  <h2>Heading</h2>
</body>

tota11y는 개요가 지속되는지를 확인하는 좋은 방법을 제공합니다. 또 다른 방법은 CSS를 비활성화하고 페이지가 읽을 수 있을 수 있는지, 구조가 타당한지 확인하는 것 입니다.

![https://miro.medium.com/v2/resize:fit:828/format:webp/1LSmOf1j8DldCPkVfp2mduQ.png](https://miro.medium.com/v2/resize:fit:828/format:webp/1LSmOf1j8DldCPkVfp2mduQ.png) tota11y는 페이지 개요를 쉽고 간편하게 확인할 수 있는 방법을 제공합니다.

6. 랜드마크를 사용해서 사용자들이 사이트를 이동하는데 도움을 주기

HTML5 요소 (<article>,<section>,<nav>,<aside>)로 주제별 섹션을 마크업하는 것이 권장됩니다. 검색과 같이 명시적 태그가 없는 구형 브라우저나 섹션에 WAI-ARIA role 속성을 사용할 수도 있습니다. 섹션 요소는 <div> 요소를 대체할 수는 없습니다. 다른 콘텐츠와 구별되는 관련 콘텐츠의 큰 덩어리를 마크업하는데 사용합니다. 섹션 구분 요소를 과도하게 사용하지 마세요. <div>는 CSS/JS 전용 목적으로만 사용하고 섹션은 의미 전달을 위해 사용하세요.

주요 이점 중 하나는 스크린 리더 사용자가 섹션에서 섹션으로 이동하여 페이지를 탐색할 수 있습니다. 이러한 이동 가능한 섹션을 랜드마크라고 합니다. YouTube에서 랜드마크 탐색 데모를 시청하세요.

1
2
3
4
5
6
7
8
9
10

<body>
  <header>
    <!-- landmark -->
    <nav>
      <!-- landmark -->
      ...
    </nav>
  </header>
  <aside><!-- landmark --></aside>
</body>

랜드마크라는 브라우저의 확장 기능을 사용하면 랜드마크에서 랜드마크로 이동하는 기능을 시뮬레이션해볼 수 있습니다. Alt + Shift + N을 누르면 다음 랜드마크로 이동하고, Alt + Shift + P를 누르면 이전 랜드마크로 이동합니다.

섹션에 대해 자세히 배우고 싶다면, 웹 접근성 튜토리얼 페이지를 확인하세요.

모든 소프트웨어가 모든 잠재적 랜드마크를 그렇게 처리하지 않는다는 점을 유의하세요.

7. 웹 사이트의 주요 콘텐츠를 랜드마크로 만들기

사이트의 주요 콘텐츠를 <main> 태그로 감싸면 일부 화면에서 사용자는 바로가기를 사용하여 주요 콘텐츠에 바로 이동할 수 있습니다. <main> 태그는 문서 또는 애플리케이션 본문의 주요 콘텐츠 영역을 의미하여, 두 번 이상 사용하면 안됩니다.

이미 언급했듯이 콘텐츠를 랜드마크로 분할하는 것이 좋습니다. <header>,<footer>는 <section>,<article> 태그에 중첩되지 않은 경우 모든 주요 브라우저에서 랜드마크처럼 작동합니다. 구형 브라우저를 지원해야하는 경우 role속성을 사용하여 주요 사이트 header와 footer를 랜드마크로 변환할 수 있습니다. header에는 banner값을, footer에는 contentinfo 값을 지정하면 됩니다.

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

<!-- 구형 브라우저 지원하는 방법 -->
<body>
  <header role="banner">
    <h1>My personal blog</h1>
  </header>
  <main>
    <section>
      <h2>Blog posts</h2>
      ....
    </section>
  </main>
  <footer role="contentinfo">&copy; 2016 Me</footer>
</body>

8. fieldset은 폼 요소를 그룹화하고 더 많은 컨텍스트를 제공

당신은 아마 여러 개의 라디오 버튼 또는 체크박스를 폼에 추가해야했을 것 입니다. 폼 요소와 라벨을 추가하는 것은 보통 큰 문제가 되지 않습니다. 하지만 여러 라디오 버튼이나 체크박스의 전체 그룹에 레이브를 지정하려면 어떤 요소를 선택해야할까요?

1
2
3
4
5
6
7
8
9

<form>
  Shirt size
  <input type="radio" id="s" name="shirtsize" />
  <label for="s">S</label>
  <input type="radio" id="m" name="shirtsize" />
  <label for="m">M</label>
  <input type="radio" id="l" name="shirtsize" />
  <label for="l">L</label>
</form>

셔츠 사이즈는 어떻게 마크업하나요? <p>는 작동할 수 있지만, 라디오 버튼과 연결되지는 않습니다.

더 나은 접근 방식은 모든 것을 <fieldset>으로 감싸고 <legend>에 티셔츠 사이즈를 넣는 것 입니다. 스크린 리더는 <legend>가 라디오 버튼과 연결되어있음을 인식하고 라디오 버튼을 선택할 때 마다 해당 값을 읽어줍니다.

1
2
3
4
5
6
7
8
9
10
11

<form>
  <fieldset>
    <legend>T-Shirt size</legend>
    <input type="radio" id="s" name="shirtsize" />
    <label for="s">S</label>
    <input type="radio" id="m" name="shirtsize" />
    <label for="m">M</label>
    <input type="radio" id="l" name="shirtsize" />
    <label for="l">L</label>
  </fieldset>
</form>

<section>과 마찬가지로 폼 요소를 <fieldset>으로 감쌀 때 주의하세요. 일반적으로 폼 그룹을 구성하는 여러 양식 요소와 해당 그룹에 해당하는 레이블이 있는 경우에만 <fieldset>을 사용하세요.

html/css, html
This post is licensed under CC BY 4.0 by the author.