Writing for the web means complying making your website accessible to blind or partially-sighted web users who may be using screen readers.
It is not just that your site may fall foul of the Disability Discrimination Act – if you are providing services to the public – but because there are ethical and logical reasons to do so. Why would you not want as wide an audience to be able to read your website, after all?
Forget all the techy stuff behind the scenes. For writers who input copy into a CMS and attach a photo, making the website accessible is simple.
Subheading style
You must make use of the cascading style sheet (CSS). That means that if you put in a subheading, don’t just bold it, but use the relevant heading style. In code these use different <h> codes with the sizes getting smaller each time.
Your CMS may simply have a subheading style or, in WordPress, for example, you will have decided which heading size to use. You then highlight the subheading and use the drop down menu to select the heading size you want.
By using the heading style within the CSS, screen reader software, such as Jaws, will tell the user that it is a subheading. This enables them to skip to the next subheading, just as a sighted reader might do. Using bold instead of headings does not give that information.
Hierarchy
The correct use is that on each page the heading should go down one level of the heading hierarchy. So if you only have a main heading and a subheading the subheading should be in <h2> code. Going straight from <h1> to <h4> will be a bit confusing.
But most blogging software does not have much choice in that. Without changing the CSS for each page, we’d end up having different size subheadings. I find that means subheadings are usually in about <h3> or <h4> sizes. It is a compromise, but better than using bold instead of headings, as at least the screen reading software says it is a heading.
Here are the first five headings in the CSS for this WordPress theme:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Those who can see it would agree that Heading 2 is too close in size to Heading 1 for a subheading, wouldn’t you? I use heading 4, here and on AOL’s Daily Finance.
But at least WordPress has a drop-down menu from which you select the heading style. In AOL’s Blogsmith, you have to go into the source code and add the <h4> and </h4> tags around the words. This is all extra work for the writers, but a vital part of trying to make our sites accessible.
Alternate text
When inserting images – or including pie charts or graphs – writers need to add an alternate text description. This should give someone who cannot see the image the same basic information as those who can see it.
For a head and shoulders shot of someone quoted in your piece, just the name of the person will usually do. But if you have a photo of Richard Branson smiling and a caption saying “laughing all the way to the bank” then the alternate text must say: “Richard Branson smiling”.
A company logo need only have “X company logo” usually too. Though you might put “Legal & General logo of multicoloured umbrella” because there is a recognisable image there.
A picture paints a thousand words
Scenes need a short description – a few words with keywords as early into it – “iPhone in hand” for example. Paintings, or award-winning photographs, will need a much more detailed description so the listener But most alt texts need to be very short, with keywords up front.
Graphs and pie charts may need more thought in the description. You need to convey the numbers shown. But a graph is often used as simple way of illustrating something so the alternate text may just be “graph showing profits rising from 10 to 450 over 12 years”.
Opening new windows
And we put links in our stories. The RNIB advises against opening new windows but accepts websites will have valid reasons for doing so. If your links are to open new windows (perhaps because they leave your website, for example) we need to tell the user that.
You can either put all links in one place and state clearly that all the links will open new windows, or you can put (new window) at the end of each link that does so. Failure to do this leaves a partially sighted user clicking the back button and wondering why it won’t work.
For most of us who write for the web and are not designers, that is all we need to do to help make our website more accessible. It is so little extra work that there is no excuse for not doing so.
Thanks to the Royal National Institute of Blind People (RNIB) for all their help with this.
