Topic by Lord Arogandor 2019-06-18 11:05:46

  • From: Belgium
  • Registered: 2019-03-25
  • Posts: 40
  • User Karma: 32

Hello dear community,

Over the years I made a text based browser game (www.thegraillords.net) that hasn't been very accessible ^.^
Time to change that and I'm currently working (hard) to improve the accessibility of my game.

The game uses often mouse-overs and tool-tips to provide additional information for the player without having to use more space. This works reasonable well for sighted players, but it seems most (not to say all) screen readers have issues catching that information. I've tried several ways to make this work properly without much success:

- ALT attribute seems to work only for images and input, not for a regular <div>
- TITLE attribute seems to work for many screen readers, but it shows now both the title & the original tool-tip.

So I was wondering if somebody has experience with this and knows a clean, efficient way to:
- Keep showing mouse-overs/tool-tips that can be styled in CSS.
- Provide the required information for users with screen readers.

Any help or pointing me to the right direction would be highly appreciated smile

Yours Sincerly,

Aro

https://thegraillords.net

Lord Arogandor's Website

Quote Post 1

Thumbs up

Reply by pitermach 2019-06-18 11:36:18

  • From: poland
  • Registered: 2008-01-23
  • Posts: 1,611
  • User Karma: 294

I believe the best option in this case is using the aria-describedby atribute, which basically performs a similar function to a tooltip. Here's a usage example.

Most screen readers will associate this data as a hint for the control, which means that on phones like iPhone or Android devices they'll be spoken after a brief delay, while on desktop will also be spoken after the name if tabbing or can be spoken by pressing a hotkey (IE in NVDA it's pressing NVDA+Tab)

<Insert passage from "The Book Of Chrome" here>

Quote Post 2

Thumbs up +1

Reply by leibylucw 2019-06-20 15:29:35

  • Registered: 2011-11-27
  • Posts: 2,018
  • User Karma: 103

onmouseover events should be able to help. If users can hover the mouse over certain elements to receive further info, I think this is a perfectly-valid solution.

<p onmouseover="alert('hi')">This is some text</p>

As you can test, hovering over this simple paragraph will send "hi" to the screen. You can use your imagination to figure out what the best way to convey that additional info is, but as some users will argue, if it's that important, it should be in the foreground, not hidden away (take whatever position you like).

I think the aria-describedby attribute works if the proper verbosity settings are adjusted on screen readers, could be wrong on that.
Also note that with the onmouseover event, screen readers have keyboard commands that trigger the action of hovering the mouse over that element, so screen reader cursor focus over that element is not the same as the mouse's cursor focus.

What game will hadi.gsf want to play next?

Quote Post 3

Thumbs up +1

Reply by Lord Arogandor 2019-06-21 10:11:13

  • From: Belgium
  • Registered: 2019-03-25
  • Posts: 40
  • User Karma: 32

Thank you both for your replies!

I've experimented a little bit with the aria attributes but haven't managed to make something that satisfied my needs smile
Luckily there's another weekend standing ready to experiment further!

https://thegraillords.net

Lord Arogandor's Website

Quote Post 4

Thumbs up