|
| |
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
 |
WCAG AAA Status - 7/29/2003 16:06:36
Good day everyone! Well, with all the talk about Web Site Accessbility these days, I thought it would be appropriate to begin the journey myself. Actually I started a few years ago but am now going into full gear.
WCAG = Web Content Accessibility Guidelines
Many of you may be practicing some form of accessbility in your design methods and not even realize it. Alt tags are a big one. If the image is used to convey a message, then alt text is mandatory. If the image is used as a spacer or other non-relevant image, you should assign empty alt text like this (alt=" " - that' s two quotation marks side by side with no space inbetween). Screen readers will skip empty alt text, but I' m under the impression that a space between those quote marks may cause some issues so it is best to have the empty alt text specified as indicated above.
Here is a list of guidelines that must be followed when making a web site accessible based on the standards set forth by the WCAG...
Web Content Accessibility Guidelines 1.0 - Checkpoints
Why is all this so important to us? As web developers, it is our responsibility to understand the technologies that we work with. As the web moves forward into next generations, we need to address the needs of those who are visiting our web properties. Use of the Internet by people with disabilities is becoming more mainstream and many are complaining that web sites are an absolute mess when using their assistive technologies for browsing. Some have gone as far as suing federal or government type web sites where accessibility was not addressed.
If you plan on doing business, or have clients who do business with federal and state agencies, and that business is done via the web, then you must adhere to at least Section 508 Guidelines when designing for accessibility.
Since we like to make it a strict point to practice what we preach, we' ve made our text only version of the SEO Consultants Directory 100% accessible using WCAG AAA guidelines which is the highest level of accessbility. There is A and AA status which are the two steps you need to address first before moving to Triple-A status.
Note: Before you visit the below link, please set your mouse aside, you will not need it to browse this site and that is the intent. The first page you need to visit is our Site Map and Access Key Bindings page...
SEO Consultants Directory / Access Key Bindings
Once you' ve familiarized yourself with the Access Keys, you can then begin to search the site by entering Alt+s+Enter which takes you to the main interface. If you are using a Screen Reader, you would probably opt to Alt+k which skips repetitive navigation elements and takes you to the main content.
Note: All Access Keys are defined in bold with an underscore, for example...
Search
SEO Consultants Directory / Text Only Version
Yes, we realize this is not the prettiest layout just yet. We had to start with the core elements and then we will build around those. Since we are targeting those using assistive technologies, there won' t be any graphics involved. We are also appealing to the PDA users and those who surf the web for information using a text based browser.
Oh, we also have provided access for those with certain color blindness disabilities. Alt+g will give you black text on a pastel gray background, Alt+w will give you white text on a black background (high contrast), and Alt+y will give you black text on a pastel yellow background. We did research which web safe colors were the best to use when targeting color blindness.
Note: When using the Access Keys, you' ll notice that the area assigned with that Access Key becomes highlighted. You will then need to press your Enter key to visit the resource. You can also tab your way through links and form fields and then use your arrow keys to navigate the page vertically. This section of our site will not scroll horizontally so the up and down arrow keys are the only ones needed. You can also use your Home, End, Page Up or Page Down keys to navigate pages vertically.
< Message edited by Spooky -- 7/30/2005 22:36:53 >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
|
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: WCAG AAA Status - 7/29/2003 21:27:37
Quick update on the above. We' ve come to find out that using the <span> element and adding style to letters and numbers to visually show the Access Keys does cause problems with certain screen readers. The word Search may be read separately as S and then earch.
What I' ve done now is removed the <span> element and have set up a <kbd> tag that appears in front of all accesskeys. I' ve styled the <kbd> to appear as it does on your keyboard (very nice effect). Anyway, I was able to eliminate all styling from the links and position the Access Key letters/numerals in front of their resource wrapped inside <kbd></kbd>.
Here is the CSS...
kbd{
font-size:.8em;
font-weight:bold;
border-top:.15em solid #ccc;
border-right:.25em solid #aaa;
border-bottom:.3em solid #888;
border-left:.2em solid #bbb;
padding:.05em .2em;
color:#000;
background:#eee;
cursor:help;
}
And then I have my Access Keys wrapped in the <kbd> tag and have assigned a title attribute indicating that it is an Access Key hint...
<kbd title=" Access Key Alt+" >A</kbd>
Possible solution if you have the leeway with design. You need to accomodate the <kbd> attributes and add in line-height, etc. to other elements to make it all work.
< Message edited by pageoneresults -- 7/30/2003 12:38:10 PM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
d a v e
Posts: 4066
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online
|
RE: WCAG AAA Status - 2/16/2005 13:55:11
yeah i read that as well - pity really. opera for one uses some of the keys that the other browsers don't so it's really easy to run into probs there. :(
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
