Web Accessibility

Distance education is not only appealing to people in full-time employment, but it can be empowering and accessible to students with a wide variety of disabilities. I’ve had students who are blind, visually impaired, hearing impaired, physically disabled, as well as a whole host of learning disabilities including attention deficit hyperactivity disorder, dyspraxia, dyslexia, and other mental disabilities.

One major new piece of work undertaken by WAI is the EC-funded WAI-AGE Project (http://www.w3.org/WAI/WAI-AGE/), a look at the implications of an ageing population for web access, given the older people are more likely to have disabilities and may also be less familiar with new technologies. “Demographics worldwide are dramatically changing at the moment,” says Andrew Arch, who works with Abou-Zahra on WAI-AGE. “The proportions of older to younger people are changing as well as the numbers. We’re living longer, and we haven’t got the support behind us. “Lots of things have got to change in governments and organisations - with an ageing workforce, you have to keep learning to stay accessible.”

The WAI-AGE project is partly aimed at finding out whether there are any significant new pieces of work needed to ensure web accessibility for an older population, Arch says. “We’ve looked at what research and user observation has gone on over the decade. There is a pretty big overlap between older people and others with disabilities - sight starts to decline, motor dexterity - and individually these overlap. But with older people there is often a lack of recognition that there is a disability there. For example some people might just say they can’t remember so well, rather than that they have a cognitive impairment. Or people won’t see failing eye-sight as a disability, it’s just ‘part of growing old’. But they are disabilities, and often multiple disabilities.”

Having gained a grasp of current research the project returned to guidelines such as WCAG 2.0 to see if any changes might be needed. “A large proportion of the needs of older people are met by the new guidelines, but other things might need to feed into the guidance we will issue on implementing the guidelines, for example guidance on how people prepare content for older people.,” said Arch. “Many older people have not grown up with computers, and may not realise their capabilities, for example that you can magnify text in your browser.”

WysiHat is a WYSIWYG JavaScript framework that provides an extensible foundation to design your own rich text editor. WysiHat stays out of your way and leaves the UI design to you. Although WysiHat lets you get up and running with a few lines of code, the focus is on letting you customize it. We are giving developers early access to the project while we continue to work out the remaining issues. Note: It’s extremely early. Contributors are welcome so please check out the project on GitHub and send us your feedback.

The BBC has developed a script called Betsie, which will convert pages to plain HTML.

There can be a fine line between enabling and excluding technology. All it takes is some careless HTML, the addition of a few unsupported images and some multimedia frills, and entire web sites can disappear from view for substantial numbers of users.

WAI-ARIA (Accessible Rich Internet Applications or ARIA) is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content.

ARIA provides accessible interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called "live regions" in ARIA), better support for keyboard accessibility and interactivity, and much more.

accessibility issues with rich internet applications can be characterized as: Providing the semantic structure of page areas and functionality (e.g., navigation, main content, search, etc.) Maintaining accessibility of content that is dynamic and may change within the page (e.g., AJAX content updates) Allowing certain non-focusable page elements to receive keyboard focus (e.g., setting focus to an error message within the page) Providing keyboard and screen reader accessibility with complex widgets and navigation elements (e.g., sliders, menu trees, etc.)

AJAX is

a smorgasbord of web technologies put together to allow dynamic client-server interactions to occur in web applications without requiring pages to reload or refresh.

AJAX uses the following:

Common knowledge to most who have been working with CSS for a few years, but perhaps not something that relative newcomers have come across yet: the order in which you define the different link states affects the end result. I prefer the following order: :link, :visited, :hover, :focus, :active.

The specific needs of dyslexics tend to be overshadowed by the more widely understood needs of the visually impaired. Unfortunately, design decisions that benefit the latter group tend create problems for the former. This is never more evident than in so-called “accessible” text only pages with their emphasis on high contrast and complete lack of images and colour.

What is Dyslexia?

The word “dyslexia” can be broken down into two parts: “Dys” meaning poor and “lexia” meaning language. Thus dyslexics have difficulties with words. Current theories suggest that

“Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.”

Scoptic Sensitivity Syndrome

can make high contrast text difficult to read because the words seem to constantly move on the page.

Shorter line lengths and narrower text columns make reading easier.

Consider setting a percentage width for text areas and set the margins to “0 auto” via CSS. The page side margins will then increase proportionately on wider screens.

Most browsers have a default line-height of around 1em. This normally results in closely packed lines of text. Increasing the line-height to around 1.3em immediately makes longer lines of text easier to read. Likewise, ensure that paragraphs are visibly separated. Don’t be afraid of white space. Use it to enhance readability.

Liquid layouts get rid of the dreaded horizontal scrollbar

Liquid layouts allow you to make full use of the area available in the viewport, showing more or less content, depending on what will fit at any given moment.

