2015-01-21 20:41:57

Having a problem trying to write something using HTML. In my game you can enable some cheat codes by pressing a sequence of keys at the title screen (more specifically, eight presses of the arrow keys). I planned to show them as, well, arrows, both because it looks nice (and probably the only way it looks decent) and because the font I'm using has some good arrow characters. The problem is that if I recall correctly screen readers ignore arrows. I was considering using abbr to give them some sort of alternative text, but I'm not sure if they will be read since from what I'm reading it's a setting and it usually defaults to off (honestly what worries me is the fact that the text would be outright skipped without giving any hint of being there, if the user can tell to enable abbreviation expansion at that point it would be acceptable).

First of all let's test this... here's an example HTML file showing what I'm talking about. The first paragraph is just the arrows as-is (I don't expect this to work). The second paragraph is the arrows using the abbr tag. Is it possible to read the arrows in the second paragraph? (do not mess with the screen reader settings please, this should work as-is)

Does this work, at least for the major screen readers? If not, any suggestions? I don't really want to use images here since I have the feeling those may make things worse (and from what I was reading, JAWS prepends all images with "graphic" by default, and having that pronounced before every arrow is just going to be extremely annoying, if not outright confusing), and spelling out the words directly will just make it harder to read for visual users.

PS: no, I can't test it myself, turns out Firefox doesn't want to work with my screen reader (not even the menubar works), and yes, I tried other programs and the screen reader works with them. Ugh.

Thumbs up

2015-01-21 21:40:35

Hello,
The first one is better.
Have you tried
NVDA
and used the speech viewer?
It is built for sighted developers.
My screen reader does something I don't like on the stuff before the first arrows and all around the second set of arrows. It goes silent.
I have no idea why, but it does.
BTW, a general rule of thumb is just to make the text accessible first and ask for feedback after. It is really difficult to make something super appealing to screen readers unless you use them on a daily basis.
I should show some of the graphics that I have made when I don't use a screen.

Thumbs up

2015-01-21 22:13:19

There are ways to make Jaws and NVDA to read them, but I doubt most users would have them set up by default.
I'm not sure about other screen readers.

ごめんなさいのときですね?

Thumbs up

2015-01-21 22:42:38

It is probably simplest to just provide a link to a blind-friendly alternative that spells them out.  Images can work and will actually work fine for many of us, but it's probably the same amount of effort.  I can read them because a friend wrote a script a long time ago; other users can't until and unless someone (including that user themselves) adds them to the symbols dictionary.

My Blog
Twitter: @camlorn38 (Try Chicken Nugget)

Thumbs up

2015-01-22 05:07:38

For the record, immediately after posting that I realized I could just put right before the offending section some text warning screen reader users to turn on abbreviation expansion if they have issues (and then make it invisible to visual users using CSS), at least that would give users a clue that there should be something there (and they can turn it off later if needed). I didn't edit the post to see if anybody knew anything better though.

frastlin wrote:

Have you tried
NVDA
and used the speech viewer?

Isn't it Windows-only? (I'm on Linux)

camlorn wrote:

Images can work and will actually work fine for many of us, but it's probably the same amount of effort.

Yeah, the problem is that images bring in their own set of issues. Also I would like to know what could be done in case this situation comes up again later.

Thumbs up

2015-01-22 15:40:19

Not much.  I don't think I even have an option to expand abbreviations.  I don't think any of us do, but I could be wrong.  You could maybe wrap each of them in a div and use aria-label, but as I said in another thread you have to test-but you are testing, so you won't get shot down by me for it.

My Blog
Twitter: @camlorn38 (Try Chicken Nugget)

Thumbs up

2015-01-22 16:49:08

I know that at the very least JAWS can expand abbreviations and has been able for quite a while (I managed to find info on that from as far as 2003), the problem is that it's a setting that's disabled by default. But it's there. Some page I found detailing how to enable abbreviation expansion in JAWS (but of course could differ between versions). Also Window-Eyes supports them too from what I've gathered (but again, disabled by default, needs to change a setting), the Window-Eyes manual details how to enable it (why doesn't it have anchors?!). And VoiceOver speaks them by default, it seems (but my game isn't on Mac so that's pointless).

And let me just say that I don't like aria at all tongue Relying on something that isn't part of the proper format (in this case HTML) in the first place is an extremely bad idea in my opinion.

Thumbs up +1

2015-01-22 17:43:29

Aria is part of HTML to my knowledge.  It's at least a W3C standard, anyway.  The problem with Aria is that the AT companies are behind, as usual.
Regardless, it doesn't work for me and I wouldn't know how to turn it on.  As I'm a power user by any stretch of the imagination, this is probably not workable.  Aria is probably your best option here unless you use images or give an alternate document.  This is the first time I've ever seen this in the wild and actually had someone point out that it's important.  I'm not sure if NVDA supports it or not, but skimming through the options shows nothing.

My Blog
Twitter: @camlorn38 (Try Chicken Nugget)

Thumbs up

2015-01-22 21:55:38

If I have to make an alternative page then it means I failed miserably at accessibility and I deserve any insults that I receive for it.

Anyway, came up with another idea. Check the test link again, I added a third paragraph. This time I'm trying to use CSS to replace the words with the arrows visually. Hopefully this works - at least when I try to copy and paste the text I get the words, so I assume the text would still be readable to a screen reader. (it looks rather ugly when you're selecting it, though...)

