Adjacent Links (Full Version)

All Forums >> [Web Development] >> Accessibility



Message

rubyaim -> Adjacent Links (1/18/2007 23:34:24)

I don't often use adjacent links (links are usually in a list), but Cynthia just caught me out on an updated page. In this case it was only two links and easy enough to solve by using a chevron:

>Top of Page > Some Other Page

It did make me wonder though about how annoying this would be to someone listening to a web page. Would anyone know what separator is actually preferred by people using a screen reader? Or is this just a personal taste thing?

I used to use a | with display none, but then found out that some readers won't read anything with a display none (fair enough), so doing that really only kept Cynthia happy and was pointless.

I've also used brackets:

[Top of page] [You might like this page] [And this too]

but figure two separators would be more annoying to listen to than one.

I actually like the look of the chevron best for those times you 'suggest' a link on a page, but would probably not like to hear "chevron Link chevron Link".



Nicole -> RE: Adjacent Links (1/19/2007 1:51:49)

Hi Sally,

Actually I’ve used a | for a while ever since seeing this thread (Thanks to Jaybee!).

http://www.frontpagewebmaster.com/m-238769/tm.htm#238832

But also could you use some small icons from here?

http://www.famfamfam.com/lab/icons/


Nicole



rubyaim -> RE: Adjacent Links (1/19/2007 2:05:25)

Hi Nicole, I did use a | for a while (with display:none), but then I read that some screen readers would ignore things with a display:none, so it seemed not the right thing to do really.

Mind you, for all I know they could all be speaking things with display:none, I don't know how old that article was (or even where it was). I could use just a | but to view on the page I prefer a >.

Those icons are very cute [:)] I've bookmarked the page, but in reality I know I'm too lazy to put an image in when I think of adding a link on the fly.

Do you know what a screen reader does with an image between links? It looks like the type of thing that should have empty alt - but maybe not.

Maybe I should look at Aural Style Sheets - wondering if pause-after would be the thing to use between links. Am a bit reluctant to try those at this stage as I can't test and don't want to get into bad habits.



Nicole -> RE: Adjacent Links (1/19/2007 2:14:38)

Yes, I was thinking those icons without an empty alt

Does this link help you?

http://www.frontpagewebmaster.com/m-324012/tm.htm

Actually I'm looking for a table that shows what the different screen readers actually read. I'm sure jaybee posted a link in that thread before but I can't find it right now. Perhaps it was a link within the Webaim link she posted?




rubyaim -> RE: Adjacent Links (1/19/2007 2:26:01)

Yes, it does thanks [:)]

I've lost Fangs, again, and don't have speakers so can't really use any of the simulators. Can not afford to buy any of the real deal, and work certainly would not pay for it.

A table like that would be good, I did try a search but got bogged down - will try again tomorrow. Or maybe Jaybee will take pity on us and post it again.

I guess what I'd really like to know is if screen reader users hear a separator between links, what is the least annoying [:)]



Nicole -> RE: Adjacent Links (1/19/2007 2:29:28)

I may be wrong, but I thought most screen readers said the word "link" before links anyway.

Hmmmm, now I'm needing clarification on this. Why does Cynthia need something between links?




rubyaim -> RE: Adjacent Links (1/19/2007 2:34:46)

quote:

Why does Cynthia need something between links?

Sometimes I think she has very bad hair days [&:]

But that is a good point, if a reader says "link", what is Cynthia on about?

I have to get to an AAA pass with her to keep the lawyers happy, but there is nothing saying I can't go and change the page once they have given it the okay if Cynthia is just being a robot [8|]



Tailslide -> RE: Adjacent Links (1/19/2007 2:36:38)

I think that commas are generally thought to make the most sense to screenreaders in this situation.



rubyaim -> RE: Adjacent Links (1/19/2007 2:40:33)

Thanks Tail, a comma makes perfect sense [:)]

but I think

> Some Page > Some Other Page

looks prettier than

Some Page, Some Other Page

oh well, you get that [8|]



jaybee -> RE: Adjacent Links (1/19/2007 6:56:21)

Jaybee is not in a pity taking mood. I've got a damaged car and the entire garden got blown away so I'm in stomping mood.[:D]

Cynthia likes the links separated because otherwise the readers just plough on without separating individual links.

You can use Aural and signify a link with a sound and I've done it. It works pretty well but be careful what you use for the sound or it'll be incredibly annoying. I use a click before the link.