Liquid layouts essentially allow users to choose the line length, or number of text characters per line of text, that is most comfortable for them to read.

In the UK In the US 2m people have a vision impairment3 10m people have a vision impairment4 8.2m people have mild to moderate deafness5, 688,000 people have severe to profound deafness6 28m people have a hearing impairment7 3.4m people have a physical disability8 8m people have a physical disability9 1.5m people have a learning disability10 6.8m people have a learning disability11 6m people have dyslexia12 25m people have dyslexia13

Most people who are blind will rely on screen reading software such as

JAWS or Windows-Eyes

A huge problem with almost every CMS in existence is the extremely poor quality of the code produced by their WYSIWYG editors.

Since visual gadgetry like WYSIWYG editors sells, every CMS has to have one.

That, in turn, makes it necessary for Web professionals who want to reduce the risk of clients unknowingly ruining the website’s semantics and accessibility to disable features and implement more or less advanced code cleaning procedures. It is a mess.

Any web developer who has created a reasonably complex form is probably aware of the concept of multiple select elements that are connected – choosing something from one select box either makes a new select box appear or changes the options of one that is already visible. There are usually two problems with this approach. One is that most implementations are completely dependent on JavaScript being available. Often there either is no submit button at all, or there is a submit button but without JavaScript there is no way to access the options that appear only as a result of changing the first select box. The other problem is that in some browsers, using the cursor keys to change the selected option triggers the onchange event immediately, so you can never get past the first option unless you know how to use your keyboard to display all options. I normally work around these problems by requiring users to submit the form to get the next set of options from the server. Obviously that isn’t an ideal solution either. So what other options do we have? One option that looks promising is described by Christian Heilmann in Unobtrusive connected select boxes - yet another solution approach. It involves using optgroup elements to create a two-level select box, which is then split into two separate select boxes if JavaScript is available. Neat. The solution Chris describes solves (or at least mitigates) the keyboard access problem since it doesn’t reload the page when the onchange event is triggered. And if JavaScript is unavailable, there is a single select box with option groups. The catch is that nested optgroup elements are not allowed in current versions of HTML, so this will not work when more than two connected select boxes are needed. Nested optgroup elements are allowed in the current Web Forms 2.0 Working Draft, so I guess there is a reasonable chance of that change making it into HTML 5.

The RNIB report finds people over 55 are three times more likely to have seeing difficulties as those in the 16-24 age bracket, which is a greater increase with age than with other kinds of disabilities.

In addition, the report finds that people who are disabled with seeingdifficulties are less likely to be employed (48 per cent) than those with other kinds of disability (50 per cent); this compares to an overall employment rate of 75 per cent among people of working age. For people with more than one disability, the employment rate drops to 38 per cent, however for people with ’seeing difficulties’ that do not constitute a disability the rate is much higher at 83 per cent. The unemployment rates are 8 per cent for disabled people as a whole but 13 per cent for those disabled by visual impairment. In contrast, the report also found that a higher than average proportion of visually impaired disabled people are employed in high-level positions.

And that leads me to three great videos posted on the Yahoo! User Interface Blog: In Introduction to Screen Readers, Yahoo! engineer Victor Tsaran talks about who will be likely to use a screen reader, how screen readers work, and how they can be used to interact with the computer desktop and to browse web sites. In Introduction to Screen Magnifiers, Karo Caran shows how the screen magnifier ZoomText is used to make the computer desktop and web sites readable to people with reduced vision. And finally, in From the Mouth of a Screenreader, Doug Geoffray from GW Micro (Window-Eyes vendor) talks about the history of screen reading software and how they analyse what is displayed on the screen in order to speak it to the user.

A screen reader simply enables a blind person to use the applications and operating system on a computer without sight by converting on-screen text into a Braille or spoken format. Intelligent screen readers like Window-Eyes deliver information in a linear format, interpret the active window, read complex web pages and perform many other advanced functions.

Although scripting is, by far, the number one enhancement found in this latest Window-Eyes release, other new features are noteworthy in their own right. Geoffray tells us that Window-Eyes is now 100 percent Unicode compliant. This enables access to foreign language text, certain PDF documents not previously readable, Microsoft Word’s smart quoting feature and any other situation where use of special symbols is required. Intelligent place markers may now be defined on dynamic web pages delivering quick access to a specific area of the page based not only on its virtual line number, but also on the text at the cursor. A new Eloquence speech synthesizer, access to the Firefox 3.0 web browser, support for the public beta version of Internet Explorer 8.0

Some tips from the article include:Fieldset and Legend tags must be used together, never independently of each other.Keep the content of the Legend tag brief (the Legend may be read when each of the controls contained in a Fieldset receive focus.)In Windows Eyes, the option to read the Legend tag is off by default.Fieldsets may be nested.