HTML/CSS tips to improve the accessibility of your websites

23,754 views
21,542 views

Published on

My Accessibility talk for Codebits 2011

Published in: Technology, Design
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
23,754
On SlideShare
0
From Embeds
0
Number of Embeds
5,999
Actions
Shares
0
Downloads
310
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

HTML/CSS tips to improve the accessibility of your websites

  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

×