[HTML] 개념노트 18편 접근성 기초 이해하기

 

HTML 개념노트 18편

HTML 접근성 기초 이해하기

웹페이지는 다양한 사용자가 이용합니다. 마우스를 쓰기 어려운 사용자, 화면을 볼 수 없는 사용자, 키보드로만 조작하는 사용자도 있습니다. 이번 글에서는 HTML에서 접근성을 높이는 기본 방법을 정리합니다.

1. 접근성이란?

접근성은 더 많은 사용자가 웹페이지를 불편 없이 이용할 수 있도록 만드는 것을 의미합니다. 단순히 장애가 있는 사용자만을 위한 개념이 아니라, 모바일 사용자, 키보드 사용자, 느린 인터넷 환경의 사용자에게도 중요합니다.

쉽게 말하면?

접근성은 “누가 사용해도 이해하고 조작할 수 있는 웹페이지”를 만드는 기본 배려입니다.

2. 이미지에는 alt 속성을 작성하기

alt는 이미지가 보이지 않을 때 대신 표시되는 텍스트입니다. 또한 스크린 리더가 이미지 내용을 설명할 때 사용합니다.

<img src="profile.jpg" alt="개발자 프로필 사진">

의미 있는 이미지는 내용을 설명하는 alt를 작성하는 것이 좋습니다. 반대로 단순 장식 이미지는 상황에 따라 빈 alt를 사용할 수 있습니다.

<img src="decor-line.png" alt="">

좋은 alt 작성법

• 이미지가 전달하는 핵심 정보를 설명합니다.
• “이미지”, “사진”이라는 말만 반복하지 않습니다.
• 버튼 이미지라면 버튼의 기능을 설명합니다.
• 장식 이미지는 alt=""로 처리할 수 있습니다.

3. label과 input 연결하기

입력창에는 무엇을 입력해야 하는지 알려주는 <label>이 필요합니다. label의 for 값과 input의 id 값을 같게 작성하면 두 요소가 연결됩니다.

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

이렇게 작성하면 사용자가 “이메일” 글자를 클릭해도 입력창이 선택됩니다. 체크박스나 라디오 버튼에서는 특히 사용성이 좋아집니다.

<input type="checkbox" id="agree" name="agree">
<label for="agree">이용약관에 동의합니다</label>

4. 버튼은 button 태그로 만들기

클릭해서 동작하는 요소는 가능하면 <button> 태그를 사용하는 것이 좋습니다. 단순히 <div>나 <span>에 클릭 이벤트를 붙이면 키보드 조작이나 보조 기술에서 불편할 수 있습니다.

아쉬운 예시

<div onclick="saveData()">저장하기</div>

좋은 예시

<button type="button" onclick="saveData()">저장하기</button>

버튼은 기본적으로 키보드 접근성이 좋고, 사용자가 클릭 가능한 요소라는 것을 더 명확하게 전달합니다.

5. 링크와 버튼을 구분하기

<a> 태그와 <button> 태그는 비슷해 보일 수 있지만 역할이 다릅니다.

태그	역할	사용 예시
<a>	다른 주소나 위치로 이동	상세 페이지 이동, 외부 사이트 이동
<button>	현재 페이지에서 동작 실행	저장, 삭제, 검색, 모달 열기

<a href="detail.html">상세 보기</a>

<button type="button">삭제하기</button>

6. 제목 태그 순서 지키기

제목 태그는 단순히 글씨 크기를 키우기 위한 태그가 아니라 문서 구조를 나타내는 태그입니다. <h1>부터 <h6>까지 순서를 자연스럽게 사용하는 것이 좋습니다.

아쉬운 예시

<h1>HTML 개념노트</h1>
<h4>접근성 기초</h4>
<h2>alt 속성</h2>

좋은 예시

<h1>HTML 개념노트</h1>
<h2>접근성 기초</h2>
<h3>alt 속성</h3>

제목 구조가 자연스러우면 사용자와 검색엔진, 보조 기술 모두가 문서 흐름을 이해하기 쉬워집니다.

7. 의미 있는 HTML 태그 사용하기

모든 요소를 <div>로만 만들기보다, 내용의 역할에 맞는 태그를 사용하는 것이 좋습니다. 의미 있는 태그는 코드의 가독성과 접근성을 함께 높여줍니다.

