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 first of all the data-auto-a11y attribute is mapped to a property autoA11y. Searching for that through the code it looks like this property governs if various aria- attributes are set, specifically if autoA11y is true and there is a title attribute then aria-labelledby is set, otherwise 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';
        }
      }

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

The effect of attribute data-auto-a11y in Font Awesome 5

javascript

attributes

font-awesome-5

Font Awesome 代码片段