This is for Everyone

This is for Everyone, Front-Trends 2015 @shaundunne This is for
Everyone Front-Trends, 2015

This is for Everyone, Front-Trends 2015 @shaundunne When sites are
correctly designed, developed and edited, all users have equal access to information and functionality. - Wikipedia, Web Accessibility

This is for Everyone, Front-Trends 2015 @shaundunne

This is for Everyone, Front-Trends 2015 @shaundunne (╯°□°)╯︵ ┻━┻

This is for Everyone, Front-Trends 2015 @shaundunne VISUAL

This is for Everyone, Front-Trends 2015 @shaundunne Quick Tip Cpt.Picard
 <meta name="viewport" content="width=device-width, maximum-scale=1.0">  <meta name="viewport" content="width=device-width, initial-scale=1">

This is for Everyone, Front-Trends 2015 @shaundunne AUDITORY

This is for Everyone, Front-Trends 2015 @shaundunne MOTOR

This is for Everyone, Front-Trends 2015 @shaundunne 10

This is for Everyone, Front-Trends 2015 @shaundunne 10 Accessibility First
Mobile First Ofﬂine First

This is for Everyone, Front-Trends 2015 @shaundunne 10 ACCESSIBILITY ===
USABILITY

This is for Everyone, Front-Trends 2015 @shaundunne 9 Keyboard Navigation

This is for Everyone, Front-Trends 2015 @shaundunne 9

This is for Everyone, Front-Trends 2015 @shaundunne 9 tabindex="?"

This is for Everyone, Front-Trends 2015 @shaundunne tabindex 9

This is for Everyone, Front-Trends 2015 @shaundunne 9 tabindex="0"

This is for Everyone, Front-Trends 2015 @shaundunne 9 tabindex="[1…99]"

This is for Everyone, Front-Trends 2015 @shaundunne 9 tabindex="-1"

This is for Everyone, Front-Trends 2015 @shaundunne :focus{ outline:none; }

This is for Everyone, Front-Trends 2015 @shaundunne 8 Skip Navigation
Links

This is for Everyone, Front-Trends 2015 @shaundunne 8 <body> <a
href="#main">Skip Navigation</a> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div role='main' id='main'>  </div> </body>

This is for Everyone, Front-Trends 2015 @shaundunne 7 Alt tags

This is for Everyone, Front-Trends 2015 @shaundunne 7 // presentational
<img src="USSEnterprise1701-D.png" alt=""> // Part of the content <img src="USSEnterprise1701-D.png" alt="The Galaxy Class Federation Ship USS Enterprise">

This is for Everyone, Front-Trends 2015 @shaundunne 6 Forms

This is for Everyone, Front-Trends 2015 @shaundunne 6 <label for="username">username</label>
<input name="username" id="username"></input>

This is for Everyone, Front-Trends 2015 @shaundunne .sr-only { position:
absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

This is for Everyone, Front-Trends 2015 @shaundunne Detect Screenreaders?

This is for Everyone, Front-Trends 2015 @shaundunne ARIA 5

This is for Everyone, Front-Trends 2015 @shaundunne ARIA Roles alert
alertdialog application article banner button checkbox columnheader combobox command [abstract] complementary composite [abstract] contentinfo deﬁnition dialog directory document form grid gridcell group heading img input [abstract] landmark [abstract] link list listbox listitem log main marquee math menu seperator slider spinbutton status structure [abstract] tab tablist tabpanel textbox timer toolbar tooltip tree treegrid treeitem widget [abstract] window [abstract] navigation note option presentation progressbar radio radiogroup range [abstract] region roletype [abstract] row rowgroup rowheader scrollbar search section [abstract] sectionhead [abstract] select [abstract] http://www.w3.org/TR/wai-aria/roles

This is for Everyone, Front-Trends 2015 @shaundunne ARIA States &
Properties aria-atomic aria-busy (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-ﬂowto aria-grabbed (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-live aria-owns aria-relevant aria-autocomplete aria-checked (state) aria-disabled (state) aria-expanded (state) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-level aria-multiline aria-multiselectable aria-orientation aria-pressed (state) aria-readonly aria-required aria-selected (state) aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext http://www.w3.org/TR/wai-aria/states_and_properties

This is for Everyone, Front-Trends 2015 @shaundunne Landmarks 4

This is for Everyone, Front-Trends 2015 @shaundunne Media 3

This is for Everyone, Front-Trends 2015 @shaundunne Testing 2

This is for Everyone, Front-Trends 2015 @shaundunne Talk 1

This is for Everyone, Front-Trends 2015 @shaundunne 1 Design &
UX

This is for Everyone, Front-Trends 2015 @shaundunne Tooling

This is for Everyone, Front-Trends 2015 @shaundunne Chrome ADT http://goo.gl/wnIA8m

This is for Everyone, Front-Trends 2015 @shaundunne chrome://accessibility

This is for Everyone, Front-Trends 2015 @shaundunne http://accesslint.com/

This is for Everyone, Front-Trends 2015 @shaundunne http://tenon.io/

This is for Everyone, Front-Trends 2015 @shaundunne Resources http://www.w3.org/TR/wai-aria/ http://a11yproject.com/
https://code.facebook.com/accessibility https://www.google.com/accessibility/

This is for Everyone, Front-Trends 2015 @shaundunne Talks Marcy Sutton
: Javascript For Everyone Léonie Watson : ”Rock & roll guide to HTML5 & ARIA" Jörn Zaefferer : Talk to me Monika Piotrowicz: Accessibility is a Feature You Can Build Talk playlist : http://j.mp/a11y-vids

This is for Everyone, Front-Trends 2015 @shaundunne Shaun Dunne London,
UK @shaundunne boticca.com

This is for Everyone, Front-Trends 2015 @shaundunne Thanks!

This is for Everyone

This is for Everyone

More Decks by Shaun D

Other Decks in Programming

Featured

Transcript