HTML Csstipsaccessibility 111114074426 Phpapp01

HTML/CSS TIPS TO IMPROVE THE ACCESSIBILITY OF YOUR WEBSITES
@ivogomes
Quinta-feira, 10 de Novembro de 11
Ivo Gomes
www.ivogomes.com
Why should I care?
ACCESSIBILITY MYTHS
ACCESSIBILITY MYTHS
Accessibility is just for blind people
ACCESSIBILITY MYTHS
Accessibility is just for blind people Accessible websites are ugly and boring
ACCESSIBILITY MYTHS
Accessibility is just for blind people Accessible websites are ugly and boring Accessibility is expensive and difficult
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
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
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
OK, so what can I do?
1.
ENLARGE
ENLARGE
YOUR
ENLARGE
FONT
YOUR
ENLARGE YOUR FONT

Dont use tiny 10px
or 12 px text size
Try 16px
or even more...
Pro tip: Try reading your website when seated 1 meter away from the screen
USE RELATIVE FONT-SIZES

html { font-size: 62.5%; } body { font-size: 1.6em; } = 16px (sort of)

html { font-size: 62.5%; } body { font-size: 1.6em; } = 16px (sort of)
Beware of the inheritance!

body { font-size: 1.6em; } h1 { } = 16px
font-size: 2em; = 32px (not 20px)
body > h1 h1 font size is 2em x 1.6em


body { font-size: 16px; font-size: 1.6rem; } h1 { }
= 16px
font-size: 20px; font-size: 2rem; = 20px
2.
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;

line-height: 1.4;
3.
PROVIDE SKIP-LINKS
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.
PROVIDE SKIP-LINKS
Most people choose to hide the skip links. Thats not necessarily bad, if done right.
HIDING SKIP-LINKS
#skiplinks { display:none; } = BAD
#skiplinks { text-indent:-9999px; = BAD }
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

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

#skiplinks a:active, #skiplinks a:focus { position:static; width:auto; height:auto; }
you can play with the positioning to place the links wherever you want


4.
TABLES DONE RIGHT
TABLES DONE RIGHT

If you must use tables (remember kids, only for tabular data), please do it the right way
How?
Define a summary and a caption for the table
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>
Use the th element to specify row and column headers in data tables
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>
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>
AND IT LOOKS LIKE THIS
Source: Bring on the tables http://1.gf.gc.sl.pt

5.
DONT REMOVE THE LINK OUTLINE
DONT REMOVE THE LINK OUTLINE

Users that rely on the keyboard for navigation need to know which link is focused
SO, DONT EVER, EVER, REMOVE THE OUTLINE OF LINKS

a{ }
outline:none;
= BAD
But, but, the outline looks sooooo ugly...
OK, YOU CAN REMOVE THE OUTLINE, BUT ONLY WHEN THE LINK IS ACTIVE
a:active { outline:none; }
6.
DONT CREATE EMPTY LINKS
DONT CREATE EMPTY LINKS

Whenever you put a link on a web page, make sure that it has text content. This may seem incredibly obvious...
LINKS WITH NO TEXT CONTENT

<a href="http://example.com/"></a> <a href="http://example.com/"><img src="image.gif" alt=""></a>
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>
7.
ALWAYS REVEAL THE LINK DESTINATION
ALWAYS REVEAL THE LINK DESTINATION

You should always reveal links that open in a new window or link to a non-HTML document
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; }
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; }
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
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
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)
AND ALSO FOR LINKS TO EXTERNAL WEBSITES

a[href^="http"]:after { content: "\21D7"; }
External links (start with http)
a[href^="http://yourwebsite.com"]:after, a[href^="http://www.yourwebsite.com"]:after { content: ""; Internal absolute } links
BUT A BETTER SOLLUTION WOULD BE

<a class="external" href="http://whatever.com">Link text<span> (external link)</span></a>
Link text (external link)
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
8.
MORE LINKING TIPS
MORE LINKING TIPS

When using big linkable blocks, make sure the most important info comes first
MORE LINKING TIPS

When using big linkable blocks, make sure the most important info comes first
MORE LINKING TIPS