Thumbs up

2015-01-23 01:06:33 (edited by camlorn 2015-01-23 01:08:51)

No. I get both the text and the character. You cant' do what you want this way. Please try tagging them with aria-label"foobar" and then have us test that, as I think that's the most likely thing to work unless you switch to images.  You can throw each of them in a div and put the alternative text on that. This is part of HTML for all intents and purposes, it's just not going to be fully implemented for another year or two.
If anyone deserves ridicule, it's the AT companies for not implementing any proper support for Unicode, and it is a problem in much more serious places than your web site.  On wikipedia, for example.
Edit for clarification:
You can probably put the entire combination in the same div.  Putting each character in the same div is possibly going to make them show up as on separate "lines", but the definition of what I mean by line is a bit complex. Probably better to say "logical unit".
Get a windows VM and install NVDA and Firefox, if you can. I sincerely think it would be worth it for you to be able to try something that is not Orca.

My Blog
Twitter: @camlorn38 (Try Chicken Nugget)

Thumbs up

2015-01-23 15:30:27

Guh. Now? Fourth paragraph (yeah, always the last one). I don't make any guarantees that I didn't make a mistake writing the HTML though.

camlorn wrote:

This is part of HTML for all intents and purposes, it's just not going to be fully implemented for another year or two.

Yeah, support for aria-label seems to be worse than lackluster. May as well go with images, but as I said, they come with ther own whole set of issues (and the there's the issue that they may get prefixed with "graphic", which will be annoying).

camlorn wrote:

If anyone deserves ridicule, it's the AT companies for not implementing any proper support for Unicode, and it is a problem in much more serious places than your web site.  On wikipedia, for example.

Still not an acceptable excuse to not make this thing accessible now tongue It's not like software developers don't have to work around broken stuff all the time either.

camlorn wrote:

Edit for clarification:
You can probably put the entire combination in the same div.  Putting each character in the same div is possibly going to make them show up as on separate "lines", but the definition of what I mean by line is a bit complex. Probably better to say "logical unit".

Eh, in the document where I want to put them they're in a table cell (they're the entire content of the cell), so in theory the label could just be applied to it.

camlorn wrote:

Get a windows VM and install NVDA and Firefox, if you can. I sincerely think it would be worth it for you to be able to try something that is not Orca.

I would need a Windows license though, wouldn't I? tongue (could still work under Wine I suppose, but not sure) Even then that won't help me with the behavior in other screen readers, and from what I'm seeing they vary wildly in stuff like this.

Thumbs up

2015-01-23 17:38:53

Yeah, that's not doing it either.  I'll have to try with the latest next snapshot of NVDA and see if it works.  This is probably worth a ticket, given that this is the second thread this week that's discussing aria-label for this kind of thing.  Unfortunately, it is possible that it's a Firefox issue.
As for NVDA vs. other screen readers, my personal philosophy is "if it works with NVDA, the AT companies with all the money can catch up if they actually care".  Yes, this is not actually practical.  But NVDA is the closest screen reader to implementing things according to the published standards, whereas Jaws and Window-eyes do things very oddly, sometimes.

My Blog
Twitter: @camlorn38 (Try Chicken Nugget)

Thumbs up

2015-02-01 04:10:34

Well, since I ran out of ideas... any suggestions?

For the record, the stuff I'm writing is a sequence of keys to enable some cheats but those cheats can also be enabled passing parameters to the command line (which are listed after them and should be readable to the screen reader since they're just letters, numbers and hyphens). Should I bother trying to fix this or just let screen reader users go with the command line alternative?

I had also wondered about including a javascript button to change the arrows to words but including javascript in a manual seems pretty fishy to me.

Thumbs up

2015-02-01 11:50:50

Just do the first one, it's fine.

Thumbs up

2015-02-01 17:21:08

Yeah, but none of them are fine on my synth.  What are you using?  I can get the first to work, but only by turning on a nonstandard Unicode thing that a friend wrote for me which I really need to package into an add-on at some point.  Just write  some text descriptions.  If you won't, we will or everyone will just use command line options, and it will end up being the same difference in the end.

My Blog
Twitter: @camlorn38 (Try Chicken Nugget)

Thumbs up

2015-02-01 20:56:14

In the end I gave up and just went the javascript route. *sigh* When the page loads it shows up as arrows, after you click a button they get converted to words which can be read by a screen reader (amusingly, it's done on the fly rather than having to place alternative text, which is neat). I wonder how workable is this.

Example using javascript

The big issue is that this requires javascript to be enabled... I know nearly everybody has it enabled, but there's no reason why it should be a requirement and there's no excuse to lock out people. I suppose there's always the alternative of just using the command line (which also happens to help with modding anyway).

Thumbs up