Donating, volunteering, and being involved in your community is for everyone ... including those with disabilities. Inaccessible websites keep 15 percent of the population from finding you and your work online. That's millions of potential patrons, volunteers, ambassadors, and even future donors who might not be able to use your website due to small but significant errors. In this presentation, Knowbility's Jessica Looney and Jillian Fortin will cover - What accessibility is and why it should be a priority for nonprofits - The business case for accessibility - How to get buy-in from stakeholders of your organization - A few quick website techniques to make your site more accessible today

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.