html/css tips to improve the accessibility of your websites

HTML/CSS TIPS TOIMPROVE THE ACCESSIBILITY OF YOUR WEBSITES

Ivo Gomes@ivogomes www.ivogomes.com

Quinta-feira, 10 de Novembro de 11

http://www.ivogomes.com


Why should I care?


ACCESSIBILITYMYTHS


Accessibility is just for blind people

ACCESSIBILITYMYTHS



Accessible websites are ugly and boring

ACCESSIBILITYMYTHS




Accessibility is expensive and difficult

ACCESSIBILITYMYTHS





Offering a text-only version is good enough

ACCESSIBILITYMYTHS






Validation equals accessibility

ACCESSIBILITYMYTHS






Validation equals accessibility

If it works with a screen reader it is accessible

ACCESSIBILITYMYTHS


OK, so what can I do?


1.Quinta-feira, 10 de Novembro de 11

ENLARGE


ENLARGEYOUR


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


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; = 16px}

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

!body > h1

h1 font size is 2em x 1.6em



body { font-size: 16px; font-size: 1.6rem; = 16px}

h1 { font-size: 20px; font-size: 2rem; = 20px}


INCREASE YOURLINE-HEIGHT


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;


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;


PROVIDESKIP-LINKS


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.


PROVIDESKIP-LINKS

Most people choose to hide the skip links. That’s 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


TABLESDONE RIGHT


TABLESDONE 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 tableshttp://1.gf.gc.sl.pt


http://1.gf.gc.sl.pt

http://1.gf.gc.sl.pt

DON’T REMOVE THELINK OUTLINE


DON’T REMOVE THELINK OUTLINE

Users that rely on the keyboard for navigation need to know which link is focused


SO, DON’T 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; }


DON’T CREATEEMPTY LINKS


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


LINKS WITH NO TEXT CONTENT

<a href="http://example.com/"></a>

<a href="http://example.com/"><img src="image.gif" alt=""></a>


http://example.com

http://example.com

http://example.com

http://example.com

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>


http://example.com

http://example.com

http://example.com

http://example.com

ALWAYS REVEAL THELINK DESTINATION


ALWAYS REVEAL THELINK 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;}


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";}

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

External links (start with http)

Internal absolute links


http://www.yourwebsite.com




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


MORELINKING TIPS


MORELINKING TIPS

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


MORELINKING TIPS

When using JavaScript triggered links, you should always provide a href

<a class=”ajax_do_this”> = BAD


MORELINKING TIPS



<a href=”#” class=”ajax_do_this”> = GOOD


MORELINKING TIPS



<a href=”#” class=”ajax_do_this”> = GOOD

<a href=”do-this-if-no-js.html” class=”ajax_do_this”> = BETTER


NON-MOUSENAVIGATION


NON-MOUSENAVIGATION

You should always provide navigation feedback for users that don’t or can’t use the mouse


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


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


PARAGRAPHSPACING


PARAGRAPHSPACING

Make sure that there is enough spacing between paragraphs


PARAGRAPHSPACING

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

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.


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.


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><br>This text is the second paragraph.

<p>This text is the first paragraph.</p><p>This text is the second paragraph.</p>

= WRONG


CHECK THECOLOR 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”








ABOUT THEALT ATTRIBUTE



The alt attribute provides a textual alternative to images



The alt attribute provides a textual alternative to images

But you shouldn’t add an alternative text to every image in your website


Waaa? No alt text?


I didn’t say that


You must ALWAYS add the alt attribute


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


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


13.


ABOUT THETITLE ATTRIBUTE


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

<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


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.



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




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 *


* 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


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


SPECIFY BACKGROUND COLORS


SPECIFY BACKGROUND COLORS

Remember to specify a solid background color when using background images


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

Hello :)

If the image fails to load, the text might become unreadable


Hello :)

But because we’re smart, we added a solid background color :)


SO, ALWAYS APPLY A SOLID BACKGROUND COLOR AS A FALL BACK

#some_div {background: #7A593A url(“wilde.jpg”) no-repeat;

}


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 browser’s 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.

vs.

<title>Page Title - Website Title</title>



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>



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


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


USING LABELS INCREASES THE CLICKABLE AREA

MaleFemale

Without labels



MaleFemale

Without labels

Clickable area



MaleFemale

With labels

Clickable area


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">Citroën</option><option value="peugeot">Peugeot</option><option value="renault">Renault</option>

</optgroup></select>


ENLARGE


ENLARGEYOUR


ENLARGEYOUR

BUTTONSQuinta-feira, 10 de Novembro de 11

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


You’re also making it easier to use for everyone else


Thank You


Thank You

@ivogomeshttp://www.ivogomes.com/talks/a11y.pdf




html/css tips to improve the accessibility of your websites

Technology

blind peoplequintafeira

good enoughquintafeira

px fontsize

body h1 h1 font size

relative fontsizeshtml

relative fontsizesbody

px sort

px text sizetry