Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Accessibility Issue - Screen Reader Getting Stuck

Posted by: peri Jul 28 2020, 10:00 PM

Hi. I'm working on building a personal web site and I have gotten to the point I am more thoroughly testing for accessibility - in particular, navigability with a screen reader. I'm using Windows 10's built in Narrator feature as I figure it probably has a wide base of use.

I have run into an unusual issue where Narrator will get hung up on certain sections. Usually, pressing the up or down arrow keys will move through the elements of the page sequentially. However, in areas where I have a construction like this:

CODE
<a>Link 1</a> ~ <a>Link 2</a>


It will not proceed past the first link when i press the down arrow - it will repeat the first link indefinitely. If i tap the right arrow key it will speak "space" as it lands on the empty space directly to the right of the link, and at that point I can use the down arrow to proceed as normal. This, however, seems to me like it would be potentially confusing/disorienting for people that rely on the screen reader to navigate.

So my question's pretty simple. Any tips for solving this issue? Thanks.

Posted by: pandy Jul 29 2020, 08:38 AM

I just tried Narrator for the first time. I couldn't even get it to read your post. It read the title and then some mumbo jumbo and then it stopped. I managed to get it to put a border around the post body, which I thought would make it read it, but nothing came out.

Probably because I don't know how to use the program, but anyway.

Posted by: Christian J Jul 29 2020, 03:08 PM

QUOTE(peri @ Jul 29 2020, 05:00 AM) *

So my question's pretty simple. Any tips for solving this issue? Thanks.

Never tried Narrator, but would it help to put each link in a list:

CODE
<ul>
<li><a href... ></li>
<li><a href... ></li>
</ul>

?

Than you can style the list items to look like inline text with something like:

CODE
li {display: inline;}


Posted by: pandy Jul 29 2020, 04:01 PM

I think it's something else. I put two links separated by tilde in a page and tabbed between them. Narrator reads the link texts. I haven't figured out how to get to read everything, including the tilde.

Posted by: Christian J Jul 29 2020, 05:13 PM

QUOTE(pandy @ Jul 29 2020, 11:01 PM) *

I haven't figured out how to get to read everything, including the tilde.

How is a tilde character pronounced (by a screen reader, that is)? unsure.gif

Posted by: peri Jul 29 2020, 06:04 PM

QUOTE(pandy @ Jul 29 2020, 04:01 PM) *

I think it's something else. I put two links separated by tilde in a page and tabbed between them. Narrator reads the link texts. I haven't figured out how to get to read everything, including the tilde.

Tab works! But tab specifically jumps between links, so it can't be used to browse through all the content on the page.

@Christian it skips over characters like ~, -, excessive ...... in regular circumstances, which is fine. It's just this catching problem that's throwing me off.

I might end up just making a static GIF of a tilda and using that instead of the actual character. Then it'd be link-image-link and Narrator wouldn't get stuck. I'm not crazy about that solution, but, if it works...

Posted by: pandy Jul 29 2020, 06:19 PM

I got it to read the page content by selecting it. How are you supposed to do it, peri?

Anyway, then it read the first link text, skipped the tilde as you say it should, but only read the first word of the second link text that was two words long. I just had a couple of words before the links and nothing after.

Posted by: peri Jul 29 2020, 08:14 PM

My goal is basically to get it so someone who's blind can get through the page successfully - so ideally, they can use the arrow keys to navigate through everything - pointing and clicking wouldn't be an option.

That's super weird you've run into a totally different problem - Its consistently the same thing for me on a few different pages. Out of curiosity, I just tried another screen reader (NVDA) and it dealt with it in yet another broken way - it totally skips over the rest of the text past the tilda, jumping to the next thing on the page.

Despite the inconsistencies I guess its pretty safe to conclude that screen readers don't like the link-tilda-link structure. I'll try the gif route - I appreciate your help looking into this!

Posted by: pandy Jul 29 2020, 08:33 PM

But how do I get Narrator to focus and read the page content using keyboard?

Jesus, it's annoying when it tries to read what I type as I type it! tongue.gif

Posted by: peri Jul 29 2020, 09:36 PM

With more complex pages like this thread, I'm not sure! I've read that if a page makes use of <main> tags to ID its core content, that can be used to jump to it, skipping all the fluff - but I haven't looked into exactly how that's done by the user. The site I'm working on is very basic so everything is kind of right there - I haven't had to worry about things like how someone would navigate to the main content with Narrator.

Posted by: pandy Jul 30 2020, 05:58 AM

With my very simple text page with just a line with two links in it it didn't want to go past the addressbar unless I tabbed and then it of course jumped to the first link.

Sorry, not very helpful to you, but at least I'm trying. blush.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)