상황	권장 태그
페이지 대표 제목	<h1>
문단 내용	<p>
목록	<ul>, <ol>, <li>
데이터 표	<table>
클릭 동작	<button>
페이지 이동	<a>

8. 키보드로 이동 가능한 구조 만들기

웹페이지는 마우스 없이도 키보드로 이동할 수 있어야 합니다. 기본 HTML 태그인 <a>, <button>, <input>은 키보드 포커스를 받을 수 있습니다.

<a href="about.html">소개 페이지로 이동</a>

<button type="button">메뉴 열기</button>

<input type="text" name="keyword" placeholder="검색어 입력">

반대로 의미 없는 <div>만으로 클릭 요소를 만들면 키보드 접근성이 떨어질 수 있습니다.

9. 숨겨진 텍스트보다 명확한 텍스트 사용하기

버튼이나 링크의 텍스트는 사용자가 눌렀을 때 어떤 일이 일어나는지 알 수 있어야 합니다. “클릭”, “보기”, “여기”처럼 모호한 문구보다 목적이 드러나는 문구가 좋습니다.

아쉬운 문구

<a href="html.html">여기 클릭</a>
<button type="button">확인</button>

좋은 문구

<a href="html.html">HTML 개념노트 보러가기</a>
<button type="button">검색 조건 적용하기</button>

10. 초보자가 자주 하는 실수

실수 1. 모든 이미지 alt를 비워 둠

의미 있는 이미지는 반드시 설명을 작성하는 것이 좋습니다. 단순 장식 이미지일 때만 빈 alt를 고려할 수 있습니다.

실수 2. label 없이 input만 작성함

사용자는 입력창이 무엇을 의미하는지 알아야 합니다. label과 input을 연결하는 습관이 중요합니다.

실수 3. div를 버튼처럼 사용함

클릭 동작이 필요하면 <button>을 우선 고려하는 것이 좋습니다.

실수 4. 제목 순서를 건너뜀

제목 태그는 문서의 목차처럼 동작합니다. h1 → h2 → h3처럼 자연스럽게 내려가는 구조가 좋습니다.

11. 접근성 체크리스트

• 의미 있는 이미지에 alt를 작성했나요?
• 입력창에 label을 연결했나요?
• 클릭 동작은 button으로 만들었나요?
• 페이지 이동은 a 태그로 만들었나요?
• 제목 태그 순서가 자연스러운가요?
• 링크와 버튼 문구가 명확한가요?
• 마우스 없이 키보드로 이동할 수 있나요?
• 의미 있는 HTML 태그를 먼저 사용했나요?

12. 오늘의 핵심 정리

• 접근성은 더 많은 사용자가 웹페이지를 편하게 이용할 수 있게 만드는 기본 원칙입니다.
• 의미 있는 이미지에는 alt를 작성해야 합니다.
• 입력창은 label과 연결하는 것이 좋습니다.
• 클릭 동작은 가능하면 <button> 태그로 만듭니다.
• 이동은 <a>, 동작은 <button>으로 구분하면 좋습니다.
• 제목 태그는 문서 구조를 나타내므로 순서를 자연스럽게 사용해야 합니다.
• 링크와 버튼 문구는 사용자가 결과를 예측할 수 있게 작성해야 합니다.

13. 간단한 연습 문제

아래 조건에 맞게 접근성을 고려한 HTML 코드를 작성해 보세요.

문제

• 프로필 이미지를 넣고 의미 있는 alt 작성하기
• 이메일 입력창과 label 연결하기
• 상세 페이지 이동은 a 태그로 만들기
• 저장 동작은 button 태그로 만들기
• 제목은 h1, 하위 제목은 h2로 작성하기

정답 보기

<h1>회원 프로필</h1>

<img src="profile.jpg" alt="회원 프로필 사진">

<h2>이메일 정보</h2>
<label for="email">이메일</label>
<input type="email" id="email" name="email">

<a href="profile-detail.html">프로필 상세 페이지로 이동</a>

<button type="button">프로필 저장하기</button>

다음 편 예고

다음 글에서는 지금까지 배운 태그를 활용해서 HTML 실전 레이아웃 구조를 만들어 보겠습니다.

GWDEVELBlog HTML 개념노트