iWeb FAQ - Visually impaired friendly sites

iWebFAQ.org

 

I am making a website in iweb and I want it to be friendly to the sight impaired. What I am wondering is, if I hide text underneath images, will a computer that is reading aloud see the text and read it? For instance, if I use images for menu buttons, a blind person would not be able to see the options. But if I could put text underneath the image... do you know if this would work?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


I personally have only few experience with building sight-impaired-friendly sites and iWeb is all but sight-impaired-friendly so all you can do is try to improve what you can.



Chapter 1: How do the sight-impared-helping-applications work?

Chapter 2: What you have to pay attention to

Chapter 3: Five points to follow

Chpater 4: Try it out




Chapter 1: How do the sight-impared-helping-applications work?


I don't really know how those applications which actually read the content of a site work.


I only tried the one which comes with Mac OS X


Preferences=>Universal Access=>Voice Over (turn it on)


With that feature turned on you need to use the mouse pointer to select the textbox you want to be read. If it is behind an image you can't select it and thus it can't be read it will just say "html content" due to the image.

If the application would read the whole content from top to bottom without needing to select it it would work. But to me it doesn't make sense if it would read from top to bottom without pointer as the one using this help-feature wouldn't know "Where's my pointer? Where's the link called 'Home' on the page?".

I guess those applications work in a pointer-oriented way. Hence having the TextBox behind an image wouldn't help. It would need to be in front of everything else.

You could make the empty button images and just put a TextBox with the link in front of those images. I think that would work.



Chapter 2: What you have to pay attention to


iWeb turns some TextBox into images to make sure they get rendered the way you wanted them. This happens especially if you add shadows to the text. iWeb 2 until 2.0.3 turned TextBoxes into images really easily even if there was no need to do so. With 2.0.4 less TextBoxes are turned into images.

Turning TextBoxes into images is great to keep the formatting as you wanted it to be. But it's poison for search engines as they can't read the text and of course it's also bad for computer-reading applications. 

To see which text fields are gonna be turned into images go to File=>Preferences and check the “Show text imaging indicator” box. iWeb is gonna display a yellow picture symbol on the text field. The symbol will not be published to the net.

That should really be avoided if you want to have a visually challenged friendly site.


The navigation menu should be made vertical and on the left. To me it’s much easier to make a vertical movement following a line than it is making a horizontal-lateral movement following a line with the eyes closed.

Also do it one TextBox for each menu entry. You can make various TextBoxes in one TextBox so it’s easier to copy&paste it to the other pages as well.



Chapter 3: Five points to follow


1. Use a font which is easy to read and internet standard (Verdana, Times, Times New Roman, Helvetica, ...). Avoid using complex fonts like handwriting-like fonts.

2. Keep the structure of the pages as easy as possible and keep the TextBoxes in front. 

3. Avoid formatting that turns Text into Images.

4. Under each image put a TextBox with a line to describe the image. So visually impaired people "see" the photos or whatever. If you don't do that they will just get a "html content" without knowing what it is.

5. Keep the menu vertical and on the left.



Chapter 4: Try it out


Once you published go to this site here: Lynx Viewer, enter a url of one of your pages and hit view page.

This will show you how the page displays in text-only mode. As they say on the site "It can help determine if web pages are accessible to the vision impaired."


Best is to test the site under real-circumstances:


Publish the site.

Get a friend, cover his eyes, activate VoiceOver


System Preferences=>Universal Access=>Voice Over (turn it on)


And let him browse through your website as being blind only with the help of VoiceOver.

Let him browse it freely or give instructions like "Find this or that page"

Observe his actions and find out what's good what's not good and how to improve it.


You could do it yourself, but you know your site hence it wouldn't be "real".



If you have any other tips about this topic please leave a comment on this page or in the Forum.




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark