HTML/CSS tips to improve the accessibility of your websites

HTML/CSS TIPS TO IMPROVE THE ACCESSIBILITY OF YOUR WEBSITES Ivo Gomes @ivogomes www.ivogomes.comQuinta-feira, 10 de Novembro de 11

Why should I care?Quinta-feira, 10 de Novembro de 11

ACCESSIBILITY MYTHSQuinta-feira, 10 de Novembro de 11

ACCESSIBILITY MYTHS Accessibility is just for blind peopleQuinta-feira, 10 de Novembro de 11

ACCESSIBILITY MYTHS Accessibility is just for blind people Accessible websites are ugly and boringQuinta-feira, 10 de Novembro de 11

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

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

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

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

OK, so what can I do?Quinta-feira, 10 de Novembro de 11

1.Quinta-feira, 10 de Novembro de 11

ENLARGEQuinta-feira, 10 de Novembro de 11

ENLARGE YOURQuinta-feira, 10 de Novembro de 11

ENLARGE YOUR FONTQuinta-feira, 10 de Novembro de 11

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

Pro tip: Try reading your website when seated 1 meter away from the screenQuinta-feira, 10 de Novembro de 11

USE RELATIVE FONT-SIZES html { font-size: 62.5%; } body { font-size: 1.6em; = 16px (sort of) }Quinta-feira, 10 de Novembro de 11

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

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

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

INCREASE YOUR LINE-HEIGHTQuinta-feira, 10 de Novembro de 11

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

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

PROVIDE SKIP-LINKSQuinta-feira, 10 de Novembro de 11

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

Quinta-feira, 10 de Novembro de 11

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

HIDING SKIP-LINKS #skiplinks { display:none; = BAD } #skiplinks { text-indent:-9999px; = BAD }Quinta-feira, 10 de Novembro de 11

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

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

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

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

TABLES DONE RIGHTQuinta-feira, 10 de Novembro de 11

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

How?Quinta-feira, 10 de Novembro de 11

Define a summary and a caption for the tableQuinta-feira, 10 de Novembro de 11

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

Use the th element to specify row and column headers in data tablesQuinta-feira, 10 de Novembro de 11

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

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

AND IT LOOKS LIKE THIS Source: Bring on the tables http://1.gf.gc.sl.ptQuinta-feira, 10 de Novembro de 11

DON’T REMOVE THE LINK OUTLINEQuinta-feira, 10 de Novembro de 11

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

SO, DON’T EVER, EVER, REMOVE THE OUTLINE OF LINKS a{ outline:none; = BAD }Quinta-feira, 10 de Novembro de 11

But, but, the outline looks sooooo ugly...Quinta-feira, 10 de Novembro de 11

OK, YOU CAN REMOVE THE OUTLINE, BUT ONLY WHEN THE LINK IS ACTIVE a:active { outline:none; }Quinta-feira, 10 de Novembro de 11

DON’T CREATE EMPTY LINKSQuinta-feira, 10 de Novembro de 11

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

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

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

ALWAYS REVEAL THE LINK DESTINATIONQuinta-feira, 10 de Novembro de 11

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

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

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

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

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

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

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

MORE LINKING TIPSQuinta-feira, 10 de Novembro de 11

MORE LINKING TIPS When using big linkable blocks, make sure the most important info comes firstQuinta-feira, 10 de Novembro de 11

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

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

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

NON-MOUSE NAVIGATIONQuinta-feira, 10 de Novembro de 11

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

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

Pro tip: Whenever you use :hover, also use :focusQuinta-feira, 10 de Novembro de 11

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

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

PARAGRAPH SPACINGQuinta-feira, 10 de Novembro de 11

PARAGRAPH SPACING Make sure that there is enough spacing between paragraphsQuinta-feira, 10 de Novembro de 11

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

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

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

And, as stupid as this tip might be, you should always use <p> for paragraphsQuinta-feira, 10 de Novembro de 11

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

CHECK THE COLOR CONTRASTQuinta-feira, 10 de Novembro de 11

CHECK THE COLOR CONTRAST Check the contrast between the foreground and the background colorsQuinta-feira, 10 de Novembro de 11

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

CHECK THE COLOR CONTRASTQuinta-feira, 10 de Novembro de 11

ABOUT THE ALT ATTRIBUTEQuinta-feira, 10 de Novembro de 11

ABOUT THE ALT ATTRIBUTE The alt attribute provides a textual alternative to imagesQuinta-feira, 10 de Novembro de 11

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

