6/7/2015 The Accessibility Cheatsheet - bitsofco.

de

bitsofco.de

THEACCESSIBILITYCHEATSHEET
Postedon02June2015

We all know that accessibility is important. The problem is, it is not always clear what exactly we can do
to make our sites more accessible.

The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at
us, web content developers, to create more accessible websites. The WCAG contain some very useful
information, and so I decided to condense the very extensive guidelines and highlight some practical
examples of what we can do to implement them and make our websites more accessible.

OVERVIEW

The guidelines for accessible content have four overarching principles, each with more specific
guidelines. You can click on the link to go to the relevant section of this article.

1 - Perceivable - Information and user interface components must be presentable to users in

ways they can perceive.
1.1 - Text Alternatives
1.2 - Alternatives for Time-Based Media

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 1/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

1.3 - Adaptable Content

1.4 - Distinguishable

2 - Operable - User interface components and navigation must be operable.

2.1 - Keyboard Accessible
2.2 - Enough Time
2.3 - Seizures
2.4 - Navigable

3 - Understandable - Information and the operation of user interface must be understandable.

3.1 - Readable
3.2 - Predictable
3.3 - Input Assistance

4 - Robust - Content must be robust enough that it can be interpreted reliably by a wide variety
of user agents, including assistive technologies.
4.1 - Compatible

PRINCIPLE1-PERCEIVABLE

1.1TEXTALTERNATIVES

All non-text content that is presented to the user has a text alternative that serves the equivalent
purpose

Plain text is the optimal format for any piece of content. This is because it can be used in many different
formats to suit individuals with different disabilities. Therefore, it is important to provide a plain text
alternative format for all content that is informative, i.e. not just decorative.
http://bitsofco.de/2015/the-accessibility-cheatsheet/ 2/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

For images, use the alt attribute. The alternative text for an image should be as descriptive as possible,
such that the same message is conveyed.

<im
gsrc="newsletter
.gif"alt
="Fr
een
ewsl
ett
er.Getfreerecipes,news,andmore.L
earnmor
e."

For audio and video elements, provide text transcripts. You can use the track element to specify
timed text tracks for these media elements.

<!--Formatofthetrackelement-->
<trac
kk ind="subtitl
es|c
aptions|d escr
ipt
ions
"sr
c="p
ath/to/file.vtt"srclang=""label="
">

<!--Examplecaptionforanaudiofile-->
<audi
oc ontrols>
<so
urces rc="myaud
io.ogg
"type=
"aud
io/o
gg"
>
<tr
acks rc="captio
n_en.v
tt"kin
d="c
apti
ons
"sr
clan
g="e
n"label="Englis
h">
</aud
io>

<!--ExampledescriptionsofavideofileinEnglishandGerman-->
<vide
op oster="myvid
eo.png
"contr
ols>
<so
urces rc="myvid
eo.mp4
"srcla
ng="
en"typ
e="video
/mp4
">
<tr
acks rc="descri
ption_
en.
vtt"kin
d="d
esc
riptions
"srclang="en"label
="English">
<tr
acks rc="descri
ption_
de.
vtt"kin
d="d
esc
riptions
"srclang="de"label
="German">
</vid
eo>

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 3/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

For user interface elements, use labels. Labels can be used to provide context for information that may
be otherwise very clear visualy. For example, where you may have a primary and secondary navigation
that is styled differently, you use aria-label to distinguish between them.

<di
vr ole="navigatio
n"ari
a-l
abel
="Pr
imar
y">
<
ul><li>...al istoflin
kshere...
</li
></
ul>
</d
iv>
<di
vr ole="navigatio
n"ari
a-l
abel
="Se
cond
ary
">
<
ul><li>...al istoflin
kshere...
</li
></ul>
</d
iv>

1.2ALTERNATIVESFORTIME-BASEDMEDIA

Provide alternatives for time-based media.

Time-based media (audio and video) can be especially difficult for individuals with hearing or vision
difficulties. In addition to providing a plain text alternative, it may also be helpful to provide an
alternative time-based media version. For example -

Sign language as part of a video file

Alternative audio for video files
Video file with sign language as alternative for audio files

1.3ADAPTABLECONTENT

Create content that can be presented in different ways (for example simpler layout) without losing

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 4/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

information or structure.

Write your HTML in a meaningful sequence. Your document should be readable and understandable
without any CSS. Lay out your HTML the way the page is inteaded to be read and, where possible, make
use of semantic markup.

