Best Practices for Building Accessible Websites in Wordpress
•Télécharger en tant que PPTX, PDF•
2 j'aime•2,317 vues
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.
Recommandé
Contenu connexe
Similaire à Best Practices for Building Accessible Websites in Wordpress
Similaire à Best Practices for Building Accessible Websites in Wordpress (20)
Dernier
Dernier (20)
Best Practices for Building Accessible Websites in Wordpress
- 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
- 3. “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
- 4. 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
- 5. • 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
- 6. potential clients + worldwide users = equal unprecedented access to information and equal opportunity
- 7. W H A T makes a website accessible? H O W how can you know if yours is accessible?
- 8. T Y P E S O F D I S A B I L I T I E S auditory cognitive / neurological physical visual
- 9. 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
- 10. 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
- 11. 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
- 12. 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
- 13. IMPLEMENTATION
- 14. IMPLEMENTATION
- 15. 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
- 16. W H A T ’ S I N I T F O R M E ?
- 17. 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 ?
- 18. 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
- 19. 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.”/>
- 20. 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
- 21. 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
- 22. @ 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
Notes de l'éditeur
- Session Description: 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. Intended Audience: beginners, designers Past Speaking experience: I’m a young professional, and I cannot point to several instances of leading presentations or classrooms. As an undergrad, I was asked to be an ambassador to prospective students and typically gave 5-6 talks per year to large groups of students who were trying to decide which college to attend. These days, as both a web designer and a filmmaker, I’ve been teaching both clients and colleagues as much as I can teach them, and learning just as much in turn. In web design, I’m often teaching the same (or very similar) lessons at different times to different clients. This is especially true of folks who are new to WordPress, or people who have never published anything online. From what I can gather, these lessons have been very helpful to my clients, and I’d like to share these lessons with others in an organized, wider-reaching way. I love WordPress and what people can do with it. An 80 year old who couldn’t use Gmail now runs her own website… how incredible is that?! But at the same time, I’m teaching her the same set of lessons that I’m teaching the 30 year old who’s never operated a website before and wants to start a blog. I've learned that there are a lot of “gotchas” and “wish I’d have knowns” in WordPress and lot of them relate to simply being a smart WordPress consumer. Attending WordCamps in Atlanta and Birmingham have been especially eyeopening in terms of learning from others' experiences as I’m sure speaking at WordCamps Asheville and Seattle will be. There’s a lot to go over, but I think I can help folks learn a lot of these lessons, and I’d love to be given the chance to try :-) Speaker Bio: I take photos, shoot film, design stuff, and try not to be too pretentious about it. My very first client was a woman in her eighties running a spectacularly successful cancer non-profit program…who didn’t really use email, let alone anything else. I trained her to set-up and maintain a WordPress site. Throughout undergrad I gave regular talks to perspective students and parents on the trials, tribulations, and triumphs of college. Now as both a web designer and filmmaker, I’ve realized that I’m teaching very similar lessons to many of my clients, especially those that haven’t worked much with visual design, on how to avoid the pitfalls of “en vogue” to create products that can withstand the test of rising and falling fashions in typography, photography, film, and design. —————
- I take photos, shoot film, design stuff, and try not to be too pretentious about it. My very first client was a woman in her eighties running a spectacularly successful cancer non-profit program…who didn’t really use email, let alone anything else. I trained her to set-up and maintain a WordPress site. Throughout undergrad I gave regular talks to perspective students and parents on the trials, tribulations, and triumphs of college. Now as both a web designer and filmmaker, I’ve realized that I’m teaching very similar lessons to many of my clients, especially those that haven’t worked much with visual design, on how to avoid the pitfalls of “en vogue” to create products that can withstand the test of rising and falling fashions in typography, photography, film, and design.
- 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. it is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities aka the UN recognizes Web accessibility as a basic human right Developing a web accessibility business case for your organization: http://www.w3.org/WAI/bcase/Overview
- build flexible sites for slow internet connections, temporary disabilities, and changing abilities potential clients: government contracts, user aware companies people are able to use & contribute to the Web more effectively equal access and equal opportunity to an unprecedented access to information and opportunity
- type of content size and complexity development tools environment
- color blindness repetitive stress injury hard of hearing —> total deafness levels of blindness/sight ADHD dyslexia deaf-blindess audio videos with sound lack of captions inability to customize captions cognitive clearly structured content consistent labeling ability to disable distracting content physical ergonomic keyboard/mouse head pointer on-screen keyboard voice recognition eye tracking visual enlarging/reducing text and image size customize-able settings for fonts/colors/spacing
- combining audio and visual content providing alternative presentations captions and other alternatives for multimedia text transcripts audio descriptions content presented in different ways mark-up content properly (headings, lists, tables, etc) sequences of info content is easier to see and hear foreground is distinguishable from background i.e. color to convey info, color combos, text resize-ability, minimal use of images of text keyboard functionality is possible easily navigable content clear titles informed of current location
- When accessibility features are effectively implemented in one component, the other components are more likely to implement them. When an accessibility feature is implemented in most content, developers and users are more likely to demand that user agents support it. When authoring tools make a feature easy to implement, developers are more likely to implement it in their content. When developers want to implement an accessibility feature in their content, they are more likely to demand that their authoring tool make it easy to implement. When Web browsers, media players, assistive technologies, and other user agents support an accessibility feature, users are more likely to demand it and developers are more likely to implement it in their content.
- It is essential that several different components of Web development and interaction work together in order for the Web to be accessible to people with disabilities. These components include: content - the information in a Web page or Web application, including: natural information such as text, images, and sounds code or markup that defines structure, presentation, etc. Web browsers, media players, and other "user agents" assistive technology, in some cases - screen readers, alternative keyboards, switches, scanning software, etc. users' knowledge, experiences, and in some cases, adaptive strategies using the Web developers - designers, coders, authors, etc., including developers with disabilities and users who contribute content authoring tools - software that creates Web sites evaluation tools - Web accessibility evaluation tools, HTML validators, CSS validators, etc.
- Social issue=more actively participate in society equal opportunity to: unprecedented access to info unprecedented interaction
- If your image includes text, be sure to repeat it in your alt-text. Keep your alt-text short. Think of it like a tweet. Incorporate SEO keywords into your alt-text: search engines will reward for relevancy Make your alt-text meaningful to your readers. “Why am I using this image?” and, “What message am I trying to convey to my readers with this image?”
- Session Description: 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. Intended Audience: beginners, designers Past Speaking experience: I’m a young professional, and I cannot point to several instances of leading presentations or classrooms. As an undergrad, I was asked to be an ambassador to prospective students and typically gave 5-6 talks per year to large groups of students who were trying to decide which college to attend. These days, as both a web designer and a filmmaker, I’ve been teaching both clients and colleagues as much as I can teach them, and learning just as much in turn. In web design, I’m often teaching the same (or very similar) lessons at different times to different clients. This is especially true of folks who are new to WordPress, or people who have never published anything online. From what I can gather, these lessons have been very helpful to my clients, and I’d like to share these lessons with others in an organized, wider-reaching way. I love WordPress and what people can do with it. An 80 year old who couldn’t use Gmail now runs her own website… how incredible is that?! But at the same time, I’m teaching her the same set of lessons that I’m teaching the 30 year old who’s never operated a website before and wants to start a blog. I've learned that there are a lot of “gotchas” and “wish I’d have knowns” in WordPress and lot of them relate to simply being a smart WordPress consumer. Attending WordCamps in Atlanta and Birmingham have been especially eyeopening in terms of learning from others' experiences as I’m sure speaking at WordCamps Asheville and Seattle will be. There’s a lot to go over, but I think I can help folks learn a lot of these lessons, and I’d love to be given the chance to try :-) Speaker Bio: I take photos, shoot film, design stuff, and try not to be too pretentious about it. My very first client was a woman in her eighties running a spectacularly successful cancer non-profit program…who didn’t really use email, let alone anything else. I trained her to set-up and maintain a WordPress site. Throughout undergrad I gave regular talks to perspective students and parents on the trials, tribulations, and triumphs of college. Now as both a web designer and filmmaker, I’ve realized that I’m teaching very similar lessons to many of my clients, especially those that haven’t worked much with visual design, on how to avoid the pitfalls of “en vogue” to create products that can withstand the test of rising and falling fashions in typography, photography, film, and design. —————