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

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

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

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

If you must use tables (remember kids, only for tabular data), please do it the right way

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

AND IT LOOKS LIKE THIS

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

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

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

THERE, I FIXED IT

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

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

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

External links (start with http)

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

MORELINKING TIPS

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

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

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

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

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

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

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

Include alternative text only when the image content is relevant

BUT SOMETIMES IT’S BETTER IF IT’S BLANK

Include alternative text only when the image content is relevant

If the image is irrelevant, the alt should be there, but blank

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

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>

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

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

The entire website is written in portuguese

HOW TO APPLY THE LANG ATTRIBUTE

The entire website is written in portuguese

<span lang="en">website</span>

This word or phrase is written in english

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

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.

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

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.

USING LABELS INCREASES THE CLICKABLE AREA

MaleFemale

Without labels

MaleFemale

Without labels

Clickable area

MaleFemale

With labels

Clickable area

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>

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

GROUPING OPTIONS

<label for="cars">Choose a car brand:</label><select name="cars" id="cars">

<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

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

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

html/css tips to improve the accessibility of your websites

blind peoplequintafeira

good enoughquintafeira

px fontsize

body h1 h1 font size

relative fontsizeshtml

relative fontsizesbody

px sort

px text sizetry

Technology

survey on accessibility of government of india websites ·...

digital accessibility fundamentals for websites, documents...

css techniques for web content accessibility guidelines...

accessibility of local government websites

web accessibility of the ethiopian governmental...

accessibility with css: making websites better for everyone

automate accessibility testing with tenon.io for any...

web accessibility - polito · standards for web...

lesson 03 // cascading style sheets. css stands for...

a survey of accessibility errors on homepages of official...

link to find out about accessibility of websites

accessibility -uk public sector websites

accessibility of state and local government websites to...

lis650 lecture 5 minor css, accessibility thomas krichel...

managing responsive websites with css preprocessors

accessibility of state and local government websites to...

intro to css - fall14se.files.wordpress.com · objectives...

usability and accessibility css gotchas

dude my dude. another talk about css? what’s to know? css...

measures to improve accessibility of public websites in...