Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
B U I L D I N G A C C E S S I B L E W E B S I T E S I N
W O R D P R E S S
BEST PRACTICES
@nancythanki @misfitideas
“The power of the Web is in its universality.
Access by everyone regardless of disability is
an essential aspect.”
– T I M...
users spend more time
on your site consuming
your content and
engaging with your
brand
intuitive navigation
+
properly lab...
• 20 million blind adults in the US
• 10% use screen readers
• 8% of men and 0.5% of women are color blind
F A C T S
potential clients + worldwide users
=
equal unprecedented access to information and equal opportunity
W H A T makes a website accessible?
H O W how can you know if yours is accessible?
T Y P E S O F
D I S A B I L I T I E S
auditory
cognitive / neurological
physical
visual
A S S I S T I V E
T E C H N O L O G Y
braille display
screen reader
text-to-speech
voice browser
voice recognition
keyboar...
S C R E E N
R E A D E R S
• nvaccess’ NVDA reader
• Chrome Vox
• Mozilla’s Fangs Screen
Reader Emulator
• Apple’s VoiceOver
A D O P T I V E S T R A T E G I E S
• content formats: auditory, tactile, visual
• presentation: distinguishing visual con...
E V A L U A T I O N
T O O L S * * *
• Color Oracle
• WAVE-Web Accessibility
Virtual Evaluator
• Web Accessibility
Checker
...
IMPLEMENTATION
IMPLEMENTATION
digital divide issues
mobile access
older users’ needs
low literacy/fluency
low bandwidth
connections/older
technology
new...
W H A T ’ S
I N I T F O R
M E ?
D O E S I T M A T T E R H O W
A C C E S S I B L E Y O U R
C O N T E N T I S I F N O B O D Y
E V E R F I N D S I T ?
users spend more time
on your site, consuming
your content, and
engaging with your
brand
intuitive navigation
+
properly l...
WHAT WE SEE vs WHAT SEARCH ENGINES
SEE
ALT TEXT= SEARCH ENGINES CAN “SEE” IMAGES
<img src=“grapes.jpg” alt=“A man
holding ...
C O N T E N T I S K I N G …
B U T H E R E A R E S O M E O T H E R T H I N G S T O O
• Providing a clear and proper heading...
R E S O U R C E S T O C O N S I D E R
• WebAIM: web accessibility in mind: http://webaim.org/intro/
• Web Accessibility In...
@ n a n c y t h a n k i
n a n c y t h a n k i . c o m
BEST PRACTICES
@ m i s f i t i d e a s . c o m
m i s f i t i d e a s...
Best Practices for Building Accessible Websites in Wordpress
Upcoming SlideShare
Loading in …5
×

Best Practices for Building Accessible Websites in Wordpress

1,979 views

Published on

There are over 20 million blind adults in the United States, approximately 10% of whom use screen readers to access the internet. Likewise, roughly 8% of men and 0.5% of women have some form of color blindness. Many government contracts are beginning to require websites to be accessible and many companies who are not legally required to build accessible websites are starting to do it regardless. What goes into making a website accessible? How can you determine whether or not your website is? This presentation will discuss both tools and techniques that can help you build accessible websites.

Published in: Internet
  • Be the first to comment

