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: [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 thecheges, WordPress

Why S.I.F.T.?

#heweb16 | @lightjump Image courtesy thecheges, WordPress

To get the BUGS out.

#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• Captions/transcripts• 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


Nearly57 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…”


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


•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

• Captions/transcripts



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 imgbuttons

• 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 cellsMulti-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 [email protected]: slideshare.net/lightjump