Presented by David Minton (Managing Partner) at Wake Tech Community College (02/17/2011) Note: This is a longer version of the Internet Summit 2010 version of the presentation. When considering a website’s optimal level of Usability, it becomes evident that the practices of SEO and Accessibility also factor greatly into this area of the website’s success. To achieve a website with a high degree of Usability, one must develop it with three audiences in mind; 1) average visitors, 2) disabled visitors, and 3) search engine robots. As each user browses through the site, there are hurdles to overcome such as interpreting hyperlinks, images, and flash files. While implementing a few techniques will improve the user experience for a particular audience, benefits can be found in the Usability improvement for all three. Through adequately preparing it to reach all three audiences, you are ensuring the site achieves the basic goal of effective online communication. This presentation will cover the basics of Usability, Accessibility and SEO, how they are interrelated and discuss what solutions are available to serve each audience and improve overall website Usability.

1. Don’t “Click here:”
The Intersection of Usability,
Accessibility, and SEO
Wake Tech Community College
February 17th, 2011
David Minton @DH_David
Managing Partner @DesignHammer
1

2. Overview
• What are Usability, Accessibility, and Search
Engine Optimization (SEO)?
• What could Usability, Accessibility, and
SEO have in common?
2

3. Why worry about
Usability, Accessibility,
and SEO?
3

4. Search Engine Optimization
“In my experience, the traffic difference from
position #1 to position #11 is…something
closer to 1/100th of the visits.”
Rand Fishkin
CEO & Co-Founder of SEOmoz
4

5. Usability
“It’s quite normal for e-commerce sites to
increase sales by 100% or more as a result of
usability. More important, they can probably
avoid 9 of 10 returns by eliminating most mis-
designed items (a 1,000% improvement of the
error rate metric).”
Jakob Nielsen, Nielsen Norman Group
“the guru of Web page usability”
5

6. Accessibility
“Companies that do not consider accessibility
in their Web site or product development will
come to regret that decision, because we
intend to use every tool at our disposal to
ensure that people with disabilities have equal
access to technology…”
Thomas E. Perez,
Asst. Attorney General, US Dept. of Justice
2010 Jacobus tenBroek Disability Law Symposium
6

7. A classic blunder
Can 3 billion web pages be wrong?
7

8. W3C website: 2010
8

9. W3C website: c.1992
9

10. “Click here”
• Emerged sometime between 1992 & 1995
• Became popular
10

11. Very, very popular
11

12. More than the Beatles
12

13. …and major sports
786,000,000 Football
415,000,000 Basketball
216,000,000 Baseball
131,000,000 Hockey
68,500,000 The Beatles
1,616,500,000
13

14. “Click here” is bad usability
“Explain what users will find at the other
end of the link, and include some of the key
information-carrying terms in the anchor
text itself to enhance scannability and SEO.
Don't use ‘click here’ or other
non-descriptive link text.”
Jakob Nielsen
Top Ten Web Design Mistakes of 2005
14

15. Does anyone listen?
• Can 3.3 billion web pages be wrong?
• “Click here” prevails!
15

16. On top: Adobe Reader
16

17. On top: Adobe Reader
17

18. Why is this top result?
18

19. Incoming links
Tens of thousands of incoming links, like this:
“You will need Acrobat Reader to read or
print this document. To download Acrobat
Reader click here.”
19

20. Real life searches
20

21. “Click here” is bad SEO
• Some are swayed by SEO angle
• “Click here” still prevails, mostly
21

22. Types of Users
Three samples — how different are they?
22

23. Three sample groups
• Sighted human
• Sight-impaired human
• Robot
23

24. Sighted user
• Uses visually rich web browser
• Read non-linear
• Use visual cues to determine relevance
24

25. Sight impaired user
• Uses Assistive Technologies (AT)
• Read non-linear with difficulty
• Can’t use visual cues to determine relevance
25

26. (Search engine) robot
• Reads code without rendering
• Reads linear
• Can’t use visual cues to determine relevance
26

27. What do they have in
common?
27

28. Usability
“Usability means making sure something works
well, and that a person* of average ability or
experience can use it for it’s intended purpose
without getting hopelessly frustrated.”
Steve Krug, Author — Don't Make Me Think:
A Common Sense Approach to Web Usability
*be they sighted, sight-impaired, or a robot
28

29. Structure vs.
Presentation
Appearances may be deceiving
29

30. Structure tags
HTML tags used to identify the significance of
content, such as:
• <title> — document title
• <h1> — level one headline
• <p> — paragraph
30

31. Presentation
The style applied to content that affects the
way it looks. An example of a CSS style:
h1 {
! font: bold 24px arial;
! margin: 10px 0 10px 0;
}
31

32. Good usability
32

33. Underlying structure
33

34. Screen reader
34

35. Accessibility simulator
35

36. Heading list
Fangs Screen Reader Emulator (Firefox Add-on)
https://addons.mozilla.org/en-us/firefox/addon/402/
36

37. Links list
Fangs Screen Reader Emulator (Firefox Add-on)
https://addons.mozilla.org/en-us/firefox/addon/402/
37

38. Poor usability
38

39. Underlying structure
39

40. Accessibility simulator
40

41. Headings list
Fangs Screen Reader Emulator (Firefox Add-on)
https://addons.mozilla.org/en-us/firefox/addon/402/
41

42. Links list
Fangs Screen Reader Emulator (Firefox Add-on)
https://addons.mozilla.org/en-us/firefox/addon/402/
42

43. Images
Don’t miss an opportunity!
43

44. Sees images
44

45. Images
What a sight-impaired user &
(Search Engine) robot may see
45

46. Empty <alt> text
<img src="/twitpocalypse.png"
alt=" ">
46

47. Helpful <alt> text
"Twitpocalypse
is upon us!"
<img src="/twitpocalypse.png"
alt="Twitpocalypse is upon us!">
47

48. Types of Disabilities
Four classes, each with different needs
48

49. Types of disabilities
• Visual
• Blind
• Low vision
• Color blind
• Hearing
• Mobility
• Cognitive and Learning Disabilities
49

50. Color Deficits
Don’t rely on color to express information
50

51. Normal vision
59.8%
Google 59.2%
21.3%
Yahoo 21.6%
9.4%
Microsoft 9.6%
4.8%
AOL 4.9%
0% 10% 20% 30% 40% 50% 60%
51

52. Deuteranope view
59.8%
Google 59.2%
21.3%
Yahoo 21.6%
9.4%
Microsoft 9.6%
4.8%
AOL 4.9%
0% 10% 20% 30% 40% 50% 60%
52

53. Good: add legend
59.8%
Google 59.2%
21.3%
Yahoo 21.6%
9.4%
Microsoft 9.6%
4.8%
AOL 4.9%
0% 10% 20% 30% 40% 50% 60%
February 2008
March 2008
53

54. Better: add pattern
59.8%
Google 59.2%
21.3%
Yahoo 21.6%
9.4%
Microsoft 9.6%
4.8%
AOL 4.9%
0% 10% 20% 30% 40% 50% 60%
February 2008
March 2008
54

55. Audio & Video
What a hearing disabled user may experience
55

56. Video without text
56

57. Audio & Video
What a hearing disabled user &
(Search Engine) robot may experience
57

58. Video without text
58

59. Subtitles & transcript
59

60. Prada S.p.A.
Case study: style over substance
60

61. Prada home page
61

62. English home page
62

63. Links spawn videos
63

64. …lots of videos
64

65. Store finder
65

66. Home page
66

67. Home page SEO view
67

68. Prada Online Store
Sighted user experience
68

69. Store home page
69

70. Product list page
70

71. Product detail page
71

72. Secure checkout
72

73. Prada Online Store
Search Engine & sight-impaired user experience
73

74. Site listing
74

75. Online store
75

76. Secure checkout
76

77. Levi Strauss & Co.
Case study: hard working website
77

78. Site listing
78

79. Levis home page
79

80. Product list page
80

81. Product detail page
81

82. Product detail page
82

83. Product detail page
83

84. It Doesn’t End Here
There are many Usability pitfalls out there.
84

85. Other Hurdles
• Audio and video
• Flash and AJAX
• Frames and framesets
• Dependence on visual cues
• Insufficient Structural HTML tags
• Poorly written content
85

86. Conclusion
• Call it Usability, Accessibility, or SEO; it’s all
about Usability in one form or another.
• If you do nothing else, SEO best practices
can help improve usability for sighted as
well as sight-impaired users.
86

87. David Minton
Managing Partner @DesignHammer
@DH_David
www.designhammer.com
87