<header>
<h1>SiteT itle</h1
>
<nav><!--links--></nav>
</header>
<main>
<h1>PageT itle</h1
>
<h2>PageS ubtitle<
/h2>
<p>Loremi psumd ol
orsita m
et,<str
ong>
con
sect
etur
</st
rong>a dipiscingelit.Paucamutatvelpluras
ane;
Vide,q uantum,i nq
uam,fall
are,Tor
quat
e.Iaminalter
aphi losophiaeparte.</p>
</main>
<footer>
<!--Sitecredit-->
</footer>

Meaningful information should not be conveyed solely via sensory characteristics. Sensory
characteristics such as shape, size, visual location, orientation, or sound should not be the only way of
conveying important information.

If you want to convey that a button will delete content, for example, make sure that this is also written in
text, as shown on the left. Do not rely solely on colour and icons, as shown on right.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 5/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

1.4DISTINGUISHABLE

Make it easier for users to see and hear content including separating foreground from background.

Contrast ratio of text to background should be at least 4.5:1, preferably 7:1. You can use Lea Verous app
to find the contrast ratio of your sites colours.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 6/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Text should be easily resizable. Text should be resizable using the default browser mechanisms up to
200% without a loss of content or functionality.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 7/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Use actual text instead of images of text. As mentioned before, plain text is the most accessible format
to use. Therefore, it is counterintuitive to use images of text where plain text can be used.

Control over audio media should be provided. If any audio is played on a web page, provide a
mechanism for users to control it with pause/play buttons and volume controls independent of the
system volume controls.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 8/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

PRINCIPLE2-OPERABLE

2.1KEYBOARDACCESSIBLE

Make all functionality available from a keyboard.

Many people are unable to navigate the web using a mouse. Therefore, all functionality should be
operable through the standard keyboard interface without requiring specific timings for individual keys.

Ensure all functional elements have a clear focus state. For people navigating a website using the tab
key only, focus states are how they know their location on the page. You can use javascript to add
keyboard accessibility to static elements if needed.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 9/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Avoid keyboard traps. Tab through the content of your website from start to finish to ensure that the
keyboard focus is not trapped on any of the content.

2.2ENOUGHTIME

Provide users enough time to read and use content.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 10/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Provide controls for timed content. For any interactions related to timing - including moving
information, auto-updating, or page time-outs - you should implement at least one of the following
safeguards -

Users can turn off the time limiit

Users can adjust time limit to at least 10 times the length of the default setting
Users is warned before time expires and given at least 20 seconds to extend the time limit with a
simple action

2.3SEIZURES

Do not design content in a way that is known to cause seizures.

Flashing light should not occur more than three times per second. Or, the flash should be below the
general flash and red flash thresholds. You can use photosensitive epilepsy analysis tools or flash tests to
test your site if you are unsure.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 11/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

2.4NAVIGABLE

Provide ways to help users navigate, find content, and determine where they are.

Provide a link for users to skip to the pages main content. One of the first links on every page of a
website should include a link for users to bypass repeated blocks of content, such as the navigation. This
is especially important for pages that have large, multi-layered navigation menus. The link itself does not
need to be visible when out of focus. For example -

<he
ad>
<
style>
#
skip_to{
position:fixd;
e
left:0;
top:0 ;
opacity:0;
}
#
skip_to:focus{
opacity:1;
}
<
/style>
</h
ead>
<bo
dy>
<
ahref="#main_c
ontent
"id="s
kip_
to">
Ski
ptoMai
nCo
ntent</a>

<
nav><!--Navigationslinkshere--></nav>
<
divid="main_co
ntent"
>
http://bitsofco.de/2015/the-accessibility-cheatsheet/ 12/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

<!--Maincontenthere-->
<
/div>
</b
ody>

Titles should be meaningful. The title of the web page, as well as the page heading, section headings,
and labels, should describe the topic or purpose of the page.

Link purpose can be determined from link text. As far as is possible, the purpose of a link should be
able to be determined from the text that is within the anchor tag itself.

Provide more than one way to locate a web page. The same page should be accessible by more than just
one link on one page. For example, a site could have -

Complete site map on a single page

Search function to access all content
Navigation with links to all pages

Provide information about the current location. It is useful to provide information about where the
current page is in relation to the rest of the website. This can be achieved with any of the following -

Breadcrumbs
Site map
Highlighting the current location in navigation
http://bitsofco.de/2015/the-accessibility-cheatsheet/ 13/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Using the <link rel="index | next | prev | contents"> tag to specify the current pages relationship to
other pages