When using JavaScript triggered links, you should always provide a href
<a class=ajax_do_this> = BAD
MORE LINKING TIPS

<a class=ajax_do_this> = BAD <a href=# class=ajax_do_this> = GOOD
MORE LINKING TIPS

<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
9.
NON-MOUSE NAVIGATION
You should always provide navigation feedback for users that dont or cant use the mouse
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
Pro tip: Whenever you use :hover, also use :focus
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
MAKE LINKS FOCUSABLE TO EVERYONE

a:hover { color:red; }
a:hover, a:focus, a:active { color:red; }

= BETTER
10.
PARAGRAPH SPACING
PARAGRAPH SPACING
Make sure that there is enough spacing between paragraphs
PARAGRAPH SPACING
Make sure that there is enough spacing between paragraphs Like the line-height tip, this greatly improves text readability
ADD SOME SPACING BETWEEN PARAGRAPHS

p { margin: 0;}
ADD SOME SPACING BETWEEN PARAGRAPHS

p { margin: 10px 0;}
And, as stupid as this tip might be, you should always use <p> for paragraphs
WE SEE THIS A LOT

This text is the first paragraph. <br> = WRONG <br> This text is the second paragraph.
<p>This text is the first paragraph.</p> <p>This text is the second paragraph.</p>
11.
CHECK THE COLOR CONTRAST

Check the contrast between the foreground and the background colors

Check the contrast between the foreground and the background colors
http://snook.ca/technical/colour_contrast/ colour.html or Google for color contrast checker
12.
ABOUT THE ALT ATTRIBUTE

The alt attribute provides a textual alternative to images

The alt attribute provides a textual alternative to images But you shouldnt add an alternative text to every image in your website
Waaa? No alt text?
I didnt say that
You must ALWAYS add the alt attribute
BUT SOMETIMES ITS BETTER IF ITS BLANK

<img src=boobs.png alt=Boobs />
Include alternative text only when the image content is relevant
BUT SOMETIMES ITS BETTER IF ITS 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 blank

13.
ABOUT THE TITLE ATTRIBUTE
ABOUT THE TITLE ATTRIBUTE

The title attribute should be used to provide extra information about some element on the page
So, stop duplicating the link text inside the title attribute
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
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 screen
14.
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.

Each document should have a logical heading structure that starts at level 1 and doesnt skip any levels

Each document should have a logical heading structure that starts at level 1 and doesnt skip any levels The title of the documents main content should be a level 1 heading

Each document should have a logical heading structure that starts at level 1 and doesnt skip any levels The title of the documents main content should be a level 1 heading There should be only one level 1 heading in each document *
* 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>
AND THE HEADINGS SHOULD REPRESENT THE DOCUMENT TREE

H1 - H2 - H2 - H3 - H4 - H3 - H2 - H3 - H2 - H3 - H4 - H5
15.
USE THE LANG ATTRIBUTE

Screen readers need to know in which language the document is written

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...
HOW TO APPLY THE LANG ATTRIBUTE

<html lang="pt-PT">
The entire website is written in portuguese
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
16.
SPECIFY BACKGROUND COLORS
SPECIFY BACKGROUND COLORS

Remember to specify a solid background color when using background images
Hello :)
If the image fails to load, the text might become unreadable
Hello :)
But because were smart, we added a solid background color :)
Hello :)
SO, ALWAYS APPLY A SOLID BACKGROUND COLOR AS A FALL BACK
#some_div { background: #7A593A url(wilde.jpg) no-repeat; }
17.
WRITE USEFUL PAGE TITLES
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 browsers tab bar and favorites menu)
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>

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.

Use a plain separator character that doesnt 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>

Write titles for humans, not search engines Dont put keywords or breadcrumbs on the page title
<title>Page Title - Subcategory - Category - Website Title</title> = BAD
18.
USE LABELS IN FORMS
USE LABELS IN FORMS

Use the label element to make your HTML forms accessible
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.
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>
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 controls 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>
USING LABELS INCREASES THE CLICKABLE AREA

Without labels
Male Female

Without labels
Male Female
Clickable area

