웹 접근성이 중요한 이유는? 🤔
웹 접근성(Web Accessibility)이란, 장애 여부나 디지털 기기 사용 능력에 관계없이 모든 사람이 웹 콘텐츠에 접근할 수 있도록 돕는 설계를 의미함. 웹 접근성이 높은 UI를 구현하면, 시각, 청각, 신체, 인지 장애가 있는 사용자뿐 아니라 고령 사용자와 일시적인 불편을 겪는 사용자까지 다양한 사람들이 웹사이트를 더 편리하게 이용할 수 있음.
HTML과 CSS를 사용한 웹 접근성 향상 방법 🛠️
적절한 HTML 요소 사용하기
시맨틱(Semantic) HTML 요소를 사용하면, 웹 페이지의 구조와 의미가 명확해져 스크린 리더와 검색 엔진이 페이지를 더 잘 이해할 수 있음.
<header>, <nav>, <main>, <footer> 등 시맨틱 태그를 사용해 웹 페이지의 구조를 정의함.
<button>, <a>와 같은 HTML 요소를 올바르게 사용해 기능과 역할을 명확히 함.
<header>
<h1>Accessible Web App</h1>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>Welcome to an accessible web application.</p>
</section>
</main>
<footer>
<p>© 2024 Accessible Web</p>
</footer>ARIA 속성으로 추가 정보 제공하기
ARIA (Accessible Rich Internet Applications)는 웹 페이지의 추가 정보를 스크린 리더에게 제공하는 데 사용됨. 특히, 요소의 역할이나 상태를 명확히 설명해야 할 때 유용함.
- aria-label: 버튼이나 링크 등의 텍스트가 명확하지 않을 때, 텍스트 대체 설명을 추가함.
- aria-hidden: 스크린 리더에서 숨겨야 하는 콘텐츠에 사용함.
- role: 특정 역할을 명시해 스크린 리더가 기능을 명확히 이해할 수 있도록 함.
<button aria-label="Search">🔍</button>
<div aria-hidden="true">
This content is hidden from screen readers.
</div>색상 대비와 텍스트 가독성 확보
색상 대비는 시각 장애인, 저시력 사용자, 고령 사용자가 콘텐츠를 잘 읽을 수 있도록 도와줌. 텍스트와 배경의 대비를 충분히 높이고, WCAG(웹 콘텐츠 접근성 지침) 기준을 준수하는 것이 중요함.
- 텍스트와 배경 색상 대비: 최소 4.5:1 이상을 유지하는 것이 권장됨.
- 포커스 색상 대비: 포커스 상태의 요소가 명확히 보이도록 충분한 대비를 제공함.
body {
color: #333;
background-color: #f7f7f7;
}
button:focus {
outline: 2px solid #005fcc;
}폰트 크기와 여백으로 가독성 높이기
폰트 크기와 줄 간격은 가독성에 큰 영향을 미침. 특히 가독성을 높이기 위해 적절한 폰트 크기와 여백을 설정하는 것이 중요함.
- 폰트 크기: 기본 폰트 크기를 16px 이상으로 설정하는 것이 좋음.
- 줄 간격(line-height): 줄 간격을 최소 1.5배로 설정해, 텍스트가 좁고 빽빽하게 느껴지지 않도록 함.
- 여백(padding, margin): 버튼과 링크는 충분한 여백을 둬, 클릭이나 탭할 때 오류가 발생하지 않도록 함.
body {
font-size: 16px;
line-height: 1.5;
}
button {
padding: 10px 20px;
font-size: 16px;
}포커스 가능한 요소에 접근성 제공하기
포커스 가능한 요소에는 키보드 접근성을 고려해야 함. 특히 tabindex 속성을 활용해 키보드 사용자가 페이지를 쉽게 탐색할 수 있도록 지원함.
- tabindex="0": 요소가 기본 탭 순서에 따라 포커스를 받도록 설정함.
- tabindex="-1": 요소를 포커스에서 제외할 수 있음.
- 커스텀 포커스 스타일: 브라우저 기본 스타일 외에 포커스 상태의 스타일을 추가해 포커스된 요소가 명확히 보이도록 함.
<button tabindex="0">Submit</button>
<a href="#main-content" tabindex="0">Skip to main content</a>웹 접근성 높은 UI 구현 시 고려해야 할 추가 요소들 🎯
이미지에 대체 텍스트 제공하기
이미지는 시각적으로 중요한 정보를 전달하므로, alt 속성을 통해 설명을 제공해야 함.
<img src="image.jpg" alt="A scenic mountain view with a lake in the foreground" />폼 요소에 레이블 설정하기
모든 폼 요소에는 명확한 레이블이 필요하며, 레이블을 직접적으로 연결해 스크린 리더가 각 입력 필드의 역할을 쉽게 설명하도록 해야 함.
<label for="email">Email</label>
<input type="email" id="email" name="email" />label 태그와 for 속성을 사용해 폼 요소를 연결하면, 스크린 리더가 필드 역할을 명확히 알려줘 폼 사용이 쉬워짐.
비디오와 오디오에 자막 및 대체 텍스트 제공하기
비디오와 오디오 콘텐츠에는 자막 또는 대체 텍스트를 제공해, 청각 장애가 있는 사용자도 콘텐츠를 이용할 수 있도록 함.
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>