スクリーンリーダーが反応成分のhtml要素を読み取っていません

Question

私は次の問題があります。私は、コンポーネントload with following props loadContextを持っているとしましょう。

通常、「読み込み中」というテキストのボタンがあり、クリックするとスピナー（読み込みコンポーネント）が表示され、次のコンテンツがWebページに読み込まれます。

しかし、このコードは単純化されたバージョンであり、ボタンにはスピナーが含まれています。スクリーンリーダーは<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からテキストを読み込みます。

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 = "status"を使う必要があります。

Answer 1

あなたは言う：

小道具loadContextからテキストをspanタグには（CSSファイルでvisibility:hiddenを意味するもの）クラスローダー・コンテキストに隠されています。

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; 
}