Presentation is loading. Please wait.

Presentation is loading. Please wait.

Keyboard accessibility Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009 BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE.

Similar presentations


Presentation on theme: "Keyboard accessibility Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009 BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE."— Presentation transcript:

1 Keyboard accessibility Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009 BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE

2 accessibility = blind users + screenreaders?

3 difficult to test – need to install and learn screenreader

4 many different forms of disability

5 keyboard or keyboard-like interfaces

6 easiest to test…no special software required

7

8

9 by default users TAB

10

11 using keyboard, move from one focusable element to the next

12 standard focusable elements: links, form elements, image map areas

13

14

15

16

17

18 don’t forget the fancy styling

19

20 a.action:hover { background-color:#a82310; color:#fff !important; text-decoration:none; } #promo-dvd.content a:hover img { background-color:#d5c7ae; }

21 a:focus, a:hover, a:active { … }

22 don’t suppress outline!

23

24 keyboard accessible, but where am I?

25 /* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; }

26 /* remember to define focus styles! */

27 why do designers suppress outline?

28

29 “get your outline out of my design!” …is there a compromise?

30

31

32 a { … overflow: hidden; }

33

34 …only suppress it on :active

35 TAB cycle – normally just source order

36 tabindex forces a certain TAB cycle

37 anything with tabindex takes precedence

38

39

40 easy enough…let’s drop in some JavaScript

41

42

43 keyboard accessible, but where’s the extra information?

44 $('#whatever').hover( function() {…}, function() {…} );

45 $('#whatever').hover( function() {…}, function() {…} ); $('#whatever').focus(function() {…}); $('#whatever').blur(function() {…} );

46 aside: mobile browsers don’t do hover (well)

47 lightboxes…we love ’em

48

49 close it again on TAB don’t invent new keyboard shortcuts

50 more complex solution: manage focus

51 and now, the dangerous part…

52 JavaScript attaches behaviour to anything

53 $('div').click(function() {…} );

54 sexy tutorials out there doing it wrong

55

56 be lazy…use libraries that solved this YUI, jQueryUI, etc

57 beware 3 rd party solutions even the big boys can get it wrong

58

59

60

61 hijack generated markup to accessify it

62 in conclusion…

63 if you style :hover, also :focus and :active

64 don’t suppress outline completely (reintroduce :focus and suppress :active)

65 leave tabindex alone – source order

66 JavaScript on hover (mouseover/mouseout) also on focus/blur (if focusable element)

67 lightboxes and their problems

68 only attach behaviour to focusable elements

69

70


Download ppt "Keyboard accessibility Patrick H. Lauke / Future of Web Design Tour / Glasgow / 14 September 2009 BASIC STEPS TOWARDS A MORE USABLE AND ACCESSIBLE SITE."

Similar presentations


Ads by Google