Sort:  

@peakmonsters, thank you for dropping by!

Actually, I had come across your site last weekend, and have been alternating between it and Steemmonstersdb. I must say I was glad to find out that PeakMonsters is reasonably accessible to screen reader software and blind/visually impaired users (unlike the current iteration of the official Steem Monsters site). There are some buttons that are only icons/images with no text here and there, and others that can't be focused or activated from the keyboard, but I was able to navigate the site reasonably well.

While we are at it, I'd like to suggest a feature, if I may. I wonder whether it'd be possible for users to have a page showing the history of all their received gifts and their purchases (or maybe even an activity page specific for each user, like in Steempeak). The reason for this is, I wanted to check the details of a booster pack I got as a gift, but don't have the pack's ID anymore and have no idea how to find it (since the pack was a gift and not a purchase, there was no wallet memo, either). I don't know how hard it would be to implement this, though.

Thank you for reading!

PS: sadly, getting more golds in the market is out of the question for me at the moment. I'm still worrying about getting the starter pack :P .

Yes a history is something we'd like.
It's a bit more database intensive on our end but i think there are some things we can do.

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.27
TRX 0.12
JST 0.031
BTC 57485.95
ETH 2901.27
USDT 1.00
SBD 3.67