웹 접근성과 HTML/CSS

웹파트 35기 YB 최민입니다

 

1주차 과제를 하면서 그동안 놓치고 있었던 웹 접근성과 HTML/CSS에 대해 정리해보려고 한다.

 

🐻 웹 접근성이란?우선 웹 접근성이란 웹 사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말한다.

이는 웹사이트의 내용, 기능, 그리고 디자인이 모든 사용자에게 접근 가능하게 보장하는 것이다.

 

-> 웹은 정보의 주요한 출처로, 접근성이 결여된 경우 특정 사용자 집단은 정보와 서비스에 대한 접근이 제한될 수 있다.

 

 

1. 시각적 장애

• 시각장애인 사용자들은 화면 리더기를 사용하여 웹 콘텐츠를 탐색한다. 이들을 위해 텍스트 기반의 대체 정보와 의미론적 HTML 사용이 필수적이라고 한다.
• -> 예를 들어, 이미지에 대한 설명을 제공하는 대체 텍스트(alt 속성)를 사용한다.

2. 청각 장애

• 청각장애인을 위해 비디오 콘텐츠에는 자막이나 텍스트 대체물이 필요하다. 이는 콘텐츠를 이해하는 데 도움을 준다.
• 더불어 비디오와 오디오 콘텐츠에는 명확한 텍스트 자막을 제공해야 한다.

3. 운동 및 인지 장애

• 웹사이트 내의 상호작용 요소(버튼, 링크 등)는 쉽게 클릭 가능해야 하며, 키보드 내비게이션을 지원해야 한다.
• 명확하고 간단한 언어를 사용하여 인지적인 부담을 줄이는 것이 중요하다.

 

🐻 HTML을 통한 접근성 향상

 

의미론적 HTML 사용

-> 의미론적 HTML은 웹 페이지 구조를 명확하게 하여 사용자가 콘텐츠를 쉽게 이해할 수 있도록 도와준다.

<header>
  <h1>얘들아 ~~ 웨웨웩웹 ?</h1>
  <nav>
    <ul>
      <li><a href="#principles">원칙</a></li>
      <li><a href="#html">HTML</a></li>
      <li><a href="#css">CSS</a></li>
    </ul>
  </nav>
</header>

 

 

 

 

대체 텍스트 및 캡션

-> 이미지나 비디오에 대해 대체 텍스트와 캡션을 제공하여 시각적 정보를 보완한다.

<img src="logo.png" alt="솝트로고">
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
  비디오 플레이어는 지원되지 않습니다.
</video>

 

폼 접근성

-> 사용자 입력 폼은 명확하고 직관적으로 설계되어야 하며, 모든 입력 필드는 적절한 라벨을 가져야 한다.

<form>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>
  <span class="error-message" aria-live="assertive"></span>
  <button type="submit">제출</button>
</form>

 

 

🐻 CSS로 접근성 지원

 

색상 대비와 가독성

-> 텍스트와 배경 색상 간의 충분한 대비 비율 (최소 4.5:1)을 유지하여 가독성을 높일 수 있다고 한다.

body {
  background-color: #ffffff;
  color: #333333; /* 충분한 대비 비율 유지 */
}

 

반응형 디자인

-> 다양한 화면 크기에 맞춰 레이아웃을 조정하여 사용자 경험을 향상시킨다.

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

 

접근 가능한 폰트

-> 읽기 쉬운 폰트를 사용하고 사용자에게 적절한 크기를 제공한다.

body {
  font-family: Arial, sans-serif;
  font-size: 16px; /* 최소 16px 권장 */
}

 

 

🐻 ARIA 활용 ( Accessible Rich Internet Applications )

동적 콘텐츠의 접근성을 향상 시킬 수 있다고 한다

저는 이번에 처음 알았어요 ㅎㅎ

<div aria-live="polite">새로운 알림이 도착했습니다!</div>

 

 

 

모든 사용자가 웹 사이트를 실질적으로 유용하게 사용할 수 있도록 오늘 기록한 내용들을 잘 기억해서 사용해야겠다.!!