Top Banner

Click here to load reader

Progressive Enhancement with ARIA [Accessibility Summit 2010]

Jan 27, 2015

ReportDownload

Technology

If you've been paying attention for the last few years, you're likely well-versed in progressive enhancement and it's content-out approach to web design, but you may be less familiar with the Accessible Rich Internet Applications spec and how you can leverage its enhanced semantics to provide a truly accessible experience.

In this session, we'll cover the following:

* Discuss progressive enhancement and where ARIA fits into the mix
* Examine how ARIA's landmark roles can provide additional clues as to document structure
* Look at the various roles and states ARIA defines for building accessible widgets
* Cover how to leverage tabindex in an effort to create a better overall experience when using the keyboard
* Walk through the construction of an ARIA-enabled widget, from markup to scripting, following the progressive enhancement process

  • Aaron Gustafson

    Progressive Enhancement

    with ARIA

  • We are creating richer online experiences

    2

  • 3

  • ...and the barrierswhich prohibit them.

    photo by drcorneilus 4

  • Accessibility is crucial

    photo by TimothyJ 5

  • Google is a voracious consumerof the web. And its blind.

    photo by Ed Yourdon 6

  • But accessibility isnt only about

    supporting screen readers.

    7

  • photo by lastquest

    What if you cant use a mouse?

    8

  • photo by placenamehere

    What if you dont see a change?9

  • photo by Guillermo

    We can and must build better.

    10

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building betterEvery great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol.

    Text & HTTP

    11

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building betterSemantics (markup) convey the underlying meaning of the content...

    Text & HTTP

    (x)HTML

    12

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building betterSemantics (markup) convey the underlying meaning of the content...but if poorly applied, meaning can be obscured.

    Text & HTTP

    (x)HTML

    12

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building betterCSS can enhance usability through visual clues...

    Text & HTTP

    (x)HTML

    CSS

    13

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building betterCSS can enhance usability through visual clues...but it can also reduce accessibility if misused.

    Text & HTTP

    (x)HTML

    CSS

    13

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building betterJavaScript can be used to build more intuitive interfaces...

    Text & HTTP

    (x)HTML

    CSS

    JavaScript

    14

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building better

    but it cannot be relied on 100% of the time.

    JavaScript can be used to build more intuitive interfaces...

    Text & HTTP

    (x)HTML

    CSS

    JavaScript

    14

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Building betterWAI-ARIA extends the semantics of the document to provide additional insight into the state of the interface and how to interact with it.

    Text & HTTP

    (x)HTML

    CSS

    JavaScript

    ARIA

    15

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Progressive Enhancement

    BASIC ADVANCEDU

    ser E

    xper

    ienc

    e

    Browser Capabilities

    Text & HTTP

    (x)HTML

    CSS

    JavaScript

    ARIA

    16

  • photo by Saffanna

    WAI-ARIA is a new(ish) tool

    17

  • Semantics+

    18

  • Map OS concepts to the web

    photo by steve-uk 19

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    HTML

    20

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    http://habilis.net/validator-sac/http://tinyurl.com/cwyvny

    20

  • photo by Verity Cridland

    Call attention to important pieces21

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    22

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="banner"

    23

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="main"

    24

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="article"

    25

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="complementary"

    26

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="list"

    27

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="list"

    28

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="list"

    29

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="list"

    30

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="listitem"

    31

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="form"

    32

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="article"

    33

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural Roles

    role="contentinfo"

    34

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Structural RolesDocument Structure

    Landmarksapplicationbannercomplementary

    contentinfoformmain

    navigationsearch

    articlecolumnheaderdefinitiondirectorydocumentgroup

    headingimglistlistitemmathnote

    presentationregionrowrowheaderseparator

    35

  • photo by DavePress

    Explain what something is& how it works

    36

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget RolesOK(of course OK would be better)

    37

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget RolesOK(of course OK would be better)

    Something went wrong.

    37

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget RolesOK(of course OK would be better)

    Something went wrong.

    Something went wrong.

    37

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget Rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog

    marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar

    sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem

    Widget Container Rolesgridlistboxmenu

    menubartablisttoolbar

    treetreegrid

    38

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget Propertiesaria-activedescendantaria-atomicaria-autocompletearia-controlsaria-describedbyaria-dropeffectaria-flowtoaria-haspopuparia-labelaria-labelledbyaria-levelaria-live

    aria-multilinearia-multiselectablearia-orientationaria-ownsaria-posinsetaria-readonlyaria-relevant aria-requiredaria-setsizearia-sortaria-valuemaxaria-valuemin

    39

  • photo by exfordy

    Indicate whats going on

    40

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget States

    B(off)

    B(on)

    41

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget States

    B(off)

    B(on)

    41

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget States

    B(off)

    B(on)

    41

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget States

    B(off)

    B(on)

    41

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Complex Widgets

    42

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Complex Widgets

    role="application"

    42

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Complex Widgets

    role="slider"aria-labelledby="label_handle_valueA"aria-valuemin="0"aria-valuemax="71"aria-valuenow="22"aria-valuetext="Apr 04"

    42

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Complex Widgets

    role="presentation"

    42

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Widget Statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a property)aria-valuetext (ditto)

    43

  • photo by kevin1024

    Highlight living content44

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Live Regions

    45

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Live Regions

    140

    46

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Live Regions

    140

    47

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Live Regions

    140 characters left

    48

  • Progressive Enhancement with ARIA! Accessibility Summit 30 September 2010

    Notification Optionsoffchange not announced

    politechange announced after user completes her current activity

    assertiveuser agent should interrupt the users activity, but not immediately

    49

  • photo by cfpg

    Manage focus with slight-of-hand

    50

  • Progressive Enhanc