Accessibility on the Web
I have an interest in accessibility. Not because I myself have any particular problems with it, but because I believe in the spirit that the Web originally grew up from. The idea was to make sure that the Web was open to anyone. That no matter what the needs of the user, and no matter what hardware or software they had access to, they could still access it.
Now I know that the available hardware and software have changed a lot since then, but the spirit is still relevant. More and more people access the Web, and that includes people who have greater accessibility needs than many others. But as the standards provide more and more ways to make pages accessible, people are still making inaccessible pages, and needlessly preventing people with accessibility requirements from being able to use them.
Many people seem to be under the mistaken impression that accessibility means making the site appear and function identically in every browser. It does not. In fact it does not mean anything like that. Accessibility means making the site make sense in every browser. It means making sure that even if the browser does not support CSS or JavaScript, or plugins or images, or any combination of these and other features, or if the page can only be viewed in text form, or read by a braille or speech reader, that the information the page contains (the most important part of the page) can still be accessed and read. It means not placing demands on your viewers like "You must use browser X", "Your screen resolution must be set to 800 by 600", "You must enable JavaScript and Flash" or "You must use a mouse to navigate this site".
What I have done here is to collect together a few ideas for making pages more accessible, and developed some stylesheets that make the most of the new voice component of the Opera browser, allowing for much more accessible browsing. Enjoy.
In these pages, I mainly concentrate on speech and Braille readers, but these are the exact same techniques that ensure maximum search engine access. But let's not stop there. Blind users typically use Braille or speech readers, and so do many people with dyslexia or other reading problems, but many disabled users are also unable to use a mouse or pointing device, and they also benefit from these exact same techniques. The same goes for people on low bandwidth connections. By using these techniques, you will make your site accessible for all of these people, and also, you will enable search engines to index it, so that people will actually be able to find your site in the first place. So many benefits, and surprisingly easy to achieve.
I'm not going to demand that you implement it all. I'm not even going to demand that you care. This may not effect your target audience. But it might affect them. And even if it does not affect them right now, it might affect them later if your target audience changes. But check your target audience, they may be they fall into one of these categories that you had not considered. And even if they don't, search engines probably will.
Chapter Links
- Accessibility - you are here
Stylesheet Links
- Downloadable speech/aural stylesheets
- Moose's tutorial on how to use user stylesheets in Opera
- Csant's Opera 7.6+ voice support pages (one of the main Opera voice QAs)
These can be used as either a user stylesheet or as an alternate stylesheet for your page. If you want to use both stylesheets simultaneously as a user stylesheet, you will need to put them in a single file and use that instead.
Instructions are given in each CSS file for using them on a page, but if you want to use them both and allow combinations (as I have done on these pages), you will need to do the following:
<link rel="alternate stylesheet" type="text/css" href="spokenpage.css" title="Spoken Page">
<link rel="alternate stylesheet" type="text/css" href="spokentable.css" title="Spoken Table">
<link rel="alternate stylesheet" type="text/css" href="spokenpage.css" title="Spoken Page and Table">
<link rel="alternate stylesheet" type="text/css" href="spokentable.css" title="Spoken Page and Table">The stylesheets use this convention: A female voice is used to identify the structure. A male voice is used to read page content. A higher pitched male voice (actually a low pitched child's voice, but who's checking? ;) is used to read form input values.
They attempt to minimize the visual change to the page, but they add a lot of extra content to the page, so there will be some minor visual changes. That is why I recommend that you use them as only an alternate stylesheet or a user stylesheet, not as a regular stylesheet. Opera users will always be able to choose the alternate stylesheet without it causing any changes in any other browser. Please see the notes on use with forms. (Since Opera 8 beta 2, it should be possible to use @media speech to make the extra content available only to the speech engine, but due to a bug, Opera will not read it if it is only generated in speech media, so for now, these will remain as alternate stylesheets.)
The Spoken Page stylesheet has full support for: page title, all six levels of heading, ordered lists, unordered lists, definition lists (support for nested and un-nested forms of each list), links, image maps, strong, bold, emphasis, italic, underline, abbreviations, forms, fieldsets, legends, text inputs, textareas, password inputs, checkboxes, radio inputs, file inputs, password inputs, button inputs (submit, reset, generic button), accesskey and titles on all applicable elements, inserted and deleted content, partial support for select (drop-down) inputs, link tags and framesets, and warnings for plugins, applets, embeds and iframe elements.
The Spoken Table stylesheet has full support for: tables, nested tables, summaries, captions, rows, data cells, header cells, rowspan and colspan, header scope, header ID and cell headers attribute pairs, cell categories, table head, table body and table foot, as well as title on all applicable elements.
If you want to include these stylesheets, but only tell relevant Opera users that they are available, you can use this CSS code in your main stylesheet:
head {
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
link[title="Spoken Page"] {
display: inline-block;
content: "Opera 7.6+ users, this page contains the Spoken Page stylesheet to enhance voice enabled browsing. You can enable it now using View - Style - Spoken Page.";
}Depending on the complexity of your CSS this may cause 'Edit - Select all' not to show any selection markings, so check it out on your page before you use it.