S.I.F.T. Through Your Content
for
ACCESSIBILITY
#heweb16 | @lightjump Image courtesy borealnz, Flickr

•Born: 1971 (Monterey, CA)
•1st PC: Commodore 64
•1st Online: 1986
•1st Web Job: 1996
•1st Higher Ed Web Job: 2006
•Email: Justin.Gatewood@vvc.edu
Image courtesy Wikipedia#heweb16 | @lightjump

#heweb16 | @lightjump Image courtesy Academy of Achievement, YouTube
-Timothy Berners-Lee
(Inventor of the World Wide Web)

#heweb16 | @lightjump Image courtesy thecheges, WordPress
Why S.I.F.T.?

#heweb16 | @lightjump Image courtesy thecheges, WordPress
To get the BUGSout.

#heweb16 | @lightjump Image courtesy Tellmewhat, Flickr
What are the typical barriers
to accessibility?

#heweb16 | @lightjump Image, © New Line Cinema
Heading & Structure

#heweb16 | @lightjump Image, © New Line Cinema
Visible Focus

#heweb16 | @lightjump Image, © New Line Cinema
Alternative Text

#heweb16 | @lightjump Image, © New Line Cinema
Color & Contrast

#heweb16 | @lightjump Image, © New Line Cinema
Skip Links

#heweb16 | @lightjump Image, © New Line Cinema
Keyboard Traps

#heweb16 | @lightjump Image, © New Line Cinema
Carousels & Slideshows

#heweb16 | @lightjump Image, © New Line Cinema
Forms

#heweb16 | @lightjump Image, © New Line Cinema
Captcha

#heweb16 | @lightjump Image, © New Line Cinema
Tables

#heweb16 | @lightjump Image, © New Line Cinema
10 Common Barriers to Accessibility
• Heading Structure
• Visible Focus
• Alternative Text
(for images)
• Color Contrast
• Skip Links
• Keyboard traps
• Carousels &
Slideshows
(no controls)
• Forms
• Captcha
• Tables

#heweb16 | @lightjump Image, © New Line Cinema
12 Principles of Accessible Design
• Alternative text
• HTML structure
• Table headers
• Form completion
• Sufficient link text
• Captions/transcripts
• Non-HTML content
• ‘skip’ links
• Color/Contrast
• Well written content
• Accessible JS
• Standards

#heweb16 | @lightjump Image, © New Line Cinema
12 Principles of Accessible Design
• Alternative text
• HTML structure
• Table headers
• Form completion
• Sufficient link text
• Captions/transcripts
• Non-HTML content
• ‘skip’ links
• Color/Contrast
• Well written content
• Accessible JS
• Standards
Available at:
http://webaim.org/intro/#principles

#heweb16 | @lightjump Image, © New Line Cinema
208 Web Accessibility Best Practices

#heweb16 | @lightjump Image, © New Line Cinema
208 Web Accessibility Best Practices
Available at:
https://www.webaccessibility.com/
best_practices.php

#heweb16 | @lightjump Image, © New Line Cinema
Nearly
57 Million

#heweb16 | @lightjump Image, © New Line Cinema

#heweb16 | @lightjump Image, © New Line Cinema
What can Thorin’s map teach
us about Accessibility?

#heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer
Something is missing…

#heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer
“This content doesn’t make any sense…”

#heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer
Developer
takes a look at
the code…
…using Assistive
Technology
(SCD – Solid
Crystal Display)

#heweb16 | @lightjump Image, © New Line Cinema, & Metro-Goldwyn Mayer
The image was
missing
alternative text.

#heweb16 | @lightjump --
Automated Evaluation Tools

#heweb16 | @lightjump --
Automated Evaluation Tools
No automated evaluation tool can tell you if
your site is accessible, or even compliant.
Manual testing is always necessary.
http://www.section508.gov/content/automated-evaluation-tools

#heweb16 | @lightjump Image courtesy FearlessGuster, iFunny.co
Wha…?

