Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Accessibility: What you need to know and why

Similar presentations


Presentation on theme: "Web Accessibility: What you need to know and why"— Presentation transcript:

1 Web Accessibility: What you need to know and why
created by Accessibility Team presented by Kyle Shachmut, Vittorio Bucchieri, Curtis Wilcox

2 Accessibility Team Mildene Bradley
Administrative Technology Services (Security & Accessibility) Vittorio Bucchieri Teaching & Learning Technologies Michele Clopper University Disability Services Richard Clinch Harvard Web Publishing   Amy Deschenes Harvard Libraries Michael Hilborn Academic Technology Development   Luke Juergens Administrative Technology Services (Campus Services) Scott Kearney Administrative Technology Services (FAS) Mike Lawrence HUIT Architecture & Engineering Richard Ohlsten Administrative Systems (CAADS) Kyle Shachmut HarvardX Janet Taylor Library Technology Services Curtis Wilcox FAS Instructional Media Services / Assistive Technology Center (ATC) This slide deck will be posted to the Online Accessibility website under the Resources > Training section. accessibility.huit.harvard.edu

3 What is accessibility? Digital accessibility means making electronic content available to and usable by everyone, including and especially people with disabilities Accessibility: Users with disabilities includes: blindness, visual impairment, color blindness/contrast deficits, deafness, hard of hearing, movement impairments, cognitive impairments, and more. Assistive technology: specialized (usually technical) devices that users with disabilities use in order to interact with technology including: screen readers, magnifiers, color inversion, braille output devices, captioning, transcription, sign language interpretation, specialized keyboards, switches, and more. accessibility.huit.harvard.edu

4 Why strive for accessibility?
Improves usability of digital content for everyone, including people with disabilities Improves overall user experience Enhances clarity for non-native English speakers We most often think of accessibility as making digital content useable for people with disabilities, but the benefits do not stop there. Increasing accessibility can also improve the usability of your content for everyone.  Following best practices can improve overall user experience, help non-native English speakers. accessibility.huit.harvard.edu

5 Benefits of accessible content
Reduces development effort when accessibility is considered from the start Reduces cost when problems are addressed before users encounter accessibility barriers Increases search engine optimization & content findability Demonstrates inclusiveness Following best practices can also increase search engine optimization. Additionally, when designers and contributors consider accessibility from the start, it can be significantly faster and cheaper than waiting to address problems after users encounter accessibility barriers. accessibility.huit.harvard.edu

6 What does accessibility ‘look’ like?
Using a screen reader, we will explore the Accessible University 3.0 site from UW’s DO-IT Center. The before and after links demonstrate the same site with and without accessibility improvements that are very apparent to users of assistive technology. The “about” link explains the accessibility enhancements that make all the difference. About Accessible University: AU (accessible): AU (inaccessible): Screen-reader demonstration of content that is accessible and inaccessible to AT users. accessibility.huit.harvard.edu

7 Online accessibility website
The HUIT Online Accessibility website provides a rich set of resources for Harvard web developers and content creators to promote the creation of widely accessible materials. As a person focused on user experience, I greatly appreciate that this site is user-focused, since the content is organized for the people who will be using it, i.e., content creators and developers. A user can easily and quickly find information based on a specific role and task. accessibility.huit.harvard.edu

8 Online accessibility website – Content Creators
This section is for people who create and publish content on websites. It contains best practices, examples, testing methods, and resources to support WCAG 2.0 guidelines. Web content optimized for usability. Focus on content and features that provide the greatest impact. Content separated from visual information. Navigational framework is provided. The Content Creators section is for people who create and publish content for web pages or web applications. This section includes: - 10 Essentials - If you address these 10 key elements as you build content, you will avoid the majority of accessibility issues. - Purpose - Helps you to focus on content and features that provide the greatest impact, so that users are not distracted by irrelevant information. - Structure - Ensures that content is separated from visual information, so that users can change how content displays without losing the meaning of the information. - Wayfinding - Stresses the importance of a navigational framework. As we learned first-hand by Kyle’s demo, properly tagged headings and field labels make a huge difference to users of assistive technologies - Presentation - The content has to be optimized for legibility and readability, so that users may, for example, increase the display size to meet their needs without loss of information. - Language - With the use of plain language, we minimize barriers so that content is easy to understand for all users. - Images and Media – If we describe images and provide closed captions for video, the information will be available to everyone. Content optimized for legibility and readability. Minimize barriers with plain language. Images and media available to everyone. accessibility.huit.harvard.edu

