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