Accessible design techniques and tutorials

Techniques

  • Accessible CSS forms
    "Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade."
    (Andy King)

  • Accessible forms
    "This document is concerned with what the user of a website form "sees" and interacts with. It outlines how you can create forms for the web that are more accessible and describes the appropriate use of label, fieldset and tabindex elements."
    (Roger Hudson)

  • Accesskeys and reserved keystroke combinations
     In a non-scientific study conducted in the summer of 2002, we researched the availability of available accesskeys which had not already been reserved by various other software technologies which might be employed by various users. The results indicated a real problem in that most ALT + keystroke combinations (assuming the Windows operating platform) have already been reserved by one type of application or another.

  • Accesskeys: unlocking hidden navigation
    People with limited mobility may have a hard time controlling a mouse to click on links, and tabbing through menus can be slow going. The W3C introduced the accesskey attribute to enable users to select the appropriate key on their keyboards and navigate to a particular link.

  • A dyslexic perspective on e-content accessibility
    This paper gives the web developer an insight into the issues of web accessibility for users with dyslexia (and/or other specific learning difficulties). It covers the four main areas of accessibility: presentation, content, structure and navigation.

  • AJAX and accessibility
    "In this article we will have a look at the implications for accessibility and usability when using Javascript to dynamically update a web page. I will also show how you can increase accessibility for AJAX-based forms."
    (Peter Krantz)

  • ALT text - making the web more accessible
    This article explains why it is necessary to use alternative (ALT) text for the images on your website and gives you tips on how to do so.

  • A more accessible map
    "As companies like Google and Yahoo! have simplified the process of placing information on a map by offering web services/APIs, the popularity and abundance of mapping applications on the web has increased dramatically. Most online mapping applications do not address issues of web accessibility. For a visually impaired web user, these highly visual maps are essentially useless. Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive? Yes: using an accessible CSS-based map in which the underlying map data is separated from the visual layout."
    (Seth Duffey - A List Apart)

  • An accessible method of hiding HTML content
    Though somewhat rare, there are occasions when the accessibility needs of screen reader users appear to be at odds with the needs of visual users. This kind of conflict occurs when web developers put form elements inside a data table matrix, when they want to use images as headings instead of text, and in other situations. Adding extra text helps screen reader users, but can complicate the visual layout, thus reducing understandability. One solution is to use CSS to hide the text from sighted users in a way that is still accessible to screen readers.

  • Appropriate use of alternative text
    "Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text."
    (WebAIM)

  • Best practices for online captioning
    Joe Clark has written 21 chapters on the topic of best practices in online captioning. Among many other things, you’ll find: alist of every known method of using embed and/or object with valid code; illustrated examples; a host of guidelines on how to handle exceptional cases (how do you caption a videoclip that’s also audio-described?).

  • Bring on the tables
    Do your best to avoid using tables for layout, but for tabular data, tables are what you should use. I’d like to talk about how tables should be used when marking up tabular data. There’s a lot more to tables in HTML and XHTML than just rows and cells. Much more. Especially if you want to make them accessible.

  • Building accessible widgets for the web
    "Building exciting interface behaviors is completely wrongheaded if doing so reduces accessibility. The interfaces we build ought to provide the same central functionality to all users, period."
    (Mike West - Digital Web Magazine)

  • Contradictions in accessibility: hidden information
    Many of the techniques we employ as developers to make our web sites more accessible result in hidden information that may only make them more accessible to a small portion of users rather than more accessible to everyone.

  • Contradictions in accessibility: keyboard usage and tabindex
    Most standards-based web sites don't need to include tabindex for their links. When they are included along with other techniques such as skip to content links, they can hinder functionality and usability.

  • Contradictions in accessibility: link and default link styles
    By convention on the web, links and visited links are a different colour. Jakob Neilsen has recently discussed this in his May 3rd, 2004 AlertBox Link Colour where he concludes: "using different colours for visited and unvisited links makes your site easier to navigate and thus increases user satisfaction". Most mainstream browsers have this behaviour built in to them by default. But what about WCAG Priority 1 Guidelines, Checkpoint 2.1?

  • Creating accessible JavaScript
    JavaScript allows developers to add interaction and processing functionality to otherwise static web pages. Though commonly used, JavaScript introduces some very unique and challenging accessibility issues. This article presents an overview of JavaScript accessibility as well as advanced techniques and examples of how JavaScript can be used and made natively accessible.

  • Demonstration of the LONGDESC attribute and 'd' link
    When images are provided to illustrate complex ideas, the same information must also be provided in an accessible form. Use of the LONGDESC HTML attribute or 'd' links are two approaches that can be used.

  • Designing pages to be accessible to limited textual comprehension users
    "The goal of this document is to provide clear and simple steps that a web author can take in order to increase the understandability of her site for users with limited textual comprehension."
    (Kynn Bartlett - Aware Center)

  • Designing web content for people with learning disabilities
    Learning disabilities, incorporate a wide variation of memory, perception, problem-solving, and conceptualising problems. Some impairments in this category are severe and have a can have significant effect on the person's ability. Impairment can also be developed with the ageing process.

  • Don't 'click here': writing meaningful link text
    Using "click here" as link text should be avoided as it makes navigating the web difficult for both sighted and unsighted users.

  • Easy Read and other advice about writing for people with learning disabilities
    "For a long while now, I’ve been worrying about how to design forms for people with learning disabilities. It’s not been a pressing problem because frankly, a lot of the forms that I work with don’t even work for people with post-graduate degrees and specific training in the subject area of the form. But recently I’ve noticed a trend: sometimes I come across a form that’s really not too bad. So I’m increasingly thinking about how to make forms more accessible--and that’s restarted an interest in learning disabilities."
    (Caroline Jarrett)

  • Flash MX accessibility issues
    When usability expert Jakob Nielsen proclaimed Flash was 99 percent bad, he was right on at least one account: accessibility. Until the release of Flash MX and the Flash 6 player, about 41 million disabled web users could not take full advantage of Flash web sites (According to World Bank in 2000). Even with Macromedia's move to support Section 508 guidelines, the government's plan for web accessibility, the majority of Flash developers have not adopted the necessary best practices.

  • Guidelines for accessible and usable web sites: observing users who work with screen readers
    "To truly meet the needs of all users, it is not enough to have guidelines that are based on technology. It is also necessary to understand the users and how they work with their tools. For example, just realizing that vision-impaired users do not listen to the entire page is critical for designing usable pages for them. In this paper, we have developed guidelines for bringing accessibility and usability together based on observing, listening to, and talking with blind users as they work with Web sites and their screen readers."
    (Mary Theofanos, Ginny Redish)

  • How to make figures and presentations that are friendly to colorblind people
    "There are always colorblind people among the audience and readers. There should be more than ten colorblinds in a room with 250 people (50% male and 50% female). There is a good chance that the paper you submit may go to colorblind reviewers. Supposing that your paper will be reviewed by three white males (which is not unlikely considering the current population in science), the probability that at least one of them is colorblind is whopping 22%!"
    (Masataka Okabe, Kei Ito)

  • How to make your blog accessible to blind readers
    "So you have a blog, and you're worried that it might not be accessible to people with disabilities? Don't worry! A few simple changes can increase your blog's potential readership."
    (Amercan Foundation for the Blind)

  • Improving usability for screen reader users
    "Simply ensuring your website is accessible to screen reader users is unfortunately not enough to ensure these users can find what they're looking for in a reasonably quick and efficient manner. Even if your site is accessible to screen reader users, its usability could be so incredibly poor that they needn't have bothered coming to your site. Fortunately, there are plenty of simple-to-implement guidelines you can follow, which not only drastically improve usability for screen reader users, but for all web users."
    (Trenton Moss)

  • Inaccessibility of CAPTCHA: alternatives to visual turing tests on the web
    "A common method of limiting access to services made available over the Web is visual verification of a bitmapped image. This presents a major problem to users who are blind, have low vision, or have a learning disability such as dyslexia. This document examines a number of potential solutions that allow systems to test for human users while preserving access by users with disabilities."
    (Matt May - W3C)

  • Inaccessibility of visually-oriented anti-robot tests: problems and alternatives
    A common method of limiting access to services made available over the web is visual verification of a bitmapped image. This presents a major problem to users who are blind, have low vision, or have a learning disability such as dyslexia. This document examines a number of potential solutions that allow systems to test for human users while preserving access by users with disabilities.

  • Increasing Word accessibility
    "There are at least two things you can do to increase the accessibility of Word documents: 1. Improve the native accessibility of the original Word file, 2. If you export the Word document to another format, ensure it is accessible as well. The following sections will address each of the two points."
    (National Center on Disability and Access to Education)

  • JavaScript events test, part 1
    " This is the first part of a series of articles investigating support for JavaScript events in popular screen readers. This article investigates the mouseover event."
    (Steve Faulkner - Juicy Studio)

  • Link relationships as an alternative to accesskeys
    We like the concept of accesskeys providing quick keystroke access to various parts of a particular site. However, we also believe that given their standardisation and implementation problems, we need a more robust method for providing the functionality.

  • Making AJAX work with screen readers
    "The accessibility community is understandably concerned about the accessibility of client-side scripting, in particular using Asynchronous JavaScript and XML (Ajax) to produce Rich Internet Applications. The Web Accessibility Initiative's Protocols and Formats working group directly address the issue of making rich Internet applications accessible, and we borrow some of their concepts to investigate methods of ensuring that Ajax applications work with leading assistive technology products. The bad news is that it isn't possible to make Ajax work in every known assistive technology, in the same way that it isn't possible to get Ajax to work with older browsers, but we explain the fundamental issues; how to inform users of assistive technology that a change has taken place, and how they can interact with the content. To illustrate our findings, we summarise the behaviour of popular screen readers."
    (Gez Lemon, Steve Faulkner)

  • Making Flash usable for users with disabilities
    Jakob Nielsen advises that Flash designs are easier for users with disabilities to use when designers combine visual and textual presentations, minimise incessant movement, decrease spacing between related objects, and simplify features.

  • Making it accessible: a look at weighted lists
    "Most implementations of weighted lists that I've seen rely on visual styling to convey the information. This means that it won't be accessible, and it doesn't degrade gracefully. A screen reader user will not be able to get at the information--it is entirely contained within the visual rendering of the document, with no other means of getting the information."
    (Derek Featherstone)

  • More reasons why we don't use accesskeys
    The topic of accesskeys regularly appears on mailing lists, forums, and other arenas. Developers ask what the concensus is, and the answer is--there isn't one. We believe that the functionality accesskeys provide is worthwhile, but their implementation and standardisation leave something to be desired.

  • On scalable text
    In order to provide scalable text, make textual information text (rather than images), and use relative text sizes (rather than absolute). Scalable text is important for people with low vision. The basics of providing scalable text are very simple. However, strict design requests can pose challenges.

  • Prettier accessible forms
    "It can be time consuming to make web forms both pretty and accessible."
    (Nick Rigby - A List Apart)

  • Readability and its implications for web content accessibility
    One area of accessibility often overlooked is the readability of the content of your web pages. Not every user may be familiar with terms or terminology being used. Others may not have the same socio-political background, literacy skills or capacity to fully comprehend what it is you are saying. One goal of the content author then is to try and identify their target audience, and then ensures that they are not "writing over their heads".

  • Relative sizing and images
    Few people realise that with today's modern browsers, relative sizing can be added to images as well as text elements on your web page.

  • Skip links
    "Skip links are an accessibility feature to help visitors navigate their way around a document. Ask two different developers on how best to implement skip links, and you'll very likely receive two different replies. Some people like visible skip links, others like hidden skip links, and some people don't like skip links at all. This article examines the different approaches of implementing skip links."
    (Gez Lemon)

  • Skip navigation links
    This is an analysis/study of techniques for "skip navigation" links--links that allow users who cannot use a mouse, to jump over repeated navigation blocks to access page content.

  • Speaking form labels - summary
    This article summarises some screen reader testing on various techniques for designing form labels and makes recommendations based on these tests.
    (Bob Easton)

  • The accessibility hat trick: getting abbreviations right
    "As web designers and developers, our job is to integrate text and markup in ways that best meet the needs and expectations of multiple groups of users. For AAA-level conformance, we need to effectively communicate expanded forms of abbreviations to everybody, requiring techniques focused simultaneously on users-agents and users directly.This is where the hat trick comes into play: by taking an approach that is compliant with both current and soon-to-be-current standards, backwards compatible to non-compliant user-agents, and fully accessible (i.e. usable, and providing the same information to all users) we can achieve the effective communication we’re shooting for."
    (Colin Lieberman - A List Apart)

  • Tips and tools: Adobe Acrobat and PDF
    "After HTML, PDF (Portable Document Format) files are probably the most common files on the Web. PDF is usually used when a file needs to appear or print a certain way, regardless of the browser or technology. PDF files can be made accessible to people with disabilities, although usually with more difficulty than with HTML. A key part of this process involves creating tags that make a document more accessible to screen reader users."
    (Johnathan Whiting - National Center on Disability and Access to Education)

  • Usable and accessible form validation and error recovery
    "Form validation is the process of testing to ensure that end users enter necessary and properly formatted information into web forms. Error recovery is the process of guiding the user through fixing missing or improper information as detected by form validation. The Web Content Accessibility Guidelines 1.0 state that you should, "ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported." Older browsers and new portable technologies may not support scripting; and there are many reasons why users may have scripting disabled. As such, developers should not require client-side scripting in order for the web form to be accurately completed and submitted. However, web developers can utilize the benefits of both server-side and client-side validation and error recovery to ensure that their forms are completed in a usable and accessible manner."
    (WebAIM)

  • Using accesskeys is easy
    Quite a few web developers still get a glint of terror in their eyes when someone suggests they add accesskeys to their sites. Well, don't be scared. This article is very short for a very good reason. If you want to use them, accesskeys are so easy to add, you'll wonder why you never did before.

  • Using accesskeys: is it worth it?
    The HTML4 feature known as ACCESSKEY is a navigational enhancement that allows you to jump to an active element (such as a form control or a link) on a page with a single keystroke.

  • Web accessibility for screen magnifier users
    "The needs of screen magnifier users are overlooked when implementing web accessibility on to a website. Screen magnifiers are used by partially sighted web users to increase the size of on-screen elements. Some users will magnify the screen so that only three to four words are able to appear on the screen at any one time. The good news is that some of the basic principles for improving accessibility and usability for screen magnifiers users, also increase usability for everyone. To help, we've listed six ways to improve accessibility and usability for screen magnifier users."
    (Trenton Moss)

  • Web design for dyslexic users
    A short list of guidelines for designing for users with dyslexia.
    (Davis Dyslexia Association International)

