접근 가능한 SVG: 스크린 리더 사용자를 위한 완벽한 패턴
게시 됨: 2022-03-10SVG(Scalable Vector Graphics)는 90년대 후반에 처음 소개되었지만 대역폭과 성능이 그 어느 때보다 중요한 세상에서 극도의 유연성, 높은 충실도 및 상대적 가벼움으로 인해 지난 10년 동안 인기가 크게 부활했습니다. . JavaScript의 발전과 @prefers-color-scheme 및 @prefers-reduced-motion과 같은 CSS 미디어 쿼리의 도입으로 SVG의 기능은 웹사이트에 벡터 이미지를 단순히 표시하는 초기 사용 사례 이상으로 확장되었습니다.
SVG 기술이 발전함에 따라 SVG를 설계하고 개발하는 방법에 대한 이해도 발전해야 합니다. 이러한 발전의 일부에는 최종 사용자라고도 하는 실제 인간에 대한 이러한 디자인 및 코드의 영향을 고려하는 것이 포함됩니다.
이 기사에서는 "야생"에서 발견 되는 12개의 고유한 SVG 패턴 과 운영 체제, 브라우저 및 화면 판독기의 다양한 조합에서 액세스할 때 발표되는 각 대체 설명에 대해 간략히 설명합니다.
물론 다음 예는 디지털 영역에서 사용되는 가능한 모든 패턴의 완전한 목록을 의미하지는 않지만, 접할 수 있는 더 인기 있거나 유비쿼터스한 SVG 패턴 중 일부를 강조 표시합니다. 어떤 SVG 패턴을 피해야 하고 어떤 패턴이 가장 포괄적인지 알아보려면 계속 읽으세요!
<img> 태그를 사용한 기본 대체 설명
네 가지 패턴의 첫 번째 그룹은 SVG 파일에 연결되는 <img> 태그를 사용합니다. 웹사이트, 앱 또는 기타 디지털 제품의 복잡하지 않은 기본 이미지에 적합합니다. 이 패턴을 사용할 때의 단점은 많은 시각적 요소나 애니메이션을 인라인 SVG로 쉽게 제어할 수 없다는 것이지만 이 패턴은 전체적으로 더 가볍고 빠른 이미지를 렌더링해야 하며 여러 위치에서 사용하는 SVG에 대한 유지 관리를 더 쉽게 허용해야 합니다.
패턴 #1: <img> + alt="[words]"
<img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> 패턴 #2: <img> + role="img" + alt="[words]"
<img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> 패턴 #3: <img> + role="img" + aria-label="[words]"
<img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> 패턴 #4: <img> + role="img" + aria-labelledby="[ID]"
<p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> <svg> 태그를 사용한 기본 대체 설명
네 가지 패턴의 두 번째 그룹은 인라인 SVG 파일과 함께 <svg> 태그를 활용합니다. SVG 코드를 마크업에 직접 추가하면 잠재적으로 페이지 로드 속도가 약간 느려질 수 있지만 이미지의 시각적 요소나 애니메이션을 더 많이 제어하면 이러한 사소한 비효율이 상쇄됩니다. SVG를 HTML에 직접 추가하면 스크린 리더 사용자에게 이미지 정보를 제공할 때 더 많은 옵션이 제공됩니다.
패턴 #5: <svg> + role="img" + <title>
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> 패턴 #6: <svg> + role="img" + <text>
<svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg> 패턴 #7: <svg> + role="img" + <title> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> 패턴 #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg> <svg> 태그를 사용한 확장된 대체 설명
네 가지 패턴의 마지막 그룹은 두 번째 그룹과 마찬가지로 인라인 SVG 파일과 함께 <svg> 태그를 사용합니다. 다만, 이 경우 이미지의 복잡성으로 인해 추가 정보로 간단한 대체 설명을 확장합니다.
이것은 더 많은 설명이 필요한 더 복잡한 이미지에 좋은 패턴 선택이 될 것입니다. 그러나 인지 장애와 같은 장애가 있는 일부 사람들이 SVG 코드에 묻히는 대신 화면에서 이 추가 이미지 정보를 쉽게 사용할 수 있게 하는 것이 도움이 될 수 있다는 점을 염두에 두는 것이 중요합니다.
SVG에 추가해야 하는 정보의 유형과 양에 따라 완전히 다른 접근 방식을 고려할 수 있습니다.
패턴 #9: <svg> + role="img" + <title> + <text>
<svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg> 패턴 #10: <svg> + role="img" + <title> + <desc>
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 패턴 #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 패턴 #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Carie Fisher의 전체 CodePen [액세스 가능한 SVG 패턴 비교(Fox 버전)](https://codepen.io/smashingmag/pen/dyvvbKj)를 참조하십시오.
SVG 패턴 승자와 패자
다양한 조합의 운영 체제와 브라우저에서 다양한 화면 판독기를 실행하면 최종 결과 테이블에 명확한 패턴이 나타나는 것을 볼 수 있습니다. 분명한 SVG 패턴 승자와 패자 가 있고, 중간에 몇 가지 패턴이 있습니다. 알고 있는 한 구현할 수 있고 한계를 수용할 수 있습니다. 결과 테이블을 살펴보면 다음과 같은 결론을 내릴 수 있습니다.
<img> 태그를 사용한 기본 대체 설명(그룹 1)
베스트 인 쇼
- 패턴 2 :
<img> + role="img"+alt="[words]" - 패턴 3 :
<img>+role="img"+aria-label="[words]"
주의 사용
- 패턴 4 :
<img>+role="img"+aria-labelledby="[ID]"
권장하지 않음
- 패턴 1 :
<img>+alt="[words]"
<svg> 태그를 사용한 기본 대체 설명(그룹 2)
베스트 인 쇼
- 패턴 5 :
<svg>+role="img"+<title> - 패턴 8 :
<svg>+role="img"+<title>+aria-labelledby="[ID]"
주의 사용
- 패턴 7 :
<svg>+role="img"+<title>+aria-describedby="[ID]"
권장하지 않음
- 패턴 6 :
<svg>+role="img"+<text>
<svg> 태그를 사용한 확장된 대체 설명(그룹 3)
베스트 인 쇼
- 패턴 11 :
<svg>+role="img"+<title>+<desc>+aria-labelledby="[ID]"
참고 : 이 패턴은 대체 설명을 반복하므로 완벽하지는 않지만 "사용 주의" 패턴과 달리 테스트의 요소를 무시하지 않았습니다.
주의 사용
- 패턴 9 :
<svg>+role="img"+<title>+<text> - 패턴 10 :
<svg>+role="img"+<title>+<desc> - 패턴 12 :
<svg>+role="img"+<title>+<desc>+aria-describedby="[ID]"
권장하지 않음
- 이 그룹의 어떤 패턴도 테스트에 완전히 실패하지 않았습니다.
테스트 결과
Carie Fisher의 펜 [테스트 결과](https://codepen.io/smashingmag/pen/YzZQBwG)를 참조하십시오.
마무리
SVG 패턴 테스트 결과 해석의 일부는 각 화면 판독기의 작성자가 완벽하게 지원하는 권장 브라우저 가 있다는 것을 이해하는 것입니다. 이것은 다른 브라우저에서 스크린 리더를 사용해서는 안 되거나 사용할 수 없다는 것을 의미하는 것이 아니라, 사용하는 경우 권장되는 것을 사용한 것처럼 결과가 정확하지 않을 수 있음을 의미합니다.
이 기사의 패턴 테스트에는 "비주류" 범주에 속할 수 있는 일부 브라우저 및 화면 판독기 조합 이 포함되어 있지만 자체 테스트에 권장되는 운영 체제, 브라우저 및 화면 판독기 조합에 대한 참고 사항도 있습니다. 이러한 테스트의 결과는 패턴 요구 사항 및 제약 조건을 기반으로 최상의 SVG 패턴 결정을 내리는 데 도움이 됩니다.
패턴을 결정하기 전에 접근 가능한 이미지를 생성하는 방법과 시기에 대한 기본 사항을 알고 있고 다양한 이미지 유형에 필요한 필수 대체 정보를 완전히 이해하고 있는지 확인하십시오.
환경에 사용할 패턴을 결정하는 데 추가 도움이 필요하면 Good, Better, Best: Untangling Complex World of Accessible Patterns 문서를 확인하여 접근 가능한 패턴의 까다로운 영역을 탐색하는 데 도움이 됩니다. 이 모든 정보와 약간의 노력으로 무장하면 SVG가 모두를 포함하는 방향으로 나아가고 있습니다.
편집자 주 : Carie가 가이드라인, 테스트 도구, 보조 기술 및 포괄적인 디자인 패턴을 포함하는 접근성 프론트 엔드 패턴 에 대한 온라인 워크샵에서 접근성에 대한 모범 사례를 배울 수 있습니다. 온라인과 라이브.