PRINCIPLE3-UNDERSTANDABLE

3.1READABLE

Make text content readable and understandable.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 14/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Specify the language(s) of the page. Specify the language of the current page on the HTML element, and
any languages of specific parts.

<ht
mllang="en"><!--LanguageofthepageisEnglish-->
<he
ad>
</h
ead>
<bo
dy>

<h1
>PageTitle</h1>

<p>
Healthg othAmeri
canAppar
elq
uino
a,j
eansho
rtscrayyouprobablyha
ven'theardofthemSc hlitz
occ
upya ctuallytofudisti
lle
ryd
isru
ptl
ett
erpr
essfixi
e.Slow-carbkey
tarhella,actuallyB
ush
wickironysemiot
icsPo
rtl
andread
ymad
ephotoboo
tht
axidermyporkbe
llysmallb
atchtry
-ha
rdyr.
Thu
ndercatsblognor
mcore,to
usle
dAm
eric
anAppa
relartparty.</p>

<!--LanguageofthisblockquoteisGerman-->
<blockquotel ang="de
">
Dad achted erH errdaran
,ihnausd emFutt
erzuschaff
en,
aberd erE selm erk
te,dakeinguterWindweht
e,lieffort
undm achtes icha u
fd enWegnac
hBr emen
:dort,mei
nteer,
knntee rj aS tadt
musika
ntwerd
en.
</blockquote>

<p>
Healthg othAmeri
canAppar
elq
uino
a,j
eansho
rtscrayyouprobablyha
ven'theardofthemSc hlitz
occ
upya ctuallytofudisti
lle
ryd
isru
ptl
ett
erpr
essfixi
e.Slow-carbkey
tarhella,actuallyB
ush
wicki ronys emiot
icsPortl
andread
ymad
ephotoboo
thtaxidermyporkbe
llysmallb
atchtry
-ha
rdyr.
Thu
ndercatsb logn or
mcore,to
usle
dAmeric
anAppa
relartparty.</p>
http://bitsofco.de/2015/the-accessibility-cheatsheet/ 15/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

</b
ody>
</h
tml>

Provide meanings of unusual words and pronunciations of difficult words. You can use the title
attribute to provide the meaning of abbreviations and unusual words. For definitions, you can use the
dl element to provide a definition list.

<!--Providingmeaninginline-->
<abbrtitle="AustinRocks"
>Au
5t1Nr0x
x0rz
</a
bbr>

<!--Usingadefinitionlist-->
<p>Th
atw asa<ah ref="#d-
hum
blebrag"
>hum
blebra
g</a
></p
>

<dl
>
<
dti d="d-humblebr
ag">Hu
mbl
eBrag</
dt>
<
dd>Subtlyl ettingother
snowabouthowfa
ntas
ticyourlifei swhileu
ndercutting
i
tw ithab ito fself-ef
fac
inghumo
ror" w
oeisme"gloss.</dd>
</d
l>

Make content available at a lower secondary education reading level. Teenagers aged between 11-14
should be able to understand the content, even if specific terminology and concepts are new.

3.2PREDICTABLE

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 16/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Make Web pages appear and operate in predictable ways.

Consistent navigation. Navigation elements should be repeated in a consistent way throughout the
website.

Consistent identification. Terminology and repeatable elements should appear consistently throughout
the website.

No unprovoked changes of context. Any changes of context should only happen on request by the user.
Things like redirects, popups and other similar interactions should be communicated clearly beforehand.

<ht
ml>
<
head>
<
title>TheT udor
s</tit
le>
<
metah ttp-equiv
="refr
esh
"co
nten
t="0
;UR
L='h
ttp:
//th
etudors.example.
com/'">
<
/head>
<
body>
<
p>Thispagehasm
ovedtoa<
ahref="
htt
p://
thetudor
s.example.com/">
theTudors.e
xample.c
om
Y
ouw illnowbere
dire
cte
dtothenewsi
te.<
/p>
<
/body>
</h
tml>

3.3INPUTASSISTANCE

Help users avoid and correct mistakes

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 17/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Provide labels and instructions - Provide labels or instructions for input elements. Where there is a
commonly made error, provide suggestions that users can model their answers against.

Error messages in simple language. Errors made should be described to the user in plain,
understandable text, not error codes.

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 18/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Error prevention. Where a user is submitting information, at least one of the following must be true -

The submission of information is reversible

The answers is checked for errors and the user is given the opportunity to correct before
submission.
The user is given the opportunity to confirm the information before submission

