Page Comparison

Making

your

website

accessible

to

a

broad

range

of

diverse

users

is

not

hard.

The

techniques

described

on

these

pages

won't

guarantee

that

your

pages

are

100%

fully

accessible,

but

they're

an

easy

way

of

getting

pretty

close.

Use

these

techniques

throughout

your

development

process:

Don't

wait

till

after

you've

created

everything

to

check

if

it's

accessible.

If

you

double-check

what

you're

building

as

you

go

along,

it

will

be

come

second

nature.

Keyboard

Accessibility

Unplug

your

mouse

and

put

it

in

your

desk

drawer

(if

you're

using

a

laptop,

tape

some

cardboard

over

the

trackpad).

Now,

try

to

use

your

site.

Can

you

accomplish

everything

using

only

the

keyboard?

Can

you

log

in

and

out?

Can

you

fill

in

any

forms?

Can

you

access

all

the

navigational

menus?

Can

you

tell

where

the

keyboard

focus

is?

{div2:class=floatRight} {panel:title=Why should you care?} Many people

Div
class floatRight
Panel title Why should you care? Many people can't,

won't

or

don't

want

to

use

a

mouse

or

trackpad.

Maybe

they're

power-users

who

don't

want

to

waste

time

moving

their

hands

from

the

keyboard

to

the

mouse;

maybe

they're

using

a

laptop

and

hate

the

trackpad;

maybe

they're

using

a

wireless

mouse

and

the

batteries

have

died;

maybe

they

have

a

mobility

impairment

and

can't

use

a

mouse;

maybe

they

have

a

visual

impairment

and

can't

see

the

screen.

None

of

these

are

reasons

why

they

wouldn't

want

to

use

your

site.

{panel} {div2}

Note:

In

Safari,

you

may

need

to

check

the

"Press

Tab

to

highlight

each

item

on

a

webpage"

checkbox

in

the

Advanced

preferences

before

you

can

tab

around

pages.

h4.

Some

things

to

look

out

for

(and

what

to

do

about

them)

• not

• being

• able

• to

• tell

• where

• focus

is|How to make pages keyboard accessible#Provide visual styling for keyboard focus] * [links or buttons you

• is
• links or buttons you can't

• seem

• to

• get

to|How to make pages keyboard accessible#Make sure controls can be reached] * [links that repeat themselves|How to make pages keyboard accessible#Avoid redundant links] * [dialogs you can't work with|How to make pages keyboard accessible#Make sure dialogs get focus] * [dialogs you can't close|How to make pages keyboard accessible#Make sure dialogs can be dismissed] * [pop-up menus that won't pop up|How to make pages keyboard accessible#Make sure pop-ups pop up] h2. Semantics h3. Links Use a free tool such as the [Web Accessibility Toolbar|http://www.visionaustralia.org.au/ais/toolbar/] or the [Web Developer extension|http://chrispederick.com/work/web-developer/] to generate a list of the links on each page. Does the text of the links make any sense when taken out of the context of the page? {div2:class=floatRight} {panel:title=Why should you care?} The text of a link says something about what the link is. Screen reader users often navigate a page by tabbing from one link to the next, and all they hear is the link text. Would you follow a link if all you knew about it was "click here?" {panel} {div2} h4. Some things to look out for (and what to do about them) * ["click here"|How to fix your links|Use meaningful link text] * ["this page"|How to fix your links|Use meaningful link text] * [links that have no text at all|How to fix your links|Use a title if your link has no text] h3. Images of text {div2:class=floatRight} {panel:title=Why should you care?} Text that is embedded in an image is very difficult to internationalize. Also, some people won't see the images on your page: They might have a visual impairment; they might have a super-slow connection. {panel} {div2} Use the browser's settings to turn images off and reload the page (you might need to clear your cache first). Does any of the text disappear? h4. Some things to look out for (and what to do about them) * [buttons that lose their labels|How to make images more accessible#Keep button text separate from button images] h3. Headers Use a free tool such as the [Web Accessibility Toolbar|http://www.visionaustralia.org.au/ais/toolbar/] or the [Web Developer extension|http://chrispederick.com/work/web-developer/] to show a "table of contents" for your site: a list of all the headings on a page. Does this table of contents look like what you meant when you made the site? Does it make sense? Does it accurately reflect the structure of the information and the relationships between the sections? {div2:class=floatRight} {panel:title=Why should you care?} Search engines are not the only things that use headings to index your site. Many people use an automatically generated table of contents to get a quick sense of what's on a page, as well as to navigate to particular headings. If they look at this table of contents and it looks nonsensical, they're not going to be too impressed with your site. {panel} {div2} {color:purple}NOTE:{color} If you're using HTML5 and its {{<section>}} and {{<article>}} elements, make sure you understand the way it creates a [document outline|http://html5doctor.com/outlines/]. Try an HTML5 outlining tool like [HTML 5 Outliner|http://gsnedders.html5.org/outliner/] to assess your page's outline. h4. Some things to look out for (and what to do about them) * [skipped heading levels (e.g. {{h3}} inside {{h1}})|How to fix your headings#Don't skip heading levels] * things that *should* be at the same level but aren't * [headings used for formatting only|How to fix your headings#Don't use a heading tag when you want visual styling] * [headings that don't actually use a heading tag|How to fix your headings#Don't use visual styling when you want a heading] h2. Stylesheets {div2:class=floatRight} {panel:title=Why should you care?} With the increasing pixel density of many screens, the appearance of text is seeming smaller and smaller to viewers. Many people increase the size, sometimes by adding a style to the page. If you're using values, your content will remain un-viewable for these people. Also, people are viewing web pages on more and more different sizes and shapes of devices. [Responsive web designs|http://en.wikipedia.org/wiki/Responsive_Web_Design] can ensure that your site will look great wherever it's seen, but not if you're using pixels for font sizes and line spacings. {panel} {div2} Use something like Firebug in Firefox to double the page's font size by adding "font-size: 2em" to the body tag. Does all of the text on the page double in size? h4. Some things to look out for (and what to do about them) * [text that doesn't enlage|How to make your page more responsive#Use ems for text size] * [containers that don't enlarge (e.g. columns, the document body, etc)|How to make your page more responsive#Use ems for container sizes] * [background images that don't scale properly|How to make your page more responsive#Use CSS to help images scale] h2. Screen Readers Turn on a screen reader and listen to your page. * On Windows, you can download the free, open source screen reader [NVDA|http://www.nvda-project.org/], or a trial version of [Jaws|http://freedomscientific.com/downloads/demo/FS-demo-downloads.asp], a popular screen reader. * On a Mac, the operating system includes [VoiceOver|http://www.apple.com/accessibility/voiceover/]. {div2:class=floatRight} {panel:title=Why should you care?} An increasing number of people have visual impairments that make it difficult to see the screen. Many of them use a screen reader, which reads the content of the screen aloud to them. If your page doesn't play nicely with screen readers, these visitors to your site will be leaving pretty quickly. {panel} {div2} Launch the screen reader, return to the browser and reload your page. Turn off the monitor and listen to the screen reader read your page. Does it make sense? Can you understand what the page is about? Use the Tab key to navigate the site. Listen to the screen reader read out the links and controls. Does what you hear make sense? Can you tell where focus is based on what's spoken? h2. Want more info? For more information on designing accessible websites, try the following resources: * Tips for [fluid:Testing using multiple browsers] * [fluid:Accessibility Review Protocols] * [The Mozilla Developer Network's pages on accessible web development|https://developer.mozilla.org/En/Accessibility/Web_Development] * [The Fluid Project's DHTML Developer Checklist|Infusion13:DHTML Developer Checklist] * [WebAIM|http://webaim.org/] * [W3C's Best Practices for using ARIA (Accessible Rich Internet Applications)|http://www.w3.org/WAI/PF/aria-practices/] * [W3C's Web Content Accessibility Guidelines (WCAG)|http://www.w3.org/WAI/intro/wcag.php] * Guide to [Using ARIA in HTML|http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html] * [Easy fixes to common accessibility problems|http://yaccessibilityblog.com/library/easy-fixes-to-common-accessibility-problems.html] * [Using ARIA in HTML (unofficial draft)|http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html] {div}

