給定元素中的屏幕閱讀器的替代文本

Question

我有一個應用程序的熱鍵列表，其中鍵盤箭頭用unicode字符表示，例如， ↓。我明白屏幕閱讀器不讀這些字符的原因。正因爲如此，我想爲這些情況提供自定義文本。

我的問題是讓屏幕閱讀器讀取「j或down」而不是「j或[pause]」的最簡潔方法。

我試過多種方法，它們都在下面的代碼所示：

<style> 
    .readerOnly 
    { 
     position:absolute; 
     left:-10000px; 
     top:auto; 
     width:1px; 
     height:1px; 
     overflow:hidden; 
    } 
</style> 
<h1>A sample list of app hotkeys</h1> 

<dl> 
    <dt> 
     <kbd>j</kbd> or <kbd>↓</kbd> 
    </dt> 
    <dd> 
     Move down. 
     <!--Well, it's a vanilla HTML, but SRs have problem reading the ↓ character.--> 
    </dd> 
    <dt> 
     <span aria-label="shortcut j or down." class="lo">j or ↓</span> 
    </dt> 
    <dd> 
     Move down. 
     <!--This is how Google does it in their Drive - I was thinking about similar solution, but well... it's not working with any of tested SRs.--> 
    </dd> 
    <dt> 
     <span role="note" aria-label="j or down." class="lo">j or ↓</span> 
    </dt> 
    <dd> 
     Move down. 
     <!--It works only in JAWS, but it's pretty hacky way. It's not semantically correct, so I don't want to use it.--> 
    </dd> 
    <dt> 
     <kbd>j</kbd> or 
     <kbd> 
      <span class="readerOnly">down</span> 
      <span role="presentation">↓</span> 
     </kbd> 
    </dt> 
    <dd> 
     Move down. 
     <!--Works perfectly in both SR, but again... super hacky (CSS hax, messy HTML)--> 
    </dd> 
</dl> 

也是另一種方式去可能會被簡單地更換與圖像圖標上面的箭頭人物，然後提供適當的alt和我們」很好，但我想避免多餘的圖形。

是我工作

屏幕閱讀器JAWS 16 NVDA 2015.2在Win7的/ Win8.1

Answer 1

不幸的是，這樣做的唯一方式，作品無處不在，現在是關閉屏幕上的文字（您的最後一個例子）。你可以這樣標記：

<dl> 
    <dt> 
     <kbd>j</kbd> or 
     <kbd> 
      <span class="readerOnly">down</span> 
      <span aria-hidden="true">↓</span> 
     </kbd> 
    </dt> 
    <dd> 
     Move down. 
     <!--Works perfectly in both SR, but again... super hacky (CSS hax, messy HTML)--> 
    </dd> 
</dl>