링크와 이미지에 액세스할 수 있도록 보장
웹 페이지에서 가장 일반적인 두 가지 구성 요소는 링크와 이미지입니다. 이들 항목은 접근성에 큰 영향을 미칩니다. 링크 텍스트와 대체 텍스트가 유효한지 확인하는 것은 모든 사용자를 위해 페이지를 개선하고자 할 때 수행할 수 있는 첫 번째 단계 중 하나입니다.
링크 텍스트
하이퍼링크는 웹 탐색의 핵심입니다. 화면 읽기 프로그램에서 링크를 제대로 읽을 수 있도록 하면 모든 사용자가 사이트를 탐색할 수 있습니다.
다음 예제 텍스트의 두 링크를 살펴보십시오.
- "요정 펭귄이라고도 하는 꼬마 펭귄은 세계에서 가장 작은 펭귄입니다. 자세한 내용을 보려면 여기를 클릭하세요."
- "요정 펭귄이라고도 하는 꼬마 펭귄은 세계에서 가장 작은 펭귄입니다. 자세한 내용은 https://en.wikipedia.org/wiki/Little_penguin을 참조하세요."
참고
두 예제에서는 웹 개발자가 사용하지 말아야 할 것을 보여줍니다.
이러한 링크는 시력이 정상인 사용자에게는 괜찮아 보일 수 있지만 화면 읽기 프로그램에서는 예상대로 작동하지 않습니다. 기억하십시오. 화면 읽기 프로그램은 텍스트를 읽습니다. 텍스트에 URL이 표시되면 화면 읽기 프로그램에서 URL을 읽습니다. 일반적으로 URL은 의미 있는 정보를 전달하지 않으며 성가시게 들릴 수 있습니다. 휴대폰에서 URL이 포함된 문자 메시지를 음성으로 읽은 적이 있는 경우 이 문제를 겪어보았을 것입니다.
또한 화면 읽기 프로그램은 시력이 있는 사용자가 페이지에서 링크를 검색하는 것과 같은 방식으로 페이지의 하이퍼링크만 읽을 수 있습니다. 링크 텍스트가 항상 "여기 클릭"인 경우 사용자에게 들리는 것은 "여기 클릭, 여기 클릭, 여기 클릭, 여기 클릭, 여기 클릭..."뿐입니다. 모든 링크가 서로 구분이 안 되므로 혼란에 빠지게 됩니다.
모든 사용자가 클릭하는 것은 아니기 때문에 "클릭"이라는 단어도 문제입니다. 휴대폰 사용자는 누르고, 키보드 사용자는 Enter 키나 스페이스바를 선택할 수 있으며, 다른 클라이언트는 다른 방법을 사용합니다.
따라서 항상 의미 있는 링크 텍스트를 사용해야 합니다. 유효한 링크 텍스트는 링크의 연결 대상을 간략하게 설명합니다. 꼬마 펭귄에 대한 이전 예에서 링크는 해당 종에 대한 위키백과 페이지로 이동합니다. 꼬마 펭귄이라는 구는 링크를 선택하면 무엇에 대해 알아볼 수 있는지를 분명히 하기 때문에 완벽한 링크 텍스트입니다.
- "요정 펭귄이라고도 하는 꼬마 펭귄은 세계에서 가장 작은 펭귄입니다."
참고
모두가 사이트에 액세스할 수 있게 하면 검색 엔진이 사이트를 탐색하는 데도 도움이 됩니다. 검색 엔진은 링크 텍스트를 사용하여 페이지의 주제를 파악합니다. 따라서 유효한 링크 텍스트를 사용하면 모두에게 도움이 됩니다.
ARIA 특성
다음 제품 페이지를 상상해보세요.
| Product | Description | 순서 |
|---|---|---|
| 위젯 | [Description]('#') |
[Order]('#') |
| 슈퍼 위젯 | [Description]('#') |
[Order]('#') |
설명 및 순서에 대한 링크와 함께 표의 다양한 항목에 대한 정보를 표시하는 페이지의 일반적인 레이아웃입니다. 브라우저 사용자의 경우 설명 및 순서 텍스트를 복제하면 유용합니다. 그러나 화면 읽기 프로그램 사용자는 문맥 없이 반복되는 단어 설명과 순서만 들을 수 있습니다.
이러한 유형의 시나리오를 지원하기 위해 HTML은 ARIA(Accessible Rich Internet Applications)라는 특성 세트를 지원합니다. 이들 특성을 사용하여 화면 읽기 프로그램에 더 많은 정보를 제공할 수 있습니다.
예를 들어 페이지 형식에서 링크 설명을 허용하지 않는 경우 aria-label을 사용하여 링크를 설명할 수 있습니다. 위젯에 대한 설명을 다음과 같이 설정할 수 있습니다.
<a href="#" aria-label="Widget description">description</a>
ARIA는 화면 읽기 프로그램에서 링크를 읽을 수 있도록 텍스트를 추가하는 것 외에도 다양한 용도로 사용됩니다. 의미 체계 HTML을 사용할 수 없을 때 ARIA로 특정 요소가 수행하는 역할을 설명할 수 있습니다. 예를 들어 트리를 만들 때 ARIA 역할을 사용하여 화면 읽기 프로그램에 인터페이스를 설명할 수 있습니다.
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
중요
앞에서 설명한 대로 ARIA 사용은 대개 의미 체계 태그와 유효한 링크 텍스트 사용으로 대체됩니다. 브라우저와 화면 읽기 프로그램만이 사용 가능한 클라이언트는 아니며 모든 클라이언트와 사용자에 대해 페이지가 제대로 작동하도록 디자인하는 것이 주요 목표여야 합니다.
이미지의 대체 텍스트
일반적으로 화면 읽기 프로그램은 이미지의 내용을 읽을 수 없습니다. 일부는 AI를 사용할 수 있지만 생성된 결과는 문맥상 정확하지 않을 수 있습니다. 다행히 이미지에 액세스할 수 있도록 하는 데 많은 작업이 필요하지 않습니다. 이것이 alt 특성의 핵심입니다. 모든 의미 있는 이미지에는 이미지가 무엇인지 또는 이미지가 전달하려는 정보를 설명하는 alt 특성(대체 텍스트라고도 함)이 있어야 합니다.
단순한 장식용 이미지의 alt 특성은 빈 문자열(alt="")로 설정되어야 합니다. 이렇게 설정하면 화면 읽기 프로그램에서 장식용 이미지를 불필요하게 알리지 않습니다.
참고
예상대로 검색 엔진은 이미지의 내용을 이해할 수 없습니다. 대신 대체 텍스트를 사용합니다. 앞서 말했듯이 페이지에 액세스할 수 있게 하면 여러 가지 이점이 있습니다.