Sort:  

Nice!

If the image-only buttons could get some textual identification for screen readers, it'd be great too.

Below is an example, copied and edited from the output of Firefox's HTML inspector. It's the reload button from the Explorer page.

<button data-v-daaf254e="" class="btn btn-link no-padding"><i data-v-daaf254e="" class="icon-reload-alt font-title-h3"></i></button>

Suggestion for a fix: add an aria-label with the text to identify the button (for example, "Reload"), and add 'aria-hidden="true"' to the "i" element to avoid possible conflicts. It would become:

<button data-v-daaf254e="" class="btn btn-link no-padding" aria-label="Reload"><i data-v-daaf254e="" class="icon-reload-alt font-title-h3" aria-hidden="true"></i></button>

And below is a link that can't be interacted from the keyboard (can't be focused by the "Tab" key nor activated by the "Enter" key like normal links do). It's the "View details" link from the Explorer.

<a data-v-da47812c="">View details</a>

Fix: this one is even easier. Just adding 'href="#"' would fix it and make it behave as expected.

<a data-v-da47812c="" href="#">View details</a>

There might be others, but I'd have to look into it more and look into how to fix.

Let's see if our developer @asgarth gets notified about this one. If not I'll bring it up to him when we start work on new developments.

Thank you.

Also, Steempeak has this kind of issues as well. The upvote button, for example, is an icon with no text for screen readers, and can't be reached from the keyboard. I haven't investigated too much, but there seems to be many other icons like that. A combination of my two suggestions (aria-label for the "a" and aria-hidden for the "i" + adding 'href="#"' to the "a") might do the trick... :D

Coin Marketplace

STEEM 0.20
TRX 0.12
JST 0.028
BTC 66383.47
ETH 3513.15
USDT 1.00
SBD 2.53