What is Web Accessibility
Web accessibility is all about enabling people with disabilities to use the web or use it more easily. In addition to those with permanent disabilities there are many many people with temporary impairments. Aging populations add to the numbers of those with difficulties. I would hazard a guess that at any one time there would be at least 20% of web users with some sort of problem that reduces their ability to use the internet to one degree or other. That does not include those, like me, who sit in front of this machine for so long they get eye strain!!
- One in 12 men and one in 200 women have some form of color blindness.
- “An estimated 15-20% of the population has some sort of language or text comprehension difficulty”. – Cognitive Disabilities on the WebAim site
- There are over 30 million people in the US over 45 with some form of vision impairment and “the number of people in the United States with impaired vision – including blindness – could increase by at least 60 percent over the next three decades” – Economic Impact of Vision Problems in the U.S. Estimated at $51.4 Billion
As bloggers we can use techniques and tools to make sure our blog is easy to ‘read’ (by sight or screen reader), understand and navigate.
Although bloggers are at the mercy of programs we have no control over, or we have little knowledge of how to change parts of it that can be changed, there are some simple measures we can put in place. Many of these techniques make sense for use on blogs even if we are not considering them for accessibility purposes – for readability, SEO (Search Engine Optimization) and browser compatibility reasons.
Language and Writing
- Use the clearest and simplest language appropriate for a site’s content.
- Avoid slang, jargon, and specialized meanings of familiar words, unless defined within your document – not only for accessibility but for international readers who do not understand the lingo.
- Avoid complex sentence structures – anyone could be confused or lose interest reading these.
- Use clear and accurate headings and link descriptions – also good for SEO and those who like to skim when reading.
- State the topic of the sentence or paragraph at the beginning of the sentence or paragraph. This will help both people who are skimming visually, but also people who use speech synthesizers. – especially good for using keywords for SEO in your first paragraph.
- Use a clear understandable navigation system. Helpful to keep any readers on your site longer.
- Use headings and lists – improves readability for all.
- Avoid clutter and use plenty of clear space – this always makes a site easier to read.
- Make sure of good color contrast so that text stands out well from backgrounds – this is kind on anyone’s eyes.
- Be aware of readers with color blindness in aspects where color can cause an element to be unreadable – for example use image descriptions or captions.
- Use text equivalents for describing images and links – use”alt’ tags on images, use titles and or “longdesc” – good for those using screen readers as well as for SEO purposes. (I will do a post explaining how to add these elements soon)
- Use a readable size font (please use a readable size font – it bugs me having to change browser text size for just one site and I am sure I am not alone in this.)
- Use valid coding in your posts and CSS styling and in any other template coding you may do.
- Blind users of the web often use a screen reader to read the contents of a web page out loud. Important components of your page should work without a mouse.
- Pull down lists and rollovers etc depend on mouse action for interpretation.
- If, as is increasingly common, you use video on your blog consider adding an explanation of what it is about, or include written transcripts, for those who are deaf, have other hearing impairments or use screen readers because of vision problems. Consider this for those readers who prefer to read text quickly rather than spend much more time watching or listening to a video too (I am one of those – If I come across a page with a video tutorial I will go somewhere else for answers as transcripts are not common)
- Avoid flickering images or videos – Epileptic users must always be careful to avoid seeing flickering between 2 and 55 Hz
- Scrolling text and blinking icons can be a hindrance for those with attention problems – they can really bug many other people too.
- Some people even without a disability are visual learners – images with the correct tags assigned to them can help many – they add interest and color to a page too as long as they are not used in excess or combined with clashing backgrounds.
- However intelligent your audience do not assume they can read really well.
To help you understand:
- from Core Techniques for Web Content Accessibility Guidelines 1.0 “A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?”
- Try navigating your site using keyboard alone and check how easy or hard it is to do.
There are more complex considerations – if you are interested in pursuing the topic further you could take a look at
Website Accessibility Tools
There are various tools available, to use online or as free download programs, to help us make our sites accessible – here are some examples which would be useful to most bloggers.
- Vision Australia’s Web Accessibility Toolbar – has many tools to check your site including many that are also stand alone tools provided by other sites. This is worth having for other reasons than accessibility too – e.g. validating your code, showing the source code of a page in notepad.
- AccessColor is a free online tool which analyses the internal and external CSS of a web page to test the color contrast and color brightness between the text and background colors.
- Accessibility color wheel A tool that helps in the choice of a color pair (text/background) to use in a web page. It simulates three kinds of color blindness and it shows the result of w3c algorithms, that compute contrast and difference of brightness, applied to the chosen colors. The accessibility color wheel shows if the color pair is “good” from an accessibility point of view.
- Color Blindness Check – re-colorizes any webpage you like into a palette that closely resembles the typical palette available to a person having a red/green color vision deficiency.
- The Color Contrast Analyzer Firefox extension
- Colorblind Web Page Filter – check your page for color blindness accessibility Color Laboratory – allows you to select colors and see how they appear next to one another, and in various foreground/background combinations. It also allows you to see those colors as they might appear to color-blind users.
- ColorDoctor from Fujitzu – a free downloadable Windows program that checks accessibility from the aspect of color. It converts any images displayed on the your screen, into gray scale or colors that person who has color blindness perceives.
- Microsoft Office’s ‘show readability statistics’ option in spell check.
- Juicy Studio – readability checker
- IBM’s downloadable programaDesigner - a disability simulator that helps pages are accessible and usable by the visually impaired.
- AnyBrowser AnyBrowser.com – check to see if your site is compatible with any browser, view site at various screen sizes, check html validity.
- CSS Validation Service – checks your style sheets for errors.
- AccessValet – This tool analyses HTML and XHTML pages. Reports deprecated (outdated) and invalid markup, and violations of accessibility guidelines.My site failed this one partly because of using IFrames – used in sidebar for widgets – to speed up page load time.
Making sure your blog is as accessible as possible has benefits for all your readers, not only those with disabilities – pages will be easier to read, easier to navigate, and faster to download. You will benefit from the incorporated SEO techniques. Sounds like a win win situation to me.
I am going to use some of the tools I mentioned on this blog now to see where I have to make adjustments.