17. #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
18. #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
19. #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
20. #heweb16 | @lightjump Image, Š New Line Cinema
208 Web Accessibility Best Practices
21. #heweb16 | @lightjump Image, Š New Line Cinema
208 Web Accessibility Best Practices
Available at:
https://www.webaccessibility.com/
best_practices.php
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
42. #heweb16 | @lightjump Image, Š www.Lifetool.at
S.I.F.T. through your website
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
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