Tweet
Tweet

Slide 1

Slide 1 text

WAI-ARIA in 10 Laura Kalbag @laurakalbag @indie

Slide 2

Slide 2 text

Why is web accessibility important?

Slide 3

Slide 3 text

Accessibility makes the web a good experience for as many people as possible

Slide 4

Slide 4 text

Accessibility isn’t just about screen readers

Slide 5

Slide 5 text

Web accessibility is built on a foundation of meaningful HTML

Slide 6

Slide 6 text

         
  •          Hall      
    •      
  •          Kitchen      
    •      …  
     Hall      
     Kitchen  
  Meaningful vs not-so meaningful HTML

Slide 7

Slide 7 text

Screen readers

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

         
  •          Hall      
    •      
  •          Kitchen      
    •      …  
list 2 items • • internal, link, Hall internal, link, Kitchen end of list How VoiceOver reads it

Slide 10

Slide 10 text

     Hall      
     Kitchen  
internal, link, Hall internal, link, Kitchen How VoiceOver reads it

Slide 11

Slide 11 text

What is WAI-ARIA?

Slide 12

Slide 12 text

Web Accessibility Initiative – Accessible Rich Internet Applications (or ARIA for short) Born March 2013

Slide 13

Slide 13 text

Dynamic content / “complex web apps” (Sites that update without refreshing the page)

Slide 14

Slide 14 text

ARIA is particularly useful for keyboard navigation and screen readers

Slide 15

Slide 15 text

Tabs

Slide 16

Slide 16 text

Tabs WAI-ARIA Overview, selected, tab, 1 of 3 Laura Kalbag, tab, 2 of 3 Ind.ie, tab, 3 of 3

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

visited, link, Images link, Fonts link, Ways To Pay link, Offers link, Ideas link, Subscriptions

Slide 19

Slide 19 text

Web browsers need a few more cues to assist the human

Slide 20

Slide 20 text

ARIA is a layer on top of markup content structure (HTML) additional structure (ARIA)

Slide 21

Slide 21 text

WAI-ARIA gives developers a way to describe roles, states, and properties for custom widgets

Slide 22

Slide 22 text

Images ARIA Roles

Slide 23

Slide 23 text

tab, Images tab, Fonts tab, Ways To Pay tab, Offers tab, Ideas tab, Subscriptions

Slide 24

Slide 24 text

ARIA Roles vs Implied Roles Images Images, button Images tab, Images

Slide 25

Slide 25 text

Incorrect  password,  please  try  again
 
Successfully  saved
Other roles Full list at http://www.w3.org/TR/wai-aria/roles#abstract_roles_header

Slide 26

Slide 26 text

Images ARIA States http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected

Slide 27

Slide 27 text

tab, Images, selected tab, Fonts tab, Ways To Pay tab, Offers tab, Ideas tab, Subscriptions

Slide 28

Slide 28 text

Expanding/collapsing menu Menu, collapsed, button Menu, expanded, button

Slide 29

Slide 29 text

ARIA Landmarks
     
     

    Slide 30

    Slide 30 text

    When we shouldn’t use WAI-ARIA

    Slide 31

    Slide 31 text

      HTML5 vs Landmarks      
          http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics

      Slide 32

      Slide 32 text

      ARIA vs HTML  
           
            http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/

      Slide 33

      Slide 33 text

      ARIA should be your last resort

      Slide 34

      Slide 34 text

      However, there’s a lot ARIA can do, that HTML can’t…

      Slide 35

      Slide 35 text

      Live Regions

      Slide 36

      Slide 36 text

      New tweets available. Press period to review them.
           

      New  Tweets  available.  Press  period  to  review  them.

       

      Slide 37

      Slide 37 text

      Without ARIA, people can miss out

      Slide 38

      Slide 38 text

      http://caniuse.com/#search=WAI-ARIA

      Slide 39

      Slide 39 text

      http://html5accessibility.com by The Paciello Group

      Slide 40

      Slide 40 text

      ARIA can’t fix an unusable site

      Slide 41

      Slide 41 text

      Thank you! @laurakalbag @indie