website accessibility 101

W E B S I T E

A C C E S S I B I L I T Y 1 0 1

P D X T E C H 4 G O O D

B R E T T M E Y E RS T R A T E G I S T , T H I N K S H O U T

@ B R E T T _ M E Y E R

W H Y B O T H E R W I T H

A C C E S S I B I L I T Y ?

– L A U R A K A L B A G , 2 4 W A Y S

EXCUSE 1: “People with disabilities don’t really use

the web.”

– U . S . C E N S U S B U R E A U

“56.7 million people — 19 percent of the population

— had a disability in 2010.”


EXCUSE 2: “We don’t want to affect the experience

for the majority of our users.”


EXCUSE 3: “We don’t have the budget for

accessibility.”


EXCUSE 4: “Accessible websites are ugly.”

S O W H A T C A N W E D O ?

C O D E F O R

A C C E S S I B I L I T Y

T H E B I G P I C T U R E

S T A R T S M A L L

< A H R E F = ” B L O G . H T M ” > C L I C K H E R E ! < / A >

< A H R E F = ” B L O G . H T M ” > R E A D O U R B L O G ! < / A >

1 ) A V O I D “ C L I C K H E R E ”

2 ) A D D “ A L T T E X T ” T O K E Y I M A G E S A N D N O N - T E X T E L E M E N T S

< T I T L E > C A R E E R S < / T I T L E >

< T I T L E > C A R E E R S | T H I N K S H O U T , A D R U P A L

D E V E L O P M E N T F I R M < / T I T L E >

3 ) M A K E T H E < T I T L E > D E S C R I P T I V E

A A A ?

4 ) T E S T V A R I O U S F O N T S I Z E S

< L A B E L F O R = " N A M E " > N A M E : < / L A B E L >





5 ) L A B E L Y O U R F O R M F I E L D S

< D I V I D = " M A I N C O N T E N T " R O L E = " M A I N " >

< D I V I D = " P R I M A R Y N A V "

R O L E = " N A V I G A T I O N " >

< F O R M A C T I O N = " S E A R C H . P H P "

R O L E = " S E A R C H " >

6 ) P R O V I D E L A N D M A R K S

< A H R E F = " # N A V I G A T I O N " C L A S S = " E L E M E N T - I N V I S I B L E

E L E M E N T - F O C U S A B L E " > J U M P T O N A V I G A T I O N < / A >

< A H R E F = " # M A I N - C O N T E N T " C L A S S = " E L E M E N T - I N V I S I B L E

E L E M E N T - F O C U S A B L E " > S K I P T O M A I N C O N T E N T < / A >



7 ) A D D “ S K I P ” L I N K S

H T T P S : / / S U P P O R T . G O O G L E . C O M / Y O U T

U B E / A N S W E R / 2 7 3 4 7 9 6 ? H L = E N

H T T P : / / V I M E O . C O M / H E L P / F A Q / M A N A G I N

G - Y O U R - V I D E O S / C A P T I O N S - A N D -

S U B T I T L E S

8 ) A D D C A P T I O N S T O Y O U R V I D E O S

http://vimeo.com/help/faq/managing-your-videos/captions-and-subtitles

• L I N K S P A C I N G

W H I T E S P A C E

D O N ’ T T R Y T O C R A M

E V E R Y T H I N G I N

9 ) E M P L O Y G O O D V I S U A L D E S I G N

H T T P : / / W A V E . W E B A I M .

O R G /

1 0 ) T E S T Y O U R W O R K W I T H W A V E

http://wave.webaim.org/

W E L L , T H A T W A S F U N .

D O N ’ T C O N F L A T E

A C C E S S I B I L I T Y

W I T H

D I S A B I L I T Y

6 3 % O F U . S .

A D U L T S U S E

T H E I R P H O N E

T O G O O N L I N E

P E W R E S E A R C H , 2 0 1 2

3 1 % O N L Y O R

M O S T L Y U S E

T H E I N T E R N E T

O N M O B I L E

P E W R E S E A R C H , 2 0 1 2

5 9 % O F L O W - I N C O M E

A M E R I C A N S H A V E N O

B R O A D B A N D

I N T E R N E T A C C E S S

A T H O M E

P E W R E S E A R C H , 2 0 1 2

4 3 % O F L O W - I N C O M E

A M E R I C A N S O N L Y

O R M O S T L Y U S E T H E

I N T E R N E T O N

M O B I L E

P E W R E S E A R C H , 2 0 1 2

– M C K I N S E Y & C O M P A N Y

2 to 3 billion people will come online globally

through the mobile internet over the next decade.

– K A R E N M C G R A N E

T H E M O B I L E C O N T E N T M A N D A T E

“There will come a point at which no one will need

to ask ‘Why would somebody want to do that on

mobile?’”



“The people who will make that happen are the

people who are adopting mobile devices ...

because they do not have access to a personal

computer.”

< L I C L A S S = " F N " > J O E D O E < / L I >

< L I C L A S S = " O R G " > T H E E X A M P L E C O M P A N Y < / L I >

< L I C L A S S = " T E L " > 6 0 4 - 5 5 5 - 1 2 3 4 < / L I >

< L I > < A C L A S S = " U R L "

H R E F = " H T T P : / / E X A M P L E . C O M / " > H T T P : / / E X A M P L E . C O

M / < / A > < / L I >



1 1 ) U S E M I C R O F O R M A T S



“You don’t get to decide which device people use to

go on the Internet. They do.”

B U T N O T E V E R Y B O D Y

G E T S T O C H O O S E .

W E B A I M : H T T P : / / W E B A I M . O R G /

W A V E : H T T P : / / W A V E . W E B A I M . O R G /

C H E C K M Y C O L O U R S : H T T P : / / W W W . C H E C K M Y C O L O U R S . C O M /

S O A P : H T T P S : / / S O A P . S T A N F O R D . E D U /

W C A G : H T T P : / / W W W . W 3 . O R G / T R / W C A G 2 0 /

A F E W R E S O U R C E S

http://wave.webaim.org/

T H A N K Y O U !

B R E T T M E Y E RQ U E S T I O N S ?

@ B R E T T _ M E Y E R

B R E T T . M E Y E R @ T H I N K S H O U T . C O M