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.ďŹickr.com/photos/natalielucier/4155261005/
49. visually hiding content
⢠display:none and
visibility:hidden hide from
everyone... and thatâs a good thing.
⢠absolute position oďŹ-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. Aîer 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 oďŹ-screen if you must,
but make them clearly visible on :focus
one âskipâ link is typically suďŹcient
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) aďŹect accessibility