accessibility - 给定元素中屏幕阅读器的替代文本

Question

我有一个应用程序的热键列表，其中键盘箭头用 unicode 字符表示，例如↓ .我确实理解屏幕阅读器不读取此类字符的原因。因此，我想为这些案例提供自定义文本。

我的问题是让屏幕阅读器读取“j 或向下”而不是“j 或 [暂停]”的最简洁方法是什么。

我尝试了多种方法，所有方法都列在下面的代码中:

<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我们很好，但我想避免冗余图形。

我正在使用的屏幕阅读器是 Win7/Win8.1 上的 JAWS 16 和 NVDA 2015.2

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>