• to
• links that repeat themselves
• dialogs you can't work with
• dialogs you can't close
• pop-up menus that won't pop up

Semantics

Links

Use a free tool such as the Web Accessibility Toolbar or the Web Developer extension to generate a list of the links on each page. Does the text of the links make any sense when taken out of the context of the page?

Some things to look out for (and what to do about them)

• "click here"
• "this page"
• links that have no text at all

Images of text

Use the browser's settings to turn images off and reload the page (you might need to clear your cache first). Does any of the text disappear?

Some things to look out for (and what to do about them)

• buttons that lose their labels

Headers

Use a free tool such as the Web Accessibility Toolbar or the Web Developer extension to show a "table of contents" for your site: a list of all the headings on a page. Does this table of contents look like what you meant when you made the site? Does it make sense? Does it accurately reflect the structure of the information and the relationships between the sections?

NOTE: If you're using HTML5 and its <section> and <article> elements, make sure you understand the way it creates a document outline. Try an HTML5 outlining tool like HTML 5 Outliner to assess your page's outline.

Some things to look out for (and what to do about them)

• skipped heading levels (e.g. h3 inside h1)
• things that should be at the same level but aren't
• headings used for formatting only
• headings that don't actually use a heading tag

Stylesheets

Use something like Firebug in Firefox to double the page's font size by adding "font-size: 2em" to the body tag. Does all of the text on the page double in size?

Some things to look out for (and what to do about them)

• text that doesn't enlage
• containers that don't enlarge (e.g. columns, the document body, etc)
• background images that don't scale properly

Screen Readers

Turn on a screen reader and listen to your page.

• On Windows, you can download the free, open source screen reader NVDA, or a trial version of Jaws, a popular screen reader.
• On a Mac, the operating system includes VoiceOver.

Launch the screen reader, return to the browser and reload your page. Turn off the monitor and listen to the screen reader read your page. Does it make sense? Can you understand what the page is about?

Use the Tab key to navigate the site. Listen to the screen reader read out the links and controls. Does what you hear make sense? Can you tell where focus is based on what's spoken?

Want more info?

For more information on designing accessible websites, try the following resources:

• Tips for Testing using multiple browsers
• Accessibility Review Protocols
• The Mozilla Developer Network's pages on accessible web development
• The Fluid Project's DHTML Developer Checklist
• WebAIM
• W3C's Best Practices for using ARIA (Accessible Rich Internet Applications)
• W3C's Web Content Accessibility Guidelines (WCAG)
• Guide to Using ARIA in HTML
• Easy fixes to common accessibility problems
• Using ARIA in HTML (unofficial draft)