我的學校正在使用W3Schools 翻轉卡片代碼在我們的課程頁面上進行互動，并添加了一些 JavaScript 以在單擊或點擊時保持卡片翻轉。但是，我認為螢屏閱讀器無法訪問它們。似乎他們需要一些 ARIA 代碼，而我對 ARIA 很陌生。如何確保使用螢屏閱讀器的學生可以使用翻轉卡？
我添加了一些 ARIA 代碼，但我不確定它是否正確或有用。正面控制背面是否有意義，反之亦然？當卡片被翻轉時，我還使用 JavaScript 在真偽之間切換 aria-expanded。
<div class="flip-card">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front" role="button" aria-expanded="true" id="flip-card-front_4" aria-controls="flip-card-back_4">
<p>Front of card</p>
</div>
<div class="flip-card-back" role="button" aria-expanded="false" id="flip-card-back_4" aria-controls="flip-card-front_4">
<p>Back of card</p>
</div>
</div>
</div>
uj5u.com熱心網友回復：
您實際上不需要任何 ARIA，這很好，因為ARIA 的第一條規則是如果您能提供幫助，請不要使用 ARIA。
我對示例做了兩個小改動，它可以使用鍵盤，并且可以使用螢屏閱讀器閱讀。
我變了
.flip-card:hover .flip-card-inner {
到
.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner {
這樣您就可以在滑鼠懸停或鍵盤焦點上獲得翻轉影片。
然后我添加tabindex="0"到翻轉卡，這樣你就可以tab了。
<div class="flip-card" tabindex="0">
在螢屏閱讀器運行的情況下，當您切換到翻轉卡片時，您會聽到卡片中的所有文本內容。對于NVDA，我聽說：
“頭像圖形 John Doe 標題 1 級建筑師和工程師我們愛那個人”
JAWS相似但略有不同：
“阿凡達 John Doe 建筑師和工程師我們喜歡那個家伙 Graphic”
iOS 上的 Voiceover 效果不是很好。您可以滑動到影像，然后雙擊以將其翻轉，但它只會顯示“頭像”。但是，如果您繼續滑動，則可以聽到姓名和職位。你只是不知道當你點擊它時卡片翻轉了。
缺少的可用性部分是卡片的角色。用戶如何知道卡片在收到鍵盤焦點時會翻轉？沒有適合這種行為的標準角色，因此您可能必須使用`aria-roledescription'來給它一個體面的描述。
<div class="flip-card" tabindex="0" aria-roledescription="flipping card">
也看看這個卡片設計模式。我不確定他是否談論翻轉卡片，但它有一些很好的資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446186.html
標籤：javascript html css 可访问性 怀阿里亚