PRINCIPLE4-ROBUST

4.1COMPATIBLE

Maximize compatibility with current and future user agents, including assistive technologies.

Write valid code. Ensure the compatibility of your HTML by making sure it passes validations checks.
Some important things validation checks look for include -

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 19/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

Valid doctype (Learn more about doctype)

Valid character encoding specified (Learn more about character encoding)
Complete start and end tags
No duplicate attributes, for examples IDs

Specify the purpose of elements. Specify the name, role and value for user interface components where
appropriate. For forms in particular, label s should be used where possible -

<fo
rmi d="signupform
">
<
labelf or="nm">Na
me</la
bel
>
<
inputid="nm"typ
e="tex
t"name
="na
me"val
ue="
">

<
fieldset>
<
legend>Wouldy o
ul iketosig
nup?</l
ege
nd>
<
inputi d="yes"name="
req
uest
"value=
"ye
s"t ype=
"rad
io"><labelfor=
"yes">Yes</
label>
<
inputi d="no"name="r
equ
est"val
ue="
no"type="r
adio
"><labelfor="n
o">No</labe
l>
<
/fieldset>

<
buttontype="subm
it">Su
bmi
t</b
utto
n>
</f
orm>

Where the label cannot be used, you can use the title attribute instead -

<fo
rmi d="searchform
">
<
inputt ype="text"title
="s
itesear
ch"nam
e="q
uery
"id
="q"value="">
<
inputt ype="submi
t"value=
"sea
rch"
>
http://bitsofco.de/2015/the-accessibility-cheatsheet/ 20/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

</f
orm>

aria-label can also be used to provide a label for a user interface element, where a label may not be
present.

<di
vid="box">
Th
isi sap op-upbox.
<b
uttonaria-labe
l="Clo
se"
onclick="
docume
nt.
getE
leme
ntBy
Id(
'box
').s
tyle
.display='none';
"
class="cl
ose-bu
tto
n">X</butt
on>
</d
iv>

If you would like to read more about this, you can read the Web Content Accessibility Guidelines
Reference, which goes into a lot more detail about how you can meet all the requirements.

I think the best thing that we can do is try to navigate the websites we create using only the mechanisms
that people with disabilities use, such as screen readers. Doing this has really made me aware of things I
should change on the sites I have made to make them easier to use.

ENJOYTHEARTICLE? LOOKINGFORMORE?

ShareonTwitter Morepostsin"html"category
Morepostsin"accessibility"category

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 21/23
6/7/2015 The Accessibility Cheatsheet - bitsofco.de

6 Comments Bits of Code

1 Login

Recommend 2 Share Sort by Best

Join the discussion

mrazzari 3 days ago

The "Would you like to sign up?" radio buttons example should use fieldset/legend, otherwise "Yes/No" are
meaningless without context. (Examples in this H71 WCAG tech).
Reply Share

Ire Aderinokun Mod > mrazzari 3 days ago

Thanks for pointing this out, I will update the article

Reply Share

Martin Allien 4 days ago

Nice article, kudos!
I'm glad that accessibility is promoted, as it is often left behind. We should really treat all the users the same.
Reply Share

Ire Aderinokun Mod > Martin Allien 4 days ago

Thanks! Yes, accessibility is too often an afterthought

Reply Share

adamleithp 4 days ago

I really enjoyed this! Thanks. I enjoyed your sample code as-well.
Reply Share

Ire Aderinokun Mod > adamleithp 4 days ago

Thank you :)
http://bitsofco.de/2015/the-accessibility-cheatsheet/ 22/23
6/7/2015
Thank you :) The Accessibility Cheatsheet - bitsofco.de

Reply Share

ALSO ON BITS OF CODE WHAT'S THIS?

Meta Charset Tic Tac Toe

2 comments 3 months ago 4 comments 2 months ago
Ire Aderinokun Thank you! Ire Aderinokun Thanks! Well Sudoku is different
because there is (typically) only one correct answer.
The board is predetermined and the player is

The Value of Blogging Building a Designer News Clone

11 comments 2 months ago 4 comments 22 days ago
Ire Aderinokun Yes his course was so valuable. Ire Aderinokun Actually Firebase has security rules
Thanks! to prevent against this. You can make sure that any
user can only vote once on a post, and pretty

Subscribe d Add Disqus to your site Privacy

MadewithbyIreAderinokun

http://bitsofco.de/2015/the-accessibility-cheatsheet/ 23/23