The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Accessibility Issue - Screen Reader Getting Stuck
peri
post Jul 28 2020, 10:00 PM
Post #1





Group: Members
Posts: 4
Joined: 28-July 20
Member No.: 27,461



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 29 2020, 08:38 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 29 2020, 03:08 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



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;}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 29 2020, 04:01 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 29 2020, 05:13 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peri
post Jul 29 2020, 06:04 PM
Post #6





Group: Members
Posts: 4
Joined: 28-July 20
Member No.: 27,461



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 29 2020, 06:19 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peri
post Jul 29 2020, 08:14 PM
Post #8





Group: Members
Posts: 4
Joined: 28-July 20
Member No.: 27,461



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 29 2020, 08:33 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
peri
post Jul 29 2020, 09:36 PM
Post #10





Group: Members
Posts: 4
Joined: 28-July 20
Member No.: 27,461



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 30 2020, 05:58 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th April 2024 - 06:08 PM