屏幕閱讀器沒有讀取反應組件中的html元素

Question

我有以下問題。比方說，我有組件加載與以下道具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> 
     ); 
     } 
    } 

我想要做什麼：如果按鈕用戶點擊，然後屏幕閱讀器將讀取通過道具loadContext在span標籤的文本。

帶有來自道具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> 

問：我怎樣才能做到這一點的屏幕閱讀器看看加載組件，將讀取範圍的標記文字。我必須從aria中使用role =「status」。

Answer 1

你說：

與道具loadContext文本跨度標籤具有類加載器上下文隱藏（在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; 
}