With labels
Male Female
Clickable area
19.
GROUP FORM ELEMENTS
GROUP FORM ELEMENTS

Use the fieldset and legend elements to group HTML form controls
Do not use the fieldset element if all you want to do is create a graphical border around some content on a page
Use fieldset and legend to group logically related form controls, and always use both elements together
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.
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>
GROUP FORM ELEMENTS

Use the optgroup element to group select options
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>
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>
20.
ENLARGE
ENLARGE
YOUR
ENLARGE
YOUR
BUTTONS
ENLARGE YOUR BUTTONS

Make your buttons and clickable elements larger
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.
If you make your website easier to use for users with special needs
Youre also making it easier to use for everyone else
Thank You
Thank You
@ivogomes http://www.ivogomes.com/talks/a11y.pdf

HTML Csstipsaccessibility 111114074426 Phpapp01

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Csstipsaccessibility 111114074426 Phpapp01

Hochgeladen von

Copyright:

Verfügbare Formate

HTML/CSS TIPS TO IMPROVE THE ACCESSIBILITY OF YOUR WEBSITES

Why should I care?

OK, so what can I do?

ENLARGE YOUR FONT

USE RELATIVE FONT-SIZES

USE RELATIVE FONT-SIZES

Beware of the inheritance!

USE RELATIVE FONT-SIZES

font-size: 2em; = 32px (not 20px)

body > h1 h1 font size is 2em x 1.6em

USE RELATIVE FONT-SIZES

font-size: 20px; font-size: 2rem; = 20px

INCREASE YOUR LINE-HEIGHT

INCREASE YOUR LINE-HEIGHT

INCREASE YOUR LINE-HEIGHT

#skiplinks { text-indent:-9999px; = BAD }

HIDING SKIP-LINKS, THE RIGHT WAY

positions the links outside of the viewport

HIDING SKIP-LINKS, THE RIGHT WAY

HIDING SKIP-LINKS, THE RIGHT WAY

HIDING SKIP-LINKS, THE RIGHT WAY

HIDING SKIP-LINKS, THE RIGHT WAY

TABLES DONE RIGHT

TABLES DONE RIGHT

Define a summary and a caption for the table

TABLES DONE RIGHT

TABLES DONE RIGHT

TABLES DONE RIGHT

AND IT LOOKS LIKE THIS

Source: Bring on the tables http://1.gf.gc.sl.pt

DONT REMOVE THE LINK OUTLINE

DONT REMOVE THE LINK OUTLINE

SO, DONT EVER, EVER, REMOVE THE OUTLINE OF LINKS

But, but, the outline looks sooooo ugly...

DONT CREATE EMPTY LINKS

DONT CREATE EMPTY LINKS

LINKS WITH NO TEXT CONTENT

ALWAYS REVEAL THE LINK DESTINATION

ALWAYS REVEAL THE LINK DESTINATION

HIGHLIGHT LINKS THAT OPEN IN A NEW WINDOW

HIGHLIGHT LINKS THAT OPEN IN A NEW WINDOW

LOOK MA, NO IMAGES!

LOOK MA, NO IMAGES!

YOU CAN ALSO USE THIS FOR LINKS TO NON-HTML DOCUMENTS

Link text (PDF)

Link text (DOC)

AND ALSO FOR LINKS TO EXTERNAL WEBSITES

External links (start with http)

a[href^="http://yourwebsite.com"]:after, a[href^="http://www.yourwebsite.com"]:after { content: ""; Internal absolute } links

BUT A BETTER SOLLUTION WOULD BE

Link text (external link)

BUT A BETTER SOLLUTION WOULD BE

MORE LINKING TIPS

MORE LINKING TIPS

MORE LINKING TIPS

MORE LINKING TIPS

MORE LINKING TIPS

MORE LINKING TIPS

Pro tip: Whenever you use :hover, also use :focus

Pro tip: Whenever you use :hover, also use :focus

MAKE LINKS FOCUSABLE TO EVERYONE

a:hover, a:focus, a:active { color:red; }

ADD SOME SPACING BETWEEN PARAGRAPHS

ADD SOME SPACING BETWEEN PARAGRAPHS