SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
30.
#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
34.
#heweb16 | @lightjump Image courtesy borealnz, Flickr
S.I.F.T. through your website
• Structure
• Images
• Forms
• Tables
35.
#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
36.
#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
37.
#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
38.
#heweb16 | @lightjump --
S.I.F.T. through your website
•<html lang=“en”>
•<html xml:lang=“en”> (if XHTML)
Structure > Set the language
39.
#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
40.
#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
41.
#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
43.
#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
44.
#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
Structure
Question!
45.
• 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)
46.
#heweb16 | @lightjump --
S.I.F.T. through your website
• Present the CONTENT and FUNCTION of the
images in your web content.
Images > Alternative Text
47.
#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
48.
#heweb16 | @lightjump --
S.I.F.T. through your website
• Animation should almost always be user
controlled or very short in duration.
Images > Limit animation
49.
#heweb16 | @lightjump --
S.I.F.T. through your website
• If used, ensure they are well designed, easy to
understand and used consistently.
Images > Icons
50.
#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
51.
#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
52.
#heweb16 | @lightjump --
S.I.F.T. through your website
• Captions should be:
• Synchronized
• Equivalent
• Accessible
• Add text transcript on page
Images > Captions/transcripts
53.
#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
Images
Question!
54.
#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
55.
#heweb16 | @lightjump --
S.I.F.T. through your website
• <label for=“name”>Name:</label>
• <input id=“name” type=“text” name=“textfield”>
Forms > use <label>
56.
#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>
57.
#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
58.
#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
59.
#heweb16 | @lightjump Image courtesy Wikipedia
S.I.F.T. through your website
Forms
Question!
60.
#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
61.
#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>
62.
#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>
63.
#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
64.
#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 (%)
65.
#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
66.
#heweb16 | @lightjump --
S.I.F.T. through your website
Tables
Question!
67.
#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