Question

我有以下问题。假设我有使用以下props loadContext的组件加载。

通常我有带文字的按钮＆＃34;加载更多＆＃34;当用户点击它时会出现微调器（正在加载组件），然后它会在网页上加载下一个内容。

但是这段代码只是简化版，而按钮包含微调器。屏幕阅读器会显示<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标记中传递的prop loadContext中读取文本。

带有来自prop 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>

问题：如何让屏幕阅读器查看“加载”组件，并将读取span标记中的文本。我必须使用role =＆＃34; status＆＃34;来自咏叹调。

Answer 1

你说：

带有来自prop loadContext的文本的span标记具有class loader-context-hidden（在css文件中表示visibility:hidden）。

不要使用visibility: hidden。它会使屏幕阅读器看不到它。这也适用于display: none。而是使用一种风格来定位元素，使其仍然被认为是“可见的”＃34;但是对于所有意图和目的都是不可见的。

请参阅WebAIM's article: Invisible Content Just for Screen Reader Users。

本文建议使用类似于以下内容的实用程序样式：

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

屏幕阅读器不会在反应组件中读取html元素

1 个答案: