Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Gian Wild - WCAG2 accessibility: the hidden nug...

Web Directions
November 05, 2011

Gian Wild - WCAG2 accessibility: the hidden nuggets

WCAG2 is a long series of documents. Gian Wild knows this better than most: she spent six years on the W3C WCAG Working Group writing them. It’s a lot to ask that every developer and project manager read the complete guidelines, including informative content. However there are some very useful — and sometimes hidden — techniques in WCAG2. And some are even at Level AAA. Join Gian to find out what these are.

Web Directions

November 05, 2011
Tweet

More Decks by Web Directions

Other Decks in Technology

Transcript

  1. by shannonkringen ALT attributes Empty ALT attributes Image next to

    link text Image galleries CAPTCHA Logos Images of text* Long descriptions
  2. by shannonkringen ALT attributes Do not use the following words:

    • “filename” • “gif” / “jpg” / “png” etc • “image” • “graphic” • “click” • “photo”*
  3. by tanakawho Information and relationships Headings Field labels Fieldsets Table

    headers including SUMMARY/CAPTION No table headers for layout tables <OL> <UL> and <DL> for lists of links Q and BLOCKQUOTE
  4. by Viktor Hertz Colour contrast High colour contrast or low

    colour contrast? Large text Logo / incidental clause 1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: • Foreground and background colours can be selected by the user. AAA
  5. by andrew713 Location 1.3.3 Sensory Characteristics: Instructions provided for understanding

    and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A)
  6. by Jinx! Keyboard Keyboard and the mouse hover effect Forms

    and submit buttons “Click here” links Keyboard trap 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. AA
  7. Link text Link text and surrounding context 2.4.9 Link Purpose

    (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. AAA
  8. Focus order 1.3.2 Meaningful Sequence: When the sequence in which

    content is presented affects its meaning, a correct reading sequence can be programmatically determined. 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
  9. by mikebaird Skip links Must be visible on keyboard hover

    First link on the page Over 50% of all skip links on the web are broken Structural labels: http://www.maxdesign.com.au/2006/01/17/ about-structural-labels/