Gian Wild - WCAG2 accessibility: the hidden nuggets

Slide 1

Slide 1 text

The hidden nuggets of WCAG2 By Gian Wild AccessibilityOz @accessibilityoz www.accessibilityoz.com.au [email protected]

Slide 2

Slide 2 text

by net_efekt

Slide 3

Slide 3 text

by shannonkringen ALT attributes

Slide 4

Slide 4 text

by shannonkringen ALT attributes

Slide 5

Slide 5 text

by shannonkringen ALT attributes

Slide 6

Slide 6 text

by shannonkringen ALT attributes Empty ALT attributes Image next to link text Image galleries CAPTCHA Logos Images of text* Long descriptions

Slide 7

Slide 7 text

by shannonkringen ALT attributes Do not use the following words: • “filename” • “gif” / “jpg” / “png” etc • “image” • “graphic” • “click” • “photo”*

Slide 8

Slide 8 text

by tanakawho Information and relationships

Slide 9

Slide 9 text

by tanakawho Information and relationships Headings Field labels Fieldsets Table headers including SUMMARY/CAPTION No table headers for layout tables

for lists of links Q and BLOCKQUOTE

Slide 10

Slide 10 text

by Viktor Hertz Colour contrast

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

by andrew713 Location

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

by Jinx! Keyboard

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Click here

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Source order

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

by mikebaird Skip links

Slide 21

Slide 21 text

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/

Slide 22

Slide 22 text

And don’t forget…

Slide 23

Slide 23 text

by SweetOnVeg

Slide 24

Slide 24 text

Questions? By Gian Wild AccessibilityOz @accessibilityoz www.accessibilityoz.com.au [email protected]