Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Forum How-To (http://forum.bytesforall.com/forumdisplay.php?f=9)
-   -   Screen reader friendly for visually impaired (http://forum.bytesforall.com/showthread.php?t=12709)

mysupervee Feb 9, 2011 05:02 AM

Screen reader friendly for visually impaired
The site I'm developing on Wordpress 3.0.5 using Atahualpa 3.6.1 (which is a brilliant theme) will have site visitors that are visually impaired who use a screen reader (it allows users to move about the screen/navigation without a mouse using the alt key). Is there any code or a plugin I can apply to make this work?

lmilesw Feb 9, 2011 06:11 AM

Have you run your site through an accessibility tester or testing with something like the Firefox extension called Fangs?

mysupervee Feb 9, 2011 06:38 AM

no I haven't - I didn't know one could. The client has asked a user with a screen reader to check it and the issue is that using the alt key doesn't activate the navigation bar. I'll try the Fang extension.

mysupervee Feb 9, 2011 06:43 AM

Just tried to install Fangs and got this message: "Fangs 1.0.4 could not be installed because it is not compatible with Firefox 3.6.13."
Any other suggestions?

lmilesw Feb 9, 2011 08:29 PM

Sorry about Fangs... I didn't check how current it was. I just spent a bit of time checking into accessibility for WordPress but didn't find anything definitive. You will probably have to do a bit of research and testing unless someone sees this thread and has some suggestions. You could certainly buy an install Jaws but that would only tell you how it sees your site and not how to make it more accessible. Wish I could help more.

mysupervee Feb 10, 2011 03:16 AM

Yeah, you're right I need to know how to make my site accessible to these screen readers. I appreciate the time you've spent searching, thank you.
If anyone else has some suggestions, tips, links, I'd really like to hear them.

SharonJ Feb 25, 2011 11:49 AM

I have found this page most helpful generally:

Make sure every image has an alt description saying what it actually is and image names cannot be DCs78654.jpg

Depending on where you live there will be a place like an Independent Living Resource Centre. They are all across Canada, and likely there is something similar in the US and the UK. In the UK accessible sites are called "Bobby Sites"

If you go one of these organizations or and institute for the blind, they will have guidelines and also, screen readers so you can see for yourself. I am learning this, too as I will be doing a website for visually impaired. I have learned that you must not depend on colour to define your site, you should have some code that will allow people to enlarge the text, or begin with larger text for those who are impaired, not blind.

Also, there are three different kinds of colour blindness that complicate matters more, and you can learn about that here:

a pretty amazing site. Pick your picture and see what it looks like for different conditions.

mysupervee Feb 26, 2011 08:00 AM

Thanks Sharon, some very useful information, thank you

In fact I discovered what the problem the user was having with the screen reader... on the menu navigation bar, the sub menus came up the same colour as the active and hover colour so when you tabbed through the sub menu, you didn't know where you were. There isn't an option to customise the submenu in ATO so I wrote some code that I adapted from another post here and added in ATO/ add CSS inserts that defined the colours of the submenu tab so that only the hover tab changed colour. It drove me nuts for days but I figured it in the end.

With regard to changing font size, there is a plug in called 'font resizer' which works really well.

SharonJ Feb 26, 2011 08:53 AM

This changes the drop down menu colours

ul.rMenu-ver li {
background-color: #daf2f9 !important;

ul.rMenu-ver li a:hover {
background-color: #bddce5 !important;

You can see it at www.skookumheritagechurch.ca

I will check out font resizer, thank you!

SharonJ Feb 26, 2011 08:56 AM

do you have a website where the font resizer is installed?

mysupervee Feb 26, 2011 09:31 AM

Yes to the font resizer, although this is a test site while we build it

I think I used pretty much the same code as you for the sub menu:

ul.rMenu-ver li { background-color: #001f7f !important; color: #ffffff !important; }
ul.rMenu-ver li a:link { background-color: #001F7F !important; color: #ffffff !important; }
ul.rMenu-ver li a:visited { background-color: #001F7F !important; color: #ffffff !important; }
ul.rMenu-ver li a:active { background-color: #586E3A !important; color: #ffffff !important; }
ul.rMenu-ver li a:hover { background-color: #586E3A !important; color: #ffffff !important; }

although what I've not managed to succeed in doing is if the active page is on the sub-menu, getting the menu to show it in a different colour as being the active page. It works on the main navigation bar, just not the sub-menus. I see you've managed to do it with www.skookumheritagechurch.ca
What am I missing??

SharonJ Feb 26, 2011 11:06 AM

Ok...this is just a guess. I am not a programming genius by a long shot. But I bet you that submenus are something other than

ul.rMenu-ver li

maybe they would be called something like

ul.sMenu or something.

Not sure why you have your visited links the same as your regular links.

And there is something, too about the order. I was taught to remember "love hate"
This is from
HTML Code:

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

Hope this helps

SharonJ Feb 26, 2011 11:07 AM

Is your font resizer on your site in a widget?

All times are GMT -6. The time now is 01:11 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.