S.I.F.T. Through Your Content For Accessibility

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

Visible Focus

Alternative Text

Color & Contrast

Skip Links

Keyboard Traps

Carousels & Slideshows

Forms

Captcha

Tables

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

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

12 Principles of Accessible Design
• Alternative text
• HTML structure
• Table headers
• Form completion
• Sufficient link text
• Non-HTML content
• ‘skip’ links
• Color/Contrast
• Well written content
• Accessible JS
• Standards
Available at:
http://webaim.org/intro/#principles

208 Web Accessibility Best Practices

208 Web Accessibility Best Practices
Available at:
https://www.webaccessibility.com/
best_practices.php

Nearly
57 Million

What can Thorin’s map teach
us about Accessibility?

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

“This content doesn’t make any sense…”

Developer
takes a look at
the code…
…using Assistive
Technology
(SCD – Solid
Crystal Display)

The image was
missing
alternative text.

#heweb16 | @lightjump --
Automated Evaluation Tools

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 borealnz, Flickr
S.I.F.T. through your website
• Structure
• Images
• Forms
• Tables

#heweb16 | @lightjump Image courtesy Wikipedia
•Use Headings
•Use Lists
•Set the Language
•Test with only a
keyboard
•Use descriptive
link text
•Use ‘skip’ links
•Test enlarging
page content
Structure

•One <h1>
•Then <h2>
•<h3>, and so on…
•Use proper nesting – don’t skip levels
Structure > Use Headings

•<ul> and/or <ol> (with nested <li>)
•<dl> (with nested <dd>)
•Not for visual layout
•Empty lists are incorrect HTML
Structure > Use Lists

•<html lang=“en”>
•<html xml:lang=“en”> (if XHTML)
Structure > Set the language

•Users must be able to navigate to and
select each link using the keyboard
alone.
Structure > Test w/keyboard

•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

•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
Structure > Use skip links

•To see how the page will look for low-
vision users.
Structure > Test enlarging page content

Structure
Question!

• Use ‘alt’ text
• Use empty ‘alt’ if
image is not content
• Limit Animations
• Icons
• Color / Contrast
• Avoid flashing images
or media
Images (including media – video/audio)

• Present the CONTENT and FUNCTION of the
images in your web content.
Images > Alternative Text

• 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

• Animation should almost always be user
controlled or very short in duration.
Images > Limit animation

• If used, ensure they are well designed, easy to
understand and used consistently.
Images > Icons

• Provide alternative methods to identify
differences that are not dependent on color.
• Text must sufficiently contrast with the
background.
Images > Color and Contrast

• 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

• Captions should be:
• Synchronized
• Equivalent
• Accessible
• Add text transcript on page
Images > Captions/transcripts

Images
Question!

• 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

• <label for=“name”>Name:</label>
• <input id=“name” type=“text” name=“textfield”>
Forms > use <label>

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

• Ensure there aren’t any ‘traps’ in the form that
would prevent a user from completing the
form.
Forms > Test with keyboard alone

• 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

Forms
Question!

• 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

• Must be the first tag after the opening <table>
tag.
• Brief, indicates the content of that table.
Tables > Use <caption>

• Should never be empty.
• Helps screen reader users understand the
context of content in each table cell.
Tables > Use <th>

• Identifies whether a table header is a column
header or row header:
• <th scope=“col”>, or
• <th scope=“row”>
Tables > Use scope

• 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 (%)

• Spanned cells
Multi-level header cells
• Summary attribute (not part of HTML5 spec)
• <thead> & <tfoot> - not necessary for
accessibility
Tables > Things to avoid

Tables
Question!

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

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/

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

Questions?
Justin Gatewood
lightjump@gmail.com
Slides: slideshare.net/lightjump

S.I.F.T. Through Your Content For Accessibility

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (20)

Similar to S.I.F.T. Through Your Content For Accessibility

Similar to S.I.F.T. Through Your Content For Accessibility (20)

More from Justin Gatewood

More from Justin Gatewood (20)

Recently uploaded

Recently uploaded (20)

S.I.F.T. Through Your Content For Accessibility