Tag Archive 'accessibility'

Aug 10 2008

Profile Image of suzievesper
suzievesper

Web accessibility guidelines

Filed under Special needs

Introduction

BLENNZ ClusterOne of the clusters that I have become the national facilitator for is the BLENNZ cluster (Blind and Low Vision Education) which has facilitators across the country. I have so much to learn about this area of education having always worked in the mainstream and not having any children with vision needs in my classroom. Therefore, I consider myself lucky that I have been able to work with Chrissie Butler for a few hours this week who has just started as a Wellington based facilitator for the cluster. This also led to me joining in with a full day training session around an LMS called My Source Matrix which is designed with accessibilty in mind. While learning about the software was useful, it was the general information about basic web design principles for accessibility that I found particularly interesting.

Demonstration of surfing with a Screen Reader

We had Kylee join us for the session who is legally blind. She demonstrated what surfing the web is like using a screen reader application. She chose one site that was designed using My Source Matrix and is therefore great for accessibility and the new online Loto site which was not very accessible for her at all. It was amazing watching someone navigate this way – the sheer speed that she listened to the computer audio of the screen reader was gob smacking – I could barely make out the individual words at all at that speed. She had to slow this down so the sighted amongst us could make out what was being said. Kylie had a number of points about how sites can ensure that they are accessible when using these kinds of readers which I have outlined below. There is a downloadable newsletter from the MOE that includes information about screenreaders. Kylie was using the Jaws screenreader which is around $1500 NZ! There are freeware screenreader options: Thunder is a screenreader for PC and Mac OX has a screenreader built into the operating system itself called VoiceOver which I had a go with this evening (and failed rather miserably to really get the hang of it)

Use heading styles

One way is by having clear heading styles built into the page which also ‘flow’ logically. A reader can be used to browse through these headings so that the user can quickly find a section of the website that they want to explore in more detail. If you are creating a document in Word that you want to convert to html for the web, you should use the heading styles within word rather than simple enlarge a font and change the formatting to make it look like a heading. This means that it will retain this structure when converted so as to make it better for a reader. Many web design software (and wikis) have built in heading styles that you should use as well. Images as headings are therefore not recommended as they do not provide this structure.

Hyperlinking correctly

The thing that was really stressed was the importance of having hyperlinks that can make sense on their own and are very descriptive. The popular habit of having ‘Click here’ as a hyperlink is not useful for those using screen readers as you can list all the hyperlinks on a page in alphabetical order using the reader and ‘click here’ does not give any information about what you are going to click on. The information about where the hyperlink is going to take you should be in the hyperlink itself and not the surrounding text. I’ll give a copule of examples to link to my resource wiki to illustrate what I mean.

How NOT to Hyperlink for accessibility

  • To find resources on a range of web 2.0 tools from my wiki, click here.  (hyperlink itself gives no useful info on where it links to)
  • Click here for my wiki containing links to web 2.0 resources. (while the link contains a little more info, it is still not enough and would not be easy to find in an alphabetical list – especially with a lot of other ‘Click here’ links on the same page.

An appropriate way to hyperlink for accessibility

  • You can find a range of web 2.0 resources on my Web 2.0 and Software wiki. (descriptive and easy to find in an alphabetical list)

Alternative text for images and mulimedia

Another thing to make sure of is that all images that you load to a website have alternative text sitting behind them. On many websites (including Interact) you can enter alternative text for an image when uploading it to the site. This is also good for people with slow internet connections that might have images turned off when browsing. It also means that when a reader is reading the contents , someone without sight can still get an understanding of what those images contain. This also applies for when using graphs on a page. You should also have text that explains the key findings of the graph. The also suggest that you have transcripts where possible for multimedia such as videos.

Accessible PDFs

We also talked about the fact that PDFs are not low vision friendly. Basically, PDF files are an image of a document so screen readers can find these very difficult to read. I felt guilt as I listened thinking of the number of PDF files I upload to my wikispaces! Still, you can make a PDF file more accessible by creating ‘tagged’ PDFs where the tag provides a structural, textual representation of the PDF. You can find information on the WebAIM website on how to make accessible PDFs.

Making forms in Word

Kylie also talked about trying to fill in forms that have been created using tables in Word. She said that these are pretty much unusable for her but if people use the form function to create the form, then it is accessible. You can learn about how to use the form funcion in Word on this site.

Tidying up html when pasting from Word

One interesting thing we were shown is that when you copy and paste text from a word document into a website, it has a lot of unnecessary html code regarding some of the formatting within the word document which can throw some screen readers. The software we were using on the day had a tool included to clean up this kind of code but this is something just to be aware of when doing it in general. You can paste it in and then choose to view the html source in order to see what I am talking about. Interestingly, I had Office 2008 so when I pasted in the text, the code was clean as they have improved this in the latest Office releases.

Getting your website tested

The BLENNZ cluster have set up a team of Tech Angels from some of their low vision students and Dave Merton and Chrissie Butler said that they are often willing to give sites a test drive for accessibility. I am already planning to send them the links to a couple of my online spaces to see how they go though I think they may not pass with flying colours! I may have to do a bit of rethinking!!

Final thoughts

I found access to this kind of information very interesting and a worthwhile exercise and it is something that those of us that are lucky enough to have sight and hearing need to be aware of. Resources we create should be available for everyone that wants to make use of them, not just the 80% of the population that have no issues with accessing sites. It was inspiring watching someone make use of the web using a screen reader. It was also really interesting to learn about hardware interfaces for those with vision needs such as refreshable braille readers and braille keyboards. It blew my pre-conceptions about braille reading out of the water watching someone read just as quickly as I do with braille. This has opened up a whole new area of learning for me and I look forward to finding out more.

3 responses so far