javascript - 屏幕阅读器未读取 React 组件中的 html 元素

Question

我有以下问题。假设我有以下 Prop loadContext 的组件加载。

通常我有一个带有文本“加载更多”的按钮，当用户点击它时会出现微调器(加载组件)，然后它会加载网页上的下一个内容。

但此代码只是简化版本，按钮包含微调器。屏幕阅读器显示 <button>和 <a> html 标记，但没有加载组件。

<button>
  <a href="#"> 
  <Loading loadContext="browser is loaded context" />
  </a>
</button>

加载组件:

 export default class Loading extends React.Component {

      static get propTypes() {
        return {
          loadContext: React.PropTypes.string.isRequired,
        };
      }

      shouldComponentUpdate() {
        return false;
      }

      render() {
        const els = [];

        if(this.props.loadContext) {
          els.push(<span  role="status"   key="read-context" className="loader-context-hidden"> {this.props.loadContext}</span>);
        }
    els.push(<div className="loading__inner" key="loading__inner"></div>);

        const maybeDelay = (children) => {
          if (typeof this.props.delay === 'number') {
            return (
              <Delay wait={this.props.delay}>
                {children}
              </Delay>
            );
          }
          return children;
        };
        return maybeDelay(
          <div className={[ 'loading' ].concat(extraClassNames).join(' ')}>
            {els}
          </div>
        );
      }
    }

我想做什么:如果用户点击按钮，屏幕阅读器将从 span 标签中传递的 loadContext 属性中读取文本。

带有来自属性 loadContext 的文本的 span 标签具有 loader-context-hidden 类(在 css 文件中表示 visibility:hidden)。

渲染加载组件:

<Loading loadContext="the browser is loading new context">
  <div className="loading"
    <span key="read-context" role="status" className="loader-context-hidden">{this.props.loadContext} </span>
  <div key="loading_inner" className="loading__inner"> </div>     
 </Loading>

问题:我怎样才能让屏幕阅读器查看 Loading 组件并读取 span 标签中的文本。我必须使用 aria 中的 role="status"。

Answer 1

你说:

The span tag with the text from prop loadContext has class loader-context-hidden (what means visibility:hidden in css file).

不要使用visibility: hidden。它将使它对屏幕阅读器不可见。 display: none 也是如此。取而代之的是使用一种样式来定位元素，使其仍然被认为是“可见的”，但对于所有意图和目的来说都是不可见的。

参见 WebAIM's article: Invisible Content Just for Screen Reader Users .

文章建议使用类似于以下的实用程序样式:

.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}