#heweb16 | @lightjump http://webaim.org/articles/pour/
Building a P.O.U.R. website
• Perceivable
• Operable
• Understandable
• Robust

#heweb16 | @lightjump Image courtesy FearlessGuster, iFunny.co
Wha…?

#heweb16 | @lightjump Image courtesy borealnz, Flickr
S.I.F.T. through your website
• Structure
• Images
• Forms
• Tables

#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
•Use Headings
•Use Lists
•Set the Language
•Test with only a
keyboard
•Use descriptive
link text
•Use ‘skip’ links
•Test enlarging
page content
Structure

#heweb16 | @lightjump --
S.I.F.T. through your website
•One <h1>
•Then <h2>
•<h3>, and so on…
•Use proper nesting – don’t skip levels
Structure > Use Headings

#heweb16 | @lightjump --
S.I.F.T. through your website
•<ul> and/or <ol> (with nested <li>)
•<dl> (with nested <dd>)
•Not for visual layout
•Empty lists are incorrect HTML
Structure > Use Lists

#heweb16 | @lightjump --
S.I.F.T. through your website
•<html lang=“en”>
•<html xml:lang=“en”> (if XHTML)
Structure > Set the language

#heweb16 | @lightjump --
S.I.F.T. through your website
•Users must be able to navigate to and
select each link using the keyboard
alone.
Structure > Test w/keyboard

#heweb16 | @lightjump --
S.I.F.T. through your website
•Links do not need to include “link” in
the link text (users already know it’s a
link)
•Avoid ‘click here’, ‘read more’, in link
text
Structure > Descriptive link text

#heweb16 | @lightjump --
S.I.F.T. through your website
•Provide a link at the top of the page
which jumps the user down to an
anchor or target at the beginning of
the main content.
Structure > Use skip links

#heweb16 | @lightjump Image, © www.Lifetool.at
S.I.F.T. through your website
Structure > Use skip links

#heweb16 | @lightjump --
S.I.F.T. through your website
•To see how the page will look for low-
vision users.
Structure > Test enlarging page content

#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
Structure
Question!

• Use ‘alt’ text
• Use empty ‘alt’ if
image is not content
• Limit Animations
• Icons
• Color / Contrast
• Avoid flashing images
or media
• Captions/transcripts
#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
Images (including media – video/audio)

#heweb16 | @lightjump --
S.I.F.T. through your website
• Present the CONTENT and FUNCTION of the
images in your web content.
Images > Alternative Text

#heweb16 | @lightjump --
S.I.F.T. through your website
• If image is not content or functional (is
decorative only) give an empty or null alt tag
• EXAMPLE: alt=“ “ (space between quotes)
• RESULT: Screen readers will skip this tag
Images > Empty Alt tag for non-content

#heweb16 | @lightjump --
S.I.F.T. through your website
• Animation should almost always be user
controlled or very short in duration.
Images > Limit animation

#heweb16 | @lightjump --
S.I.F.T. through your website
• If used, ensure they are well designed, easy to
understand and used consistently.
Images > Icons

#heweb16 | @lightjump --
S.I.F.T. through your website
• Provide alternative methods to identify
differences that are not dependent on color.
• Text must sufficiently contrast with the
background.
Images > Color and Contrast

#heweb16 | @lightjump --
S.I.F.T. through your website
• Bright, strobing images or media can cause
photoepileptic seizures if they:
• Flash more than 2 times per second
• Are sufficiently large or bright.
• Additionally, the color red is more likely to
cause a seizure.
Images > Avoid flashing images/media

#heweb16 | @lightjump --
S.I.F.T. through your website
• Captions should be:
• Synchronized
• Equivalent
• Accessible
• Add text transcript on page
Images > Captions/transcripts

#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
Images
Question!

#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
• Use <label>
• Use <fieldset>
• Use <legend>
• Test with keyboard
• Match for and id
• No empty buttons
• Avoid multi-select
menus
• Alt text for img
buttons
• JS jump menu issue
Forms

