Simply Accessible

Introduction

Continue reading this introduction or go straight to the examples. More examples will be posted this week. Subscribe to be notified.

Designing for Accessibility

Designing for accessibility is not just a technical endeavour – like most other pursuits on the web, it involves creative problem solving and experimentation. In this context I mean that we are designing when we produce solutions that are built with intent – they are well thought out and created to be accessible at many levels and (generally) don’t compromise aesthetics and usability.

In many cases a web site or component might be technically accessible, but unusable to one or more groups of persons with disabilities. Is a problem that only affects persons with disabilities one of accessibility or usability? It depends, I suppose – but it is really irrelevant. The examples here aim to improve both accessibility and usability for everyone.

Zoom Layouts

In most of these examples I’ve added Zoom Layout capability for those that have JavaScript enabled. In all cases, you should note a number of items:

• I have not tested these zoom layouts with any real users
• I have not provided a different high-contrast colour scheme as I wanted to focus on the actual layout itself – think zoom layouts at a micro level
• Given that there aren’t many zoom layout implementations in the real world, my attempts here are best guesses as to how things should work.

Many of these techniques require a knowledge of CSS, semantic HTML or XHTML, and in some cases JavaScript. It is assumed that you have a basic grasp of what web accessibility is and how to make web content, forms and applications accessible.

Caveats

• All of these examples have been tested to one degree or another, however, I make no warranty or guarantee that these examples will be accessible or even available to absolutely everyone, or all assistive devices/technology.
• They are provided as is, and as always, you should test your solutions with various users with disabilities before implementing them and carefully consider that some solutions may or may not work with older versions of screen readers and/or other technologies.
• The code that is used to make these examples “work” is based on the template in which I’ve implemented them. You may need to change yours to fit your context/template.