접근성 준수 컴포넌트 - 앵커 (a, 링크 태그)

앵커 태그 (<a>)의 접근성(A11Y) 보장

앵커 태그 (<a>)는 HTML에서 중요한 요소로, 다양한 페이지나 리소스를 연결하는 하이퍼링크를 만듭니다. 이러한 링크의 접근성을 보장하는 것은 스크린 리더와 같은 보조 기술을 사용하는 방문자를 포함한 모든 사용자를 위한 원활하고 포괄적인 사용자 경험을 제공하는 데 매우 중요합니다. 이 블로그 포스트에서는 앵커 태그의 접근성을 보장하기 위한 일반적이고 실질적인 정보를 다룹니다.

앵커 태그 접근성이 중요한 이유

접근 가능한 앵커 태그는 장애를 가진 사용자가 웹 콘텐츠를 탐색하고 이해하는 데 도움을 줍니다. 적절히 구현된 링크는 웹사이트의 사용성과 포괄성을 향상시키며, 다음과 같은 이점을 제공합니다:

1. 내비게이션 향상: 사용자가 웹사이트의 한 부분에서 다른 부분으로 쉽게 이동할 수 있도록 합니다.
2. 맥락 제공: 링크의 목적이나 목적지에 대한 명확하고 설명적인 정보를 제공합니다.
3. SEO 향상: 잘 설명된 링크는 검색 엔진 최적화(SEO)에 기여합니다.

접근 가능한 앵커 태그를 위한 모범 사례

1. 설명적인 링크 텍스트 사용

링크 텍스트는 사용자가 추가적인 맥락 없이도 링크의 목적지나 목적에 대해 이해할 수 있을 정도로 설명적이어야 합니다.

좋은 예:

<a href="https://example.com/tutorials" alt="우리의 튜토리얼 읽기">우리의 튜토리얼 읽기</a>

나쁜 예:

<a href="https://example.com/tutorials">여기를 클릭하세요</a>

2. URL을 링크 텍스트로 사용하지 않기

실제 URL을 링크 텍스트로 사용하는 것은 혼란을 줄 수 있으며, 특히 스크린 리더 사용자를 위해 사용자 친화적이지 않습니다.

좋은 예:

<a href="https://example.com">우리의 웹사이트 방문하기</a>

나쁜 예:

<a href="https://example.com">https://example.com</a>

3. 맥락 없이도 의미 있는 링크 텍스트 사용

스크린 리더 사용자는 종종 링크 목록을 사용하여 탐색하므로, 링크 텍스트는 그 자체로 의미가 있어야 합니다.

좋은 예:

<a href="https://example.com/contact" alt="문의하기">문의하기</a>

나쁜 예:

<a href="https://example.com/contact">여기를 클릭하세요</a>

4. 추가적인 맥락을 위한 aria-label 사용

눈에 보이는 링크 텍스트가 충분하지 않을 때, aria-label 속성을 사용하여 추가적인 맥락을 제공합니다.

예:

<a href="https://example.com/settings" aria-label="계정 설정">설정</a>

5. 새 창 및 외부 링크 표시

링크가 새 창이나 탭에서 열리거나 외부 사이트로 연결될 경우, 시각적 표시를 제공하고 aria-label을 사용하여 스크린 리더 사용자에게 알립니다.

예:

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer" aria-label="새 창에서 열림">외부 사이트</a>

6. 포커스 스타일이 보이도록 유지

앵커 태그는 키보드 사용자가 탐색할 수 있도록 포커스 스타일이 보이도록 해야 합니다. 기본 포커스 아웃라인을 제거하지 않거나 대체 스타일을 제공해야 합니다.

예:

a:focus {
    outline: 2px solid #005fcc;
}

7. 빈 링크 피하기

앵커 태그가 비어 있지 않도록 합니다. 항상 텍스트나 aria-label을 통해 접근 가능한 이름을 포함해야 합니다.

좋은 예:

<a href="https://example.com">
    <img src="icon.png" alt="예시 아이콘">
</a>

나쁜 예:

<a href="https://example.com"></a>

8. 반복된 링크 피하기

같은 링크가 페이지에 여러 번 나타나는 경우, 그것이 필요한지 확인합니다. 그렇지 않다면 스크린 리더 사용자가 탐색을 단순화할 수 있도록 중복을 줄이는 것을 고려하십시오.

title 속성 사용

title 속성은 링크에 대한 추가 정보를 제공할 수 있으며, 사용자가 링크 위에 마우스를 올릴 때 툴팁으로 나타납니다. 그러나 접근성을 위해 title 속성에만 의존하는 것은 권장되지 않습니다. 이는 다양한 보조 기술에서 지원이 제한적이며, 스크린 리더가 항상 읽어주지 않기 때문입니다.

title 속성의 사용 시기

• 보충 정보: 링크 텍스트를 보완하지만 대체하지 않는 추가 정보를 제공할 때 사용합니다.
• 툴팁: 사용자가 링크 위에 마우스를 올릴 때 유용한 추가적인 맥락을 제공할 때 사용합니다.

예:

<a href="https://example.com" title="우리의 홈페이지 방문하기">우리의 웹사이트 방문하기</a>

title 속성의 한계

• 일관되지 않은 스크린 리더 지원: 모든 스크린 리더가 title 속성을 읽어주지 않습니다.
• 마우스 의존성: 이 정보는 마우스를 사용하는 사용자에게만 제공되며, 키보드 및 터치 사용자에게는 제공되지 않습니다.

실용적인 예

예 1: 간단한 설명적 링크

<a href="https://example.com/products" alt="우리의 제품 보기">우리의 제품 보기</a>

예 2: ARIA 레이블이 있는 링크

<a href="https://example.com/settings" aria-label="계정 설정">설정</a>

예 3: 새 창에서 열리는 외부 링크 표시

<a href="https://external-site.com" target="_blank" title="새창열림">외부 사이트</a>
<!-- 2024년 한국 기준으로는 위와 같이만 구성해도 문제가 되지 않는다. -->

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer" aria-label="새 창에서 열림">외부 사이트</a>
<!-- 더 상세히 작성하려면 바로 위와 같이 할 수 있으나, aria-label은 텍스트노드를 무시한다. -->

예 4: 접근 가능한 이미지 링크

<a href="https://example.com">
    <img src="icon.png" alt="예시 아이콘">
</a>

예 5: title 속성이 있는 링크

<a href="https://example.com" title="우리의 홈페이지 방문하기">우리의 웹사이트 방문하기</a>

결론

앵커 태그의 접근성을 보장하는 것은 명확하고 설명적인 링크 텍스트를 제공하고, 추가적인 맥락을 위해 ARIA 레이블을 사용하며, 새 창이나 외부 링크를 표시하고, 포커스 스타일을 유지하는 것을 포함합니다. title 속성은 보충 정보를 제공할 수 있지만, 주요 방법으로 의존해서는 안 됩니다. 이러한 모범 사례를 따르면 모든 사용자, 특히 장애를 가진 사용자가 웹사이트를 더 잘 탐색하고 이해할 수 있습니다. 접근 가능한 디자인은 단지 규정을 준수하는 것이 아니라 모든 사람에게 더 나은 사용자 경험을 제공하는 것입니다.