Expanding Your Online Community with Web Accessibility
1 like333 views
The document discusses the importance of web accessibility, emphasizing that it allows people with disabilities to access information and participate in activities. It introduces the Accessibility Internet Rally (AIR), a competition that pairs web developers with nonprofits to create or redesign accessible websites. The document also outlines accessibility guidelines and best practices to ensure inclusive design for all users.
Expanding Your Online Community with Web Accessibility
- 1. Expanding Your Online Community with Web Accessibility Jessica Looney Jillian Fortin Knowbility 07.14.2020
- 2. 2 © TechSoup Global. All Rights Reserved. Using Global Meet • Use the Q & A to ask questions • All lines are muted • A link for closed captioning will be included in the chat • If you lose your Internet connection, reconnect using the link emailed to you. • You will receive an email with this presentation, recording, and links. •
- 3. Get Engaged! We’ll be asking you questions throughout this webinar. You can respond and engage with us by: • Asking questions in the Q&A section. • Respond to poll questions asked during and after the webinar • Tweet at us @TechSoup and use the hashtags #tswebinar
- 4. A Global Network Bridging Tech Solutions and Services for Good.
- 5. 5 © TechSoup Global. All Rights Reserved. Adobe Alpha Software Arreva Asana Atlas Business Solutions Autodesk Azavea AWS Bitdefender Blackbaud Box Bytes of Learning CDI Computer Dealers Cisco CitySoft CleverReach ClickTime Comodo Connect2Give Dell Dharma Merchant Services Digital Wish Dolby DonorPerfect Efficient Elements FileMaker GlobalMeet GrantStation Headsets.com Horizon DataSys HR Solutions Partners Idealware InFocus InterConnection Intuit JourneyEd Litmos Little Green Light Mailshell Microsoft Mobile Beacon Nielsen NonProfitEasy NortonLifeLock O&O Software Priority Quickbooks Made Easy Reading Eggs Skillsoft Smart Business Savings Society for Nonprofit Organizations Sparrow Mobile Tableau TechBridge Tech Impact Tint Ultralingua VMware Veritas Western Digital Zoner
- 6. 6 © TechSoup Global. All Rights Reserved. Resources for Nonprofits Impacted by COVID-19 • Tools to Support Remote Work • Policy Resources • Webinars and Workshops • Related Blog Posts • Join the Conversation in the Forum • Free Courses from TechSoup • Additional Resources Learn more at https://page.techsoup.org/covid-19-resources
- 7. 7 © TechSoup Global. All Rights Reserved. Today’s Presenters Nicole Jones Content Producer, TechSoup Jessica Looney Director of Education, Knowbility Jillian Fortin Accessibility Advocate, Knowbility
- 8. The Accessibility Internet Rally Everything you need to know!
- 9. Thanks for your interest Facilitated by… Jillian Fortin, Accessibility Advocate, Knowbility Jessica Looney, Director of Education, Knowbility
- 10. Accessibility? People with disabilities …can acquire the same information …participate in the same activities …produce and manage content
- 11. Many reasons to advocate for inclusive design… Legal Technical Humanitarian Market Visionary
- 12. But don’t just take our word for it... Knowbility Stories and W3C Perspective Video examples Desiree : Text to Speech Gene : Keyboard Compatibility Gibby: Understandable Content DeGeneWAI
- 13. Related to Universal Design… Accessible design… • supports all people • supports all technology • supports usability • improves experience for all • “Good design IS accessible design” ~ Dr. John Slatin
- 14. Examples? ● People with disabilities may use assistive technology or adaptive strategies ● Accessible coding techniques include: ○ Captioning videos ○ Providing descriptions of images in the code (alt text) ○ Labeling buttons, or describing links ○ Keyboard access to all info and function. ● Allows assistive technology such as screen readers, magnification devices, keyboard shortcuts for to work properly
- 15. 1 in 4 adult Americans have a disability. That is 61 million people in the US, nearly 1 billion worldwide.
- 16. Why is accessibility important? •People with disabilities are among your • Staff • Volunteers • Donors • Clients • Diversity and inclusion • Equal access for all • Funders care about non-discrimination • Legal obligation
- 17. • Structure • Reading order • Keyboard • Text alternatives • Color and contrast • Link text • Multi-media Common Barriers
- 18. Structure ● Use semantic structures as intended ○ Logical nested headings ○ Semantic meaning not visual presentation ○ List mark-up for related information ○ Explicit form id and label ● Identify row and column headings in data grids (tables) ● Outline structure with HTML 5 regions or ARIA landmarks Sample page structure with headers, navigation regions, side articles and footers clearly labeled for assistive technology
- 19. Reading order and focus order ● Reading order for AT must follow the order displayed for sighted users ● Create logical tab order through links, form controls, and interactive elements ● Provide page titles that are meaningful to orient users among a set of pages ● Skip links as needed Star Trek’s Mr. Spock on a poster saying “Logic”
- 20. Visible keyboard interactions ● Functional elements can be reached using only the keyboard – no mouse ● Functional elements can be activated from the keyboard (most often tab and arrow keys) ● Keyboard focus is as clearly visible as mouse hover states “Thumbs up Keyboard illustration
- 21. Basics of text alternatives for images All HTML images must have associated alt text ● If image conveys meaning, provide descriptive text alternative (alt attribute of img element) ● Empty alt attribute <alt=“”> for decorative images (may also use background CSS images here) ● Identify target of linked images ● Fully describe complex images like charts, graphs ● WAI Tutorial alt text decision tree Box of chaocolates
- 22. Color and contrast ● Avoid using color as ONLY method to denote a state or requirement ● Use other indicators such as asterisk or text reminder ● Provide contrast of text against background of 4.5 to 1 or higher A sample input form with required fields indicated only with bold and red text lables
- 23. Link Text ● Specify link target (where the link goes, what it does) ● 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-describedby to make the association The words “Click Here” are circled in red and crossed through with a red slash
- 24. Media ● 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. Screen shot of W3C WAI video showing accessible controls and displaying captions
- 25. Preliminary testing During design, development, QA etc, include accessibility testing Easy Checks from W3C
- 26. Ask people with disabilities ● Reach out locally to disability organizations ● Remote testing using AccessWorks
- 27. What is AIR? The Accessibility Internet Rally A fun, friendly web raising competition Goal is to engage communities in issues of technology access for people with disabilities – accessibility.
- 28. How does AIR work? •Teams of web developers sign up to compete •NPOs, artists, noncommercial projects apply to receive web site •Training specific to role •Matching based on interest, geography, experience •Kickoff event announces match up •6 weeks of dedicated work •Sites are submitted for judging •Community celebration to recognize effort •All participating projects go home with a new website
- 29. AIR assigns a team of web pros to work on your web site They train in accessible design You train to be an effective client
- 30. Selected projects receive •Training in client / team project management •Mentoring by Knowbility staff •Dedicated team of web professionals for 6 weeks •Website design or redesign •Optional hosting for one year ($25/year after Y1) •Move your site to a new host •Details: https://air-rallies.org/
- 31. AIR 2020 Timeline September 9 to 30 - Designer/Developer Team trainings, NPO asset gathering and training. September 10 - Live NPO Training: 4-5pm CST September 17 & September 26 - Dev training October 8 - Kick Off Event October 9- November 12 - Website build time November 12 - Final Countdown Event and site submissions November 18 - December 18 - Judging January 21 - Award Ceremony
- 32. Kick Off Oct 8 ● Match event ● Zoom connect for those remote teams ● email distribution contact information
- 33. Nov 12th Final Countdown Event Submission Deadline. Teams and the public will gather via Zoom. Attend the Final Countdown Event to celebrate with teams. Sites can then be pushed live to your choice of server. Judges will have a copy for accessibility assessment. 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 !!!!!!!!!
- 34. January 16th Awards!! Sites have been judged and awards are given in 3 categories. Drinks, snacks, networking, dinner at downtown Austin locale OR meet via Zoom to showcase their their sites. All teams and NPO reps are invited. January 21st, 2020 Awards!!
- 35. Manage expectations Some things that are NOT provided •Site fixes after the competition •Ongoing content updates •Team involvement after the competition •Site management
- 36. Questions?Thank you for considering AIR, we hope to work with you to make the digital world more inclusive for all
- 37. 37 © TechSoup Global. All Rights Reserved. Survey Please help TechSoup better understand how we can support some of the challenges nonprofits are facing right now. https://page.techsoup.org/en/2020-survey
- 38. Join Us For Upcoming TechSoup Virtual Events Archived Webinars: www.techsoup.org/community-events 7/21 TechSoup Tour: How to Access Donations, Discounts, and Services 7/23 Better Collaboration, Bigger Impact: How to Manage Work From Anywhere with Asana 7/28 How to Create a Culture of Wellness at Your Nonprofit
- 39. Thank You For Attending. Please complete the post-event survey that will pop up once you close this window.