HTML 접근성
HTML 접근성
항상 접근성을 염두에 두고 HTML 코드를 작성하십시오!
사용자에게 사이트를 탐색하고 상호작용할 수 있는 좋은 방법을 제공하세요. HTML 코드를 가능한 한 의미 있게 만드십시오 .
시맨틱 HTML
Semantic HTML은 가능한 한 올바른 목적을 위해 올바른 HTML 요소를 사용하는 것을 의미합니다. 의미적 요소는 의미가 있는 요소입니다. 버튼이 필요한 경우 <button>요소를 사용하세요(
<div>요소가 아님).
의미론적
<button>Report an Error</button>
의미 없는
<div>Report an Error</div>
시맨틱 HTML은 페이지의 내용을 소리내어 읽는 스크린 리더에 컨텍스트를 제공합니다.
버튼 예를 염두에 두고:
- 버튼에는 기본적으로 더 적합한 스타일이 있습니다.
- 스크린 리더는 그것을 버튼으로 식별합니다.
- 초점을 맞출 수 있는
- 클릭 가능한
키보드 전용 탐색에 의존하는 사람들도 버튼에 액세스할 수 있습니다. 마우스와 키를 사용하여 클릭할 수 있으며 키보드에서 탭 키를 사용하여 탭으로 이동할 수 있습니다.
의미 없는 요소 의 예 : <div>및 <span>- 내용에 대해 아무 것도 알려주지 않습니다.
의미 요소 의 예 : <form>, <table>및 <article>- 내용을 명확하게 정의합니다.
제목이 중요합니다
제목은 <h1>to <h6>태그로 정의됩니다.
예시
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
검색 엔진은 제목을 사용하여 웹 페이지의 구조와 내용을 색인화합니다.
사용자는 제목으로 페이지를 훑어봅니다. 문서 구조와 여러 섹션 간의 관계를 표시하려면 제목을 사용하는 것이 중요합니다.
화면 판독기는 또한 탐색 도구로 제목을 사용합니다. 다른 유형의 제목은 페이지의 개요를 지정합니다.
<h1>표제는 주요 표제에 사용되어야 하며, 그 다음에 <h2>표제가 오고, 그 다음으로 덜 중요한
<h3>등이 와야 합니다.
참고: 제목에는 HTML 제목만 사용하십시오. 텍스트를 BIG 또는 굵게 만들기 위해 제목을 사용하지 마십시오 .
대체 텍스트
속성 은 alt사용자가 어떤 이유로 이미지를 볼 수 없는 경우(느린 연결,
src
속성의 오류 또는 사용자가 화면 판독기를 사용하는 경우) 이미지에 대한 대체 텍스트를 제공합니다.
alt속성 값은 이미지를 설명해야 합니다.
예시
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
브라우저에서 이미지를 찾을 수 없으면 alt
속성 값이 표시됩니다.
예시
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
언어 선언
웹 페이지의 언어를 선언하려면 항상 태그 lang
내부에 속성을 포함해야 합니다. <html>이것은 검색 엔진과 브라우저를 지원하기 위한 것입니다.
다음 예에서는 영어를 언어로 지정합니다.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
명확한 언어 사용
항상 이해하기 쉬운 명확한 언어를 사용하십시오. 또한 화면 판독기로 명확하게 읽을 수 없는 문자는 피하십시오. 예를 들어:
- 문장을 최대한 짧게 유지
- 대시를 피하십시오. 1-3을 쓰는 대신 1-3을 쓰십시오.
- 약어를 피하십시오. 2월을 쓰는 대신 2월을 쓰세요
- 속어를 피하라
좋은 링크 텍스트 만들기
링크 텍스트는 독자가 링크를 클릭하여 얻을 수 있는 정보를 명확하게 설명해야 합니다.
좋은 링크와 나쁜 링크의 예:
좋은
나쁜
참고: 이 페이지는 웹 접근성에 대한 소개입니다. 자세한 내용은 접근성 자습서 를 참조하세요.