HTML/CSS tips to improve the accessibility of your websites
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML/CSS tips to improve the accessibility of your websites

on

  • 14,423 views

My Accessibility talk for Codebits 2011

My Accessibility talk for Codebits 2011

Statistics

Views

Total Views
14,423
Views on SlideShare
8,498
Embed Views
5,925

Actions

Likes
25
Downloads
296
Comments
0

43 Embeds 5,925

http://www.ivogomes.com 3473
http://webhosting.pl 1544
http://drupal.pl 238
http://spotgeek.net 238
http://www.netvibes.com 107
http://quicktips.livetech.pt 69
http://www.istudyiwin.com 61
http://www.clasificatium.com 46
http://trunk.regular.elvis.epistema.local 28
http://feeds.feedburner.com 21
http://staging.voestalpine.com 17
http://wp2.ibermasters.com 13
http://51y6vj.widget.uwa.netvibes.com 8
http://dashboard.bloglines.com 7
http://51y6or.widget.uwa.netvibes.com 5
http://paper.li 4
http://51y6qe.widget.uwa.netvibes.com 4
http://theoldreader.com 4
https://twitter.com 4
http://www.drupal.pl 3
http://51y746.widget.uwa.netvibes.com 3
http://comunidad.iebschool.com 3
http://51y70r.widget.uwa.netvibes.com 2
http://a0.twimg.com 2
http://51y72g.widget.uwa.netvibes.com 2
http://translate.googleusercontent.com 2
http://the-refreshing-sip.blogspot.com 1
http://www.newsblur.com 1
http://feedproxy.google.com 1
http://51y75v.widget.uwa.netvibes.com 1
http://microsoftechies.com 1
http://us-w1.rockmelt.com 1
http://feeds2.feedburner.com 1
http://51y6qi.widget.uwa.netvibes.com 1
http://webcache.googleusercontent.com 1
http://istudyiwin.com 1
http://www.google.pt 1
http://localhost 1
https://webhosting.pl 1
http://www.google.com.br 1
https://abs.twimg.com 1
http://51y4j3.widget.uwa.netvibes.com 1
http://ig 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML/CSS tips to improve the accessibility of your websites Presentation Transcript

  • 1. HTML/CSS TIPS TO IMPROVE THE ACCESSIBILITY OF YOUR WEBSITES Ivo Gomes @ivogomes www.ivogomes.comQuinta-feira, 10 de Novembro de 11
  • 2. Why should I care?Quinta-feira, 10 de Novembro de 11
  • 3. ACCESSIBILITY MYTHSQuinta-feira, 10 de Novembro de 11
  • 4. ACCESSIBILITY MYTHS Accessibility is just for blind peopleQuinta-feira, 10 de Novembro de 11
  • 5. ACCESSIBILITY MYTHS Accessibility is just for blind people Accessible websites are ugly and boringQuinta-feira, 10 de Novembro de 11
  • 6. ACCESSIBILITY MYTHS Accessibility is just for blind people Accessible websites are ugly and boring Accessibility is expensive and difficultQuinta-feira, 10 de Novembro de 11
  • 7. ACCESSIBILITY MYTHS Accessibility is just for blind people Accessible websites are ugly and boring Accessibility is expensive and difficult Offering a text-only version is good enoughQuinta-feira, 10 de Novembro de 11
  • 8. ACCESSIBILITY MYTHS Accessibility is just for blind people Accessible websites are ugly and boring Accessibility is expensive and difficult Offering a text-only version is good enough Validation equals accessibilityQuinta-feira, 10 de Novembro de 11
  • 9. ACCESSIBILITY MYTHS Accessibility is just for blind people Accessible websites are ugly and boring Accessibility is expensive and difficult Offering a text-only version is good enough Validation equals accessibility If it works with a screen reader it is accessibleQuinta-feira, 10 de Novembro de 11
  • 10. OK, so what can I do?Quinta-feira, 10 de Novembro de 11
  • 11. 1.Quinta-feira, 10 de Novembro de 11
  • 12. ENLARGEQuinta-feira, 10 de Novembro de 11
  • 13. ENLARGE YOURQuinta-feira, 10 de Novembro de 11
  • 14. ENLARGE YOUR FONTQuinta-feira, 10 de Novembro de 11
  • 15. ENLARGE YOUR FONT Don’t use tiny 10px or 12 px text size Try 16px or even more...Quinta-feira, 10 de Novembro de 11
  • 16. Pro tip: Try reading your website when seated 1 meter away from the screenQuinta-feira, 10 de Novembro de 11
  • 17. USE RELATIVE FONT-SIZES html { font-size: 62.5%; } body { font-size: 1.6em; = 16px (sort of) }Quinta-feira, 10 de Novembro de 11
  • 18. USE RELATIVE FONT-SIZES html { font-size: 62.5%; } body { font-size: 1.6em; = 16px (sort of) } Beware of the inheritance!Quinta-feira, 10 de Novembro de 11
  • 19. USE RELATIVE FONT-SIZES ! body { font-size: 1.6em; = 16px } h1 { font-size: 2em; = 32px (not 20px) } body > h1 h1 font size is 2em x 1.6emQuinta-feira, 10 de Novembro de 11
  • 20. USE RELATIVE FONT-SIZES body { font-size: 16px; font-size: 1.6rem; = 16px } h1 { font-size: 20px; font-size: 2rem; = 20px }Quinta-feira, 10 de Novembro de 11
  • 21. 2.Quinta-feira, 10 de Novembro de 11
  • 22. INCREASE YOUR LINE-HEIGHTQuinta-feira, 10 de Novembro de 11
  • 23. INCREASE YOUR LINE-HEIGHT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et felis malesuada massa fermentum faucibus sit amet sed augue. Aliquam aliquam auctor diam, sed varius nunc tempus in. Fusce vel egestas massa. Quisque sit amet libero risus, ac viverra enim. line-height: normal;Quinta-feira, 10 de Novembro de 11
  • 24. INCREASE YOUR LINE-HEIGHT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et felis malesuada massa fermentum faucibus sit amet sed augue. Aliquam aliquam auctor diam, sed varius nunc tempus in. Fusce vel egestas massa. Quisque sit amet libero risus, ac viverra enim. line-height: 1.4;Quinta-feira, 10 de Novembro de 11
  • 25. 3.Quinta-feira, 10 de Novembro de 11
  • 26. PROVIDE SKIP-LINKSQuinta-feira, 10 de Novembro de 11
  • 27. PROVIDE SKIP-LINKS Skip links provide a way for users to jump directly to the page content, without having to go through all the navigation links.Quinta-feira, 10 de Novembro de 11
  • 28. Quinta-feira, 10 de Novembro de 11
  • 29. Quinta-feira, 10 de Novembro de 11
  • 30. Quinta-feira, 10 de Novembro de 11
  • 31. Quinta-feira, 10 de Novembro de 11
  • 32. Quinta-feira, 10 de Novembro de 11
  • 33. Quinta-feira, 10 de Novembro de 11
  • 34. Quinta-feira, 10 de Novembro de 11
  • 35. Quinta-feira, 10 de Novembro de 11
  • 36. Quinta-feira, 10 de Novembro de 11
  • 37. Quinta-feira, 10 de Novembro de 11
  • 38. Quinta-feira, 10 de Novembro de 11
  • 39. Quinta-feira, 10 de Novembro de 11
  • 40. Quinta-feira, 10 de Novembro de 11
  • 41. Quinta-feira, 10 de Novembro de 11
  • 42. Quinta-feira, 10 de Novembro de 11
  • 43. Quinta-feira, 10 de Novembro de 11
  • 44. Quinta-feira, 10 de Novembro de 11
  • 45. Quinta-feira, 10 de Novembro de 11
  • 46. Quinta-feira, 10 de Novembro de 11
  • 47. Quinta-feira, 10 de Novembro de 11
  • 48. Quinta-feira, 10 de Novembro de 11
  • 49. Quinta-feira, 10 de Novembro de 11
  • 50. Quinta-feira, 10 de Novembro de 11
  • 51. Quinta-feira, 10 de Novembro de 11
  • 52. Quinta-feira, 10 de Novembro de 11
  • 53. Quinta-feira, 10 de Novembro de 11
  • 54. Quinta-feira, 10 de Novembro de 11
  • 55. Quinta-feira, 10 de Novembro de 11
  • 56. Quinta-feira, 10 de Novembro de 11
  • 57. Quinta-feira, 10 de Novembro de 11
  • 58. Quinta-feira, 10 de Novembro de 11
  • 59. Quinta-feira, 10 de Novembro de 11
  • 60. Quinta-feira, 10 de Novembro de 11
  • 61. Quinta-feira, 10 de Novembro de 11
  • 62. Quinta-feira, 10 de Novembro de 11
  • 63. Quinta-feira, 10 de Novembro de 11
  • 64. Quinta-feira, 10 de Novembro de 11
  • 65. Quinta-feira, 10 de Novembro de 11
  • 66. Quinta-feira, 10 de Novembro de 11
  • 67. Quinta-feira, 10 de Novembro de 11
  • 68. PROVIDE SKIP-LINKS Most people choose to hide the skip links. That’s not necessarily bad, if done right.Quinta-feira, 10 de Novembro de 11
  • 69. HIDING SKIP-LINKS #skiplinks { display:none; = BAD } #skiplinks { text-indent:-9999px; = BAD }Quinta-feira, 10 de Novembro de 11
  • 70. HIDING SKIP-LINKS, THE RIGHT WAY #skiplinks a, #skiplinks a:hover, #skiplinks a:visited { position:absolute; left:0px; positions the links top:-500px; outside of the width:1px; viewport height:1px; overflow:hidden; }Quinta-feira, 10 de Novembro de 11
  • 71. HIDING SKIP-LINKS, THE RIGHT WAY #skiplinks a:active, #skiplinks a:focus { shows the links position:static; when they are width:auto; activated (e.g. height:auto; when navigating } with the keyboard)Quinta-feira, 10 de Novembro de 11
  • 72. HIDING SKIP-LINKS, THE RIGHT WAY #skiplinks a:active, #skiplinks a:focus { shows the links position:static; when they are width:auto; activated (e.g. height:auto; when navigating } with the keyboard) you can play with the positioning to place the links wherever you wantQuinta-feira, 10 de Novembro de 11
  • 73. HIDING SKIP-LINKS, THE RIGHT WAY shows the links when they are activated (e.g. when navigating with the keyboard)Quinta-feira, 10 de Novembro de 11
  • 74. HIDING SKIP-LINKS, THE RIGHT WAY shows the links when they are activated (e.g. when navigating with the keyboard)Quinta-feira, 10 de Novembro de 11
  • 75. 4.Quinta-feira, 10 de Novembro de 11
  • 76. TABLES DONE RIGHTQuinta-feira, 10 de Novembro de 11
  • 77. TABLES DONE RIGHT If you must use tables (remember kids, only for tabular data), please do it the right wayQuinta-feira, 10 de Novembro de 11
  • 78. How?Quinta-feira, 10 de Novembro de 11
  • 79. Define a summary and a caption for the tableQuinta-feira, 10 de Novembro de 11
  • 80. TABLES DONE RIGHT <table summary=”Example Table”> <caption>Table 1: Company data</caption> <thead> <tr> <th scope=”col”>Company</th> <th scope=”col”>Employees</th> <th scope=”col”>Founded</th> </tr> </thead>Quinta-feira, 10 de Novembro de 11
  • 81. Use the th element to specify row and column headers in data tablesQuinta-feira, 10 de Novembro de 11
  • 82. TABLES DONE RIGHT <table summary=”Example Table”> <caption>Table 1: Company data</caption> <thead> <tr> <th scope=”col”>Company</th> <th scope=”col”>Employees</th> <th scope=”col”>Founded</th> </tr> </thead>Quinta-feira, 10 de Novembro de 11
  • 83. TABLES DONE RIGHT <tbody> <tr> <th scope=”row”>ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <th scope=”row”>XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </tbody> </table>Quinta-feira, 10 de Novembro de 11
  • 84. AND IT LOOKS LIKE THIS Source: Bring on the tables http://1.gf.gc.sl.ptQuinta-feira, 10 de Novembro de 11
  • 85. 5.Quinta-feira, 10 de Novembro de 11
  • 86. DON’T REMOVE THE LINK OUTLINEQuinta-feira, 10 de Novembro de 11
  • 87. DON’T REMOVE THE LINK OUTLINE Users that rely on the keyboard for navigation need to know which link is focusedQuinta-feira, 10 de Novembro de 11
  • 88. SO, DON’T EVER, EVER, REMOVE THE OUTLINE OF LINKS a{ outline:none; = BAD }Quinta-feira, 10 de Novembro de 11
  • 89. But, but, the outline looks sooooo ugly...Quinta-feira, 10 de Novembro de 11
  • 90. OK, YOU CAN REMOVE THE OUTLINE, BUT ONLY WHEN THE LINK IS ACTIVE a:active { outline:none; }Quinta-feira, 10 de Novembro de 11
  • 91. 6.Quinta-feira, 10 de Novembro de 11
  • 92. DON’T CREATE EMPTY LINKSQuinta-feira, 10 de Novembro de 11
  • 93. DON’T CREATE EMPTY LINKS Whenever you put a link on a web page, make sure that it has text content. This may seem incredibly obvious...Quinta-feira, 10 de Novembro de 11
  • 94. LINKS WITH NO TEXT CONTENT <a href="http://example.com/"></a> <a href="http://example.com/"><img src="image.gif" alt=""></a>Quinta-feira, 10 de Novembro de 11
  • 95. THERE, I FIXED IT <a href="http://example.com/">Link text</a> <a href="http://example.com/"><img src="image.gif" alt="Link text"></a>Quinta-feira, 10 de Novembro de 11
  • 96. 7.Quinta-feira, 10 de Novembro de 11
  • 97. ALWAYS REVEAL THE LINK DESTINATIONQuinta-feira, 10 de Novembro de 11
  • 98. ALWAYS REVEAL THE LINK DESTINATION You should always reveal links that open in a new window or link to a non-HTML documentQuinta-feira, 10 de Novembro de 11
  • 99. HIGHLIGHT LINKS THAT OPEN IN A NEW WINDOW a[target="_blank"], a[target="new"] { padding: 0 15px 0 0; background-image: url(images/new_window.gif); background-repeat: no-repeat; background-position: right center; }Quinta-feira, 10 de Novembro de 11
  • 100. HIGHLIGHT LINKS THAT OPEN IN A NEW WINDOW a[target="_blank"], a[target="new"] { padding: 0 15px 0 0; background-image: url(images/new_window.gif); background-repeat: no-repeat; background-position: right center; }Quinta-feira, 10 de Novembro de 11
  • 101. LOOK MA, NO IMAGES! a[target="_blank"]:after, a[target="new"]:after { you can use any other HTML entity content: "00a0 27A0"; instead of this one }Quinta-feira, 10 de Novembro de 11
  • 102. LOOK MA, NO IMAGES! a[target="_blank"]:after, a[target="new"]:after { you can use any other HTML entity content: "00a0 27A0"; instead of this one }Quinta-feira, 10 de Novembro de 11
  • 103. YOU CAN ALSO USE THIS FOR LINKS TO NON-HTML DOCUMENTS a[href$="pdf"]:after { content: " (PDF)"; Link text (PDF) } a[href$=".doc"]:after { content: " (DOC)"; Link text (DOC) }Quinta-feira, 10 de Novembro de 11
  • 104. AND ALSO FOR LINKS TO EXTERNAL WEBSITES a[href^="http"]:after { External links content: "21D7"; (start with http) } a[href^="http://yourwebsite.com"]:after, a[href^="http://www.yourwebsite.com"]:after { content: ""; Internal absolute } linksQuinta-feira, 10 de Novembro de 11
  • 105. BUT A BETTER SOLLUTION WOULD BE <a class="external" href="http://whatever.com">Link text<span> (external link)</span></a> Link text (external link)Quinta-feira, 10 de Novembro de 11
  • 106. BUT A BETTER SOLLUTION WOULD BE <a class="external" href="http://whatever.com">Link text<span> (external link)</span></a> a.external span { position: absolute; left: -5000px; width: 4000px; } Link textQuinta-feira, 10 de Novembro de 11
  • 107. 8.Quinta-feira, 10 de Novembro de 11
  • 108. MORE LINKING TIPSQuinta-feira, 10 de Novembro de 11
  • 109. MORE LINKING TIPS When using big linkable blocks, make sure the most important info comes firstQuinta-feira, 10 de Novembro de 11
  • 110. MORE LINKING TIPS When using big linkable blocks, make sure the most important info comes firstQuinta-feira, 10 de Novembro de 11
  • 111. MORE LINKING TIPS When using JavaScript triggered links, you should always provide a href <a class=”ajax_do_this”> = BADQuinta-feira, 10 de Novembro de 11
  • 112. MORE LINKING TIPS When using JavaScript triggered links, you should always provide a href <a class=”ajax_do_this”> = BAD <a href=”#” class=”ajax_do_this”> = GOODQuinta-feira, 10 de Novembro de 11
  • 113. MORE LINKING TIPS When using JavaScript triggered links, you should always provide a href <a class=”ajax_do_this”> = BAD <a href=”#” class=”ajax_do_this”> = GOOD <a href=”do-this-if-no-js.html” class=”ajax_do_this”> = BETTERQuinta-feira, 10 de Novembro de 11
  • 114. 9.Quinta-feira, 10 de Novembro de 11
  • 115. NON-MOUSE NAVIGATIONQuinta-feira, 10 de Novembro de 11
  • 116. NON-MOUSE NAVIGATION You should always provide navigation feedback for users that don’t or can’t use the mouseQuinta-feira, 10 de Novembro de 11
  • 117. NON-MOUSE NAVIGATION You should always provide navigation feedback for users that don’t or can’t use the mouse This includes the ones that use the keyboard to navigate; their fingers (tactile screens); or other assistive devicesQuinta-feira, 10 de Novembro de 11
  • 118. Pro tip: Whenever you use :hover, also use :focusQuinta-feira, 10 de Novembro de 11
  • 119. Pro tip: Whenever you use :hover, also use :focus You may want to include the :active state as well to cater for people who use Internet Explorer 7 and earlier, since IE 8 is the first version to support :focusQuinta-feira, 10 de Novembro de 11
  • 120. MAKE LINKS FOCUSABLE TO EVERYONE a:hover { color:red; } a:hover, a:focus, a:active { = BETTER color:red; }Quinta-feira, 10 de Novembro de 11
  • 121. 10.Quinta-feira, 10 de Novembro de 11
  • 122. PARAGRAPH SPACINGQuinta-feira, 10 de Novembro de 11
  • 123. PARAGRAPH SPACING Make sure that there is enough spacing between paragraphsQuinta-feira, 10 de Novembro de 11
  • 124. PARAGRAPH SPACING Make sure that there is enough spacing between paragraphs Like the line-height tip, this greatly improves text readabilityQuinta-feira, 10 de Novembro de 11
  • 125. ADD SOME SPACING BETWEEN PARAGRAPHS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et felis malesuada massa fermentum faucibus sit amet sed augue. Aliquam aliquam auctor diam, sed varius nunc tempus in. Fusce vel egestas massa. Quisque sit amet libero risus, ac viverra enim. p { margin: 0;}Quinta-feira, 10 de Novembro de 11
  • 126. ADD SOME SPACING BETWEEN PARAGRAPHS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et felis malesuada massa fermentum faucibus sit amet sed augue. Aliquam aliquam auctor diam, sed varius nunc tempus in. Fusce vel egestas massa. Quisque sit amet libero risus, ac viverra enim. p { margin: 10px 0;}Quinta-feira, 10 de Novembro de 11
  • 127. And, as stupid as this tip might be, you should always use <p> for paragraphsQuinta-feira, 10 de Novembro de 11
  • 128. WE SEE THIS A LOT This text is the first paragraph. <br> <br> = WRONG This text is the second paragraph. <p>This text is the first paragraph.</p> <p>This text is the second paragraph.</p>Quinta-feira, 10 de Novembro de 11
  • 129. 11.Quinta-feira, 10 de Novembro de 11
  • 130. CHECK THE COLOR CONTRASTQuinta-feira, 10 de Novembro de 11
  • 131. CHECK THE COLOR CONTRAST Check the contrast between the foreground and the background colorsQuinta-feira, 10 de Novembro de 11
  • 132. CHECK THE COLOR CONTRAST Check the contrast between the foreground and the background colors http://snook.ca/technical/colour_contrast/ colour.html or Google for “color contrast checker”Quinta-feira, 10 de Novembro de 11
  • 133. CHECK THE COLOR CONTRASTQuinta-feira, 10 de Novembro de 11
  • 134. CHECK THE COLOR CONTRASTQuinta-feira, 10 de Novembro de 11
  • 135. 12.Quinta-feira, 10 de Novembro de 11
  • 136. ABOUT THE ALT ATTRIBUTEQuinta-feira, 10 de Novembro de 11
  • 137. ABOUT THE ALT ATTRIBUTE The alt attribute provides a textual alternative to imagesQuinta-feira, 10 de Novembro de 11
  • 138. ABOUT THE ALT ATTRIBUTE The alt attribute provides a textual alternative to images But you shouldn’t add an alternative text to every image in your websiteQuinta-feira, 10 de Novembro de 11
  • 139. Waaa? No alt text?Quinta-feira, 10 de Novembro de 11
  • 140. I didn’t say thatQuinta-feira, 10 de Novembro de 11
  • 141. You must ALWAYS add the alt attributeQuinta-feira, 10 de Novembro de 11
  • 142. BUT SOMETIMES IT’S BETTER IF IT’S BLANK <img src=”boobs.png” alt=”Boobs” /> Include alternative text only when the image content is relevantQuinta-feira, 10 de Novembro de 11
  • 143. BUT SOMETIMES IT’S BETTER IF IT’S BLANK <img src=”boobs.png” alt=”Boobs” /> Include alternative text only when the image content is relevant <img src=”useless-decorative-picture.png” alt=”” /> If the image is irrelevant, the alt should be there, but blankQuinta-feira, 10 de Novembro de 11
  • 144. 13.Quinta-feira, 10 de Novembro de 11
  • 145. ABOUT THE TITLE ATTRIBUTEQuinta-feira, 10 de Novembro de 11
  • 146. ABOUT THE TITLE ATTRIBUTE The title attribute should be used to provide extra information about some element on the pageQuinta-feira, 10 de Novembro de 11
  • 147. So, stop duplicating the link text inside the title attributeQuinta-feira, 10 de Novembro de 11
  • 148. USING THE TITTLE ATTRIBUTE THE RIGHT WAY <a href=”article.html” title=”I like icecream”>I like Icecream</a> = BAD Screen readers will just repeat the link text twiceQuinta-feira, 10 de Novembro de 11
  • 149. USING THE TITTLE ATTRIBUTE THE RIGHT WAY <a href=”article.html” title=”I like icecream”>I like Icecream</a> = BAD Screen readers will just repeat the link text twice <a href=”article.html” title=”Select an option to see the corresponding items”>Select an option</a> The title should provide some extra information that is not immediatly visible on the screenQuinta-feira, 10 de Novembro de 11
  • 150. 14.Quinta-feira, 10 de Novembro de 11
  • 151. USE HEADINGS FOR TITLESQuinta-feira, 10 de Novembro de 11
  • 152. USE HEADINGS FOR TITLES HTML headings, created with the h1-h6 elements, are very useful and should be used for anything that visually looks or acts like a heading.Quinta-feira, 10 de Novembro de 11
  • 153. USE HEADINGS FOR TITLESQuinta-feira, 10 de Novembro de 11
  • 154. USE HEADINGS FOR TITLES Each document should have a logical heading structure that starts at level 1 and doesn’t skip any levelsQuinta-feira, 10 de Novembro de 11
  • 155. USE HEADINGS FOR TITLES Each document should have a logical heading structure that starts at level 1 and doesn’t skip any levels The title of the document’s main content should be a level 1 headingQuinta-feira, 10 de Novembro de 11
  • 156. USE HEADINGS FOR TITLES Each document should have a logical heading structure that starts at level 1 and doesn’t skip any levels The title of the document’s main content should be a level 1 heading There should be only one level 1 heading in each document *Quinta-feira, 10 de Novembro de 11
  • 157. * WE CAN HAVE MORE THAN ONE <H1> BUT ONLY FOR THE CONTENT TITLE <h1>Organisation Name</h1> <h2>Main menu</h2> <ul><li>...</li></ul> <h2>Sub menu</h2> <ul><li>...</li></ul> <div id="content-primary"> <h1>Page title</h1> <p>Page content.</p> </div>Quinta-feira, 10 de Novembro de 11
  • 158. AND THE HEADINGS SHOULD REPRESENT THE DOCUMENT TREE H1 - H2 - H2 - H3 - H4 - H3 - H2 - H3 - H2 - H3 - H4 - H5Quinta-feira, 10 de Novembro de 11
  • 159. 15.Quinta-feira, 10 de Novembro de 11
  • 160. USE THE LANG ATTRIBUTEQuinta-feira, 10 de Novembro de 11
  • 161. USE THE LANG ATTRIBUTE Screen readers need to know in which language the document is writtenQuinta-feira, 10 de Novembro de 11
  • 162. USE THE LANG ATTRIBUTE Or else, they will use the default English speaker for every text And if the website is not written in English, well, you can imagine how it would sound like...Quinta-feira, 10 de Novembro de 11
  • 163. HOW TO APPLY THE LANG ATTRIBUTE <html lang="pt-PT"> The entire website is written in portugueseQuinta-feira, 10 de Novembro de 11
  • 164. HOW TO APPLY THE LANG ATTRIBUTE <html lang="pt-PT"> The entire website is written in portuguese <span lang="en">website</span> This word or phrase is written in englishQuinta-feira, 10 de Novembro de 11
  • 165. 16.Quinta-feira, 10 de Novembro de 11
  • 166. SPECIFY BACKGROUND COLORSQuinta-feira, 10 de Novembro de 11
  • 167. SPECIFY BACKGROUND COLORS Remember to specify a solid background color when using background imagesQuinta-feira, 10 de Novembro de 11
  • 168. Quinta-feira, 10 de Novembro de 11 Hello :)
  • 169. If the image fails to load, the text might become unreadableQuinta-feira, 10 de Novembro de 11 Hello :)
  • 170. But because we’re smart, we added a solid background color :)Quinta-feira, 10 de Novembro de 11 Hello :)
  • 171. SO, ALWAYS APPLY A SOLID BACKGROUND COLOR AS A FALL BACK #some_div { background: #7A593A url(“wilde.jpg”) no-repeat; }Quinta-feira, 10 de Novembro de 11
  • 172. 17.Quinta-feira, 10 de Novembro de 11
  • 173. WRITE USEFUL PAGE TITLESQuinta-feira, 10 de Novembro de 11
  • 174. WRITE USEFUL PAGE TITLES The page title is what your users will see first when searching for your page/website (either on a search engine, or on the browser’s tab bar and favorites menu)Quinta-feira, 10 de Novembro de 11
  • 175. THERE ARE SOME SIMPLE RULES Reverse the order of the title, i.e. put the document title first and the site name last. This makes the document title appear first in bookmark lists, browser tabs, and search results. <title>Page Title - Website Title</title>Quinta-feira, 10 de Novembro de 11
  • 176. THERE ARE SOME SIMPLE RULES Reverse the order of the title, i.e. put the document title first and the site name last. This makes the document title appear first in bookmark lists, browser tabs, and search results. <title>Page Title - Website Title</title> vs.Quinta-feira, 10 de Novembro de 11
  • 177. THERE ARE SOME SIMPLE RULES Use a plain separator character that doesn’t cause confusion - or | Keep fancy characters, repetitions and other attempts at graphic design out of page titles <title>Page Title - Website Title</title> <title>Page Title | Website Title</title>Quinta-feira, 10 de Novembro de 11
  • 178. THERE ARE SOME SIMPLE RULES Write titles for humans, not search engines Don’t put keywords or breadcrumbs on the page title <title>Page Title - Subcategory - Category - Website Title</title> = BADQuinta-feira, 10 de Novembro de 11
  • 179. 18.Quinta-feira, 10 de Novembro de 11
  • 180. USE LABELS IN FORMSQuinta-feira, 10 de Novembro de 11
  • 181. USE LABELS IN FORMS Use the label element to make your HTML forms accessibleQuinta-feira, 10 de Novembro de 11
  • 182. USE LABELS IN FORMS Use the label element to make your HTML forms accessible The label element can be associated with its form control either implicitly or explicitly.Quinta-feira, 10 de Novembro de 11
  • 183. HOW TO USE LABELS IN FORMS An implicit association is created by putting the form control inside the label element <label>Your Name: <input type=”text” /></label> <label><input type=”checkbox” value=”1” /> Pick Me</label>Quinta-feira, 10 de Novembro de 11
  • 184. HOW TO USE LABELS IN FORMS An explicit association is created by giving the label element a for attribute with the same value as the form control’s id attribute. <label for=”name”>Your Name</label> <input type=”text” id=”name” /> <input type=”checkbox” value=”1” id=”option1” /> <label for=”option1”> Pick Me</label>Quinta-feira, 10 de Novembro de 11
  • 185. USING LABELS INCREASES THE CLICKABLE AREA Without labels Male FemaleQuinta-feira, 10 de Novembro de 11
  • 186. USING LABELS INCREASES THE CLICKABLE AREA Without labels Male Female Clickable areaQuinta-feira, 10 de Novembro de 11
  • 187. USING LABELS INCREASES THE CLICKABLE AREA With labels Male Female Clickable areaQuinta-feira, 10 de Novembro de 11
  • 188. 19.Quinta-feira, 10 de Novembro de 11
  • 189. GROUP FORM ELEMENTSQuinta-feira, 10 de Novembro de 11
  • 190. GROUP FORM ELEMENTS Use the fieldset and legend elements to group HTML form controlsQuinta-feira, 10 de Novembro de 11
  • 191. Do not use the fieldset element if all you want to do is create a graphical border around some content on a pageQuinta-feira, 10 de Novembro de 11
  • 192. Use fieldset and legend to group logically related form controls, and always use both elements togetherQuinta-feira, 10 de Novembro de 11
  • 193. GROUP FORM ELEMENTS Since some screen readers will announce the legend text before each form control, it is important to keep the legend text concise and consider how the legend and label texts will work when put together.Quinta-feira, 10 de Novembro de 11
  • 194. COMBINING LEGEND WITH LABELS <fieldset> <legend>Favourite colour</legend> <input type="radio" name="fav-col" id="fav-col-1" value="red"><label for="fav-col-1">Red</label> <input type="radio" name="fav-col" id="fav-col-2" value="green"><label for="fav-col-2">Green</label> <input type="radio" name="fav-col" id="fav-col-3" value="blue"><label for="fav-col-3">Blue</label> </fieldset>Quinta-feira, 10 de Novembro de 11
  • 195. GROUP FORM ELEMENTS Use the optgroup element to group select optionsQuinta-feira, 10 de Novembro de 11
  • 196. GROUPING OPTIONS <label for="cars">Choose a car brand:</label> <select name="cars" id="cars"> <option value="none" selected>None</option> <optgroup label="Swedish"> <option value="saab">Saab</option> <option value="volvo">Volvo</option> </optgroup> <optgroup label="French"> <option value="citroen">Citroën</option> <option value="peugeot">Peugeot</option> <option value="renault">Renault</option> </optgroup> </select>Quinta-feira, 10 de Novembro de 11
  • 197. GROUPING OPTIONS <label for="cars">Choose a car brand:</label> <select name="cars" id="cars"> <option value="none" selected>None</option> <optgroup label="Swedish"> <option value="saab">Saab</option> <option value="volvo">Volvo</option> </optgroup> <optgroup label="French"> <option value="citroen">Citroën</option> <option value="peugeot">Peugeot</option> <option value="renault">Renault</option> </optgroup> </select>Quinta-feira, 10 de Novembro de 11
  • 198. 20.Quinta-feira, 10 de Novembro de 11
  • 199. ENLARGEQuinta-feira, 10 de Novembro de 11
  • 200. ENLARGE YOURQuinta-feira, 10 de Novembro de 11
  • 201. ENLARGE YOUR BUTTONSQuinta-feira, 10 de Novembro de 11
  • 202. ENLARGE YOUR BUTTONS Make your buttons and clickable elements largerQuinta-feira, 10 de Novembro de 11
  • 203. ENLARGE YOUR BUTTONS Users with limited or low mobility may have dificulty to perform precise movements. We can make their life easier by enlarging the clickable elements.Quinta-feira, 10 de Novembro de 11
  • 204. Quinta-feira, 10 de Novembro de 11
  • 205. Quinta-feira, 10 de Novembro de 11
  • 206. Quinta-feira, 10 de Novembro de 11
  • 207. If you make your website easier to use for users with special needsQuinta-feira, 10 de Novembro de 11
  • 208. You’re also making it easier to use for everyone elseQuinta-feira, 10 de Novembro de 11
  • 209. Thank YouQuinta-feira, 10 de Novembro de 11
  • 210. Thank You @ivogomes http://www.ivogomes.com/talks/a11y.pdfQuinta-feira, 10 de Novembro de 11