Tutorials and tools

  • Accessible table builder
    "A wizard-based approach - it asks you how many columns, rows, whether the first columns is a header too and requests other accessibility-related information such as caption, summary and whether you want to use scope attribute or headers and IDs. In the end you have a table - the HTML and the CSS - that contains all the necessary markup required."
    (Accessify.com)

  • Accessible form builder
    "A simple but very quick way of putting together a form that uses either CSS or table for layout, automatically creates label elements and the associated for and ID attributes, as well as (optional) title attributes for each text field. It's as simple as entering a list of fields that need to be captured and hitting return."
    (Accessify.com)

  • Accessibility techniques and concepts
    A series of tutorials on from WebAIM on a range of topics from markup to multimedia.

  • Curriculum on Web Content Accessibility Guidelines
    Extensive online curriculum that explains and gives examples for the Web Content Accessibility Guidelines. Can be used as a self-study material or for presentations to groups.

  • Dive into accessibility
    An online tutorial that teaches web accessibility in 30 daily sessions.

  • Using FrontPage 2003 to create accessible web content
    FrontPage is one of the most popular HTML editors on the market. Just like every tool, FrontPage does have its weaknesses. Despite some of these shortcomings, it is definitely possible to create accessible Web pages in FrontPage, often without leaving the WYSIWYG environment.
    (Jon Whiting)

  • Web accessibility learning modules
    The growing reliance on the web for providing courseware and campus information, necessitates that universities make their web pages accessible to all, including the disabled and others who use alternative browsers or assistive technologies to access web-based information. This is a collection of learning modules for academic staff preparing online learning materials, staff responsible for authoring university web pages, web developers, and IT staff responsible for educational campaigns on web accessibility.