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

我正在使用的屏幕阅读器是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>

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

1 个答案: