💡 최근에 좋은 기회로 현직자 분들께 코드 리뷰를 받았었다. 다들 말씀하신 내용이 웹 접근성에 대해 이야기를 하셨고 나도 코드를 치면서 항상 이 코드가 좋을까라는 생각을 자주 해서 좋은 피드백이었다. 요번에 피드백 받은 내용을 토대로 블로그에 작성을 해보려고 한다. 실습도 같이

웹 접근성이란?

모든 사용자가 장애 여부나 나이와 관계없이 동등하게 웹을 이용할 수 있도록 개발하는 것을 의미합니다.

어떻게 고려해야하나요?

1. 대체 텍스트 - 이미지를 사용할 때는 alt속성을 사용하여 이미지에 대한 설명을 추가해야합니다.

2. 키보드 내비게이션 - 일부 사용자들은 마우스를 사용 할 수 없어서 모든 기능이 키보드만으로도 사용할 수 있도록 해야 합니다. tab, enter, space를 사용해서 작동이 가능해야합니다.

3. 명확한 링크 텍스트 - "여기를 클릭하세요"와 같은 일반적인 링크 텍스트 대신, 링크의 목적을 명확하게 설명하는 텍스트를 사용해야합니다.

4. 컬러 대비 - 텍스트와 배경의 컬러 대비가 충분해야 합니다.

5. 폼 레이블 - 스크린 리더는 레이블을 읽어 폼 빌드의 목적을 설명합니다.

6. 미디어 대체 콘텐츠 - 비디오에는 자막을 제공하고 오디오 콘텐츠에는 텍스트로 된 대체 콘텐츠를 제공해야 합니다.

7. 시맨틱 HTML 사용 - 시멘틱 태그를 사용하여 콘텐츠 구조를 명확하게 해야 합니다.

사용 방법

1. 대체 텍스트

<img src="cat.png" alt="창밖을 바라보는 오렌지 고양이" />
<img src="logo.png" alt="사이트 로고" />
<img src="decorative.png" alt="" />

이미지를 설명해 줘야 해서 작성했습니다. 로고나 버튼 등은 시각적 용도니까 의미만 명확하게 전달하면 됩니다. 그리고 장식용을 쓴 이미지는 빈 값으로 설정해서 사용자에게 전달되지 않도록 하면 됩니다.

2. 키보드 내비게이션

<button type="button">저장</button>
<a href="#content">Skip to Content</a>

<form>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">

  <button type="submit">제출</button>
</form>

a, button, input, select, textarea 등이 있습니다.

3. 명확한 링크 텍스트

<a href="https://www.naver.com/">네이버</a>

어떤 페이지로 연결이 되는지 명확하게 설명을 해야 합니다.

4. 컬러 대비

<style>
  .low-contrast {
    color: #ccc;
    background-color: #fff;
  }
</style>
<div class="low-contrast">
  이 텍스트는 대비가 낮아 읽기 어렵습니다.
</div>

<style>
  .high-contrast {
    color: #000;
    background-color: #fff;
  }
</style>
<div class="high-contrast">
  이 텍스트는 대비가 높아 읽기 쉽습니다.
</div>

5. 폼 레이블

<form>
  <label for="email">이메일 주소</label>
  <input type="email" id="email" name="email" />

  <label for="password">비밀번호</label>
  <input type="password" id="password" name="password" />

  <button type="submit">로그인</button>
</form>

label 태그는 폼 필드와 연결되며 시각적으로 레이블을 제공할 뿐 아니라 스크린 리더가 이 레이블을 읽어 사용자가 해당 필드의 목적을 이해하도록 돕습니다.

6.미디어 대체 콘텐츠

<video controls>
  <source src="example.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  비디오를 지원하지 않는 브라우저입니다.
</video>

<audio controls>
  <source src="example-audio.mp3" type="audio/mp3">
  오디오를 지원하지 않는 브라우저입니다.
</audio>
<p>오디오 내용 요약: 이 오디오는 웹 접근성의 중요성에 대해 설명합니다. 주요 내용은...</p>

7. 시맨틱 HTML 사용

• header - 페이지나 섹션 상단 부분을 정의합니다.

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>

• nav - 사이트의 주요 메뉴나 링크 모음을 정의할 때 사용합니다.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
  </ul>
</nav>

• main - 문서의 주요 콘텐츠를 감쌉니다. 페이지 안에서 한 번만 사용 가능 헤더와 푸터 부분을 제외한 본문 전체를 감쌉니다.

<main>
  <section>
    <h2>Main Section Title</h2>
    <p>Main content...</p>
  </section>
</main>

• article - 독립적으로 사용할 수 있는 콘텐츠를 나타냅니다. 블로그 글, 뉴스 기사 등 독립적인 콘템츠 담을 때 사용합니다.

<article>
  <h3>Article Title</h3>
  <p>This is the content of the article.</p>
</article>

• section - 일반적으로 제목을 포함하고 페이지의 주제별 섹션을 정의할 때 사용됩니다.

<section>
  <h2>Section Title</h2>
  <p>This is the content of the section.</p>
</section>

• aside - 부가적인 정보를 포함하는 영역을 나타냅니다. 사이드바나 보조적인 내용 등을 정의합니다.

<aside>
  <h3>Related Content</h3>
  <p>This is additional information related to the main content.</p>
</aside>

• figure, figcaption - 이미지나 다이어그램 같은 시각적인 콘텐츠를 설명할 때 사용합니다.

<figure>
  <img src="image.jpg" alt="Description of the image">
  <figcaption>Image caption goes here.</figcaption>
</figure>

• footer - 문서나 섹션의 하단 부분을 정의합니다. 저작권 정보나 연락처 등을 포함할 때 사용합니다.

<footer>
  <p>&copy; 2024 Company Name. All rights reserved.</p>
</footer>

HTML 구조 예시

<>
  <header>
    <nav>
	  <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
      </ul>
    </nav>
  </header>
  <main>
   	<h1>페이지 제목</h1>
    <section>
      <h2>첫 번째 섹션 제목</h2>
      <p>섹션에 대한 내용</p>
    </section>
    <section>
      <h2>두 번째 섹션 제목</h2>
      <p>다른 섹션에 대한 내용</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 Company Name. All rights reserved.</p>
  </footer>
</>

번외로 div를 사용해야하는 상황

• 복잡한 레이아웃을 만들 때, 특정 의미를 가진 시멘틱 태그가 적합하지 않다면 div를 사용할 수 있습니다.

<main>
  <div class="container">
    <div class="row">
      <div class="column">Column 1</div>
      <div class="column">Column 2</div>
    </div>
  </div>
</main>

• 특정한 상황에서 사용할 시멘틱 태그가 존재하지 않다면 div를 사용해도 괜찮습니다.
  role을 사용해서 의미를 이해할 수 있게 만드는 것도 좋은 방안입니다.
  ARIA (Accessible Rich Internet Applications) 속성을 사용해도 좋습니다.

• role은 요소가 어떤 역할을 하는지 명시적으로 지정하는 속성
  ARIA는 그 역할의 세부 사항이나 상태를 추가로 설명할 때 사용됩니다.

<div role="banner">
  <h1>Website Title</h1>
</div>

<button aria-label="닫기 버튼" role="button">X</button>

role과 aria-label 속성

언제 어떻게 사용해야하죠?

role

스크린 리더와 같은 보조 기술에게 HTML 요소의 역할을 명시적으로 설명할 때 사용

<!-- <div>, <span> 같은 태그는 본래 아무 의미가 없어서, 역할을 명시해줄 필요가 있습니다. -->
<div role="button">클릭하세요</div> <!-- 스크린 리더에게 버튼 역할을 알림 -->

<!-- <nav>, <main> 같은 태그에 대해 명확하게 그 역할을 지정할 수 있습니다. -->
<nav role="navigation"> <!-- 네비게이션 영역임을 알림 -->
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

• 굳이 안써도 되는 태그들
  header, footer, article, section, form, nav, aside, button, main 등은 본래 의미가 있어서
  role을 추가하지 않아도 스크린 리더가 그 역할을 알 수 있습니다.

❓ nav나 main은 썻자나요

• 쓰는 이유는 호환성 문제나 명시적 접근성을 강화하기 위해 씁니다.
  안써도 충분히 의미가 전달되긴 합니다. role을 사용한다면 nav, main에게 주로 사용합니다.

aria-label

스크린 리더에 의해 시각적으로 보이지 않는 설명을 제공할 때 사용합니다.
일반적으로 버튼이나 링크에 텍스트가 부족하거나 필요한 상황에 사용됩니다.

<!-- 버튼 안에 텍스트 대신 아이콘만 있는 경우 -->
<button aria-label="검색">
  <img src="search-icon.png" alt="" /> <!-- 아이콘만 있는 버튼 -->
</button>

<!-- 링크의 텍스트만으로 충분하지 않다면 -->
<a href="/profile" aria-label="사용자 프로필 보기">
  <img src="profile-pic.jpg" alt="프로필 사진" />
</a>

<!-- 이미 텍스트가 명확히 제공되어 있으면 aria-label은 불필요합니다. -->
<button>로그인</button> <!-- 명확하므로 aria-label 불필요 -->

role과 aria-label 종합

• 의미론적으로 부족한 경우: div나 span같은 요소는 보통 의미가 없으므로 role을 사용해 명확하게 해야 합니다.

<div role="alert">에러가 발생했습니다!</div> <!-- 경고 메시지로 역할 명시 -->

• 아이콘만 있는 버튼: 아이콘만 들어간 버튼은 시각적으로 보이지 않는 설명을 aria-label로 제공합니다.

<button aria-label="닫기">
  <img src="close-icon.png" alt="" />
</button>

• 복합적인 사용: aria-label과 role을 함께 사용해 의미를 명확히 할 수 있습니다.

<div role="button" aria-label="더보기"> <!-- 스크린 리더에게 버튼임을 알리고, 설명도 추가 -->
  <img src="more-icon.png" alt="" />
</div>

• role은 의미가 불명확한 요소에 추가 역할을 부여하거나 의미론적 의미를 덧붙일 때 사용합니다.
• aria-label은 시각적 정보가 부족하거나 대체 설명이 필요할 때 유용합니다.
• 이미 의미가 명확한 요소들(HTML5의 의미론적 태그들)에는 굳이 추가하지 않아도 됩니다.

---

이렇게 웹 접근성에 대해 알아봤는데요, 생각보다 내용이 많아서 놀랬습니다.
또한, 코드를 작성할 때는 웹 표준을 준수하며 웹 접근성을 고려하는 것이 기본 원칙이라는 것을 다시 한번 깨달았습니다.

긴 글을 읽어 주셔서 감사합니다. 혹시 빠진 부분이나 수정이 필요한 부분이 있으면 댓글 남겨주시면 감사하겠습니다! 환영합니다.