Forum Moderators: open
Guideline 1. Provide equivalent alternatives to auditory and visual content
1.1 This is a pretty easy one - use 'alt''s and/or 'longdesc', but even here I have a question. I've read before that it is ok to just use alt="" if the img is just decorative, is this really so?
1.2-1.5 multimedia: I don't use any of these, except Flash. Is it really necessary to " provide a text equivalent in the content of the OBJECT", if everything in the animation is explained in the text of the article?
Guideline 2. Don't rely on color alone.Ensure that text and graphics are understandable when viewed without color.
important but pretty easy to implement
Guideline 3. Use markup and style sheets and do so properly.
(use DTD's, CSS, etc.)
3.1 - 3.2 simple enough - use text not images where appropriate and use DTD's
3.3 - CSS for presentaion: We are supposed to use <em> instead of <i>, and while most browsers will display <em> as italic, what if you really need italic? Italic is viewed as a presentational thing, however, scientific names of species are supposed to be in italic - it has nothing to do with emphasis. Are we allowed to specify italic in a style sheet for this? What does everyone else do in this case?
3.4 - I'm still using px for my site, in threads on this site, people have said they have had problems with using 'em'.
3.5 - Use of header elements: on the index page of this site I don't really need an 'h1', but since you can't have multiple h1's, or use h2's without an h1, I'll make something up to use anyway, most likely repeating the site name.
Guideline 4. Clarify natural language usage
4.1 identify changes in the language(eg: <SPAN lang="fr">je ne sais quoi</SPAN> ). How do you use this with greek letters for science or math?
4.2 Specify the expansion of each abbreviation or acronym in a document where it first occurs.
This also includes using <abbr> and <acronym> How literally do we need to take this? I have a page that mentions St. Louis several times, do I really need to use <abbr> everytime for 'St.'? I have been so far, it adds a lot of extra markup to the page.
Guideline 5. Create tables that transform gracefully
I'm using tables for tabular data only and CSS for layout. I need to review the use of TH, thead,titles, summary, etc., because honestly, I been pretty lazy about using tables properly.
It also mentiones: "Label table elements with the "scope", "headers", and "axis" attributes so that future browsers and assistive technologies will be able to select data from a table by filtering on categories." Does anyone do this? I've never even heard these mentioned before.
Guideline 6. Ensure that pages featuring new technologies transform gracefully.
This concerns dynamic content and scripts, applets, etc. I don't use dynamic content and will make sure that anything explained in Flash is also in the regular text.
Guideline 7. Ensure user control of time-sensitive content changes.
Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped.
I don't use anything that flickers, but I will make sure that any animation doesn't loop.
Guideline 8. Ensure direct accessibility of embedded user interfaces.
What does this refer to? Forms, etc., in Flash?
Guideline 9. Design for device-independence.
9.4 Create a logical tab order ...- if the tab order naturally is in the right order we don't need to use "tabindex", is this correct?
9.5 Provide keyboard shortcuts to important links: Does anyone do this? I never have before, but am considering it
Guideline 10. Use interim solutions.
10.1 - no target=_blank? I always liked to use this when a link goes off my site, but I guess the right thing to do is not to use it anymore.
10.2 - labels for form controls - I've never used these.
10.3 - table stuff - If I understand this correctly, it is not so relevant if you are using tables for tabular data only.
10.5 ... include non-link, printable characters (surrounded by spaces) between adjacent links.
What are we supposed to do with images that are sliced up as part of a larger image and used as links?
Guideline 11. Use W3C technologies and guidelines.
11.3:
Aural Cascading Style Sheets - How many people do this?
Access to alternative representations of content - I didn't understand a word they were saying about this!
Media types (@media rules) Is anyone using this for anything other than print? I'd love to see some examples if anyone has them.
Guideline 12. Provide context and orientation information.
Some of this section refers to frames, which I don't use.
Guideline 13. Provide clear navigation mechanisms.
How many people use the "title" attribute for <a>? I started doing it, but it seemed kind of silly, as the link text itself describes pretty clearly (IMO anyway) where the link is going. Adds a lot more markup too. How do user agents use the title attribute anyway? Anyone know?
13.2 - Provide metadata to add semantic information to pages and sites.
For example, use RDF ([RDF]) to indicate the document's author, the type of content, etc.
What is RDF?
The link on the page does to an entire other document. Does anyone use this? Do I really need to read it?
13.3 Provide information about the general layout of a site (e.g., a site map or table of contents).
In my opinion my site layout will be pretty clear, I don't think I need to do this, if I added something of this sort it would be just be redundant information. It's a Priority 2 though.
13.6 Group related links, ... provide a way to bypass the group - There is another thread on here about this. I'm doing this on my site, but I'm concerned that the 'skip navigation' link may be confusing to most users.
13.7 If search functions are provided, enable different types of searches for different skill levels and preferences - I'm going to have a simple search form, I don't see a reason to include an advanced search option as the average user isn't likely to use it anyway. This is a priority 3 - it's not something l will be able to do though.
Guideline 14. Ensure that documents are clear and simple.
This is pretty easy to do.
If you are reading this - thanks for being patient with my really long post! Normally I'm pretty shy and don't say a lot, but now and then, I have a lot to say!
You're asking many of the same questions that I have, so I'm going through your list with some of my answers! These may change, of course :)
I've read before that it is ok to just use alt="" if the img is just decorative, is this really so?
Is it really necessary to " provide a text equivalent in the content of the OBJECT", if everything in the animation is explained in the text of the article?
We are supposed to use <em> instead of <i>, and while most browsers will display <em> as italic, what if you really need italic? Italic is viewed as a presentational thing, however, scientific names of species are supposed to be in italic - it has nothing to do with emphasis. Are we allowed to specify italic in a style sheet for this? What does everyone else do in this case?
On the other hand, I’ve also used italics decoratively – for example, italicizing the introductory paragraph on a home page. In that case I use style sheets, reasoning that the user doesn’t want to listen to several sentences read in a funny voice. The balance I try to strike is “Make all the information as easy to access as possible, without driving the visitors nuts.”
I'm still using px for my site, in threads on this site, people have said they have had problems with using 'em'.
Use of header elements: on the index page of this site I don't really need an 'h1', but since you can't have multiple h1's, or use h2's without an h1, I'll make something up to use anyway, most likely repeating the site name.
Identify changes in the language(eg: <SPAN lang="fr">je ne sais quoi</SPAN> ). How do >>you use this with greek letters for science or math?
Specify the expansion of each abbreviation or acronym in a document where it first occurs.
This also includes using <abbr> and <acronym> How literally do we need to take this? I have a page that mentions St. Louis several times, do I really need to use <abbr> everytime for 'St.'? I have been so far, it adds a lot of extra markup to the page.
"Label table elements with the "scope", "headers", and "axis" attributes so that future browsers and assistive technologies will be able to select data from a table by filtering on categories." Does anyone do this? I've never even heard these mentioned before.
Create a logical tab order ...- if the tab order naturally is in the right order we don't need to use "tabindex", is this correct?
Provide keyboard shortcuts to important links: Does anyone do this? I never have before, but am considering it.
10.2 - labels for form controls - I've never used these.
10.3 - table stuff - If I understand this correctly, it is not so relevant if you are using tables for tabular data only.
include non-link, printable characters (surrounded by spaces) between adjacent links.
What are we supposed to do with images that are sliced up as part of a larger image and used as links?
Aural Cascading Style Sheets - How many people do this?
Access to alternative representations of content - I didn't understand a word they were saying about this!
Guideline 12. Provide context and orientation information.
Some of this section refers to frames, which I don't use.
How many people use the "title" attribute for <a>? I started doing it, but it seemed kind of silly, as the link text itself describes pretty clearly (IMO anyway) where the link is going. Adds a lot more markup too. How do user agents use the title attribute anyway? Anyone know?
...use RDF ([RDF]) to indicate the document's author, the type of content, etc.
Provide information about the general layout of a site (e.g., a site map or table of contents).
In my opinion my site layout will be pretty clear, I don't think I need to do this, if I added something of this sort it would be just be redundant information. It's a Priority 2 though.
Group related links, ... provide a way to bypass the group - There is another thread on here about this. I'm doing this on my site, but I'm concerned that the 'skip navigation' link may be confusing to most users.
If search functions are provided, enable different types of searches for different skill levels and preferences - I'm going to have a simple search form, I don't see a reason to include an advanced search option as the average user isn't likely to use it anyway. This is a priority 3 - it's not something I will be able to do though.
Whew! I talk a lot, too!
I have to keep my first reply brief because I am headed out for a meeting, but one of the things that I have been doing regarding certain images and graphics is to use CSS and display them as background-images instead of img elements embedded in the page code.
There are definate advantages to this techinque if used appropriately. Obviously, if the image is not embedded in the page, there is no need for an "alt attribute" description.
Guideline 1. Apparently it is ok to use alt=""
Guideline 5. (tables) The site above did mention "scope" and "axis" in a tables tutorial although I only had time to skim through it, so I don't know exactly what it said.
Guideline 6. I saw some mention of a losing focus problem with Flash embedded on a page. I don't have the newest version of Flash yet, I'll have to check into that.
vmcknight - do reviewers from independent living centers usually charge people to check their sites? Thanks for the information about the Yahoo group. Concerning the printable characters between adjacent links - I wasn't using an imagemap, although I am using the <map> element to group the navigation links so that they can be skipped. The images (which are links) are just right up against each other so that if I "include non-link, printable characters (surrounded by spaces) between adjacent links", that would create an unwanted space between the images. I believe I read somewhere that this recommendation was because some screen readers would run adjacent links together into one giant link unless spaces were put between them. So maybe it doesn't apply when images are used.
I would like to know more about how the title attribute for <a> is handled by screen readers. I have something like this:
<a href="url" title="Main page"><img src="url" alt="main page"></a>
If a screen reader reads both the title of the link and the alt tag of the image, that would be too much repeated information. In places where the link is text rather than an image, the link text ends up being the same as the title too. Maybe I'm not using title correctly.
I rather not use the tiny invisible image for the skip navigation link either. I'd rather take the chance of confusing the sighted people. The one on top of the page, I put way over on the right, so it is not as obvious. Hopefully that doesn't affect it's usability. I was thinking there might be a way to combine the use of the @media thingy with certain media and CSS so that it only appears when needed. The other thing about using a skip navigation link is how will SE's react to that being the first text on every page of your site?
papabaer - I'm looking forward to hearing what you have to say about this, you always give good, sound advice to people!
I thought that I would be spending no more than one day working out the accessibility issues for this site! Ha! I can see now that it will take a bit longer!
Scientific names are a good example of where to use <em>. The idea is to make the names stand out from the surrounding text, so it’s appropriate to use HTML markup. It’s a matter of making the information easy to browse, rather than mere decoration. The user can set his screen reader to use a different tone for the <em> text, thus alerting him to the most important information.
The <dfn> tag, however, should be used when a scientific or technical term is encountered for the first time in a text, usually with a short explanation. In most visual browsers this is rendered as italics:
Protons and neutrons are made up of <dfn>quarks</dfn>...
This will be of more help for aural browsers, which can then distinguish between emphasis for emphasis' sake, and actual useful information.
Similarly, for titles of books and publications, you should use <cite> (also usually rendered as italics):
They are called quarks after a sentence taken from James Joyce's novel <cite>Finnegan's Wake</cite>: <q cite="James Joyce: Finnegan's Wake">Three quarks for musther Mark.</q>
Where terms are in a foreign language, it's probably more appropriate to use <i> with a lang attribute, unless encountered for the first time:
<dfn lang="la">Rattus norvegicus</dfn> (commonly known as the Norwegian or fancy rat)...
...for this reason, <i lang="la">rattus norvegicus</i> make very good pets...
3.4 - I'm still using px for my site, in threads on this site, people have said they have had problems with using 'em'.
If you are coding for Netscape 4 users who are likely to print out the pages, only ever use px! Any other value causes dozens of blank sheets to be printed. (See here for more on this, plus a full list of CSS bugs in that browser: [richinstyle.com ])
I worried about px until papabaer revealed they are relative units, and so come recommended by the W3C!
Guideline 5. Create tables that transform gracefully
I'm using tables for tabular data only and CSS for layout. I need to review the use of TH, thead,titles, summary, etc., because honestly, I been pretty lazy about using tables properly.
It also mentiones: "Label table elements with the "scope", "headers", and "axis" attributes so that future browsers and assistive technologies will be able to select data from a table by filtering on categories." Does anyone do this? I've never even heard these mentioned before.
OK, tables are pretty easy to work on. Use TH for header cells (eg: the top cell with the title in) and it automatically makes the text bold and centered. Great! Or you can override the effects with CSS if you want.
Add a simple summary command inside the table tag to describe what the table is about. Eg: summary="List of local suppliers".
As for scope, headers and axis, the W3C say it's okay to use mainly scope: "Authors may choose to use this attribute instead of headers according to which is more convenient; the two attributes fulfill the same function." I find headers and axis way too complicated and add a lot of markup, but scope is like a table header. Use it for cells that run across instead of down. So if your table header is on the side, use a normal TD cell and add scope="row".
9.5 Provide keyboard shortcuts to important links: Does anyone do this? I never have before, but am considering it.
An essential site I've found recently is this one, which gives many useful tips on making pages accessible, including access keys. [diveintomark.org ]
Guideline 13. Provide clear navigation mechanisms.
How many people use the "title" attribute for <a>? I started doing it, but it seemed kind of silly, as the link text itself describes pretty clearly (IMO anyway) where the link is going. Adds a lot more markup too. How do user agents use the title attribute anyway? Anyone know?
This is an important tool used on many sites to give more information about a link. In desktop browsers, the title pops up when you move over the link with a mouse. With Internet Explorer, the effect also happens with the ALT tags, unlike Netscape 6+ where only the title will show up.
One trick I use on areas where I don't want a tooltip to appear (eg: a menu) is to add title="".
The proper use is probably something like this, on an image button:
alt="links" title="Various links to design sites"
What's good also is that title can be applied to a wide range of elements, not just link tags. Eg: tables, form buttons, etc. Use it!
(OT: rewboss - are you in the St. Louis are? Just a guess based on your email address)
Crescendo - I remember papabaer saying something like that too (about px), but I also thought I remembered reading that he had changed his mind. (Where is he anyway?)
As far as tables go, I plan on using summary rather than caption. I may have to use the scope thing too.
Thanks for link! That site's information is directed for blogs, but is useful for anyone interested in accessibility.
Most likely I don't need the title attribute on some of my links, based on the article from the site above.
No, <i> is fine as far as I know. It is presentational, but even the W3C knows that you sometimes need italics for presentational reasons (e.g. foreign words not meant to be emphasized). Writing <i> is, at least in my opinion, more efficient that writing, say, <span class="italics">. You can take a principle too far.
Not all scientific terms are in Latin, of course. Most of them are anglicised, so "proton" and "telephone" are English words derived from Greek. "Television" is half Greek, half Latin. Scientific names for flora and fauna in the linnean classification are always in Latin, though, and so should always be italicized.
You can, of course, always set up a CSS rule such as
.linnean { font-style: italic; }
If your document is so full of scientific terms that normal HTML/CSS just can't cope, you might consider using an XML application; for example, CML can be used to mark up molecular and chemical information. Or you could write your own XML application. This would rely on user agents being XML compliant, of course.
Will <i> validate with a XHTML 1.1 DTD?
Scientific names of species is all I was refering to now, I hadn't been certain if technically they were all Latin or not.
I don't want to start learning XML just yet, I've got enough to keep me busy! If later on I start addding any math, etc., I'll consider learning XML.
Related to this is protein and genes names. For example, one circadian clock protein is called PERIOD, and it is written in scientific literature like that - in all capitals. The name of the gene that encodes it is written like: period - small letters and in italics. I can make it look like that for seeing people, but how would people using screen readers distinguish between the two?
According to W3C XHTML specs [w3.org], <i> is included in the Presentational module. I haven't seen anything to say it's deprecated in XHTML1.1. I used to think it had been deprecated in HTML4, but in fact it hadn't. If you want to know whether or not it validates, the way to find out (if, like me, you hate trawling through technical documents) is to write a simple page with a valid strict XHTML1.1 DTD and some <i> tags, and go ahead and see if it validates.