Having said that I stopped using the separators ages ago, ever since I twigged it's far easier to do navs using lists. The fact it is a list means Cynthia likes it and the readers take it item by item. You can use the bullet to separate if you want.

If you want to hear what your page sounds like without having to download Jaws then Install Opera and then activate Opera Voice. It's not perfect but it gives you a very good idea and it accepts Aural stylesheets. The only problem is it tries to keep up with the latest versions and at the moment, aural is going through a bit of a flux on the CSS 3 front so some of the things that should work, don't.

For example, if you check out my page here, it explains what I've done on my site and why. Pay particular attention to the bit about Azimuth and speech direction.



jaybee -> RE: Adjacent Links (1/19/2007 7:03:08)

quote:

I thought most screen readers said the word "link" before links anyway
Some do, some don't



d a v e -> RE: Adjacent Links (1/19/2007 13:14:57)

use the > as an image??



jaybee -> RE: Adjacent Links (1/19/2007 13:51:22)


quote:

ORIGINAL: d a v e

use the > as an image??

That's what I meant by bullet. You can use the image as the bullet in the list, gets round all the problems.



Tailslide -> RE: Adjacent Links (1/19/2007 14:13:33)

That's the approach I'd take too.



d a v e -> RE: Adjacent Links (1/19/2007 14:40:04)

"That's what I meant by bullet." oops sorry jaybee - hard to read properly with a little git bouncing around on your knees!



rubyaim -> RE: Adjacent Links (1/19/2007 15:50:44)

Perhaps Cynthia needs reprogramming so she stops passing a separator spanned by display:none [X(]

My main site navigation is in a list. I'm really not sure that creating a list with an image bullet, for those very few times I want to include a one or two links besides 'back to top' at the bottom of text, is worth it? When do you start weighing up extra code for things that will be little used, do any of you have a standard rule? In this case I have around 1500 pages and would probably only use this on 5.

I gave this more thought last night and decided that as I'm suggesting more info to users I may as well put it in a brief paragraph and leave 'top' as a stand alone link.

Eg:
Please also read the Widget Manufacturing information. Widget Rotation may also be of interest.

Back to top


quote:

Jaybee is not in a pity taking mood. I've got a damaged car and the entire garden got blown away so I'm in stomping mood.

I'd be in a stomping mood as well [8|] I hope those you care about are okay (trite, I know, but things can be replaced, fixed, or done without - those you love can't).



rubyaim -> RE: Adjacent Links (1/19/2007 15:59:16)

quote:

Install Opera and then activate Opera Voice. It's not perfect but it gives you a very good idea and it accepts Aural stylesheets.

I'll do that, thanks [:)]

Will have to put it on my husbands laptop as that's the only machine we have at home with speakers [8|]



Tailslide -> RE: Adjacent Links (1/19/2007 16:04:58)


quote:

ORIGINAL: rubyaimPlease also read the Widget Manufacturing information. Widget Rotation may also be of interest.

Back to top


That would work too but it's about the same amount of characters as a simple list: 

<ul>
<li><a href="widgets.html">Widget manufacturing</a></li>
<li><a href="rotation.html">Widget Rotation</a></li>
<li class="btt"><a href="#top">Back to top</a></li>
</ul>



jaybee -> RE: Adjacent Links (1/19/2007 16:08:54)

quote:

things can be replaced, fixed, or done without - those you love can't
True but I could get Harvey fixed for free on the NHS. The car's going to cost £1200. [:D]

quote:

hard to read properly with a little git bouncing around on your knees!
Then put it down and play with the kids or something. [;)]



rubyaim -> RE: Adjacent Links (1/19/2007 16:13:21)

quote:

it's about the same amount of characters as a simple list

Probably, but I'd not be happy with a simple list - would tart it up with css, use the image bullet, and make in horizontal [:D]

In the overall scheme of things it probably does not matter as long as someone using a reader can follow it and it makes sense to those viewing on screen.

quote:

The car's going to cost £1200.

I recently had to get my son repaired and it cost far less than that - obviously cars do need some type of health fund [:D]



Tailslide -> RE: Adjacent Links (1/19/2007 16:21:31)

Yes that's my point - you can use the simple list just as is and style it however you like. You don't need to add any more markup - just a few CSS rules - which you'd probably add to style the paragraph anyway.



rubyaim -> RE: Adjacent Links (1/19/2007 16:30:56)

