Ranjit Dhillon Shares Expert Knowledge On Designing sites For Web Accessibility, Disabled People, Disability, Blindness, Poor Eyesight, Colour Blindness, Deafness And Epilepsy customers.

  • Timeline Icon

    The use of the web is spreading rapidly to all areas of society

    • There are currently many barriers on the web for many types of disabilities and there are millions of people with disabilities that have limited access to the web.
    • Improving web accessibility has carry-over benefits for other users.
    • An inaccessible website shuts out many potential customers.
  • Timeline Icon

    How the web affects people with disabilities

    • Online and mobile is the fastest-adopted technology in history. For people with disabilities, it’s sometimes a “mixed blessing”.
    • They are replacing tradition sources of information such as schools, libraries and printed materials, a lot of which are inaccessible. The Web is becoming a key, but sometimes inaccessible, resource for news, information, commerce, entertainment, classroom education, distance learning, job searching, and workplace interaction, civic participation — laws, voting, government information and services.
    • An accessible online presence will mean unprecedented access to information for people with disabilities. 10% to 20% of the population in most countries have disabilities and the National Institute on Disability and Rehabilitation estimate that 10% of the online population is disabled.
    • However not all of those disabilities will affect online access. Vision, hearing, dexterity, short-term memory problems do affect access, but difficulty walking, heart condition, etc., don’t affect access.
    • The average age of population in many countries is increasing. This ageing sometimes results in combinations of accessibility issues such as vision and hearing changes, and changes in dexterity and memory. Few organisations can afford to deliberately miss this market sector.
  • Timeline Icon

    Accommodating disabilities

    There are four key disability groups that can be affected by web accessibility

    • Visual
    • Hearing
    • Physical
    • Cognitive/neurological
  • Timeline Icon

    Visual disabilities

    Visual impairments can range in magnitude from merely annoying to truly catastrophic. But most people either suffer from some form of vision impairment, or else they will, at some point in their lives. Much visual impairment is relatively simple for a Web author to accommodate.

  • Timeline Icon

    Using ALT tags

    Creating effective ALT text for inline images is a key element in creating a usable, high-accessibility Website.

  • Timeline Icon

    Audiences for ALT Text

    Like all communication, effective ALT text tries to keep in mind its intended audience.

    There are at least three prospective audiences for ALT text:

    • Sighted readers who browse non-graphically
    • Blind and sighted readers alike who access a page using audio-based browser technologies
    • Automated indexing programs that recognise and utilise ALT text as part of the page’s contents
  • Timeline Icon

    ALT Techniques

    Keep them short (especially inside tables) as many browsers treat ALT text as one long line of PRE text – no word-wrapping or line breaks. In many browsers, overly-long ALT text can ruin page-formatting for sighted readers browsing non-graphically.

    This is especially true in tables-based pages, where overly long ALT text can quickly render a page un-navigable.

    Meaningless ALT text is probably worse than no ALT text at all. For example, one site ALT- tags every image with a lengthy and elaborate copyright notice. Imagine the joys of listening to a page that says: Yellow inline bullet image Copyright 1996 Our Company All Rights Reserved over…and over… and over…

    Then too, it’s important to have ALT text that is meaningful. ALT text that is meaningful in isolation helps guide readers to your page via automated indexers that read and understand ALT text. Take for example an image that depicts the members of England’s Queen Elizabeth II and her family. For such an image ALT=”England’s Royal Family” is preferable to, say ALT=”windsor.gif – 10.2 K”

  • Timeline Icon

    Discard decorations

    In this context, “decoration” really refers to two things: truly decorative images (which convey no content), and buttons, bullets, dividers, etc. (which don’t convey content, but do help to organize existing contents).

    For images that convey no content, an empty ALT tag (that is, ALT=””) will effectively discard these decorations.

    For buttons and bullets, a simple ALT=”*” does the trick nicely. Similarly, ALT=”————-” works well for separator bar graphics (though a simple tag transmits much quicker and doesn’t require ALT text).

  • Timeline Icon

    Include embedded spaces and separators

    You can capitalize on the PRE attribute of ALT text to ensure its readability. For example, take a HYPERLINK “35251.html” l “pmaps” made up of two gifs: ”up””down”

    The ALT text for this p-map renders as a single word: “updown,” whereas renders as two distinct words: “up down.”

  • Timeline Icon

    Testing ALT Tags

    To inspect your ALT tags, simply disable image-loading in your favourite browser, and tour your site. HYPERLINK “” to download a useful tool that can identify any images that don’t have ALT tags on a web page.

    To hear how your pages sound to audio-based browser technologies, simply read your page aloud, left-to-right, top-to-bottom. If you encounter an image without an ALT tag, say the word “image.”

    This test can be a very instructive exercise; sites that rely heavily on spacer graphics sound a little like this:

  • Timeline Icon

    Avoid using absolute font tags

    Readers whose vision is limited may set their browsers to display text in a certain size or typeface that they find particularly legible.

    Using absolute font tags puts you in the unenviable position of arguing with your readers about what type sizes and styles they find most readable. Trying to substitute your judgement for theirs is presumptuous, at best.

    Conversely, relative font tags, such as BIG and SMALL, when used sparingly and appropriately, can help your readers to focus on key points of content, while enabling them to gloss over less important items

  • Timeline Icon

    White space

    For reasons that are completely enshrouded in mystery, many Websites seem to have a severe allergy to white space. (It sometimes seems as though a blank line is viewed by some authors as a fundamental faux-pas.) It’s sensible enough for a commercial site to try to cram as much advertising as possible.

    But a content-driven site can’t possibly include all its content into 170 or so square inches of screen. Once scrolling becomes inevitable, liberal use of white space becomes a necessity, for both reader comfort and effective comprehension.

  • Timeline Icon

    Use of colour

    Even without a specific visual impairment, most people find reading from a computer screen inherently more difficult than its paper analogue. While effective use of colour can help ease this task somewhat, ineffective or inappropriate use of colour can transform an already difficult task into something downright burdensome.

    Then too, most people have very strong emotional reactions to colour. By implication, a site that makes extensive use of any given colour scheme is going to draw extreme reactions from its readers.

    Unless polarising your readership is part of your overall site design plan, it’s probably best to avoid heavy use of colour in a Website. Moderate, neutral colours may be “boring,” but provocative pages attract and capture only those readers who have been positively provoked.

    Of course, any hour spent casually surfing the Web makes it clear that only a tiny fraction of Web designers really understand the mechanics of colour usage.

    From warm background colours to heavy use of highly oversaturated hues, too many pages sacrifice readability in the name of “presentation.” Genuinely effective use of colour is a magical mixture of both art and science.

    If you’re among the majority of folks who can’t tell a colour-wheel from a wagon-wheel, it’s probably best to avoid extensive use of colour.

    About 6% of the readership of any Website experiences some degree of “chromatic confusion” – colour blindness. Colour-blindness comes in a wide variety of shapes, sizes, and severities.

    Most often, colour blindness takes the form of an inability to distinguish various shades of reds and greens. In extreme cases, most greens and almost all reds can appear to the reader as shades of grey.

    A site that is careful about its use of reds and greens is a place where even chromatically confused readers can feel at home.

    A useful tool, ‘Greyscale the Page’, removes colours from the page so you can see what the page will look like to a colour-blind person – HYPERLINK “”.

  • Timeline Icon

    Hearing Disabilities

    In some ways, individuals with hearing impairments do not have as much trouble accessing content on the Web as individuals with visual disabilities. Most Web content is either textual or visual, neither of which requires sound.

    However, with the increase in the use of sound, video, plug-ins, and multimedia programs on the Web, more and more content is excluding individuals who are deaf. News sites often include video or audio clips of television broadcasts.

    The solution is straightforward, although it can also be labour-intensive: provide synchronised captions and/or transcripts for the audio portion of the content. Some media formats (e.g., QuickTime 3.0 and SMIL) allow captions and video descriptions to be added to the multimedia clip.

    Unfortunately web sites that make use of this technology are few and far between. While people who are deaf or hard of hearing will appreciate this accommodation, you will also add benefit for those people that do not have a sound card in their computer.

    Also be sure to indicate its format (.WAV, .AU, etc.) and file size in kilobytes: no one wants to download a 500Kb file and then learn they can’t play it on their system.

  • Timeline Icon

    Physical Disabilities

    Many Web surfers suffer some degree of motion impairment. Like their visual counterparts, motion impairments range from the temporary to the chronic and from the slight to the severe

  • Timeline Icon

    Link size

    Site navigation is obviously more difficult for motion-impaired readers, but these readers can be accommodated by simply providing amply sized hyperlinks (or their graphical counterparts) as part of its navigational base.

    That is one of the many things wrong with “click here” as a hyperlink prompt. More often than not, the word “here” just isn’t large enough to make it a particularly useful navigational target.

  • Timeline Icon

    Cognitive or Neurological Disabilities

    There are many types of cognitive impairments. Some of the more obvious ones include Down’s Syndrome, Alzheimer’s Disease, and the like. Less obvious cognitive impairments include reading disorders and learning disorders. The truth is that all of us have experienced moments of cognitive impairment at one time or another.

    For example, how well are you able to navigate through a highly technical, poorly organised Web site while engaged in an important phone call? Chances are that you would have difficulty with one of the two tasks because of the cognitive overload that you would be experiencing in that moment.

    Everyone benefits from well-designed Web sites, regardless of cognitive capabilities. In this context, “well-designed” can be defined as having a simple and intuitive interface, clearly worded text, and a consistent navigational scheme between pages.

    Individuals with cognitive impairments also often benefit from graphics or icons that supplement the text. The graphics and icons should aid in the understanding of a page or a link. Purely decorative graphics may not help these individuals.

    It is important here to address an apparent conflict between the needs of individuals with visual impairments (who benefit from text rather than graphics) and those with cognitive impairments (who benefit from graphics and icons). There is no need to interpret these needs as mutually exclusive.

    Those using screen readers are not harmed by the use of images, as long as alternative text is provided. Those with cognitive disabilities will not be harmed by the presence of the alternative text supplied for images. It is possible, and desirable, to create Web pages that cater to both of these audiences, without alienating non-disabled audiences.

  • Timeline Icon

    Web Accessibility resources for developers/testers

    The World Wide Web Consortium’s (W3C) commitment to lead the Web to its full potential includes promoting a high degree of usability for people with disabilities.

    WAI (World Accessibility Initiative), in co-ordination with organisations around the world, pursues accessibility of the Web through five primary areas of work: technology, guidelines, tools, education and outreach, and research and development.

    The following set of documents provides comprehensive guidelines for the implementation of good practices to improve accessibility.

  • Timeline Icon

    Web Content Accessibility Guidelines

    Checklist of Checkpoints for Web Content Accessibility Guidelines

    Techniques for Web Content Accessibility Guidelines

  • Timeline Icon

    Testing Tools

    Developed by CAST, Bobby helps authors determine if their sites are accessible. It does this through automatic checks as well as manual checks. It also analyses Web pages for compatibility with various browsers. You may either download Bobby and run it locally, or use it through a Web interface on CAST’s site. The downloadable version is written in Java and takes advantage of the accessibility support in Java.
    It is “an easy-to-use HTML validation service based on an SGML parser. It checks HTML documents for compliance with W3C HTML Recommendations and other HTML standards.”
    This includes tools for converting your webpage to a greyscale, removing style sheets and listing images without ALT tags.

Powered By: Greet