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