웹 페이지에서 SVG 파일의 접근성을 향상시키는 여러 가지 방법에 대한 간략한 논의-HTML 튜토리얼-php.cn

웹 페이지에서 SVG 파일의 접근성을 향상시키는 여러 가지 방법에 대한 간략한 논의

青灯夜游

풀어 주다： 2020-12-17 17:48:47

앞으로

3573명이 탐색했습니다.

웹 페이지에서 SVG 파일의 접근성을 향상시키는 여러 가지 방법에 대한 간략한 논의

SVG는 이미지 파일 형식으로, 영어 이름은 Scalable Vector Graphics이며 확장 가능한 벡터 그래픽을 의미합니다. 이 기사에서는 웹 페이지에서 SVG 파일의 접근성을 향상시키는 7가지 솔루션을 소개합니다.

1. 이미지로 사용되는 SVG 파일

SVG가 <img>의 src로 도입되면 반드시 <img>를 추가하세요. code>role="img" 속성: <img> 的 src 引入的，务必为 <img> 添加 role="img" 属性：

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
     role="img" alt="Simply Accessible">

<a href="#">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163671/sa_logo.svg"
       role="img" alt="Simply Accessible">
</a>

로그인 후 복사

如果不加 role="img"，有些屏幕阅读器不会将 <img src="xxx.svg"> 认作图片，只是读出 alt 值。

2、作为图标使用的 SVG

SVG 作为图标使用时，请使用 aria-hidden="true" 对访问设备隐藏，添加一个视觉上隐藏（visually-hidden）的兄弟元素作为图标的文本语义说明。

<a href="#">
  <svg class="icon icon-close" viewBox="0 0 32 32" aria-hidden="true">
    <use xlink:href="#icon-close"></use>
  </svg>
  <span class="sr-only">Close</span>
</a>

<svg display="none" version="1.1" viewBox="0 0 32 32">
  <defs>
    <g id="icon-close">
      <path class="path1" d="M31.708 25.707v0l-9.708-9.708 9.708-9.708c0.104-0.104 
      0.18-0.227 0.229-0.356 0.134-0.355 
      0.058-0.771-0.229-1.058l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.131 
      0.049-0.254 0.125-0.357 0.229l-9.708 
      9.708-9.708-9.708c-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 
      0.229l-4.586 4.585c-0.286 0.286-0.361 0.702-0.231 1.058 0.051 0.13 0.125 
      0.252 0.23 0.356l9.709 9.708-9.708 9.708c-0.105 0.104-0.18 0.228-0.23 
      0.357-0.132 0.354-0.056 0.771 0.23 1.057l4.586 4.586c0.286 0.286 0.702 
      0.361 1.057 0.229 0.131-0.050 0.252-0.125 0.357-0.229l9.708-9.708 9.708 
      9.708c0.104 0.104 0.227 0.18 0.357 0.229 0.355 0.133 0.771 0.057 
      1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 
      0.229-1.057-0.049-0.129-0.126-0.253-0.229-0.357z">
      </path>
    </g>
  </defs>
</svg>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
</style>

로그인 후 복사

如上，为 <svg> 添加了 aria-hidden="true"，让其对访问设备隐藏。之后的 .sr-only 就是所谓的视觉隐藏元素——只是视觉上看不见，但会被屏幕阅读读到。

3、IE 的 BUG

网页如果需要兼容 IE，那么在使用 <svg> 的时候，需要显式添加 focusable="false" 属性。

<svg focusable="false">...</svg>

로그인 후 복사

原因是为：在 IE 浏览器上关于 SVG 的一个 BUG。大家知道，SVG 默认是不会被聚焦的，但在 IE 中，如果 SVG 包含在像链接、按钮这样的可聚焦元素里时，使用 Tab 是可以被聚焦的。这就导致父元素聚焦后，子元素又被聚焦的情况发生。

4、Safari 10 的 BUG

在 Safari 10 中，如果 <svg> 中包含 <use>，务必在两者中间使用空格隔开。

<svg> <use>...</use> </svg>

로그인 후 복사

否则，使用键盘 Tab 访问到这里的时候，跳不过去。不够之后的版本的已经修复了，如果你的网页需要支持 Safari 10 的话，就需要注意这个。

