ilikecake
accessible website design & development
by Vivienne Trulock
While web accessibility is not necessarily restricted to being concerned with disabilities, it is nonetheless necessary to examine the range of human abilities and disabilities and to design with them in mind. The term disability is an umbrella term used to describe a range of very different conditions, defined variously as:
(Irish Government, 2000, p.5-6; Disability Rights Commission, 1996)
Disabilities can fall into several non-exclusive categories:
There are several different types of visual impairment, ranging from medically or functionally blind, through partially sighted and also including colour-blind individuals. Each of these disabilities has a different effect on how a disabled person with that particular visual disability uses computers and the Internet.
Completely blind individuals have several options available to them whereby they can access and navigate the internet. Screen reader software programs read aloud on-screen text and facilitate keyboard navigation. JAWS is the most popular screen reader but others available include Window Eyes, SuperNova, Hal, Outspoken and Narrator. Some blind individuals, particularly those who are also deaf, use refreshable Braille displays, where the onscreen information is dynamically transformed into Braille via an external device. Other available technologies include speech synthesizers which are external hardware units, and Voice Browsers such as Home Page Reader.
Screen readers however, can only work with the website as it is designed. Improper use of tags and attributes may affect the usability of the site. For example, images and multimedia cannot be described by a screen reader without the presence of additional ‘alt’ text.
Users of screen readers may also have difficulty visualising complex or poorly coded tables and frames. In particular, older screen readers may read across columns of text resulting in nonsense output (Speir, 2000, para.5). Jaws also serialises the page content, removing multiple columns and displaying the page in one column from top to bottom, in the order in which it encounters the tags in the html code, (Andronico, Buzzi, Castillo & Leporini, 2006, p.12) therefore the order of the serialised content is critical. The most important elements such as main content, search results or search facilities should appear first.
Blind users are unable to use a mouse to point and click as they cannot tell which page elements they are pointing at. For this reason it is important that keyboard navigation is facilitated. Blind users can use tab keys, access keys and skip-link shortcuts to navigate. In addition, blind users cannot use positional layout or colours to infer meaning (such as which text is linked), so elements need to be self explanatory. This is aided by the correct use of headers, titles, labels and alt text (Andronico et al, 2006, p.12).
Crowded interfaces are difficult and time consuming to use and navigate by blind users because of the increased page complexity (Buzzi, Andronico & Leporini, 2004, p.3). Where sighted users can easily discard irrelevant information, such as advertising, blind users must investigate each element in turn to ascertain its usefulness. Time saving devices such as skip-links, correct ordering of headers, table summaries and captions and a layout with the main content to the top and the navigation to the end can help blind users to locate the desired content quickly and efficiently (Takagi, Asakawa, Fukuda, & Maeda, 2004, p.3; Andronico et al, 2006, p.13).
With the introduction of CSS2 came aural style sheets with properties such as speak, play during and speech rate (W3C, 1998), while a CSS3 speech module is also currently available in draft format (W3C, 2004). In theory at least, web designers can use aural style sheets provided by CSS2 specification for making web content more usable and accessible to blind people. This may be particularly useful in the case of a skip-to-main-content link which is only necessary for blind individuals, and irrelevant to the sighted audience. However, user tests may be needed to ensure that the aural style sheets do not interfere with screen readers’ normal workings. A full list of the checkpoints which must be fulfilled for a website to have full functionality for blind individuals is available in Appendix G.
Many different factors can result in some loss of vision the range of which includes visual acuity, contrast sensitivity, ability to see and track moving images, visual field defects, sensitivity to glare and lack of ability to change focus (Chiang, Cole, Gupta, Kaiser & Starren, 2005, p.7; Scottish Sensory Centre, 2005c).
Visual acuity is a measure of the eye’s ability to distinguish detail and shape at a particular distance (Cassin, 1990). Normal visual acuity is 20/20. This means that it is possible to see, at a distance of 20 feet, the same level of detail as the average person. Visual acuity of 20/200 renders the individual legally blind. A person with a visual acuity of 20/200 can see at 20 feet what the average person can see at 200 feet (ASU, 1996, para.2). Visual acuity of approximately 20/50 allows individuals to read a standard computer screen, however this can vary with specific screen sizes and resolution settings. On average then, a person with 20/200 vision would need a screen magnification four times larger than the 20/50 individual (Chiang et al, 2005, p.7). This means that it is possible for a legally blind individual to read web pages, once they have magnification technology. Magnification software tools available include ZoomText and Lunar. It is also possible for users to increase font size using the ‘View>Text Size>Larger / Largest’ options available in Internet Explorer if the text size is specified by that page author using a relative format, such as %, ems or small / medium / large. It is not possible to use this facility if the text size is specified in pixels.
Individuals with poor contrast sensitivity will find it difficult to read text on backgrounds which contrast poorly with the text colour itself. Black text on yellow background is a good contrast where blue on grey is a weak contrast (Scottish Sensory Centre, 2005b). Website designers need to take care when creating the website colour palette to use colours which are sufficiently contrasting. It may also be necessary to remove ‘wallpaper’-like backgrounds, as it is more difficult to accurately predict the readability of the page for contrast-sensitive individuals where multiple colours are used in the background.
The ability to see and track moving images and text can be a problem for some people, particularly those with blind spot or eye muscle problems (Scottish Sensory Centre, 2005d). Web designers should take care not to use moving text, particularly for text which is important, or where they do, they should also provide either a method of stopping the text or an alternative non-moving version. Images which show movement (such as video, or animated gifs), where they are necessary for informational purposes should have an option to view frame-by-frame which can be controlled by the user.
The visual field is the area which can be seen by the individual when looking straight ahead. Problems with the central and peripheral visual fields mean that the individual may not be able to see parts of the screen correctly. This is exacerbated where text contrasts poorly with the background or text is moving. The user may also need to adjust the space across which the text flows to optimise it for their particular eyesight, (Scottish Sensory Centre, 2005a) so tables, frames and divs need to be resizable i.e. defined as a percentage of the screen rather than an absolute number of pixels.
The final two issues (sensitivity to glare and lack of ability to change focus) can only be corrected by the user themselves by attention to their environment and therefore cannot be addressed by the website designer. A full list of the checkpoints which must be fulfilled for a website to have full functionality for partially sighted individuals is available in Appendix H.
Another form of visual impairment is colour blindness. This is quite a common affliction affecting 8% of Caucasians, 5% of Asians and 4% of Africans. The gene involved is a sex-linked gene, which means that it is found on the X-chromosome.
Individuals with one good copy of the gene will see normally but those with no good copies will be colour blind. As females have two copies of the X chromosome, their chances of being colour blind is quite small (0.5%). Males, having only one X chromosome, are by far the majority of colour blind individuals (WebExhibits, 2005).
There are different ‘flavours’ of colour blindness: protanopia, deuteranopia, and tritanopia. Protanopia and deuteranopia are both forms of red-green colour blindness, while tritanopia is a form of blue-yellow colour blindness (Vischeck, 2002). Colour blindness may need to be considered by the website designer where they are using a particular colour to denote a particular characteristic – for example, items on sale at a reduced price are often denoted by a red star or button. While red is a vivid colour to normally sighted individuals, to protanopic people, certain shades of red can appear almost black. When using red on a dark background, it is better to use particular shades of red such as vermillion, or to replace red with magenta. Colours with low saturation of colour are more difficult to distinguish even though colour blind people tend to be more sensitive to differences in brightness and saturation. One simple solution is to contrast the brightness of the colours as well as the hue and to use redundant coding in charts and graphs by using different hatched fills as well as colours (Okabe & Ito, 2002). A full list of the checkpoints which must be fulfilled for a website to have full functionality for colour blind individuals is available in Appendix I.
Deaf and Hearing Impaired individuals have only recently begun to have problems online due to the increasing trend away from purely visual ‘text and image’ websites towards a multimedia environment. These multimedia websites often have either sound or video with sound, neither of which are available to deaf or hearing impaired individuals without captioning or subtitles. Captioning can be provided very simply via a link to a text version of the audio (Paciello, n.d.). Some deaf and hearing impaired individuals are also blind, so the information should also be readable by screen reading software. Some assistive technology is available to deaf and hearing impaired individuals including voice-to-text translators and signing avatars. A full list of the checkpoints which must be fulfilled for a website to have full functionality for Deaf and hearing impaired individuals is available in Appendix J.
Problems can arise for individuals with physical impairments in using computers, when the use of a mouse or fine motor control is required. Physical impairments where use of a regular mouse might be difficult or impossible include amputated or broken arms, arthritis, Cerebral Palsy, Repetitive Motion Syndrome, Parkinson’s Disease and temporary paralysis due to stroke or permanent paralysis due to spinal injury.
Physically disabled people however can use a range of assistive devices including alternative keyboards, virtual keyboards, large pointing devices such as tracker-ball or joysticks, voice recognisers, eye scanning software, sip and puff mechanisms, mouth sticks, head pointers and infrared devices. Some may prefer to navigate by voice using speech recognition software such as Dragon NaturallySpeaking or ViaVoice.
The web designer should ensure that navigation via keyboard is facilitated, and that information is clearly displayed, as eye and head movement may be limited (Paciello, n.d., p.3). A full list of the checkpoints which must be fulfilled for a website to have full functionality for mobility impaired individuals is available in Appendix K.
Many of the design issues that apply to the cognitively impaired apply equally well to novice users or children, and the design issues here are primarily usability rather then accessibility issues. Cognitive impairments can be caused by a range of conditions including autism, Parkinson’s Disease, Alzheimer’s Disease, old age, brain injury and mental retardation. Learning impairments include dyslexia and attention deficit disorder (ADD). A full list of the checkpoints which must be fulfilled for a website to have full functionality for cognitively impaired individuals is available in Appendix L.
Cognitive and learning impairments may affect an individual’s ability to understand or interact with a website’s content. The web designer should keep this in mind when writing content. A cognitively impaired individual may not understand certain words when reading them where comprehension of the spoken word is likely to be higher than the written word (Poulson & Nicolle, 2004, p.1). For example, in a recent website user evaluation conducted by the author, the user was asked to find some accommodation on the site. Although the user understood the word ‘accommodation’ in an aural context, when searching the site he claimed not to be able to find any accommodation, even though the word ‘accommodation’ was in the navigation bar and he had used the navigation bar previously. When asked what he was looking for he replied ‘Hotels, but I couldn’t find any, so then I looked for flats and houses’. The site was redesigned and the word ‘accommodation’ was supplemented with the phrase ‘places to stay’ (personal communication).
Site navigation can also be difficult for novice and cognitively impaired users, and they can get lost in the site when the navigation is complex. The use of the breadcrumb trail can be helpful here as it provides a series of links back to the site ‘root’ or home page, so a user can trace back their path. However, breadcrumb trails may only be useful in a hierarchical or linear site, where each page has a single path from the index page. It may not be appropriate in a webbed site where there are multiple paths to a particular page, or where there are similar pages with different paths.
Users may also become confused as to which pages they have visited, and which pages they have not yet visited. The default link colours help the user to understand which links they have clicked on, as they change from blue to maroon when used. Web designers should take care not to disrupt this feature. Links should be blue and underlined, however it may be possible to change the shade of blue and dash underline without affecting usability. It may also be possible to use links coloured other than blue where the navigation area is clearly defined. The web designer should not, however, make links and visited links the same colour as this negates the visited link feature (Nielson, 2004).
The phrase ‘a picture is worth a thousand words’ is an important concept when designing with children or the cognitively impaired in mind. Poulson & Nicolle, (2004, p.52) claim that images are a crucial medium of communication with cognitively impaired users and they therefore do not recommend text-only versions of sites.
‘Dyslexia is a specific neurological learning disability, characterized by difficulties with accurate and/or fluent word recognition and poor spelling and decoding abilities’ (International Dyslexia Association, 2002, para.1). Children and dyslexic individuals may find it difficult to use search boxes and a misspelled word may not return any search results. A simple solution when creating a dynamic site is to allow the search box to search the ‘keywords’ field, and within this field to include some common misspellings. This allows dyslexic users, both on the site and when using search engines, to retrieve search results even where a word is misspelled. Another solution may be to provide a drop down menu with links to commonly visited pages.
Attention deficit disorder is a neurological disorder characterised by inattention, hyperactivity and impulsivity. Individuals with Attention Deficit Disorders can find it difficult to concentrate when a web page is very busy with animated gifs or flash content. Other users can also find constant animations within their peripheral vision (such as rotating logos) distracting. Peripheral vision allows creatures to effectively scan for danger, so movement in this area of vision is particularly bad (Nielson, 1995).
Web designers should remove unnecessary animations, and allow the user the control to both start and stop remaining animations. An acceptable compromise for those designers who want to show off their animation skills may be to have an initial animation once the page has loaded, which rotates or plays through once and then stops.
Studies of accessibility levels are important as they provide feedback on the effectiveness of current accessibility policy (McMullin, 2002, p.7). They may also raise awareness of the accessibility issue and inform future decisions regarding accessibility policies.
Of the 18 studies examined for this evaluation, 14 used Bobby, 2 used LIFT, and InFocus, aPrompt, Torquemada, Cynthia and WebMX were each used once (Tables 1-6). One study did not use an automatic tester and some studies used more than 1. Most studies reported a failure rate for compliance with WCAG Level A to be at least 60%. Where Level AA was checked, compliance was even worse, with more than 93% of sites failing to meet this level.
The simplest studies simply ran web pages through an automatic tester and published these results (Sullivan & Matson, 2000; Jackson-Sanborn, Odess-Harnish & Warren, 2001; Kelly, 2002; McMullin, 2002; Williams & Rattray, 2003; Spindler, 2004; Loiacono & McCoy, 2004; Ellison, 2004). The problem with this method is that no automatic tester can test a site for compliance with all checkpoints, as some checkpoints require manual testing by a person who must make a judgement as to whether the checkpoint has been passed or not. Therefore, it is impossible to judge whether a site has reached a certain level of compliance using this method. It is only possible to claim that a site has not complied, when it has failed an automatic check. The failure rates ranged from 56% to 94% for Level A Compliance, 93% to 100% for Level AA Compliance and all studies reported 100% failure rates for Level AAA Compliance (Table 1).
Other studies only undertook manual inspection (Huang, 2002). However, it is possible that the testers missed some errors which the automatic software could have picked up. Huang reported that 100% of sites failed to comply with Level A (Table 2). It appears that the manual inspections may be more stringent than automated testing.
| Authors | Number of sites | Testing tool | Failed A | Failed AA | Failed AAA | Failed 508 |
|---|---|---|---|---|---|---|
| Huang (2003) | 35 | - | 100% | - | - | - |
More elaborate studies made attempts to check web pages both manually and automatically (Shindler, 2003; Lazar, Beere, Greenidge & Nagappa, 2003; Chiang & Starren, 2004). The advantage of this method, is that if it is done correctly, an accurate reading of compliance is available for each site. Unfortunately, manual checks by their nature can be subjective and it can be difficult to ensure that the same criteria are applied to each page. In addition they are very time consuming. Failure rates were higher in general for these studies than for those using automated testing only, ranging from 70% to 98% failure for Level A compliance and 100% failure for Level AA (Table 3).
Of course, compliance with the guidelines is still only an indicator of accessibility, and though compliance is what is required legally, this does not necessarily ensure true accessibility for real disabled users. Some studies preferred to focus more on the user experience than simply compliance. In these studies, in addition to automatic testing, a user experience was simulated by the testers through the use of screen reading software, magnification software, disabling style sheets and scripting etc (Erickson & Bruyère, 2002; Ma & Zaphiris, 2003). This has the advantage of giving the researchers an understanding of accessibility in a real world environment.
However this can be difficult to quantify in a meaningful way. Failure rates ranged between 38% and 79% for Level A compliance (Table 4).
Other studies undertook both automatic and manual testing in addition to user simulation (Thompson, Burgstahler & Comden, 2003; Bowen, 2003). This has the advantages of attaining a real compliance rating and also an understanding of the real world experience of the user. However, all studies using simulation methods have the obvious limitation that ‘non-disabled people are not very good at pretending to be disabled’ (Clark, cited by Mankoff, Fait & Tran, 2005, p.2). Compliance failure ratings for Level A ranged from 60% to 72% (Table 5).
Only 2 studies have compared their automatic and manual testing results with a real user evaluation to ascertain how effective the accessibility testing has been (Buzzi et al, 2004; Disability Rights Commission, 2004). This is the ultimate in accessibility testing as it gives an accurate compliance rating alongside real user feedback. Failure rates for compliance with Level A were similar at 81% - 85%. 99.8& - 100% failed to comply with Level AA and again, 100% failed Level AAA (Table 6).
The Disability Rights Commission (2004, p.12) claimed that 45% of user problems were not a violation of any WCAG 1.0 checkpoint and therefore could have been present on any WAI-conformant site irrespective of accessibility rating. Several studies reported that although the actual compliance levels were low, many sites in fact were ‘almost’ accessible with only a little work required to render them compliant to Level A (Erickson & Bruyère, 2002, p.16; Sullivan & Matson, 2000, p.142). Violations of just 8 WCAG 1.0 checkpoints accounted for 82% of the problems that were covered by the checkpoints (DRC, 2004, p.31).
Of course, compliance with the guidelines only indicates just that, compliance. There is the possibility that site may not be technically compliant, but for many people they may be quite accessible. There are ‘degrees of accessibility’ (Williams & Rattray, 2003, 715). It is possible to investigate the extent to which websites are almost complaint, assuming that one instance of an accessibility issue does not necessarily render a site inaccessible.
There are some interesting ways to do this. Sullivan & Matson (2000, p.141) computed the ratio of actual points of failure to potential points of failure for a particular page, and then multiplied that percentage by the page's potential points of failure to compensate for the difficulties involved in ascertaining ‘true’ accessibility, assuming that a page with one alt-less image is more accessible than, for example, a page with 20 images, where only 15 images have ‘alt’ text. Using this method of ascertaining accessibility it is possible to map a continuum of accessibility across sites, rather than a discrete binary choice of being WCAG 1.0 compliant or not. While this method is reasonably robust it does not account for some ‘points of failure’ being significantly more critical than others, as it gives each an equal weighting.
Hackett, Parmanto & Zeng (2004, p.34) use the Web Accessibility Barrier (WAB) Formula to assign a numerical value to a web site. The higher the WAB value is, the less accessible the site is. Conversely, a low WAB (less than 5.5) indicates that the site scores highly for accessibility and indicates better conformance to WCAG 1.0 guidelines. The WAB score is attained by using the following formula:
WAB = (Total pages on a website X total violations per page (Number of violations / Number of potential violations) X weight of violations in inverse proportion to WCAG priority levels) / total number of pages checked (Parmanto & Zeng, 2003 cited by Hackett, Parmanto & Zeng, 2004).
The WAB method, unlike that used by Sullivan & Matson, does take account of the value of each violation. However, some drawbacks to using the WAB formula include it’s meaninglessness to anyone who doesn’t understand how the formula is computed – it is reductionist and like many such methods, rather than clarifying the issue, it actually seems to cloud it more, by introducing another level of complexity and required understanding. Also, its dependence on the WCAG priority levels means that it is a skewed result which assumes that priority 3 checkpoints actually are less important than priority 2 and priority 1 checkpoints. Not enough research has been done with real users to ascertain if this is actually the case.
The method used by Lazar et al (2003) is non-reductionist, and yet simple, involving a simple clustering of numbers of checkpoints violated as shown in Table 7 below. It has the advantage for the designer and the client of identifying clearly how much work is likely to be involved in upgrading the site for it to be accessible. Lazar only analysed websites to Priority 1, and this is why the numbers shown in the table are quite low and all of equal weighting.
Table 7 - Checkpoint Grouping Method for Analysis of Partial Accessibility (Lazar et al, 2003, p.9)
While this does not yield a continuum of sites, it does clearly demonstrate which sites are accessible, which sites are not and which sites are nearly so. However, it clearly takes no account of how often these rules were violated, so a page with 1 alt-less image would be rated the same as a page which had no alt text on any images. Sullivan and Matson were looking at the difficulties encountered by the disabled in using the site where every instance of a violation is a problem, whereas Lazar et al were concerned with the developer’s point of view and how easy or difficult it would be to make a site accessible.
previous - nextCheshire Ireland
Ballyfermot College of Further Education (BCFE)
Vivienne has recently become a member of the Guild of Accessible Web Designers. View Vivienne's GAWDS profile.
Colour Palettes help you to design your website more easily.
Seasonal Palettes are now available.
A Comparative Investigation of the Accessibility Levels of Irish Websites
- accessible HTML
- Word format (.doc)
|
|
|