I’ll explore basic web accessibility principles for web designers, developers, and site owners, then show how to turn seemingly daunting and confusing accessibility requirements into understandable, actionable tasks and techniques. The talk will cover some of the accessibility-specific WordPress plugins and themes available, as well as some quick, easy tests to integrate into design and development workflows.
20. Situational challenges
• Broken mouse
• Fractured wrists
• Using mobile devices
• Sun glare on screens
• Feeling tired or unwell
• Noisy environments
• Kids playing around
• Long, stressful day
38. Not too shabby, WordPress!
• WP Core/Accessibility Teams
• WP is largely accessible, by default.
• Default themes (2015, 2016, etc.)
• Creating standards for theme/plugin devs.
39.
40.
41.
42. we don’t need accessibility plugins
to fix other plugins and themes.
45. Technical standard for web site accessibility:
Web Content Accessibility Guidelines (WCAG) 2.0
• 4 Principles, broken into
12 guidelines and 61 success criteria
• Success criteria fits at Level A, AA or AAA
• 25 are level A
• 13 are level AA
• 23 are level AAA
49. Accessibility as an MVP
Keyboard Images Forms Dynamic content Everything else
50. Designing
• Keyboard access:
• Ensure focus outlines
• Design great skip to content links.
• Be thoughtful about headings.
• Low vision:
• Color contrast: 4.5:1 ratio for standard text.
• Proximity: group related items
• Line lengths: not too short or long
51. Designing
• Form error handling
• Make it easy for users to succeed, but…
• Design for failures.
• Animation & Carousels (if you must)
• Design user controls for motion/carousels.
• Avoid: rapid flashing elements
• Avoid overuse of parallax effects.
52. Designing
• Content design
• Mobile-first, responsive = big accessibility
gains.
• Plain language and consistent interfaces.
• Link text should be unique.
AVOID: “Read more…”
53. Developing
• Keyboard access ALL THE THINGS
• Focus outlines: change default resets!
• Ensure tab order matches source order.
• Be responsible for modal interactions.
• Maps, media, and other controls.
• Alternate text
• Images - functional, content, and decorative.
54. Developing
• Document Structure
• Set the language for every page.
• Use unique page titles.
• Heading structure should make sense
when linearized.
• Employ semantic markup.
55. Developing
• Forms and error handling
• Every form field requires a label.
• You can hide labels visually, if needed. :)
• Provide contextual help.
• Make it easy to correct errors.
• Link to error fields from error summary
text.
56. Developing
• Maintain/set focus on changes
• Ensure audiences know when on-page
changes occur—not just visually.
• Provide contextual help.
• Make it easy to correct errors.
• Link to error fields from error summary
text.
59. Design & Dev Tools for a11y
• Your keyboard (seriously)
• Your browser’s
• DOM inspector
• Text resize
• Color contrast tools:
• ColorSafe.co - helps plan color
combinations
• Lea Verou’s Contrast Ratio tool
61. Design & Dev Tools for a11y
• And… most importantly:
• Usability testing with people with
disabilities
• Younger and older people are great to test
with, too!