可访问的SVG图标

确定SVG图标最容易访问的HTML并不简单，因为它在网站中的功能各不相同。尽管几位专家提供了指导，但简化的摘要归结为三个关键情况：链接中的装饰图标，独立图标和图标。

方案1：装饰图标如果图标具有纯粹的美学目的且缺席不会影响理解，请将其隐藏在诸如屏幕读取器之类的辅助技术中：

<svg ... aria-hidden="true"><https:><https:>
<p>这样可以防止图标干扰已经提供必要上下文的相邻文本标签。<https:>
<p><strong>方案2：独立图标<https:><https:>
</https:></https:></strong>当图标充当一个没有可见文本标签而没有可见文本标签的独立，有意义的动作时，以下方法在现代浏览器中效果很好：<https:>
<pre class="brush:php;toolbar:false"><svg role="img"><title>描述性标签<https:> ... <https:> 
<p> SVG是否在<code> <button>之类的元素中，这是有效的<https:>
<p> <strong>方案3：中的图标 Links<https:><https:>
<p>如果图标是链接的一部分，则链接的文本至关重要。如果链接中存在可见文字，则图标被认为是装饰性的（方案1）。但是，如果SVG <em>是<https:> <code> <a> <https:>），提供一个可访问的标签：<https:>
<pre class="brush:php;toolbar:false"> <a aria-label="“描述性标签”" href="%E2%80%9C" https: aria-hidded="“" true> <https:> <https: https: link> <https:>
<p>另外，在<code> <a>中包括可见文本svg
<p>这种方法与该领域的各种专家的可访问性建议保持一致。<https:></https:></p></a></code></p></https:></https:></https:></a>

以上是可访问的SVG图标的详细内容。更多信息请关注PHP中文网其他相关文章！