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

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

不幸的是，目前唯一适用于任何地方的方法是屏幕外文本（您的最后一个示例）。你可以这样标记它：

\n\n

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

\n