[html] 웹 앱의 접근성 고려 사항

22 Dec 2023

html

웹 애플리케이션을 개발할 때 접근성은 매우 중요합니다. 이는 모든 사용자가 쉽게 소프트웨어 또는 웹 콘텐츠에 접근하고 사용할 수 있는 능력을 의미합니다. 웹 앱의 접근성을 고려할 때 몇 가지 주요 사항이 있습니다.

1. 시맨틱 마크업 사용

콘텐츠를 의미적으로 구조화해야 합니다. 이는 웹 페이지가 스크린 리더 및 다른 보조 기술을 사용하는 사용자에게 명확하게 설명될 수 있도록 하는 것을 의미합니다.

예시:

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

2. 키보드 네비게이션 지원

키보드만을 이용하여 전체 앱을 탐색하고 상호 작용할 수 있어야 합니다. 이것은 마우스나 터치 기반이 아닌 방법으로도 앱을 쉽게 사용할 수 있도록 하는 것을 의미합니다.

예시:

<button onclick="myFunction()" onkeypress="myFunction()">Click Me</button>

3. 적절한 대비

콘텐츠 전체에 걸쳐 최적의 가독성을 제공하기 위해 텍스트와 배경의 대비를 확인해야 합니다. 적합하지 않은 대비는 시각적으로 장애가 있는 사용자에게 문제를 일으킬 수 있습니다.

예시:

body {
  color: #333;
  background-color: #fff;
}

4. 이미지 대체 텍스트 제공

모든 이미지에는 대체 텍스트가 있어야 합니다. 시각적으로 장애가 있는 사용자는 화면 판독기를 통해 해당 텍스트를 사용하여 이미지를 이해할 수 있습니다.

예시:

<img src="example.jpg" alt="Example description">

웹 앱을 디자인할 때 이러한 요소들을 고려하여 접근성을 향상시킬 수 있습니다. 이는 다양한 사용자들이 모든 콘텐츠와 기능에 동등하게 접근할 수 있는 웹 애플리케이션을 만드는 데 도움이 됩니다.

참고 자료: