2015-01-19 22:30:55 (edited by silverkey 2015-01-19 22:35:33)

Hi all! Got a coding question for screen-reader support.

An important image in my browser game is an image of the player's robot standing in its garage. This is done as a div with a css background image. Done this way because multiple divs are then stacked on top of it to show damage.

Can I put an alt attribute on the div to describe the robot, and then an alt attribute on the inner div to describe any damage?

Or does alt text only work on images?

Thanks!!

Developer of the sci-fi browser text RPG Roboid Incorporated! Free and mobile friendly.

http://roboid.com/

2015-01-20 01:29:15 (edited by camlorn 2015-01-20 01:33:52)

It looks like it might be possible with Aria, but you're going to need to read the spec yourself and do testing--how Aria is presented isn't really specified and the implementation status of Aria varies wildly across browsers and screen readers.
It is easier and much more sensible to just provide visible text below it in DOM order, for example.  Otherwise, you'll need to do some testing and experimentation-which will be more time-consuming than just providing some text below it.
Nothing has hurt accessibility quite as much as using divs for everything.  This is probably why we have Aria.

My Blog
Twitter: @ajhicks1992

2015-01-20 17:13:04

Apparently I can add aria-label attributes to any elements for screen reader support. I'll give that a try!

Developer of the sci-fi browser text RPG Roboid Incorporated! Free and mobile friendly.

http://roboid.com/

2015-01-20 17:37:03

Alt attributes generally only work on images, sadly. Assigning ARIA roles based on JavaScript might work, or you could append some text DOM nodes that are only visible to screenreaders to determine if there is damage or not.

HTH,
Balliol

2015-01-20 17:51:16

I've just been adding aria-labels in the code itself. Since I'm not overly concerned with DOM validation, but rather browser performance in reality.

Developer of the sci-fi browser text RPG Roboid Incorporated! Free and mobile friendly.

http://roboid.com/

2015-01-20 18:34:29

You can "just" add aria-label.  But you missed my entire point.  That's not necessarily implemented everywhere nor guaranteed to be presented in the way you think it is.  The standard gives almost no guarantees on that regard.  Have you actually tested this with screen readers and, if so, which?
The thing people don't understand about Aria is that the AT market moves slowly.  Every time I bring it up, someone jumps on it like it's the end-all solution for everything.  If you're doing proper testing across multiple browsers and screen readers, go ahead.  If you're not doing proper testing, please just stop now and think about all the harm that making everything in your entire game a div does in terms of accessibility.  At worst, your new found solution of Aria will actually break things, especially if you ever go beyond Aria-label--I have seen this many times, most notably with Google.

My Blog
Twitter: @ajhicks1992

2015-01-20 18:58:59

Hmm. Interesting.

Since my game is not primarily for screen readers I do have to prioritize where I spend development time. If adding an ARIA label element isn't the nice solution it should be, I may change to tiny images with alt text inside any mysterious divs.

Would be nice if there was a sure fire way to include HTML info targeted just for audio browsers and screen readers.

I don't use divs as visual elements in many areas, only when I can't get around it in a more standard way.

Developer of the sci-fi browser text RPG Roboid Incorporated! Free and mobile friendly.

http://roboid.com/

2015-01-20 19:48:31 (edited by camlorn 2015-01-20 19:49:41)

It might be. It might not.  It's going to depend on the screen reader and the platform and whether you ask me that question now or in 6 months.  I read the algorithm for the computation of text that Aria's spec provides and it's not exactly simple. Or short, for that matter.  It almost certainly works with NVDA and Firefox, and I'd be willing to bet quite a lot that it doesn't work well or at all with Voiceover on OS X.  To get some idea, consider all the HTML5 features and how long it's taking for them to all be consistently implemented everywhere.  Now cut the user base down to like 1% and factor in the fact that Jaws is money-driven, hasn't done anything major in years, has their hooks in with governmental agencies, and is still the most popular screen reader.
I'm sorry if I'm snappish here.  Sighted devs find Aria and then assume that it's the end-all and they can go right ahead with whatever practice is causing the problem in the first place, which is why we have things like Angular.js that provide no end of trouble without special extensions.  The problem with Aria is that it is almost exclusively for accessibility.  As a consequence, it's actually really fuzzy where the browser's responsibility ends and the screen reader's responsibility begins; the implementation involves both.  Basically, it's assumed that if you're using Aria you know what you're doing, so the end user can't usually override this.  In fact, overriding application role took a very large discussion on the NVDA tracker, and is still a major problem.  Aria-label is relatively safe, in that the way it's likely to fail is simply that the screen reader doesn't respect it, but going beyond that will almost certainly cause you to start running into bugs that may render something marginally usable unusable, or "fix" something that worked fine in the first place into a state where it doesn't anymore.
The real fix to these problems is to get people back onto the content and presentation separation idea and off the CSS and Divs for everything; if I could figure out how to do this, I would be very happy.  When Aria comes up, however, sighted devs tend to use it as an excuse to go right ahead without any actual testing with the technology that Aria is supposed to make you work with, like Aria is some sort of magic super sauce of fixing.

My Blog
Twitter: @ajhicks1992

2015-01-20 20:23:22

I hear you. I had the same headaches with IE non-standards compliance. Ug.

From a developer perspective though, if the effort required far outstrips the potential returns, most profit driven companies won't bother. then you're stuck with developers who make games specifically for VI players and the few smaller devs who do it for the interest or goodwill.

None of this helps the VI community, who I imagine is starved for quality media. I have a deaf uncle who has the parellel struggles with poor captioning standards.
Ug.

Developer of the sci-fi browser text RPG Roboid Incorporated! Free and mobile friendly.

http://roboid.com/

2015-01-20 20:30:43

It also doesn't help that googling for half an hour did not find much information on how to add supplementary info for screen readers.

Developer of the sci-fi browser text RPG Roboid Incorporated! Free and mobile friendly.

http://roboid.com/

2015-01-20 21:48:07

Yeah. And that's why I'm basically qualified for a variety of jobs that pay like $60/hour and up-even the number of people who know where to start is amazingly tiny, and the governmental regulations and stuff just keep coming...

My Blog
Twitter: @ajhicks1992

2015-01-20 22:13:25

Whew!

Developer of the sci-fi browser text RPG Roboid Incorporated! Free and mobile friendly.

http://roboid.com/