javascript - Font Awesome 5中属性data-auto-a11y的效果

Question

如果我们想使用SVG+JS的渲染 Font Awesome 5 图标，然后切换 css/all.css进入js/all.js .

使用 <script>浏览器中的标签:

<script 
  src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" 
  data-auto-a11y="true">
</script>

我的问题是 data-auto-a11y 的效果是什么？在 Font Awesome 5 中？

有必要使用吗？

Answer 1

深入研究 GitHub 上的 Font Awesome 代码，特别是 /js/fontawesome.js首先，data-auto-a11y 属性映射到属性 autoA11y。通过代码搜索，看起来这个属性控制是否设置了各种 aria- 属性，特别是如果 autoA11y 为 true 并且有一个标题属性然后 aria-labelledby已设置，否则 aria-hidden已设置。

所以，如果您关心可访问性(我认为每个人都应该)，那么它确实很重要。但是，我还要补充一点，在代码的其他行上，似乎表明将其设置为 true 是默认值。我建议您可能不需要它，但在这种情况下它肯定是无害的。

Caveat: I know nothing a priori about the internal workings of Font Awesome, this is just based on an analysis of the code.

Font Awesome 代码片段

默认设置 ( line 257 )

  var _default = {
    familyPrefix: DEFAULT_FAMILY_PREFIX,
    replacementClass: DEFAULT_REPLACEMENT_CLASS,
    autoReplaceSvg: true,
    autoAddCss: true,
    autoA11y: true,
    searchPseudoElements: false,
    observeMutations: true,
    mutateApproach: 'async',
    keepOriginalSource: true,
    measurePerformance: false,
    showMissingIcons: true
  };

autoA11y的使用。 (Line 1605)

  function attributesParser (node) {
    var extraAttributes = toArray(node.attributes).reduce(function (acc, attr) {
      if (acc.name !== 'class' && acc.name !== 'style') {
        acc[attr.name] = attr.value;
      }

      return acc;
    }, {});
    var title = node.getAttribute('title');

    if (config.autoA11y) {
      if (title) {
        extraAttributes['aria-labelledby'] = "".concat(config.replacementClass, "-title-").concat(nextUniqueId());
      } else {
        extraAttributes['aria-hidden'] = 'true';
        extraAttributes['focusable'] = 'false';
      }
    }

    return extraAttributes;
  }

和line 1874

    if (config.autoA11y && !title) {
      extra.attributes['aria-hidden'] = 'true';
    }

最后是line 2291

      if (config.autoA11y) {
        if (title) {
          attributes['aria-labelledby'] = "".concat(config.replacementClass, "-title-").concat(nextUniqueId());
        } else {
          attributes['aria-hidden'] = 'true';
          attributes['focusable'] = 'false';
        }
      }