Accessibility is Part of Your Job

Accessibility is one of the fundamentals of the Web, so how people who claim to be passionate about the Web and say that they deliver high quality can choose to ignore it is beyond me.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Standards

Choose an Accessible Image Replacement Method

The technique of using CSS to replace normal HTML text, mostly for headings, with a background image in order to achieve a particular look has been talked about many, many times since early 2003.Several different image replacement methods have been proposed, each with their pros and cons. Some methods create accessibility problems, while others place restrictions on the type of image you can use or force you to use extraneous markup. No method that I am aware of is perfect.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>CSS

The Rules of Unobtrusive JavaScript

One of the most important things to keep in mind when writing JavaScript for the Web is to make it unobtrusive, since You cannot rely on JavaScript being available.Sadly, there are many developers who do not seem to spend any energy at all on considering how to do that. Instead they choose to blindly forge ahead and assume that everybody who comes visiting will have full support for JavaScript and use a mouse.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>JavaScript

Use the Label Element to Make Your HTML Forms Accessible

There are plenty of articles and tutorials that describe how to create accessible HTML forms out there. Despite that it is common to come across forms that do not use a single label element and forms that use label elements but do so incorrectly.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Forms

Screen Readers Sometimes Ignore display:none

Using display:none does not always hide content from screen readers like JAWS and Window-Eyes, but there is a workaround.

Johansson, Roger. 456 Berea Street (2008). Articles>Web Design>Accessibility>CSS

Autopopulating Text Input Fields with JavaScript

Few people will argue against the need to explain to users what they are supposed to enter into text input fields. One common workaround when no label can be displayed is to put some placeholder text in the text field and let that act as the label.This approach works reasonably well, but it burdens the user with having to clear the input before entering their own text, which can lead to frustration and mistakes. An approach that avoids that is using JavaScript to clear the input when it receives focus. Since that won’t work when JavaScript support is missing, JavaScript should be used to insert the placeholder text as well.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>Forms

How to Create an Unobtrusive Print this Page Link With JavaScript

When a client requests that I duplicate functionality that should be (and is) handled by web browsers, I always try to avoid doing it by explaining why I believe it is better to leave such functionality to the browser. Most of the time I succed, but occasionally I don’t.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>JavaScript

Can the alt Attribute Be Omitted Without Hurting Accessibility?

In the current editor’s draft of the HTML 5 specification, the alt attribute for images is no longer required. I am not convinced that this is a good idea.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>HTML5

Introduction to Screen Readers

Begins by showing us the core functionality of screen readers and how they interact with the desktop. In the second part it demonstrates how a blind user may use them to explore and understand web sites, how sites are “linearized”, and how using semantic markup to build sites supports accessible navigation and usability.

Tsaran, Victor. Yahoo (2007). Articles>Web Design>Accessibility>Universal Usability

Introduction to Screen Magnifiers

Karo Caran and Victor Tsaran show how the screen magnifier ZoomText is used to make the computer desktop and web sites readable to people with reduced vision.

Caran, Karo and Victor Tsaran. Yahoo (2007). Articles>Web Design>Accessibility>Universal Usability

From the Mouth of a Screenreader

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.

Geoffray, Doug. Yahoo (2007). Articles>Web Design>Accessibility>Video

Accessible Expanding and Collapsing Menu

A website’s navigation should, in my opinion, be visible and straightforward, not hidden away like this or in flyout/dropdown menus. But...

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>DHTML

Unobtrusive and Keyboard Accessible Connected Select Boxes

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.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Accessibility>CSS

The Language of Accessibility

Good markup is accessible by default. As long as you’re using HTML elements in a semantically meaningful way—which you should be doing anyway, without even thinking about accessibility—then your documents will be accessible to begin with.

Keith, Jeremy. Adactio (2006). Articles>Web Design>Accessibility>Standards

Introduction to WAI ARIA

This article is for those who are new to ARIA. You need an understanding of HTML and the potential difficulties that people with disabilities can face using the Web. It is useful to be familiar with some Rich Internet Applications from a user's perspectiveAfter reading this article, you'll understand what ARIA is for, how to integrate it into your sites, and how you can use it now to make even the simplest of sites more accessible.

Lemon, Gez. Opera (2008). Articles>Web Design>Accessibility>Flash

Building Accessible Static Navigation with CSS

When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS - no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>CSS

Replacing NOSCRIPT with Accessible, Unobtrusive DOM/JavaScript

Modern user agents with JavaScript enabled will hide content contained within NOSCRIPT, and reveal it when JavaScript is disabled. User agents that do not support JavaScript will display the content within it. User agents with partial/antiquated JavaScript capabilities however interpret the element correctly and do not show the content, but when JavaScript is disabled also do not show the content - it never gets seen. This has an impact on the accessibility of the content. If your writing is targeted at modern, standards-based, compliant, and fully capable JavaScript user agents, employing the NOSCRIPT element is no problem. If the user agents among your audience are unpredictable, however, replacing the NOSCRIPT element with another mechanism becomes significant. This article looks at one such solution.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>JavaScript

Creating Accessible Data Tables

This article demonstrates how to code accessible data tables in (X)HTML, enabling visually impaired users who employ assistive technologies to interpret the table data. Two views of a tabular data table are presented and discussed.

Palinkas, Frank M. Opera (2008). Articles>Web Design>Accessibility>Standards

XHTML Voice in Style

This article builds upon topics in the XHTML Voice by Example article. A knowledge of CSS is also assumed.

Axelsson, Jonny. Opera (2008). Articles>Web Design>Accessibility>Voice

Getting to Know Voice

From a different world than the traditional browsing world comes a range of techniques that allows a developer to code for speech behaviours much easier than previously possible. Opera has early support for this. W3C is working on standards for combining speech and the ordinary graphical user interface.

Axelsson, Jonny. Opera (2008). Articles>Web Design>Accessibility>Voice

Stop Using Ajax!

We got things like browser wars, browser-specific DHTML, and table-based layouts. These were things that got in the way of the original vision, because people wanted rich content when the technology wasn’t ready. And now it’s happening again.

Opera (2008). Articles>Web Design>Accessibility>Ajax

Grid Design Basics: Grids for Web Page Layouts

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Grannell, Craig. Opera (2008). Articles>Web Design>Accessibility>CSS

How to Add Voice Interactivity to Your Site

This tutorial aims to help you add voice interactivity to your site, with minimal code changes and maximal browser compatibility. Along the way, examples will be provided, and at the end, you will be able to test a fully working, real World, voice-enabled site. This tutorial describes the use of a reusable VoiceXML form. Because the voice capability is included in the browser, you do not need to write your own speech recognition engine or speech synthesizer. This is a great advantage to you and to your Web application users.

Sucan, Mihai. Opera (2008). Articles>Web Design>Accessibility>Voice

Captions for Video with Flash CS3 (Part Two)

In this article, we’re going to look at a method of captioning a Flash video file: embedding the XML directly into the FLV file. In very simple terms, the XML document will contain the cue points for the captions. When one of those cue points is reached, the caption appears over the video.

Green, Tom. Digital Web Magazine (2007). Articles>Web Design>Accessibility>Flash

Captions for Video with Flash CS3

In the exercise that follows, and in the second part of this series, we are going to add captions, using both methods, to the same video. For those passionate about web standards, the first method involves the use of Timed Text captions. If you go this route, you need to follow the standard laid out by the W3C. There is a lot to it but, in a nutshell, it requires you to create a specific type of XML document using the required tags.

Green, Tom. Digital Web Magazine (2007). Articles>Web Design>Accessibility>Flash