Waaa? No alt text?Quinta-feira, 10 de Novembro de 11

I didn’t say thatQuinta-feira, 10 de Novembro de 11

You must ALWAYS add the alt attributeQuinta-feira, 10 de Novembro de 11

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

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

ABOUT THE TITLE ATTRIBUTEQuinta-feira, 10 de Novembro de 11

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

So, stop duplicating the link text inside the title attributeQuinta-feira, 10 de Novembro de 11

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

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

USE HEADINGS FOR TITLESQuinta-feira, 10 de Novembro de 11

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

USE HEADINGS FOR TITLESQuinta-feira, 10 de Novembro de 11

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

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

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

* 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

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

USE THE LANG ATTRIBUTEQuinta-feira, 10 de Novembro de 11

USE THE LANG ATTRIBUTE Screen readers need to know in which language the document is writtenQuinta-feira, 10 de Novembro de 11

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

HOW TO APPLY THE LANG ATTRIBUTE <html lang="pt-PT"> The entire website is written in portugueseQuinta-feira, 10 de Novembro de 11

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

SPECIFY BACKGROUND COLORSQuinta-feira, 10 de Novembro de 11

SPECIFY BACKGROUND COLORS Remember to specify a solid background color when using background imagesQuinta-feira, 10 de Novembro de 11

Quinta-feira, 10 de Novembro de 11 Hello :)

If the image fails to load, the text might become unreadableQuinta-feira, 10 de Novembro de 11 Hello :)

But because we’re smart, we added a solid background color :)Quinta-feira, 10 de Novembro de 11 Hello :)

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

WRITE USEFUL PAGE TITLESQuinta-feira, 10 de Novembro de 11

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

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

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

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

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

USE LABELS IN FORMSQuinta-feira, 10 de Novembro de 11

USE LABELS IN FORMS Use the label element to make your HTML forms accessibleQuinta-feira, 10 de Novembro de 11

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

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

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

USING LABELS INCREASES THE CLICKABLE AREA Without labels Male FemaleQuinta-feira, 10 de Novembro de 11

USING LABELS INCREASES THE CLICKABLE AREA Without labels Male Female Clickable areaQuinta-feira, 10 de Novembro de 11

USING LABELS INCREASES THE CLICKABLE AREA With labels Male Female Clickable areaQuinta-feira, 10 de Novembro de 11

GROUP FORM ELEMENTSQuinta-feira, 10 de Novembro de 11

GROUP FORM ELEMENTS Use the fieldset and legend elements to group HTML form controlsQuinta-feira, 10 de Novembro de 11

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

Use fieldset and legend to group logically related form controls, and always use both elements togetherQuinta-feira, 10 de Novembro de 11

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

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

GROUP FORM ELEMENTS Use the optgroup element to group select optionsQuinta-feira, 10 de Novembro de 11

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

ENLARGEQuinta-feira, 10 de Novembro de 11

ENLARGE YOURQuinta-feira, 10 de Novembro de 11

ENLARGE YOUR BUTTONSQuinta-feira, 10 de Novembro de 11

ENLARGE YOUR BUTTONS Make your buttons and clickable elements largerQuinta-feira, 10 de Novembro de 11

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

Quinta-feira, 10 de Novembro de 11

If you make your website easier to use for users with special needsQuinta-feira, 10 de Novembro de 11

You’re also making it easier to use for everyone elseQuinta-feira, 10 de Novembro de 11

Thank YouQuinta-feira, 10 de Novembro de 11

Thank You @ivogomes http://www.ivogomes.com/talks/a11y.pdfQuinta-feira, 10 de Novembro de 11

http://www.ivogomes.com	2241
http://webhosting.pl	1351
http://spotgeek.net	236
http://drupal.pl	201
http://www.netvibes.com	89
http://www.clasificatium.com	31
http://trunk.regular.elvis.epistema.local	28
http://staging.voestalpine.com	17
http://wp2.ibermasters.com	13
http://feeds.feedburner.com	9
http://dashboard.bloglines.com	7
http://quicktips.livetech.pt	7
http://paper.li	4
http://comunidad.iebschool.com	3
http://a0.twimg.com	2
http://translate.googleusercontent.com	2
http://feedproxy.google.com	1
http://the-refreshing-sip.blogspot.com	1
http://us-w1.rockmelt.com	1
http://feeds2.feedburner.com	1
https://webhosting.pl	1
http://www.google.com.br	1

HTML/CSS tips to improve the accessibility of your websites

by Ivo Gomes on Nov 14, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

22 Embeds 4,247

Statistics

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