Website Accessibility
Accessibility statements on personal websites and blogs are a trend, of sorts. Admittedly, when I first implemented access keys on a blog I had around 2004, it was to go along with the trend. More recently, I’ve developed an interest in creating an accessible website. My interest in website accessibility was piqued when I was browsing a Melbourne LiveJournal community I am a member of. There is at least one blind member in that community, and it made me think “Hey, I’m a Melburnian, and I want other Melburnians to be able to access and read my blog”. Previously, I guess I’d been naïve and thought blind people didn’t browse the Internet. I’ve since realised the error of my ways, and decided that people with any number of disabilities could browse my website.
The following is a list of features that can be easily implemented on a website to aid accessibility. It should be noted that I don’t have any special knowledge about website design or development (in fact, there could be some accessibility problems with this site), and this article is only a brief introduction, some of which may already seem extremely obvious, but I frequently come across websites that I find problematic, especially due to colour scheme. For more information, I have included some links at the end of the article.
Access Keys
Access keys are keyboard shortcuts for accessing different pages of a website. They benefit users who have impaired motor function (may have trouble using a mouse to click hyperlinks). On this website, the access key 0 directs users towards the accessibility statement, where they can find out how to quickly access main pages of the website. Access keys can easily be added to hyperlinks by adding an accesskey attribute to your a tag. Let’s look at an example, shall we?
<a href="http://www.etherised-patient.net" title="Main page" accesskey="1">Home</a>
The above is an example from this website, and has the access key 1 set to return users to the home page. To test it out, find out what the shortcut keys are in your browser, and add numeric key 1!
As far as I know, no browsers actually point out the access keys to the user, so it is important to make note of them on your website somewhere.
Relative Font Sizes
Using a fixed font size can be troublesome, as some browsers will not allow people reading your website to increase the size of the font on their monitor, which can cause trouble for users with visual impairments, or people who just want larger text. A solution to this problem is to use relative font sizes, which should allow all users to increase or decrease the font size on their monitor for easy reading, via their browser’s “View” menu or keyboard shortcuts. Here are some style examples:
Fixed (Bad)
font-size: 12pt;font-size: 16px;
Relative (Good)
font-size: 1em;font-size: 100%;
Alternative Text for Images
Some users, such as those who turn off loading of images (due to slow Internet or otherwise), or users with visual impairments who use a screen reader to read them the text, will obviously not see images on your website. The recommended solution here is to use alternative text for images, which provides a meaningful description of the image for those who cannot see it. Implementation is simple: all you have to do is add an alt attribute to your img tag. Here is an example:
<img src="me-yellow-shirt.png" alt="Me wearing a yellow t-shirt" />
If the image does not show, the alt text serves as a meaningful substite.
As a related aside, remember that alt text is not intended to be used to display further information about images. Information intended as a tooltip for images should be placed in a title attribute. Alternative text is intended as a substitute for those who cannot see the image.
Colour Scheme and Hyperlinks
Not distinguishing hyperlinks from body text is a website pet peeve of mine, and causes trouble for users with and without visual impairments. On this website, I implement two ways of distinguishing hyperlinks from body text (bolding and colouring). The use of a single method of distinguishing links can sometimes cause problems, for example someone with a colour vision deficiency may not recognise hyperlinks that are only coloured.
Similarly, the use of foreground and background colours that are too similar (such as light grey on a dark grey background) are so annoying for all users. My tip is to make sure foreground colours contrast with the background.
Linking Header Images or Text
Perhaps this is just my own personal preference, rather than a “rule” or guideline, but whilst browsing, I expect header images or text to be hyperlinked to the main page of a website, as I’ll (and I’m sure many others) intuitively click it to return to the homepage. Realising the title text or image does not link back the the main page can be a bother, especially when you have to root around to find a text link.
