Alternative text for screen reader in a given element

Question

I have a list of hotkeys for an application where keyboard arrows are represented with an unicode character e.g. ↓. I do understand the reason that screen reader are not reading such characters. Because of that I want to provide a custom text for these cases.

My question is what is the cleanest way to make screen reader read "j or down" instead of "j or[pause]".

I've tried multiple approaches, all of them listed in code below:

<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>

Also another way to go might be simply replacing the arrow characters with image icon, then provide a proper alt and we're good but I'd like to avoid redundant graphics.

Screen Readers that I'm working with are JAWS 16 and NVDA 2015.2 at Win7/Win8.1

Answer 1

Unfortunately, the only way to do it that works everywhere right now is the off screen text (your last example). You could mark it up this way:

<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>