#heweb16 | @lightjump --
S.I.F.T. through your website
• <label for=“name”>Name:</label>
• <input id=“name” type=“text” name=“textfield”>
Forms > use <label>

#heweb16 | @lightjump --
S.I.F.T. through your website
• <fieldset> surrounds the group of radio buttons
• <legend> provides a description for the grouping
• <fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
<input id="mushrooms" type="checkbox" name="toppings" value="mushrooms">
<label for="mushrooms">Mushrooms</label><br>
<input id="olives" type="checkbox" name="toppings" value="olives">
<label for="olives">Olives</label>
</fieldset>
Forms > use <fieldset> & <legend>

#heweb16 | @lightjump --
S.I.F.T. through your website
• Ensure there aren’t any ‘traps’ in the form that
would prevent a user from completing the
form.
Forms > Test with keyboard alone

#heweb16 | @lightjump --
S.I.F.T. through your website
• Buttons must never be left empty,
• Avoid multi-select menus,
• Include alt text on img buttons
• JS forms – provide a submit button separate
from the choices
Forms > wrap-up

#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
Forms
Question!

#heweb16 | @lightjump --
S.I.F.T. through your website
• Use <caption>
• Use <th>
• Use <scope>
• Avoid spanned cells
• Avoid multi-level
header cells
• Use proportional
sizing (% over px)
• Avoid the summary
attribute
• <thead> & <tfoot> not
really necessary
Tables

#heweb16 | @lightjump --
S.I.F.T. through your website
• Must be the first tag after the opening <table>
tag.
• Brief, indicates the content of that table.
Tables > Use <caption>

#heweb16 | @lightjump --
S.I.F.T. through your website
• Should never be empty.
• Helps screen reader users understand the
context of content in each table cell.
Tables > Use <th>

#heweb16 | @lightjump --
S.I.F.T. through your website
• Identifies whether a table header is a column
header or row header:
• <th scope=“col”>, or
• <th scope=“row”>
Tables > Use scope

#heweb16 | @lightjump --
S.I.F.T. through your website
• Helps low vision users when enlarging text
content
• Defined cell heights should be avoided so the
cell can expand downward to accommodate
its content when enlarged.
Tables > Use proportional sizing (%)

#heweb16 | @lightjump --
S.I.F.T. through your website
• Spanned cells
Multi-level header cells
• Summary attribute (not part of HTML5 spec)
• <thead> & <tfoot> - not necessary for
accessibility
Tables > Things to avoid

#heweb16 | @lightjump --
S.I.F.T. through your website
Tables
Question!

#heweb16 | @lightjump Image courtesy Wikipedia
However difficult life may
seem, there is always
something you can do
and succeed at, it
matters that YOU DON’T
JUST GIVE UP…
- Stephen Hawking

#heweb16 | @lightjump --
Useful Free Tools
• Vischeck – simulates colorblind vision
• http://www.vischeck.com
• Accessify – Quick Form, Skipnav, Navigation & jQuery Function Builders
• http://www.accessify.com
• WebAIM Tools:
• Web Accessibility Evaluation Tool (WAVE)
• http://wave.webaim.org
• Color Contrast Checker
• http://webaim.org/resources/contrastchecker/
• Penn State Accessibility Resources
• http://accessibility.psu.edu/

#heweb16 | @lightjump --
Useful Resources
• W3.org/WAI/ - (W3C Web Accessibility Initiative)
• WebAIM.org – (Web Accessibility in Mind)
• Knowbility.org
• Usability.gov
• Webaccessibility.com
• AccessIQ.org (Australia)
• InteractiveAccessibility.com
• Ahead.org (Association on Higher Ed & Disability)
• NCDAE.org (Nat’l Center on Disability & Access to Ed.)

#heweb16 | @lightjump --
Questions?
Justin Gatewood
lightjump@gmail.com
Slides: slideshare.net/lightjump