9 Online accessibility website – Developers
This section is for people who develop websites and web applications. It contains best practices, examples, testing methods, and resources to support WCAG 2.0 guidelines. Key web content areas of focus. Built to standards so that content is stable, robust and secure. Content designed for maximum usability. Content created without reliance on color or other visual elements. The Developers section is for people who create websites and web applications. This section includes: - 10 Essentials - Following these 10 key elements while you code will address the majority of accessibility best practices and will, at the same time, save a lot of time and effort. - Structure – Explains how and why sites built to standards are usable by assistive technologies, are flexible and adaptable to user preferences, and work well on different input devices. - Interaction – Among other topics, this section shows how the proper coding of keyboard and other controls ensures that people can use the application across all modes of interaction and with a broad range of devices. - Presentation – If content is created without a reliance on color or other visual elements, users can understand how to use the website without needing vision and color perception for navigation. - Images and Media – When images, video and audio are created with accessibility in mind, all senses are supported so that the relevant content is accessible to people using assistive technologies. Visual content accessible by assistive technologies. accessibility.huit.harvard.edu

10 Online accessibility website – Resources
This section contains resources to support accessible web content creation and development. Help to identify specific accessibility issues. Terminology used when working on accessibility.  Resources for accessibility and user experience information. The Resources section contains resources to support accessible web content creation and development. - Tools – Provides a list of tools that will help you to identify specific accessibility issues. - Glossary – Included here, for example, are both the definition for, and examples of, ‘assistive technologies’, a phrase we’ve used in this presentation. - Training – Here you will find 17 webinars on accessibility and usability, other tutorials, as well as a copy of this presentation. - Media Accessibility Resources – This sub-section includes information about Harvard’s preferred closed captioning vendor, 3 Play Media, including pricing details. - Procurement Process - Contains useful information about what to include in a ‘request for proposal’ as well as information about which department to contact for appropriate contract language for accessibility. - Labs and Services – reminds you that the User Research Center at Lamont Library is available to anyone from the Harvard community needing to perform a range of usability testing. - Third-Party Tools – Includes information about best practices for creating surveys, and how to ensure that survey questions are accessible, Closing remark: “One resource or tool we can’t provide in this site is ‘empathy’, although it essential to foster awareness and motivation.” Information for the creation of accessible media. Information for accessible labs and third-party tools and resources. accessibility.huit.harvard.edu

11 Online accessibility website – Techniques
This section includes coding and other specific instructions about how to meet accessibility guidelines, which are organized by: Techniques categorized by different types of disability. Different tools people use to help them access content. WCAG 2.0 principles of web accessibility. The categories don't separate the Techniques, they separate the "tags" applied to Techniques Disabilities, like blindness or dyslexia Assistive technologies, like screen readers or keyboards Interface elements, like form inputs or simply text Underlying technologies, like JavaScript but also touch WCAG's accessibility principles, grouped according to the POUR acronym: Perceivable, Operable, Understandable, Robust Different interface patterns. Web technologies we incorporate in accessible interfaces. accessibility.huit.harvard.edu

12 ✎ Technique: Identifying headings ✎ Technique: Writing link text
Techniques ✎ Technique: Identifying headings ✎ Technique: Writing link text ✎ Technique: Accessible modal dialogs Use accessible design patterns Each Technique has one or more examples, many have both good and bad examples. Some include a video demonstration. Some contain a code editor to demonstrate and experiment with more complex examples. Relevant Techniques are also found at the end of Content Creator and Developer pages accessibility.huit.harvard.edu

13 Accessibility testing tool - Preview
Single page testing Site crawling capability Reporting and track progress over time Plain language best practice fixes accessibility.huit.harvard.edu

14 Accessibility testing tool – Preview continued
Detailed reports and how to fix (with code examples) Extensive training modules for lots of content types Facilitates testing: Automated Manual Assistive technology accessibility.huit.harvard.edu

15 Next steps – for everyone . . .
Take a tour of the Online Accessibility website (accessibility.huit.harvard.edu). Use the website as a resource as you build new content or web pages. Watch for news and training about the Harvard University accessibility testing tool – coming soon. If you need assistance or answers to questions, please contact Accessibility team members. Who should I contact if I have digital accessibility questions? Harvard’s University Disabilities Services serves as a central resource on disability-related information, procedures and services for the University community. For assistance within your school, refer to the list of Local Disability Coordinators/Administrators. accessibility.huit.harvard.edu


Download ppt "Web Accessibility: What you need to know and why"

Similar presentations


Ads by Google