webinar - web accessibility 101 - 2016-08-09
TRANSCRIPT
![Page 1: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/1.jpg)
Web Accessibility 101Sharron Rush and Jessica Looney, Knowbility
August 9, 2016
![Page 2: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/2.jpg)
. © TechSoup Global | All rights reserved2
Using ReadyTalk
• Chat to ask questions• All lines are muted• If you lose your Internet
connection, reconnect using the link emailed to you.
• If you lose your phone connection, re-dial the phone number and re-join.
• ReadyTalk support: 800-843-9166
Your audio will play through your computer’s speakers. Hear an echo? You may be logged in twice and will need to close one instance of ReadyTalk.
![Page 3: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/3.jpg)
. © TechSoup Global | All rights reserved3
You Are Being Recorded…
This webinar will be available on the TechSoup website along with past webinars: www.techsoup.org/community/events-webinars You can also view recorded webinars and videos on our YouTube channel: https://www.youtube.com/TechSoupVideo
You will receive an email with this presentation, recording, and links within a few days.
Tweet us @TechSoup or using hashtag: #tswebinars
![Page 4: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/4.jpg)
. © TechSoup Global | All rights reserved4
Presenters
Assisting with chat: Susan Hope Bard, TechSoup
Becky WiegandWebinar Program Manager
TechSoup
Sharron RushExecutive Director, Co-Founder
Knowbility
Jessica LooneyCommunity Programs Director
Knowbility
![Page 5: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/5.jpg)
. © TechSoup Global | All rights reserved5
Objectives
• Gain a high-level understanding of web accessibility – what is it, why it matters
• Review essential techniques to increase your website’s accessibility
• Learn about what’s next – OpenAIR • Answer questions
![Page 6: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/6.jpg)
6
About TechSoup
![Page 7: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/7.jpg)
. © TechSoup Global | All rights reserved7
The Need Is Global – And So Are We
TechSoup’s mission is to build a dynamic bridge that enables civil society organizations and social change agents around the world to gain effective access to
the resources they need to design and implement solutions for a more equitable planet.
Countries Served TechSoup Partner Location NetSquared Local Group
Where are you on the map?
![Page 8: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/8.jpg)
. © TechSoup Global | All rights reserved8
www.TechSoup.Global
![Page 9: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/9.jpg)
. © TechSoup Global | All rights reserved9
Our Impact
Together, we build a stronger, more resilient civil society.
$5.2Bin technology products and grants employed
by NGOs for the greater good
35languages used to provide education
and support
100+corporate and
foundation partners connected with the
causes and communities they
care about
6.2Mannual visits to our websites
600,000newsletter
subscribers empowered with
actionable knowledge
79%of NGOs have improved organizational efficiency with TechSoup Global's
resource offering*
*Source: survey conducted among TechSoup members in 2013
![Page 10: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/10.jpg)
. © TechSoup Global | All rights reserved10
Participant Poll
What is your role in ensuring an accessible website?
- I didn't build it, I don't maintain it- maintain the website, didn't build it- I upload content - I'm the ED I'm the network admin/accessibility pro
![Page 11: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/11.jpg)
Quick Tips to Get Started
![Page 12: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/12.jpg)
Our goals today
• Take a snapshot of web accessibility – what is it, why does it matter?
• Identify essential techniques • Point to what’s next – OpenAIR • Answer questions
![Page 13: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/13.jpg)
Facilitated by…Knowbility • National non-profit making the web accessible since 1999• Sharron Rush, co-founder, Executive Director, Knowbility• Invited Expert since 2006 for W3C Web Accessibility
Initiative (WAI) • Currently co-chair for Education and Outreach Working
Group (EOWG)• Author Maximum Accessibility (2002)• Jessica Looney, Community Programs Director, Knowbility
Hi there!
![Page 14: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/14.jpg)
The Web is meant to transcend barriersRegardless of differences …
• platform• operating system• formats• browser• device• distance• ability• language
![Page 15: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/15.jpg)
‘Accessible’ Means...People with disabilities
…can acquire the same information …participate in the same activities
…actively produce as well as consume online content S that is available to all other
Web users.
SS
![Page 16: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/16.jpg)
Universal Design…
• supports all people• supports all technology• improves experience for all• “Good design IS accessible design”
~ Dr. John Slatin
![Page 17: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/17.jpg)
Participant Poll• Are you aware of your legal responsibility to be concerned with around accessibility?
• Yes• No
![Page 18: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/18.jpg)
Why advocate for accessibility?Legal
Technical
Humanitarian Market
Visionary
![Page 19: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/19.jpg)
UN Convention on Rights of people with Disabilities
• Explicitly references technology access as basic human right in modern world
• Ratified by more than 100 nations• Additional accessibility laws in European
Union, Canadian Government, Australia, Japan, others
![Page 20: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/20.jpg)
US Federal Law• Section 508 of Rehabilitation
Act• ADA –notice of intention to
extend the ADA to the web • Oct 2010, President signed 21st
Century Accessible Technology bill
![Page 21: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/21.jpg)
Disability is a market force • Nearly 20% of US population has disability• Numbers growing as population ages• Your organization is likely to have large
representation
![Page 22: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/22.jpg)
Growing constituency
• Fortune: “$1 trillion annual market”• $200 B in discretionary spending• 55 million Americans• 750 million worldwide• More as population ages
![Page 23: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/23.jpg)
It’s all about People
![Page 24: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/24.jpg)
WAI Accessibility Perspectives:Keyboard Compatibility
Watch more from the WAI Accessibility Perspectives on their website -- https://www.w3.org/WAI/perspectives/
![Page 25: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/25.jpg)
Participant Poll• What do you think the biggest barrier is to equal access that you have to address?
• - technical requirements• - getting developers to understand/build it• - money• - buy-in from leadership• - legacy software• - other• - I don't know
![Page 26: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/26.jpg)
Four Principles of accessible contentPerceivable, operable, understandable and robust. Cartoon shows four colorful characters. First is a man with dark glasses saying “I can perceive it.” Next a fellow with one arm in a sling who says “I can use it,” then a woman with a lightbulb over her head saying “I can grasp it,” and finally a woman holding a smart phone saying “I can access
There are 4 Major Principles of Accessibility
![Page 27: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/27.jpg)
Common Barriers
• Structure • Reading and focus order• Keyboard• Text alternatives • Color and contrast• Link text• Multi-media
![Page 28: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/28.jpg)
StructureTo help users orient themselves on web pages, the content and different areas need to be structured to help assistive technology identify them.
• Use semantic structures as intended• Logical nested headings• Semantic meaning not visual
presentation• List markup for related information• Explicit form ID and label
• Identify row and column headings in data grids (tables)
• Outline structure with HTML5 regions or ARIA landmarks
![Page 29: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/29.jpg)
Reading and focus orderReading, tab and focus order should be the same as the display (visual) order. Sequence in which page items receive focus should reflect intent of the content.
• Provide page titles that are meaningful to orient users among a set of pages
• Skip links as needed• Create logical tab order
through links, form controls, and interactive elements
![Page 30: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/30.jpg)
Visible Keyboard OperationKeyboard focus should be visible (ex: highlighted text) and follow a logical order. • Ensure users can access all features of a Web
page through the use of a keyboard alone• Make keyboard focus as clearly visible as
mouse hover states
![Page 31: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/31.jpg)
Text alternative basicsUsers experiencing visual impairment will need a verbal description of any images, otherwise known as alt text.• Provide text alternative (alt attribute of img
element) for meaningful images• Empty alt attribute <alt=“”> to decorative images• Identifies target of linked images• Fully describe complex images like • charts, graphs• WAI Tutorial alt text decision tree
Ex Alt Text: Box of chocolates
![Page 32: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/32.jpg)
Color and contrastSome users have trouble perceiving low contrast, while others have difficulty taking in high contrast.
• Avoid using color as ONLY method to denote a state or requirement
• Provide contrast of text against background of 4.5 to 1 or higher
![Page 33: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/33.jpg)
Link textWhen navigating from link to link, screen readers will read ‘link’ before the link text so link text must be descriptive.
• Specify link target, such as where the link goes or what it does. (Ex: The WAI Homepage)
• Text should make sense out of context (not “More” or “Click here”)
– OR –• Be uniquely associated with a heading level (usually
h2 or h3 or higher)• Use aria-described by to make the association
![Page 34: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/34.jpg)
MediaProviding video captions for the hearing impaired and audio descriptions for the visually impaired are crucial if you want to convey the information in your video to the widest audience.
• Keyboard operable media player• Caption audio content of video
and synchronize to onscreen actions
• Describe meaningful video content in audio description track or text transcript.
![Page 35: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/35.jpg)
Going forward
• Next steps within your organization • Online resources w3.org/WAI • Community programs • Ways to get involved
![Page 36: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/36.jpg)
Participate …• OpenAIR: Accessibility Internet Rally – accessible web
development contest benefits global nonprofits
• The OpenAIR competition provides nonprofits with an opportunity to get a new, fully accessible website, designed with the help of some of the leading accessibility developers in the country.
![Page 37: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/37.jpg)
OpenAIR: The basics• When: Get your nonprofit together and
registered by September 15th. The competition kicks off October 11th at Google Fiber and ends with an awards ceremony December 8th.
• What: A six week competition in which a team of developers and an accessibility mentor will work together to build a new website for your company.
• How: Find more information and register your company or team on the air-rallies website.
![Page 39: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/39.jpg)
39
Questions?
![Page 40: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/40.jpg)
. © TechSoup Global | All rights reserved40
Learn and Share!
Chat in one thing that you learned in today’s webinar or will try to implement.
Will you share this information with your colleagues and within your network?
Please complete the post-event survey that will pop up once the webinar ends!
![Page 41: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/41.jpg)
. © TechSoup Global | All rights reserved41
Upcoming Webinars and Events
8/18: Office Productivity in the Cloud 8/23: Training Your Staff on Technology: TechSoup Resources 8/24: What Can Libraries Count? Getting a Grip on Social Media Numbers 9/8: Get to Know GrantStation 9/13: Building a Powerful Grants Strategy for 2016 - 2017
Explore our webinar archives for more!
![Page 42: Webinar - Web Accessibility 101 - 2016-08-09](https://reader035.vdocuments.us/reader035/viewer/2022070513/588342fa1a28abbe6b8b5361/html5/thumbnails/42.jpg)
. © TechSoup Global | All rights reserved42
ReadyTalk offers dedicated product demos for TechSoup organizations 4 times per week.
For more information: www.techsoup.org/readytalk
Please complete the post-event survey that will pop up once you close this window.
Thank You to Our Webinar Sponsor!