quote:

just a few CSS rules

and the image. Paragraph and links already styled.

I'm still not convinced it's worth it for 5 pages in 1500 ?

Edit: I would do that if it was going to be used on the majority of pages.



Tailslide -> RE: Adjacent Links (1/19/2007 17:09:27)

There's nothing wrong with the paragraph solution - it's just a different way of doing the thing. There's still not much difference even with a teeny tiny bullet image if you want to do it the list way.

The incorrect way would be to have just links in a row - as long as you're not doing that it's just a question of preference.



jaybee -> RE: Adjacent Links (1/22/2007 7:18:19)

Here's some further info.

The IBM screenreader doesn't identify the link. The speaker just modifies his voice to emphasise something is there. This is a prime example of requiring a separator or some identification that it is a link. If you just have a row of links the reader has no idea where the link starts or stops and the user may assume it just one very long one.

The recommendation is to either use lists for the nav or, if you must use a separator, use
a bar | if it's English language or
a full stop if it's German language.



d a v e -> RE: Adjacent Links (1/22/2007 12:42:28)

seems weird that the screen readers can't detect the start and end of the anchor tag and use that to announce a link ;) - i wish that there was a firefox screen reader for free/open source reader (or is there??) thank god MS don't make one though from the small bit i know they could probably do as good a job :)



jaybee -> RE: Adjacent Links (1/22/2007 13:22:09)

They can identify it just for some reason the IBM reader doesn't say "link".

Free there is the new version of Foxy Voice as noted elsewhere and called Speakit but it's very very basic and IMO doesn't give you the information you need to make a full assessment. It too doesn't identify a link as a link. Much better is Opera Voice. Download the latest version of Opera and go to Tools>Preferences>Advanced>Voice. Enable voice-controlled browsing. If it's not already on there then it will download and take you through the steps.

Once it's on you can highlight what you want on the page, the whole page if necessary, right click and select Speak.

You can also download a fully working demo of Jaws. It's big. It runs for a specific period of time can't remember if it's 30 mins or an hour and then you have to restart, because of that don't let it load when Windows loads, just stick an icon somewhere and load as needed.

Word of warning. It completely screwed my screen res up when it went on and I spent ages trying to find the problem. Eventually I had to reapply the desktop, theme and appearance. Fine now and you may not have the same problem as mine is a full version.

[edit]Speakit has some rather odd pronunciation as well

useful = eesful

accessify = Access eeeefie

One thing that is very interesting and something you just don't think about is some of the words we routinely use and names. All the readers pronounce website as webseet so make sure you use web site as two separate words.

Content on pronounced as in happy with the emphasis on the last part rather than on the first so use contents which they get right.

Words like my company name JBVisions are pronounced as just that Jubvisions. I've got round that by forcing the spelling with an Aural style but you could put JB Visions.



d a v e -> RE: Adjacent Links (1/22/2007 15:30:06)

the last version of opera (9.1) was really buggy for me so i uninstalled it (though it works fine on linux) ;) i'll try it again as a matter of interest.



rubyaim -> RE: Adjacent Links (1/22/2007 16:25:59)

quote:

seems weird that the screen readers can't detect the start and end of the anchor tag and use that to announce a link ;)

I'd like to seem them all do that. I have a great deal of admiration for screen reader developers but get very frustrated at times that something like this is not standard.

In my ongoing search for a screen reader comparison (not found yet), I came across this article:

What should a screen reader do?

I found it and the comments quite interesting.



Nicole -> RE: Adjacent Links (1/22/2007 16:39:53)

Dave,

I think you are on the right track that Firefox should create an open source screen reader similar to those like JAWS, IBM etc. I think it's unfair that those who need a screen reader have to pay so much for them, on top of their computer, ISP fees etc. I do think that one day we'll see Firefox produce a good one though.

For the record I suffered similar problems to Jaybee when using that Trial version of JAWS. In fact, I deleted it ages ago, and only very recently when purchasing jv16 Power Tools Registry Cleaner did I still find associated ffiles on my computer.



jaybee -> RE: Adjacent Links (1/22/2007 17:32:35)

quote:

ORIGINAL: d a v e

the last version of opera (9.1) was really buggy for me so i uninstalled it (though it works fine on linux) ;) i'll try it again as a matter of interest.
You can run OV on earlier versions. I haven't upgraded to the latest Opera.



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375