23. you can (but dont have to) label multiplelandmarks of the
same type to dierentiate them
Categories 24. dont overdo it 25. adding aria just because you
canis a slippery slope 26. typically only one per
page:banner,contentinfo,and main 27. avoid orphaned contentput
everything in a landmark 28. the end ofskip links? 29. screen
reader freakout modewhen an element that has focus or is being read
ismodified or destroyed 30. screen reader freakout modecan be
controlled by allowing manual control of updates, setting focus
with javascript, aria live regions, aria alerts, etc. 31. learn the
power oftabindex=0 and tabindex=-1learn the dangers oftabindex=1+
32. role=alertread me right nowregardless of focusalso alertdialog
33. role=presentationhides roles of elementsand most descendants
from assistive technology will should not hide default roles of
navigable elements 34. role=applicationforms mode vs. reading mode
35. application or formsmode causes screenreader keystrokes to be
sent to thebrowser/applicationstandard screenreader shortcuts
aredisabled 36. makes it very dicult to manually move out of
application/forms mode 37. some aria elements (tree view, slider,
table,tabpanel, dialog, toolbar, menus, etc.) havean assumed
application role 38. test without a mouse... and test without a
mousein a screen readerscreen readers change keyboard
interactionbehavior 39. follow the ariadesign patterns 40. program
esc keyto cancel dialogs, menus, etc. 41. aria-required=true not
necessary if its intuitivethat the field is required does not
changefunctionality, onlysemantics 42. aria-invalid=true identify
broken or errant form fields 43. let css do the heavy liing you
change semantic attributes, let css
handlestyling[aria-invalid=true] {border : 2px solid red;} 44.
aria-disabled=truedisabled=disabled in html removes object from
keyboard flow and have extremely poor
contrastaria-disabled=trueallows it to remain in thekeyboard flow,
but bepresented as disabled. 45. aria-hidden=truehides element and
alldescendantschild elements cant be unhidden[aria-hidden=true]{
display:none;} 46. aria-labelledby overcomes htmls1-to-1 label to
form control limitation 47. NameAge Weight Verl24 145
Ethelaria-labelledby=row2header ageheader 48. aria-haspopupindicate
that a link orbutton triggers anin-page dialog orsub-menu 49.
aria-expandedindicate the status of expandable elementsshould
usually be placed on the link or button that controls the expansion
50. ... and much, much
more...role=menurole=treerole=gridrole=sliderrole=progressbarrole=tooltip
role=tabpanel aria-live aria-grabbed etc. Authoring Practices
document providesinteraction models and design
patternshttp://www.w3.org/WAI/PF/aria-practices/ 51. sometimes
things fail,even if youve followed the specification screen reader
testingis vitalsupport is improving 52. wcag 2.0 techniques do not
yet include much ariafocus on accessibility, not just compliance
53. html5 mappings
54. the future is html5 55. thank youJared
Smith@jared_w_smithwebaim.org