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

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

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 :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

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 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

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

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 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

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

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 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

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

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