"Accessibility" is one of those words that seem like a fad on the World Wide Web: Everyone wants to have their website considered "accessible." But what does it mean?
Accessibility means that your website should be useable by the maximum amount of people possible who can appreciate the medium.
You might be of the attitude that one person expressed as "I don't design for gimps," but that attitude is 1) deliberately offensive and 2) completely missing the point.
To be certain, there is very difficult to ensure that a website can be used by everyone. The absolute limit is that imposed by the content itself: If the site's content consists of drawing, painting or photography, it will be by nature inaccessible to the blind; music and other sounds will be by definition inaccessible to the deaf; videos will be inaccessible to those both blind and deaf; and writing—such as this essay—will be inaccessible to those who can't read English.
Of course, none of the above limitations is the user's fault as a rule. Blindness can result from any number of medical problems (the most common, I hear, being diabetes), deafness is much the same, and being illiterate in English can result from something so simple as:
"Aku ngomong (boso) Jowo!""Saya (bisa) berbicara bahasa Indonesia.""Я говорю на русском языке."Each translates in their respective languages as "I speak..."
1) Javanese, 2) Indonesian, and 3) Russian.1
But this kind of thing is really beside the point.
A website that is accessible can be used by: Screen readers, tactile browsers, regular browsers, mobile browsers, web-tv, text-only browsers (like Lynx), lightweight browsers (such as Dillo)...
Sound like it's gonna get complicated? It isn't.
Real accessibility simply means making your websites easy to use. The way you do this is by coding them in such a way that they make sense.
It means using semantic markup—that is, using each element on your page for the purpose it was designed—to structure your page; avoiding presentational markup, i.e. markup chosen solely for the way it makes things look; using CSS to style your page, as it can be safely ignored by browsers that for whatever reason don't support it; and using client-side scripting in such a way that the page is still fully useable if that kind of scripting is not supported, but makes it easier to use the page if it is.
The best way to make a website accessible is to create things in this order: Content, which is whatever you want to display on the web; structure, which makes your content visible/usable on a website; presentation, which makes your website look pretty; and maybe behavior, which allows the user to temporarily alter the page in his browser.
You may have to alter the structure of the page to allow for styling or behavior, and some refinements are certainly acceptable, even necessary.
To begin with, for style sheets or script files to affect the page, there must be elements linking them to the webpage in question. If there isn't, those files will have no effect.
Aside from that, there are ways and means of altering or refining the structure to better allow for accessible styling and scripting.
Did you know that if you follow the advice above, a page will actually be simpler? I'm totally serious; your page will be easier for editors to follow, you can have more consistent styling, and website redesigns will be much faster. Because of the way CSS works, you will only need to update one file, instead of all your pages.
Now, I know some browsers don't support CSS. Here are three examples: Dillo, Internet Explorer 2, and Lynx. Here's why you don't need to worry about them.
Who in tarnation uses Internet Explorer 2?! The browser was last popular well over a decade ago; if anyone still uses it, they're running very old hardware. The earliest version of Internet Explorer for which there are any measurable statistics is Internet Explorer 4, which enjoys a usage of around 1%%.
No, that's not a typo. That can also be written as "1 percent of 1 percent", "1/10,000 of the everyone on the Internet", or "0.01%"—in any case, a vanishingly small number.
Dillo is a very basic browser that has never had any support for CSS, ever. Nor does it support most other means of presentation.
Lynx is a text-only browser, which means not only doesn't it support CSS or Javascript, it doesn't even support images.
If you have a bunch of related links, put them into a list. Unordered lists usually work the best, but ordered or even definition lists will do well; the former if those links are to be followed in a specific order, the latter if each link is accompanied with a note about its contents.
Use appropriate headings. If your headings read like an outline of your document, you're on the right track.
Keep your document tree (that's a chart of which elements are nested in which) as simple as possible.
Make sure your pages are completely valid HTML, whichever version you use.
Use alt attributes in image tags to describe the graphic—particularly if that graphic is a link!
Let's say you use CSS alone for presentation, your structure is fully semantic with links in their lists and your headings describing their respective sections, and you've implemented the other good ideas, guess what: You're there! You've got an accessible website.
Not only that, but you've got a website that's likely easier to navigate, easier to edit, cheaper to maintain, and quite likely easier on your bandwidth, too.
I repeat, accessibility doesn't mean you "design for gimps." It means you make your webpage make easier for everyone to use.
Below are ways that the structure of a webpage can be altered to allow for behavior and presentation, ranged from the best means to the worst.
| Alterations and Refinements | Good or Bad Idea | Explanation |
|---|---|---|
Adding class and/or id attributes |
Excellent! |
The This not only allows you to select which elements are assigned certain styles or behaviors, but also gives your page some extra documentation .The This allows presentation or behavior to be assigned to that one element. It also allows for other elements to reference it. |
Adding <div> or <span> elements |
Good |
The The |
| Using the style attribute, using "javascript:" in the href attribute, or using click events | Iffy |
The style attribute applies style to one specific element, while using the "javascript:" pseudo-protocol or click events do the same with behaviour. The problem is that These can be hard to find and edit, and often cause bloated code. It is much better to target elements using id and class attributes. |
| Internal styles and scripts | Iffy |
It's fine if you're using a short script or a little style with one page. If you use that script in several pages, it's usually better to use external CSS and Javascript documents. |
Adding <big>, <font>, <small> elements |
Bad | These elements are ALL presentational markup. None of these should ever be used when working with a website. Remember to keep structure and presentation apart! |
| Using tables for layout | Terrible! |
A table lays things out on a grid, which can make things less fluid. Never, ever use a table for layout. It is allowable in one, and only one, case: If your page is intended to look like a spreadsheet (for example, if you have a table of albums, which includes lists of songs, artists, etc), but in that case, your page contains tabular data. This, beyond almost anything else, will clog up your webpage and make it less accessible to others. |
Below are semantic elements that you can use to structure your page.
<dl> refers to the definition list itself, <dt> is for the definition term, and <dd> contains the definition itself. These are best for things like glossaries.These header elements are used for titles, subtitles, section titles, and so on. They are respectively known as:
<ol> refers to an ordered (i.e. numbered) list, <ul> means an unordered list, and <li> means the individual list items.<bdo> would be used if I wanted something to go right to left instead.