Testing Wireframes
for Web Accessibility
Jeff Singleton
Objectives
• Understand the importance of reviewing web
wireframes and early designs for accessibility.
• Understand the common web accessibility
problems that can be caught in the design
phase.
• Learn how to markup wireframes for
accessibility to simplify accessibility for
developers.
Why Important?
THE IMPORTANCE OF GOOD DESIGN
(aka Get It Right From the Start!)
$1.00
$1,000.00
$1.00
Common Accessibility Issues
CATCHING ISSUES AT DESIGN PHASE
Taking the Guesswork Out of
Accessibility for Developers
Accessibility and Design
Improperly Labeled Forms
Avoid: Internal Label
➡Harder for AT
➡Difficult to Retrace Steps
➡Harder to Code Correctly
Label
Form Element
Preferred: External Label
✓Easier for AT
✓Easier to Retrace Steps
✓Coding Technique Well-Known
Accessibility and Design
Dropdown Lists
Avoid: Dropdown w/o Button
➡Super Hard for AT
➡Much Harder to Code Correctly
Preferred: Dropdown w/ Button
✓Easier for AT
✓Avoids Coding Errors Later
Accessibility and Design
Repeating Non-Descriptive Links
Repeating Links
Proper Links
✓ Make links
unique and
descriptive
Proper Links
✓Make links
unique and
descriptive
-OR-
✓Make headings
into descriptive
links
Accessibility and Design
Inconsistent Navigation
Inconsistent Navigation
•Menus
•Lists
•Layout too!
Accessibility and Design
Mouse Rollovers
Accessibility and Design
Insufficient Contrast
Accessibility and Design
Insufficient
Contrast
Contrast needs to be
4.5:1 or greater
Accessibility and Design
Skip Links
Sample code for a skip navigation link that becomes visible when it receives focus:
Placed within the CSS file or within the HEADER
<style type="text/css">
#skip a, #skip a:hover, #skip a:visited {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
#skip a:active, #skip a:focus {
position:static;
width:auto;
height:auto;
}
</style>
Placed first in the page content within the BODY
<div id="skip">
<a href="#content">Skip to Main Content</a>
</div>
To be place just before the main content
<a name="content"></a>
Accessibility and Design
Input Focus Visually Indicated
Accessibility and Design
“Required” Form Fields
<label for=“name”>Name</label>
<div>*</div>
<input…
<label for=“name”>Name<div>*</div>
</label>
<input…
Accessibility and Design
“Logical Order” for Form Fields
Accessibility and Design
Information Presented by Color Only
Accessibility and Design
Information
With Color:
How to Get it
Wrong
Accessibility and Design
Information
With Color:
How to Get
Right
Accessibility and Design
Data Tables
Accessibility and Design
Table Design
✓
Keep headers in same
row/columns
➡ Avoid “diagonal
lookups”
Accessibility and Design
Copy
Yes, even copy has accessibility implications...
Even copy has accessibility implications...
✓Text links really describe what they do
✓Copy is clear and easily understood
✓ALT attributes are short but meaningfully descriptive
✓Page/frame titles describe and distinguish pages
Reference Sample-- FPO
Reference Sample-- FPO
Objectives
• Covered the importance of reviewing web
wireframes and early designs for accessibility.
• Covered the common web accessibility
problems that can be caught in the design
phase.
• Have reviewed how to markup wireframes for
accessibility to simplify accessibility for
developers.
Testing Wireframes for Web Accessibility
Thank You!!!
Jeff Singleton
jeffrey.singleton@cryptzone.com