5、作为图片使用的 SVG

有时需要将 SVG 文件作为单独的图片使用，那么跟第二条类似的是，添加一个视觉隐藏元素作为语义说明使用。

<a href="https://simplyaccessible.com">
  <svg role="img" focusable="false"> <use xlink:href="#sa_logo"></use> </svg>
  <span class="sr-only">Simply Accessible</span>
</a>

로그인 후 복사

之所以没有选择以的形式添加说明，是因为如果 <svg> 不是在可聚焦元素里使用的时候，有些屏幕阅读器不会正确朗读 aria-label 属性。

6、支持 IE8- 浏览器

在 IE8- 浏览器中，<svg> 中的 <desc>

<!-- 下面语句的作用范围从 IE5~IE9 -->
<!--[if !IE]> --> <desc>...</desc> <!-- <![endif]-->

로그인 후 복사

role="img"가 추가되지 않으면 일부 스크린 리더는 <img src="xxx 를 해석하지 않습니다. svg"> 이미지로 인식하고 alt 값만 읽어주세요.

2.SVG를 아이콘으로 사용

SVG를 아이콘으로 사용하는 경우 aria-hidden="true"를 사용하여 액세스 장치를 숨기고 시각적으로 숨김(시각적으로 숨김)을 추가하세요. ) 형제 요소는 아이콘의 텍스트 의미 설명 역할을 합니다.

rrreee위와 같이 <svg>에 aria-hidden="true"를 추가하여 기기에 액세스하지 못하도록 숨겼습니다. 다음 .sr-only는 소위 시각적으로 숨겨진 요소입니다. 시각적으로 표시되지는 않지만 스크린 리더로 읽을 수 있습니다.

🎜3. IE BUG🎜🎜🎜웹페이지가 IE와 호환되어야 하는 경우 <svg>를 사용할 때 명시적으로

focusable="false"를 추가해야 합니다. 코드> 속성. 🎜rrreee🎜이유는 IE 브라우저의 SVG에 대한 버그입니다. 우리 모두 알고 있듯이 SVG는 기본적으로 포커스를 받지 않지만 IE에서는 SVG가 링크나 버튼과 같은 포커스 가능한 요소에 포함되어 있으면 Tab을 사용하여 포커스를 맞출 수 있습니다. 이로 인해 상위 요소에 포커스가 맞춰진 후 다시 하위 요소에 포커스가 맞춰지는 상황이 발생합니다. 🎜🎜🎜4. Safari 10 BUG🎜🎜🎜Safari 10에서 <svg>에 <use>가 포함된 경우 반드시 공백을 구분하여 사용하세요. 🎜rrreee🎜 그렇지 않으면 키보드 Tab을 사용하여 여기에 액세스할 때 해당 페이지로 이동할 수 없습니다. 이후 버전에서는 이 문제가 수정되었습니다. 웹페이지가 Safari 10을 지원해야 하는 경우 이에 주의해야 합니다. 🎜🎜🎜5. SVG를 이미지로 사용🎜🎜🎜때로는 SVG 파일을 별도의 이미지로 사용해야 하는 경우가 있는데, 두 번째 항목과 마찬가지로 의미 설명으로 시각적 숨겨진 요소를 추가합니다. 🎜rrreee🎜  형식의 설명 추가를 선택하지 않은 이유는 < ;svg> code> 일부 스크린 리더는 포커스 가능한 요소 외부에서 사용될 때 aria-label 속성을 올바르게 읽지 않습니다. 🎜🎜🎜6. IE8-browser 지원🎜🎜🎜IE8-browser에서는 <svg>의 <desc> 태그가 표시됩니다. 그러한 브라우저를 지원하려면 이를 숨겨야 합니다. 🎜rrreee🎜🎜7. 색상 대비🎜🎜🎜SVG 아이콘을 디자인할 때 색상이 약한 사용자나 고대비 검정색 배경 테마(고대비 테마)를 사용하는 사용자를 고려해야 합니다. 예를 들어, 아이콘을 디자인할 때 밝은 색상의 테두리가 있는 단색 배경을 사용하는 것을 고려해 보세요. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 웹 페이지에서 SVG 파일의 접근성을 향상시키는 여러 가지 방법에 대한 간략한 논의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!