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: [email protected]
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 Tellmewhat, Flickr
What are the typical barriers to accessibility?
#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
Available at:
https://www.webaccessibility.com/best_practices.php
#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
Developertakes 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 ToolsNo 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 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
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
• 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
• Use <label>• Use <fieldset>• Use <legend>• Test with keyboard• Match for and id• No empty buttons
• Avoid multi-select menus
• Alt text for imgbuttons
• 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 --
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 cellsMulti-level header cells
• Summary attribute (not part of HTML5 spec)• <thead> & <tfoot> - not necessary for
accessibility
Tables > Things to avoid
#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.)