Accessibilty issues for web content managers

Reasons for the post

These passed two days has seen me meet in Wellington for discussions about access to web content for all.
Many blogsand wikis and websites are constructed by the physically able and have very little regard for those individuals with hearing or sight impairments trying to access content. When I say “many blogs” I am including this blog as chief among them.
There are many differences you may or may not be aware of if you compare this post with many previously. In this post I hope to highlight some ‘best practice’ principals that I have learnt over these last two days.

Creating the right heading structure

First amongst the changes are the number of headings you’ll notice. When writing on the web, or in WORD, you may have noticed the ability to label text as ‘heading 1’ , ‘heading 2’, ‘heading 3’ and so on. As pretty as these may look they actually serve a more serious purpose. This type of heading structure assists those visually impaired to navigate through your article. Just as ‘chapters’ in a DVD enable viewers to scroll through a movie more quickly or select the scene they desire so the navigation tools scroll through the article using these heading 1, heading 2, heading 3 as markers or reference points to guide the user to the most relevant paragraphs for them.

Making links meaningful

Many screen reader navigation tools have ‘links’ as a scrolling option for users but in many cases they don’t receive the in information they most desire. Instead a the voice reading stating “Link, getting the most the from a webpage” or “Link, further reading supporting accessibility of websites” all the user will hear is a string of “Link, read more” or “link, click here” which gives no guidance as to the content found at the end of the link.
Therefore it is advised that ‘click here’ or ‘read more’ are to be phased out with links becoming part of the main body of text, comprising of complete sentences.

Annotating images for accessibility

Using captions effectively

Figure 1 Rusted car in long grass

We are going to stay away from the issue of copyright and ‘where did you get that image?’ and move straight to the features of the image of an old car in long grass (figure 1) you see to the right. The first thing you’ll see is that it has a caption with a title which links it to this paragraph you are reading right now. Captions add meaning and context to images.

Alt-text to support understanding

What you can’t see, unless you have screen reader on is the ‘alt-text’. In a nutshell the alt-txt or alternative text to give it its full title is a brief description of content of the image. Alt-text is only included if the image or information contained on the image is significant in its support of the main body of text.

Alt-text for bling

Otherwise it can be simply ‘bling’. This is where the content of an image is merely there for aesthetic purposes and contains no content to actively support the article. Still the writer needs to make a conscious decision to add alt-text for this image even if it is only the word “null” so that those using electronic readers can identify ‘bling’ and know they are not missing out on important information.

Captioning and transcripts for video presentations

Our responsibility for providing quality video examples does not simply rely on quality camera work or clever editing. You will notice with the embedded video below it has closed-captions options and an embedded transcript. Writing a transcript of a video can be time consuming and tedious, however, it is essential if we are going to ‘raise the bar’ in accessibility. Youtube has a built in feature which supports in creating the time-coded captions from the transcript.

Examples of good practice

Our inquiry framework is a sound example of video captioning and transcripts.

Transcript of youtube video

Today we arte going to be talking about accessibility for websites. Music. Whether we are responsible for writing a formal website or doing our own blog we need to be aware that there a certain group of people who access the internet in a different sort of way. They use screen readers and electronic Braille typers and all sorts of other different gizmos in order to access web content. Everything we post needs to be accessible. You know wen you are writing a blog post or you’re in some sort of editing tool you’ll notice at the top that it has by the side of font it has ‘normal’ ‘heading 1’, ‘heading 2’, ‘heading 3’ , normally it’s a drop down menu. Now these make your blog post look really, really pretty but they actually serve a more serious purpose. If someone is using a screen reader access your website then these headings clearly demarcate and help them to navigate through your website. That’s the way they skim and scan through your document. When one of those electronic voice, activation, tool, things. Stop captions now. When they are being used. One of the ways of navigating is to click through the links on a page. Now if we always write ‘read more’ or ‘click here’ or ‘see more’ and use those turns of phrases for our links that ‘s all they are going to here. And its going to make no reference at all to where that link ends up. So we need to get rid of those things and we need to basically make the link either a whole sentence or a portion of the sentence that when it is read by the screen reader they have a clear indications as to where that will take them. The next thing we have is what we have to do with images. It blew my mind when I was in the session. Essentially, there are captions, and descriptions and alt text. Alt-text is the one, you when you hover over an image and it comes up in maybe a yellow box or something like that. Sometimes it appears like that, and sometimes it doesn’t appear at all. It either needs to be a full bright sentence to describe what’s going on in the picture and why it is useful to the main article or it simply needs to read null. Or something like that. So its basically bling on your site. And when the screen reader goes through and the user is there they know that the image is just there to be pretty and I’m not missing out on anything to do with the main article and I’m just skipping passed this image. So now we’ve come to the portion about, well, basically, this video. Because what I’m hoping to do. First of all you should have been seeing captions of everything I’ve said. I’m not sure how they are going to spell *rasp* There should be a transcript attached to this post. Ok so, there is going to be more helpful links in the shownotes below. Don’t forget the closed captioning that we’ve got and don’t forget to subscribe at the top and good luck. Music.

Useful links

Web aim is about information, training, resources, guidelines and standards for Web accessibility and disability access to the Web.
The World Wide Web Consortium (W3C)  is an international community that develops standards to ensure the long-term growth of the Web.
WAVE  is a free web accessibility evaluation tool provided by WebAIM.

Tweet