字体与 SVG：该使用哪种方法？这两种方法都可以很好地工作，但是，它们之间有一些微妙的差异，特别是在性能和渲染质量方面。只要有可能，首选 SVG，因为它允许代码拆分，支持更多的图标，并且渲染速度更快、质量更好。
欲了解更多详情，请查看 为什么 GitHub 从字体图标迁移到 SVG 图标。
无障碍图标可以传达各种有意义的信息，因此确保它们在适当的时候具备可访问性非常重要。你需要考虑以下两种用例
装饰性图标，仅用于视觉或品牌强化。如果将它们从页面中移除，用户仍然能够理解并使用你的页面。
语义化图标，用于传达含义，而不仅仅是纯粹的装饰。这包括旁边没有文字、用作交互控件的图标——例如按钮、表单元素、开关等。
装饰性图标如果你的图标纯粹是装饰性的，那么你已经完成了！添加 aria-hidden=true 属性是为了让你的图标具备适当的可访问性（不可见）。
语义化图标语义化 SVG 图标你应该包含带有有意义值的 titleAccess 属性。添加 role="img" 属性和
元素是为了让你的图标具备正确的可访问性。</p>
<p>对于可聚焦的交互元素，例如与图标按钮一起使用时，你可以使用 aria-label 属性</p>
<p>import IconButton from '@mui/material/IconButton';</p>
<p>import SvgIcon from '@mui/material/SvgIcon';</p>
<p>// ...</p>
<p><IconButton aria-label="delete"></p>
<p><SvgIcon></p>
<p><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" /></p>
<p></SvgIcon></p>
<p></IconButton>;</p>
<p>复制已复制(或 C)</p>
<p>语义化字体图标你需要提供一个仅对辅助技术可见的文本替代项。</p>
<p>import Box from '@mui/material/Box';</p>
<p>import Icon from '@mui/material/Icon';</p>
<p>import { visuallyHidden } from '@mui/utils';</p>
<p>// ...</p>
<p><Icon>add_circle</Icon></p>
<p><Box component="span" sx={visuallyHidden}>Create a user</Box></p>
<p>复制已复制(或 C)</p>
<p>参考</p>
<p>https://www.tpgi.com/using-aria-enhance-svg-accessibility/</p>
</p>
</div><!-- .entry-content -->
</article>
</div>
</div>
</div>
<a id="footer_skip_link_anchor" class="mediaflex_skip_link_anchor" href="#"></a>
<footer class="footer_wrap footer_default
scheme_dark ">
<div style="position: relative;bottom: 10px;margin: 0 auto;left: 0;right: 0;text-align: center;">
Copyright © 2088 霓蓝星游戏活动站_二次元游戏资讯_专属礼包 All Rights Reserved.
<div style="text-align: center;">
友情链接
<script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script>
</div>
</div>
</footer><!-- /.footer_wrap -->
</div>
</div>
<a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up scroll_to_top_style_default"
title="Scroll to top"></a>
<script type="text/javascript" src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script>
<script type="text/javascript" src="/static/js/__scripts.js" id="trx_addons-js"></script>
<script type="text/javascript" src="/static/js/superfish.min.js" id="superfish-js"></script>
<script type="text/javascript" src="/static/js/__scripts1.js" id="mediaflex-init-js"></script>
<script type="text/javascript" src="/static/js/comment-reply.min.js" id="comment-reply-js" async="async"
data-wp-strategy="async"></script>
<script type="text/javascript" src="/static/js/mediaelement-and-player.min.js" id="mediaelement-core-js"></script>
<script type="text/javascript" src="/static/js/mediaelement-migrate.min.js" id="mediaelement-migrate-js"></script>
<script type="text/javascript" src="/static/js/wp-mediaelement.min.js" id="wp-mediaelement-js"></script>
<script type="text/javascript" src="/static/js/skin.js" id="mediaflex-skin-default-js"></script>
</body>
</html>