HTML/CSS TIPS TOIMPROVE THE ACCESSIBILITY OF YOUR WEBSITES
Ivo Gomes@ivogomes www.ivogomes.com
Quinta-feira, 10 de Novembro de 11
Why should I care?
Quinta-feira, 10 de Novembro de 11
ACCESSIBILITYMYTHS
Quinta-feira, 10 de Novembro de 11
Accessibility is just for blind people
ACCESSIBILITYMYTHS
Quinta-feira, 10 de Novembro de 11
Accessibility is just for blind people
Accessible websites are ugly and boring
ACCESSIBILITYMYTHS
Quinta-feira, 10 de Novembro de 11
Accessibility is just for blind people
Accessible websites are ugly and boring
Accessibility is expensive and difficult
ACCESSIBILITYMYTHS
Quinta-feira, 10 de Novembro de 11
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
ACCESSIBILITYMYTHS
Quinta-feira, 10 de Novembro de 11
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
ACCESSIBILITYMYTHS
Quinta-feira, 10 de Novembro de 11
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 accessible
ACCESSIBILITYMYTHS
Quinta-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
ENLARGE
Quinta-feira, 10 de Novembro de 11
ENLARGEYOUR
Quinta-feira, 10 de Novembro de 11
ENLARGEYOUR
FONTQuinta-feira, 10 de Novembro de 11
ENLARGE YOURFONT
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 screen
Quinta-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.6em
Quinta-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
2.Quinta-feira, 10 de Novembro de 11
INCREASE YOURLINE-HEIGHT
Quinta-feira, 10 de Novembro de 11
INCREASE YOURLINE-HEIGHTLorem 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 YOURLINE-HEIGHTLorem 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
3.Quinta-feira, 10 de Novembro de 11
PROVIDESKIP-LINKS
Quinta-feira, 10 de Novembro de 11
PROVIDESKIP-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
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
PROVIDESKIP-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; top:-500px; width:1px; height:1px; overflow:hidden;}
positions the links outside of the viewport
Quinta-feira, 10 de Novembro de 11
HIDING SKIP-LINKS, THE RIGHT WAY
#skiplinks a:active, #skiplinks a:focus { position:static; width:auto; height:auto; }
shows the links when they are activated (e.g. when navigating with the keyboard)
Quinta-feira, 10 de Novembro de 11
HIDING SKIP-LINKS, THE RIGHT WAY
#skiplinks a:active, #skiplinks a:focus { position:static; width:auto; height:auto; }
shows the links when they are activated (e.g. when navigating with the keyboard)
you can play with the positioning to place the links wherever you want
Quinta-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
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
4.Quinta-feira, 10 de Novembro de 11
TABLESDONE RIGHT
Quinta-feira, 10 de Novembro de 11
TABLESDONE RIGHT
If you must use tables (remember kids, only for tabular data), please do it the right way
Quinta-feira, 10 de Novembro de 11
How?
Quinta-feira, 10 de Novembro de 11
Define a summary and a caption for the table
Quinta-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 tables
Quinta-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 tableshttp://1.gf.gc.sl.pt
Quinta-feira, 10 de Novembro de 11
5.Quinta-feira, 10 de Novembro de 11
DON’T REMOVE THELINK OUTLINE
Quinta-feira, 10 de Novembro de 11
DON’T REMOVE THELINK OUTLINE
Users that rely on the keyboard for navigation need to know which link is focused
Quinta-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
6.Quinta-feira, 10 de Novembro de 11
DON’T CREATEEMPTY LINKS
Quinta-feira, 10 de Novembro de 11
DON’T CREATEEMPTY 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
7.Quinta-feira, 10 de Novembro de 11
ALWAYS REVEAL THELINK DESTINATION
Quinta-feira, 10 de Novembro de 11
ALWAYS REVEAL THELINK DESTINATION
You should always reveal links that open in a new window or link to a non-HTML document
Quinta-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
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 { content: "\00a0 \27A0";}
you can use any other HTML entity instead of this one
Quinta-feira, 10 de Novembro de 11
LOOK MA, NO IMAGES!
a[target="_blank"]:after,a[target="new"]:after { content: "\00a0 \27A0";}
you can use any other HTML entity 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)";}
a[href$=".doc"]:after { content: " (DOC)";}
Link text (PDF)
Link text (DOC)
Quinta-feira, 10 de Novembro de 11
AND ALSO FOR LINKS TO EXTERNAL WEBSITES
a[href^="http"]:after { content: "\21D7";}
a[href^="http://yourwebsite.com"]:after,a[href^="http://www.yourwebsite.com"]:after { content: "";}
External links (start with http)
Internal absolute links
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>
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 text
Quinta-feira, 10 de Novembro de 11
8.Quinta-feira, 10 de Novembro de 11
MORELINKING TIPS
Quinta-feira, 10 de Novembro de 11
MORELINKING TIPS
When using big linkable blocks, make sure the most important info comes first
Quinta-feira, 10 de Novembro de 11
MORELINKING TIPS
When using big linkable blocks, make sure the most important info comes first
Quinta-feira, 10 de Novembro de 11
MORELINKING TIPS
When using JavaScript triggered links, you should always provide a href
<a class=”ajax_do_this”> = BAD
Quinta-feira, 10 de Novembro de 11
MORELINKING 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
Quinta-feira, 10 de Novembro de 11
MORELINKING 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”> = BETTER
Quinta-feira, 10 de Novembro de 11
9.Quinta-feira, 10 de Novembro de 11
NON-MOUSENAVIGATION
Quinta-feira, 10 de Novembro de 11
NON-MOUSENAVIGATION
You should always provide navigation feedback for users that don’t or can’t use the mouse
Quinta-feira, 10 de Novembro de 11
NON-MOUSENAVIGATION
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 devices
Quinta-feira, 10 de Novembro de 11
Pro tip: Whenever you use :hover, also use :focus
Quinta-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 :focus
Quinta-feira, 10 de Novembro de 11
MAKE LINKS FOCUSABLE TO EVERYONE
a:hover{ color:red;}
a:hover,a:focus,a:active{ color:red;}
= BETTER
Quinta-feira, 10 de Novembro de 11
10.Quinta-feira, 10 de Novembro de 11
PARAGRAPHSPACING
Quinta-feira, 10 de Novembro de 11
PARAGRAPHSPACING
Make sure that there is enough spacing between paragraphs
Quinta-feira, 10 de Novembro de 11
PARAGRAPHSPACING
Make sure that there is enough spacing between paragraphs
Like the line-height tip, this greatly improves text readability
Quinta-feira, 10 de Novembro de 11
ADD SOME SPACING BETWEEN PARAGRAPHS
p { margin: 0;}
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.
Quinta-feira, 10 de Novembro de 11
ADD SOME SPACING BETWEEN PARAGRAPHS
p { margin: 10px 0;}
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.
Quinta-feira, 10 de Novembro de 11
And, as stupid as this tip might be, you should always use <p> for paragraphs
Quinta-feira, 10 de Novembro de 11
WE SEE THIS A LOT
This text is the first paragraph.<br><br>This text is the second paragraph.
<p>This text is the first paragraph.</p><p>This text is the second paragraph.</p>
= WRONG
Quinta-feira, 10 de Novembro de 11
11.Quinta-feira, 10 de Novembro de 11
CHECK THECOLOR CONTRAST
Quinta-feira, 10 de Novembro de 11
CHECK THECOLOR CONTRAST
Check the contrast between the foreground and the background colors
Quinta-feira, 10 de Novembro de 11
CHECK THECOLOR 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 THECOLOR CONTRAST
Quinta-feira, 10 de Novembro de 11
CHECK THECOLOR CONTRAST
Quinta-feira, 10 de Novembro de 11
12.Quinta-feira, 10 de Novembro de 11
ABOUT THEALT ATTRIBUTE
Quinta-feira, 10 de Novembro de 11
ABOUT THEALT ATTRIBUTE
The alt attribute provides a textual alternative to images
Quinta-feira, 10 de Novembro de 11
ABOUT THEALT ATTRIBUTE
The alt attribute provides a textual alternative to images
But you shouldn’t add an alternative text to every image in your website
Quinta-feira, 10 de Novembro de 11
Waaa? No alt text?
Quinta-feira, 10 de Novembro de 11
I didn’t say that
Quinta-feira, 10 de Novembro de 11
You must ALWAYS add the alt attribute
Quinta-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
Quinta-feira, 10 de Novembro de 11
BUT SOMETIMES IT’S BETTER IF IT’S BLANK
<img src=”boobs.png” alt=”Boobs” />
<img src=”useless-decorative-picture.png” alt=”” />
Include alternative text only when the image content is relevant
If the image is irrelevant, the alt should be there, but blank
Quinta-feira, 10 de Novembro de 11
13.
Quinta-feira, 10 de Novembro de 11
ABOUT THETITLE ATTRIBUTE
Quinta-feira, 10 de Novembro de 11
ABOUT THETITLE ATTRIBUTE
The title attribute should be used to provide extra information about some element on the page
Quinta-feira, 10 de Novembro de 11
So, stop duplicating the link text inside the title attribute
Quinta-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
Quinta-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
<a href=”article.html” title=”Select an option to see the corresponding items”>Select an option</a>
Screen readers will just repeat the link text twice
The title should provide some extra information that is not immediatly visible on the screen
Quinta-feira, 10 de Novembro de 11
14.Quinta-feira, 10 de Novembro de 11
USE HEADINGSFOR TITLES
Quinta-feira, 10 de Novembro de 11
USE HEADINGSFOR 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 HEADINGSFOR TITLES
Quinta-feira, 10 de Novembro de 11
USE HEADINGSFOR TITLES
Each document should have a logical heading structure that starts at level 1 and doesn’t skip any levels
Quinta-feira, 10 de Novembro de 11
USE HEADINGSFOR 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
Quinta-feira, 10 de Novembro de 11
USE HEADINGSFOR 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
- H5
Quinta-feira, 10 de Novembro de 11
15.Quinta-feira, 10 de Novembro de 11
USE THELANG ATTRIBUTE
Quinta-feira, 10 de Novembro de 11
USE THELANG ATTRIBUTE
Screen readers need to know in which language the document is written
Quinta-feira, 10 de Novembro de 11
USE THELANG 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 portuguese
Quinta-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 english
Quinta-feira, 10 de Novembro de 11
16.Quinta-feira, 10 de Novembro de 11
SPECIFY BACKGROUND COLORS
Quinta-feira, 10 de Novembro de 11
SPECIFY BACKGROUND COLORS
Remember to specify a solid background color when using background images
Quinta-feira, 10 de Novembro de 11
Hello :)Quinta-feira, 10 de Novembro de 11
Hello :)
If the image fails to load, the text might become unreadable
Quinta-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
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
17.Quinta-feira, 10 de Novembro de 11
WRITE USEFUL PAGE TITLES
Quinta-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.
vs.
<title>Page Title - Website Title</title>
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> = BAD
Quinta-feira, 10 de Novembro de 11
18.Quinta-feira, 10 de Novembro de 11
USE LABELS IN FORMS
Quinta-feira, 10 de Novembro de 11
USE LABELS IN FORMS
Use the label element to make your HTML forms accessible
Quinta-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
MaleFemale
Without labels
Quinta-feira, 10 de Novembro de 11
USING LABELS INCREASES THE CLICKABLE AREA
MaleFemale
Without labels
Clickable area
Quinta-feira, 10 de Novembro de 11
USING LABELS INCREASES THE CLICKABLE AREA
MaleFemale
With labels
Clickable area
Quinta-feira, 10 de Novembro de 11
19.Quinta-feira, 10 de Novembro de 11
GROUP FORM ELEMENTS
Quinta-feira, 10 de Novembro de 11
GROUP FORM ELEMENTS
Use the fieldset and legend elements to group HTML form controls
Quinta-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 page
Quinta-feira, 10 de Novembro de 11
Use fieldset and legend to group logically related form controls, and always use both elements together
Quinta-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 options
Quinta-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
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
20.Quinta-feira, 10 de Novembro de 11
ENLARGE
Quinta-feira, 10 de Novembro de 11
ENLARGEYOUR
Quinta-feira, 10 de Novembro de 11
ENLARGEYOUR
BUTTONSQuinta-feira, 10 de Novembro de 11
ENLARGE YOUR BUTTONS
Make your buttons and clickable elements larger
Quinta-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
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 needs
Quinta-feira, 10 de Novembro de 11
You’re also making it easier to use for everyone else
Quinta-feira, 10 de Novembro de 11
Thank You
Quinta-feira, 10 de Novembro de 11
Thank You
@ivogomeshttp://www.ivogomes.com/talks/a11y.pdf
Quinta-feira, 10 de Novembro de 11
Top Related