Escolar Documentos
Profissional Documentos
Cultura Documentos
@ivogomes
Quinta-feira, 10 de Novembro de 11
Ivo Gomes
www.ivogomes.com
Quinta-feira, 10 de Novembro de 11
ACCESSIBILITY MYTHS
Quinta-feira, 10 de Novembro de 11
ACCESSIBILITY MYTHS
Accessibility is just for blind people
Quinta-feira, 10 de Novembro de 11
ACCESSIBILITY MYTHS
Accessibility is just for blind people Accessible websites are ugly and boring
Quinta-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
Quinta-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
Quinta-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
Quinta-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 accessible
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
1.
Quinta-feira, 10 de Novembro de 11
ENLARGE
Quinta-feira, 10 de Novembro de 11
ENLARGE
YOUR
Quinta-feira, 10 de Novembro de 11
ENLARGE
FONT
Quinta-feira, 10 de Novembro de 11
YOUR
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
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
= 16px
Quinta-feira, 10 de Novembro de 11
2.
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
3.
Quinta-feira, 10 de Novembro de 11
PROVIDE SKIP-LINKS
Quinta-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
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
PROVIDE SKIP-LINKS
Most people choose to hide the skip links. Thats not necessarily bad, if done right.
Quinta-feira, 10 de Novembro de 11
HIDING SKIP-LINKS
#skiplinks { display:none; } = BAD
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
shows the links when they are activated (e.g. when navigating with the keyboard)
Quinta-feira, 10 de Novembro de 11
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
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
4.
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
How?
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
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
Quinta-feira, 10 de Novembro de 11
5.
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
outline:none;
= BAD
Quinta-feira, 10 de Novembro de 11
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
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
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
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
you can use any other HTML entity instead of this one
Quinta-feira, 10 de Novembro de 11
you can use any other HTML entity instead of this one
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
Link text
Quinta-feira, 10 de Novembro de 11
8.
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
9.
Quinta-feira, 10 de Novembro de 11
NON-MOUSE NAVIGATION
Quinta-feira, 10 de Novembro de 11
NON-MOUSE NAVIGATION
You should always provide navigation feedback for users that dont or cant use the mouse
Quinta-feira, 10 de Novembro de 11
NON-MOUSE NAVIGATION
You should always provide navigation feedback for users that dont or cant 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
Quinta-feira, 10 de Novembro de 11
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
= BETTER
10.
Quinta-feira, 10 de Novembro de 11
PARAGRAPH SPACING
Quinta-feira, 10 de Novembro de 11
PARAGRAPH SPACING
Make sure that there is enough spacing between paragraphs
Quinta-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 readability
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
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
<p>This text is the first paragraph.</p> <p>This text is the second paragraph.</p>
Quinta-feira, 10 de Novembro de 11
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
12.
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
13.
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
So, stop duplicating the link text inside the title attribute
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
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
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
* 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
15.
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
<span lang="en">website</span>
Quinta-feira, 10 de Novembro de 11
16.
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Hello :)
Quinta-feira, 10 de Novembro de 11
Hello :)
Quinta-feira, 10 de Novembro de 11
Hello :)
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
17.
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
vs.
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
18.
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
Male Female
Quinta-feira, 10 de Novembro de 11
Male Female
Clickable area
Quinta-feira, 10 de Novembro de 11
Male Female
Clickable area
Quinta-feira, 10 de Novembro de 11
19.
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
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
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
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">Citron</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">Citron</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
ENLARGE
YOUR
Quinta-feira, 10 de Novembro de 11
ENLARGE
YOUR
BUTTONS
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
If you make your website easier to use for users with special needs
Quinta-feira, 10 de Novembro de 11
Quinta-feira, 10 de Novembro de 11
Thank You
Quinta-feira, 10 de Novembro de 11
Thank You
@ivogomes http://www.ivogomes.com/talks/a11y.pdf
Quinta-feira, 10 de Novembro de 11