Question

我一直在使用Font Awesome并根据他们的可访问性文档，如果您的图标具有语义含义，那么您需要做的就是抛出title =“含义”属性。自动辅助功能负责其余部分，添加以下内容：

正确的ARIA角色（role =“img”）带有正确id属性的title标签 aria-labelledby属性并将其连接到标题标记。

但我尝试了它并没有添加aria-labelledby 在使用Site Improve进行测试时，它会抛出错误，说图标没有替代文字。我该如何解决？工作代码如下： https://codesandbox.io/s/40v5jk6no7

此处代码

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import fontawesome from "@fortawesome/fontawesome";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import faCalendar from "@fortawesome/fontawesome-free-regular/faCalendar";
import faSquare from "@fortawesome/fontawesome-free-regular/faSquare";
import solid from "@fortawesome/fontawesome-free-solid";

fontawesome.config = {
  familyPrefix: "far"
};

fontawesome.library.add(faCalendar, faSquare);

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing to see some magic happen {"\u2728"}</h2>
    Favorite calendar: <FontAwesomeIcon icon="calendar" title="magic" />
    Icon from regular: <FontAwesomeIcon icon={["far", "calendar"]} />
  </div>
);

render(<App />, document.getElementById("root"));

字体真棒可访问性

0 个答案: