Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf

Inclusivity Essentials:
Creating Accessible Websites
for Nonprofits
Presented by: Tapp Network
Kyle Barkins & Jon Hill
04.16.2024

2 © TechSoup Global. All Rights Reserved.
Here’s how to engage in
today’s event:
Questions? Use the Q&A feature.
Check your inbox! We’ll email you the replay, slides,
and resource links within a couple days.
Learn something cool? Share on social media and
tag us @TechSoup
Closed captioning is available. Turn on with the CC
button located in your Zoom menu.
Hosted on

Agenda
➔ Who we are
➔ What is web accessibility?
➔ Why it matters
➔ Common Tools
➔ Solutions
➔ Q&A
Disclaimer: The information contained
within is not legal advice

Introductions
With 10 years of experience in digital spaces, Jon brings his
expertise in all things web to Tapp as our Web Project
Manager. He has a background in design, development and
project management helping brands both big and small achieve
their visions.
Jon Hill
Web Project Manager
Tapp Network
Kyle Barkins
Co-Founder
Tapp Network
Kyle is the co-founder of Tapp Network, has a background of more
than 20 years in marketing and application development. His
experience includes launching more than 450 websites and
automating the online lead generation process for over 1000
professionals. His previous projects have also included the
syndication of clip-able, shareable, searchable broadcast videos to
more than 40 million viewers per month, as well as the development
and deployment of a number of educational and communication
platforms for nonprofits in 8 different languages and in over 200
countries.

Global Innovation

Community-driven Impact

How We Can Help You - Learn More Here
Strategy
Start with a technology audit and
digital marketing game-plan to
accelerate your growth and market
share within your sector.
Integration & Migration
Build bridges and knock down silos
with simple and painless CRM
integrations and migrations that are
seamless to your team.
E- Commerce
We deploy the transactional services
and software you need to increase
sales across all your audience touch
points.
SEO and Content
Marketing
Build bridges and knock down silos
with simple and painless CRM
integrations and migrations that are
seamless to your team.
HubSpot
Implementation
Ensure a smooth and successful
transition from an alternative solution
to HubSpot, without all the
headaches.
Creative and Branding
Make your brand stand out from your
competitors to reach the right
customers with the right message.
Web and APP
Development
With our 20+ years of experience, we
know your 24/7 salesperson must be
beautiful, functional, and optimized
for your goals.
Sales Enablement
We can help you close the loop
between your marketing and sales
teams—and more desirable deals.
Inbound Marketing
We provide the complete solution to
increasing leads, revenue, and brand
authority as a Platinum Hubspot
Partner
Social Media Marketing
One of the most effective ways to
engage inﬂuencers, customers and
prospects to drive brand awareness,
followers, and sales
Paid Media
TAPP makes your budget go further
with a targeted approach to reaching
your buyer personas in search and
social.
Public Relations
Deﬁning the right audience and
media channels to build regional and
national brand recognition as well as
thought leadership.

Poll Question
How important do you think website accessibility is for
nonproﬁt organizations?
A. Very Important: It's crucial for ensuring equal access to information and
services.
B. Important: It's essential, but there may be other priorities to consider.
C. Somewhat Important: It's a consideration, but not a top priority for our
organization.
D. Not Important: Accessibility is not a signiﬁcant concern for our organization at
the moment.

Introduction to Website
Accessibility
For Nonprofits

Why Accessibility Matters
for Nonprofits
• 1 in 4 Americans has some type of
disability (CDC)
• Nonprofits can reach a wider audience
and better serve their communities.
• Ignoring accessibility can lead to
exclusion and missed opportunities to
connect with those who need support
the most.
• Accessibility is not just a legal
requirement; it's a moral imperative for
nonprofits.
• A commitment to accessibility enhances
the reputation and credibility of
nonprofits.

Understanding
Accessibility Guidelines
The Web Content Accessibility Guidelines
(WCAG) developed by the World Wide Web
Consortium (W3C) are the most widely
accepted standards for web accessibility.
• Provides a framework for creating
inclusive digital experiences.
• Create more inclusive and effective
digital platforms.
• Outline techniques and best practices for
addressing various accessibility
challenges.
• Ensure their websites and digital content
are accessible to all users, including those
with disabilities.
• Compliance with accessibility guidelines
not only improves usability for people
with disabilities but also enhances the
overall user experience for all users.

WCAG Principles (POUR)
• Perceivable - Information and user
interface components must be
presentable to users in ways they can
perceive.
• Operable - User interface components
and navigation must be operable.
• Understandable - Information and the
operation of user interfaces must be
understandable.
• Robust - Content must be robust
enough that it can be interpreted
reliably by a wide variety of user agents,
including assistive technologies.

Common Accessibility
Challenges
• Lack of Alt Text: Images without alternative text can be
inaccessible to individuals who use screen readers.
• Inadequate Color Contrast: Poor color contrast can make
content difficult to read for people with visual
impairments.
• Unclear Navigation: Complex or confusing navigation
structures can hinder users with cognitive disabilities from
finding information easily.
• Non-Responsive Design: Websites that are not optimized
for different screen sizes and devices may be challenging
for individuals with mobility impairments to navigate.
• Inaccessible Forms: Forms without proper labels or
instructions can pose barriers for users with disabilities.
• Multimedia Accessibility: Videos without captions or
audio descriptions can exclude individuals with hearing or
visual impairments.
• Insufficient Text Size and Formatting Options: Small text
or lack of adjustable font sizes can make content difficult
to read for users with low vision.
• Inaccessible PDFs and Documents: Documents that are
not properly tagged or formatted can be inaccessible to
individuals using screen readers or other assistive
technologies.

Practical Accessibility
Tips and Tools
For Nonprofit Websites

Poll Question
Which accessibility feature do you ﬁnd most
challenging to implement on your website?
A. Text Alternatives for Images: Providing descriptive text for non-text content.
B. Keyboard Accessibility: Ensuring all functionality is available using a keyboard.
C. Color Contrast: Ensuring sufﬁcient contrast between text and background
colors.
D. Heading Structure: Organizing content with proper heading tags for navigation.

• Commonly you'll hear
"accessibility is not a feature"
• Design with empathy in-mind so
you don't have to
redesign/re-architect in the
future
• Accessibility has SEO,
performance, and UX impacts as
well
• Think beyond the website
"Accessibility is not a
feature"

• Use semantic HTML elements to
provide a clear and structured
layout.
• Use sufﬁcient color contrast to
make text and images easy to read
for users with visual impairments.
• Provide keyboard accessibility for all
interactive elements and navigation
menus.
• Regularly review and update your
website to maintain accessibility
standards as technologies evolve.
• Educate and train your team on
accessibility best practices to
ensure ongoing compliance.
Practical Tips for Creating
Accessible Websites

• Ensure that all links and form
inputs have descriptive text and
labels
• Don't open links in new windows
• Add a skip to content link
• Content writing - H1, H2, Bold,
Italic
• Use tools to improve grammar
and spelling for you audience
• Use descriptive links (not "click
here")
• Avoid directional language ("see
below", "to the left")
Additional Considerations

• It's essential to ensure accessibility on
smaller screens.
• Optimize your website for mobile
accessibility by implementing
responsive design principles.
• Consider touch gestures and
interactions for users who may have
difﬁculty using traditional input
methods.
• Test your website on a variety of mobile
devices and screen sizes to ensure
usability for all users.
Mobile Accessibility
Considerations

Text Alternatives
• All images, icons, videos, and buttons that convey
meaning or are interactive should have a text
alternative.
• The text describes the image for screen reader
users, or if the image fails to load on the page.
• Image alt text should contain just enough
information to describe the image without being
too lengthy - between a few words and a short
sentence or two.
• For images being used as links to another page
should describe where the image link is taking the
user.
• Image alt text for complex images such as charts
or graphs should be accompanied by a link to a
text-only description of the image.
• If image alt text is left blank, the image will be
skipped over by screen readers. These are
identiﬁed as "decorative" images. Images such as
icon graphics are decorative.

Image Alt Text
Alt text: People working
Alt text: Financial Aid;
Scholarships; Financial
Literacy; Affordability
Alt text: Chart showing
program enrollment
Alt text: People working and collaborating
at computers on desks in our downtown
Houston open-floor plan office.
Alt text: (left blank) Alt text: Bar chart showing
program enrollment over an
eight year period, starting in
2006. Enrollment steadily
increases each year.
Correct Incorrect

• Crucial for ensuring that text and
images are perceivable by users with
visual impairments.
• Poor color contrast can make content
difﬁcult or impossible to read for users
with low vision or color blindness.
• Aim for a minimum contrast ratio of
4.5:1 for normal text and 3:1 for large
text (at least 18pt or 14pt bold).
• Check contrast for both text and
interactive elements such as buttons
and links.
Color Contrast

Using ARIA
• Accessible Rich Internet Applications -
Markup/information helps screen readers
and other AT to better understand the
elements on a web page
• Provides a user interface that enables
users to effectively interact with those
elements
• Used to add context where it doesn't
currently exist or to assist
• There are currently 22 ARIA states and
properties (github
• Example - link:
Before: For more information about us, <a
href="/about">click here</a>
After: For more information about us, <a href="/about"
aria-label="about us">click here</a>
• If you can, use a native HTML element or
attribute with the semantics and behavior
you require already built in, instead of
re-purposing an element and adding an
ARIA tag.

Poll Question
What motivates you the most to prioritize website
accessibility in your nonproﬁt organization?
A. Social Responsibility: Fulﬁlling the ethical obligation to provide equal access to
all users.
B. Legal Compliance: Ensuring adherence to accessibility laws and regulations.
C. User Experience: Improving the overall usability and satisfaction of website
visitors.
D. Impact and Reach: Broadening the audience and impact of your organization's
mission through accessibility efforts.

Steps to Getting Your
Website Accessible

Continuous Improvement
Strategies
• Monitor and evaluate your website's
accessibility regularly
• Keep updated on accessibility
standards, guidelines, and best
practices.
• Collect feedback from users with
disabilities and incorporate their
insights.
• Accessibility is an ongoing process that
requires continuous improvement and
commitment to learning and
improvement
• Provide opportunities for training and
professional development in
accessibility for your team.

Accessibility Statement
• Serves as a declaration of
commitment to accessibility and
a practical guide for your users.
• Demonstrates your organizations
commitment
• Provides transparency about
current level of accessibility
• Legal compliance and even
protection for litigation
• Resource for users
• Guides for future improvement
• Bonus: SEO (extra content)

Resources and Tools for
Accessibility
• WebAIM: Provides comprehensive
resources, tutorials, and evaluations for
web accessibility.
• W3C Web Accessibility Initiative (WAI):
Offers guidelines, techniques, and
resources for making the web accessible.
• Color Contrast Checker : Helps you check
color contrast ratios to ensure readability.
• NVDA: Free and open-source screen
reader for Windows users.
• A11y Project: A community-driven effort to
make digital accessibility easier.
• Web Accessibility Tutorials: Step-by-step
tutorials on implementing accessibility
features in web content and applications.
• Accessibility Statement Generator: Free
web accessibility statement generator.

How we can help
Tapp + TechSoup Service Offerings

Website Accessibility
Consultation
Mention this offer when scheduling
GET A CONSULTATION

Custom Website Development
Strategy Content & Design Development QA, Testing, & Launch
Discovery, Content
Audit, & Scope of Work
At this stage we will identify
design, development, and
integration needs. Each need
will be reviewed and assigned a
priority. Applying the Growth
Driven Design methodology,
high priority items will be
considered for Phase 2:
Launchpad Website, while other
items will be noted and added to
a wish list for consideration
during the continuous growth
phase and beyond.
Tapp Network will collaborate
with the client to design a new
theme in-house that includes
templates for each of the
content types outlined above.
The design process takes into
account user experience best
practices, your organization’s
unique target audiences, and
the learnings from the content
audit.
The design is "mobile-first" and
is created to be responsive (on
common devices and browsers)
and accessible (ADA compliant
for visual impairment and other
common disabilities).
Our developers follow industry
standards for best practices
when building out your website.
These practices apply to the
entire CMS development
process but are particularly
critical when it comes to writing
code, developing databases and
installing plugins. Sites that are
built based on best practices are
scalable for future needs and
more efficient overall.
Custom sites are developed in a
staging environment in order to
allow for thorough testing and
review by both Tapp Network
and the client. At this point we
confirm functionality on all
devices and browsers ensuring
a smooth transition when the
site goes live.
Site Structure
Recommendations &
Custom Website Design
Best Practice
WordPress
Development
Quality Assurance
Testing

Growth Driven Custom
Website Development
Utilizing the Growth Driven Design methodology, we
partner with nonprofits to develop a website strategy,
design and build a custom WordPress website, and
optimize a long-term approach tailored to your
organization’s goals.
Intended Audience
Nonprofits who have outgrown their current CMS, would
like to redesign an existing WordPress site, or are
seeking systems integrations such as member portals,
ecommerce, or donor management.
Starting at
$15,000

Ready to Get Started?
Book a Consultation!
WEB SERVICES

Thank You!
Tapp Network
info@tappnetwork.com
tappnetwork.com

Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf

More Related Content

Similar to Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf (20)

More from TechSoup (20)

Recently uploaded (20)

Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf