This document discusses the intersection of usability, accessibility, and SEO. It explains that all three aim to improve the user experience, whether the user is sighted, sight-impaired, or a search engine robot. Common issues like "click here" links, lack of alt text for images, videos without subtitles, and overuse of color and visual cues can negatively impact all users. The document provides examples of how to make web pages more usable, accessible and better for SEO through good structure, alternative text, captions and more. It concludes that improving any one area often improves the others, since they are all forms of usability.

1. Don’t “Click here:”
The Intersection of Usability,
Accessibility, and SEO
NCTech4Good Meetup
January 18th, 2012
David Minton @DH_David
Managing Partner @DesignHammer
1

2. Overview
2

3. Overview
• What are Usability, Accessibility, and Search
Engine Optimization (SEO)?
2

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

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

6. 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

7. 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

8. 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

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

10. W3C website: 2010
8

11. W3C website: c.1992
9

12. “Click here”
10

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

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

15. Very, very popular
11

16. More than the Beatles
12

17. …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

18. “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

19. Does anyone listen?
15

20. Does anyone listen?
• Can 3.3 billion web pages be wrong?
15

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

22. On top: Adobe Reader
16

23. On top: Adobe Reader
17

24. Why is this top result?
18

25. 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

26. Real life searches
20

27. “Click here” is bad SEO
21

28. “Click here” is bad SEO
• Some are swayed by SEO angle
21

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

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

31. Three sample groups
23

32. Three sample groups
• Sighted human
23

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

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

35. Sighted user
24

36. Sighted user
• Uses visually rich web browser
24

37. Sighted user
• Uses visually rich web browser
• Read non-linear
24

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

39. Sight impaired user
25

40. Sight impaired user
• Uses Assistive Technologies (AT)
25

41. Sight impaired user
• Uses Assistive Technologies (AT)
• Read non-linear with difficulty
25

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

43. (Search engine) robot
26

44. (Search engine) robot
• Reads code without rendering
26

45. (Search engine) robot
• Reads code without rendering
• Reads linear
26

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

47. What do they have in
common?
27

48. Usability
28

49. 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

50. Structure vs.
Presentation
Appearances may be deceiving
29

51. Structure tags
30

52. Structure tags
HTML tags used to identify the significance of
content, such as:
30

53. Structure tags
HTML tags used to identify the significance of
content, such as:
• <title> — document title
30

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

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

56. Presentation
31

57. 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

58. Good usability
32

59. Underlying structure
33

60. Screen reader
34

61. Accessibility simulator
35

62. Heading list
36

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

64. Links list
37

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

66. Poor usability
38

67. Underlying structure
39

68. Accessibility simulator
40

69. Headings list
41

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

71. Links list
42

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

73. Images
Don’t miss an opportunity!
43

74. Sees images
44

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

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

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

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

79. Types of disabilities
49

80. Types of disabilities
• Visual
49

81. Types of disabilities
• Visual
• Blind
49

82. Types of disabilities
• Visual
• Blind
• Low vision
49

83. Types of disabilities
• Visual
• Blind
• Low vision
• Color blind
49

84. Types of disabilities
• Visual
• Blind
• Low vision
• Color blind
• Hearing
49

85. Types of disabilities
• Visual
• Blind
• Low vision
• Color blind
• Hearing
• Mobility
49

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

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

88. 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

89. 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

90. 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%
March 2008
February 2008
53

91. 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%
March 2008
February 2008
54

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

93. Video without text
56

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

95. Video without text
58

96. Subtitles & transcript
59

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

98. Prada home page
61

99. English home page
62

100. Links spawn videos
63

101. …lots of videos
64

102. Store finder
65

103. Home page
66

104. Home page SEO view
67

105. Prada Online Store
Sighted user experience
68

106. Store home page
69

107. Product list page
70

108. Product detail page
71

109. Secure checkout
72

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

111. Site listing
74

112. Online store
75

113. Secure checkout
76

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

115. Site listing
78

116. Levis home page
79

117. Product list page
80

118. Product detail page
81

119. Product detail page
82

120. Product detail page
83

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

122. Other Hurdles
85

123. Other Hurdles
• Flash and AJAX
85

124. Other Hurdles
• Flash and AJAX
• Frames and framesets
85

125. Other Hurdles
• Flash and AJAX
• Frames and framesets
• Dependence on visual cues
85

126. Other Hurdles
• Flash and AJAX
• Frames and framesets
• Dependence on visual cues
• Poorly written content
85

127. Conclusion
86

128. Conclusion
• Call it Usability, Accessibility, or SEO; it’s all
about Usability in one form or another.
86

129. 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

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