7. WAI SECTION 508
A11Y PFWG
EARL
web accessibility has a
branding issue
DAISY
UAAG WCAG ARIA
it has devolved into speci cations, checklists and techniques
36. “I don’t want to miss out on any content”
vs.
“I’m listening to the page at 400 words per minute
in a robotic computer voice - I don’t care about
the mood and feel of the page.”
focus on content and functionality
37. images that are the only thing within a link
MUST have alt text
image buttons and hot spots too
38. avoid redundant text
<a href=”http://sxsw.com/”>
<img src=”sxswlogo.png” alt=””><br>
SXSW</a>
alternative text doesn’t have to be in the alt attribute
41. spam prevention
...you’re doing it wrong.
http://webaim.org/blog/spam_free_accessible_forms/
42. accesskey and tabindex
FAIL!
...unless you're sure you know what you're doing.
learn the power of tabindex=”0” and tabindex=”-1”
43. tabindex
tabindex=”1+”
Speci es exact tab order. Ensure tab order is
complete, logical, and intuitive. Rarely needed.
tabindex=”0”
Places element in the default tab order.
tabindex=”-1”
Do not place element in tab order, but allow the
element to programmatically receive focus.
47. aria
• gives or enhances semantics of non-semantic
or other-semantic elements
• landmark roles - de ne major functional areas
of your page (search, navigation, main, etc.)
• enhances keyboard accessibility for widgets
and controls
• ensures accessibility of dynamically updated
content
48. the tip of the aria iceberg
more at http://webaim.org/presentations/2010/aria/
www.flickr.com/photos/natalielucier/4155261005/
49. visually hiding content
• display:none and
visibility:hidden hide from
everyone... and that’s a good thing.
• absolute position off-screen le with
CSS for screen readers
• use judiciously
50. and usability
V
the native accessibility of your site is
typically inversely proportional to
the volume of instructional text
required
people with disabilities are very capable
51. sighted users see:
a screen reader user hears:
“is is a text box where you enter your Passcode. With this text box focused you can
begin typing your Passcode. Your Passcode ensures that your account remains secure.
L!
Passcodes must be between 8 and 20 characters and contain both numbers and letters.
A I
ey are also case sensitive, so be sure to capitalize the correct characters. Aer you type
F
your Passcode into this box, you can press tab to go to the LOGIN button. You probably
set up a Passcode previously. We hope you remember it! If you have forgotten your
Passcode, you should select the ‘Forgot Your Passcode?’ link which is at the bottom of
this page.”
52. “skip to main content” links
Still?
but it’s sooooo old school
Yes! Until browsers provide better keyboard navigation for sighted users
53. “skip to main content” links
you can position them off-screen if you must,
but make them clearly visible on :focus
one “skip” link is typically sufficient
61. avoid “click here”
it’s either ambiguous or indicative of poor visual design
62. headings
WIN!
properly structured, one <h1> for document title,
and never empty
... and other semantic structure
63. title attribute
• advisory information only
• ignored by screen readers, except...
• form elements missing labels
• <frame title=”navigation”>
• <acronym>/<abbr> ...usually.
68. odds and ends
• Test in a screen reader. NVDA is open-source and free!
• Provide accurate, descriptive, succinct page titles
• Don’t stress over screen reader pronunciation and
quirks.
• Expand rst instance of acronyms and abbreviations.
You don’t have to use <acronym>/<abbr> on all
instances. Don’t use for well known terms.
• Use < eldset> and <legend> for groups of radio
buttons and checkboxes
• Layout tables don’t (typically) affect accessibility