Expanding Your Online Community with Web Accessibility Jessica Looney Jillian Fortin Knowbility 07.14.2020 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. • 2 © TechSoup Global. All Rights Reserved. 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 A Global Network Bridging Tech Solutions and Services for Good. Adobe CDI Computer Dealers Efficient Elements Litmos Smart Business Savings Alpha Software Cisco FileMaker Little Green Light Society for Nonprofit Organizations Arreva CitySoft GlobalMeet Mailshell Sparrow Mobile Asana CleverReach GrantStation Microsoft Tableau Atlas Business Solutions ClickTime Headsets.com Mobile Beacon TechBridge Autodesk Comodo Horizon DataSys Nielsen Tech Impact Azavea Connect2Give HR Solutions Partners NonProfitEasy Tint AWS Dell Idealware NortonLifeLock Ultralingua Bitdefender Dharma Merchant Services InFocus O&O Software VMware Blackbaud Digital Wish InterConnection Priority Veritas Box Dolby Intuit Quickbooks Made Easy Western Digital Bytes of Learning DonorPerfect JourneyEd Reading Eggs Zoner Skillsoft 5 © 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 6 © TechSoup Global. All Rights Reserved. Today’s Presenters Jessica Looney Jillian Fortin Nicole Jones Director of Education, Accessibility Advocate, Content Producer, Knowbility Knowbility TechSoup 7 © TechSoup Global. All Rights Reserved. The Accessibility Internet Rally Everything you need to know! Thanks for your interest Facilitated by… Jillian Fortin, Accessibility Advocate, Knowbility Jessica Looney, Director of Education, Knowbility Accessibility? People with disabilities …can acquire the same information …participate in the same activities …produce and manage content Many reasons to advocate for inclusive design… Legal Technical Humanitarian Market Visionary 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 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 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 1 in 4 adult Americans have a disability. That is 61 million people in the US, nearly 1 billion worldwide. 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 Common Barriers • Structure • Reading order • Keyboard • Text alternatives • Color and contrast • Link text • Multi-media Structure Sample page structure with headers, navigation regions, side articles and footers clearly labeled for assistive ● Use semantic structures as intended technology ○ 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 Reading order and focus order ● Reading order for AT must follow the order Star Trek’s Mr. Spock on a poster saying “Logic” 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 Visible keyboard interactions “Thumbs up Keyboard illustration ● 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 Basics of text alternatives for images All HTML images must have associated alt text Box of chaocolates ● 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 Color and contrast A sample input form with required fields indicated only with bold and red text lables ● 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 Link Text ● Specify link target (where the link goes, The words “Click Here” are circled in red and crossed through with a red slash 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 Media Screen shot of W3C WAI video showing accessible controls and displaying captions ● 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. Preliminary testing During design, development, QA etc, include accessibility testing Easy Checks from W3C Ask people with disabilities ● Reach out locally to disability organizations ● Remote testing using AccessWorks 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. 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 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 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/ 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 Kick Off Oct 8 ● Match event ● Zoom connect for those remote teams ● email distribution contact information 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 !!!!!!!!! January 1621st,th Awards!! 2020 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. Manage expectations Some things that are NOT provided •Site fixes after the competition •Ongoing content updates •Team involvement after the competition •Site management Questions? Thank you for considering AIR, we hope to work with you to make the digital world more inclusive for all 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 37 © TechSoup Global. All Rights Reserved. Join Us For Upcoming TechSoup Virtual Events TechSoup Tour: How to Access Donations, 7/21 Discounts, and Services Better Collaboration, Bigger Impact: How to Manage Work 7/23 From Anywhere with Asana How to Create a Culture of 7/28 Wellness at Your Nonprofit Archived Webinars: www.techsoup.org/community-events Thank You For Attending. Please complete the post-event survey that will pop up once you close this window..