Best Practices for Building Accessible Websites in Wordpress

  1. 1. B U I L D I N G A C C E S S I B L E W E B S I T E S I N W O R D P R E S S BEST PRACTICES @nancythanki @misfitideas
  2. 2. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – T I M B E R N E R S - L E E W 3 C D I R E C T O R A N D I N V E N T O R O F T H E W O R L D W I D E W E B
  3. 3. users spend more time on your site consuming your content and engaging with your brand intuitive navigation + properly labeled links and images + user friendly design aesthetics
  4. 4. • 20 million blind adults in the US • 10% use screen readers • 8% of men and 0.5% of women are color blind F A C T S
  5. 5. potential clients + worldwide users = equal unprecedented access to information and equal opportunity
  6. 6. W H A T makes a website accessible? H O W how can you know if yours is accessible?
  7. 7. T Y P E S O F D I S A B I L I T I E S auditory cognitive / neurological physical visual
  8. 8. A S S I S T I V E T E C H N O L O G Y braille display screen reader text-to-speech voice browser voice recognition keyboard navigation
  9. 9. S C R E E N R E A D E R S • nvaccess’ NVDA reader • Chrome Vox • Mozilla’s Fangs Screen Reader Emulator • Apple’s VoiceOver
  10. 10. A D O P T I V E S T R A T E G I E S • content formats: auditory, tactile, visual • presentation: distinguishing visual content and providing ways to understand audio content • user interaction: typing, writing, and clicking • design solutions: navigating and finding content
  11. 11. E V A L U A T I O N T O O L S * * * • Color Oracle • WAVE-Web Accessibility Virtual Evaluator • Web Accessibility Checker • AChecker • Accessibility Valet ***no tool has been deemed able to replace common sense; please keep that in mind
  12. 12. IMPLEMENTATION
  13. 13. IMPLEMENTATION
  14. 14. digital divide issues mobile access older users’ needs low literacy/fluency low bandwidth connections/older technology new/infrequent users mobile phone users BENEFITS FOR OTHERS
  15. 15. W H A T ’ S I N I T F O R M E ?
  16. 16. D O E S I T M A T T E R H O W A C C E S S I B L E Y O U R C O N T E N T I S I F N O B O D Y E V E R F I N D S I T ?
  17. 17. users spend more time on your site, consuming your content, and engaging with your brand intuitive navigation + properly labeled links and images + user friendly design aesthetics
  18. 18. WHAT WE SEE vs WHAT SEARCH ENGINES SEE ALT TEXT= SEARCH ENGINES CAN “SEE” IMAGES <img src=“grapes.jpg” alt=“A man holding a bundle of grapes.”/>
  19. 19. C O N T E N T I S K I N G … B U T H E R E A R E S O M E O T H E R T H I N G S T O O • Providing a clear and proper heading structure and avoiding empty headings • Providing descriptive link text (i.e., avoiding “click here”) • Ensuring page titles are descriptive, yet succinct • Not relying on JavaScript for things that don’t need it • Avoiding mouse dependent interaction • Using standard web formats when possible • Providing transcripts and captions for video • Identifying the language of pages and page content • Allowing multiple ways of finding content (e.g., search, a site map, table of contents, clear navigation, etc.) • Providing useful links to related and relevant resources • Ensuring URLs are human readable and logical • Presenting a clear and consistent navigation and page structure • Avoiding CSS and other stylistic markup to present content or meaning* • Defining abbreviations and acronyms • Have unique and relevant titles and meta descriptions
  20. 20. R E S O U R C E S T O C O N S I D E R • WebAIM: web accessibility in mind: http://webaim.org/intro/ • Web Accessibility Initiative (WAI): http://www.w3.org/WAI/ • WAI Resources: http://www.w3.org/WAI/Resources/ • Quicktips: http://www.w3.org/WAI/quicktips/ • Implementation Plan for Web Accessibility: http://www.w3.org/WAI/impl/Overview • Web Content Accessibility Guidelines: http://www.w3.org/WAI/intro/wcag.php • Web Accessibility Evaluation Tools: Overview: http://www.w3.org/WAI/ER/tools/ • Accessibility Evaluation Resources: http://www.w3.org/WAI/eval/Overview.html • Easy Checks - A First Review of Web Accessibility: http://www.w3.org/WAI/eval/preliminary • Complete list of web accessibility evaluation tools: http://www.w3.org/WAI/ER/tools/complete
  21. 21. @ n a n c y t h a n k i n a n c y t h a n k i . c o m BEST PRACTICES @ m i s f i t i d e a s . c o m m i s f i t i d e a s . c o m h e l l o @ m i s f i t i d e a s . c o m

×