Question

我正在Chrome开发工具中运行斧头，以查找缺少标记以使我的网站更易于访问。目前，JAWS无法读取某些页面。我在这里查看这段代码时进展缓慢：

return [
      <ul className="breadcrumb" key="breadcrumb" role="navigation">
        <li><a href={backHref} className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>
        <li><span>&bull;</span></li>
        <li><a href="https://example.com" target="_blank"  tabIndex={tabIndex}><span className="section-name">Guest Services</span></a></li>
      </ul>,
      <a href="/" className={`link-home ${logoHrefStatus}`} key="eatHere"  tabIndex={tabIndex}><span className="screen-reader-text">Eat Here</span></a>
    ];
  }

该斧头表示此元素对于屏幕阅读器不可见，并且需要aria-label属性或aria-labeledby属性。我已经尝试了以下修复程序：

return [
      <ul role="tablist" className="breadcrumb" key="breadcrumb">
        <li role="presentation"><a href={backHref} role="tab" aria-selected="true" className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>
        <li><span>&bull;</span></li>
        <li><a href="https://example.com" target="_blank"  tabIndex={tabIndex}><span className="section-name">Guest Services</span></a></li>
      </ul>,
      <a href="/" className={`link-home ${logoHrefStatus}`} key="eatHere"  tabIndex={tabIndex}><span className="screen-reader-text">Eat Here</span></a>
    ];
  }

无济于事。

Answer 1

我认为实际上可能很简单：

<li><a href={backHref} aria-label="link-back" className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>

尝试一下。

如何使Reactjs标头可访问

1 个答案: