Creating Accessible Online Resources For People with

Disabilities

With Jayne Cravens and Susan Hope Bard, Knowbility

August 24, 2017

. © TechSoup Global | All rights reserved2

• Chat to ask questions

• All lines are muted

• If you lose your Internet connection,

reconnect using the link emailed to you.

• You can find upcoming and past webinars

on the TechSoup website:

www.techsoup.org/community/events-

webinars

• You will receive an email with this

presentation, recording, and links

• Tweet us @TechSoup or using hashtag

#tswebinars

Using ReadyTalk

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.

. © TechSoup Global | All rights reserved3

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?

Welcoming Everyone Online:

Creating Accessible Online Resources

For People with Disabilities (& everyone)

Our goals today

Web accessibility: what is it, why does it matter?

• What are the basics? What if I'm not a web designer?

• OpenAIR contest: an opportunity for nonprofits to achieve web accessibility

• Answer your questions

Facilitated by Knowbility

• International non-profit, founded in 1998

• Jayne Cravens, Knowbility OpenAIR Nonprofit Manager

International Consultant, www.coyotecommunications.com, TechSoup alumni, author of The LAST Virtual Volunteering Guidebook

• Sharron Rush, co-founder, Executive Director invited expert since 2006 for W3C Web Accessibility Initiative (WAI), co-chair Education and Outreach Working Group (EOWG), author Maximum Accessibility (2002)

‘Accessible’ means…

People with disabilities

…can acquire the same information

…participate in the same activities

…actively produce as well as

consume online content

Universal design

• supports all people

• supports all technology

• improves experience for all

• “Good design IS accessible design” ~ Dr. John Slatin

Who decides what is accessible?• Standards developed in Web Accessibility Initiative

(WAI) of World Wide Web Consortium (W3C)

• Create standards for all web technologies

• Accessibility standardized across the globe.

• WAI provides support for those new to accessibility

https://www.w3.org/WAI/gettingstarted/tips/

Why advocate for accessibility?

LegalHumanitarian

Market

Technical

Human Rights/ Equity

Why implement accessibility?• People with disabilities want to donate, volunteer and

otherwise support causes they care about. But if your web site isn’t accessible to them, you leave them out - and that means you leave out potential donors, volunteers, clients, ideas, talent and more.

• Making your web site more accessible makes it more useful for EVERYONE (not only those with disabilities)

• Would you rent a space that prohibited certain people from entering? Many view online accessibility the same way.

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 – even if you don't know it.

Growing constituency• Fortune: “$1 trillion annual market”

• $200 B in discretionary spending

• 55 million Americans

• 750 million worldwide

• More as population ages

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

UN Convention on Rights of

Persons 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

It’s all about People

WAI Accessibility Perspectives:Keyboard Compatibility

Watch more from the WAI Accessibility Perspectives on their website -- https://www.w3.org/WAI/perspectives/

Four Principles of accessible content

Common barriers and easy fixes

• Link text

• Text alternatives

• PDF

• Color & contrast

• Media (videos, podcasts, etc.)

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 -

• Use aria-describedby to make an association available to assistive technology

Link description

• Use “aria-described” attribute. Description in

code informs user of what a button does when

activated (closes window, check box, etc.)

• Sighted user won't see it, screen reader user

will hear it.

• More information on using aria-describedbyfrom W3C

Text alternative basics

Users with visual impairment require verbal description of any image. This is ‘alt text’.

• Provide text alternative (alt attribute of img element) for meaningful images

• Decorative image has empty alt attribute <alt=“”>

• Linked image identifies target of linked images

• Complex image (charts, graphs

• WAI Tutorial alt text decision tree

Accessible documents and PDFs- same principles apply

• Accessible PDFs must be tagged.

• Allows assistive technologies to interact with content and make sense of it.

• No automated solution for creating accessible PDFs.

• Free tutorial from federal government

https://www.section508.va.gov/support/tutorials/pdf/

Color and contrastSome users have color blindness or trouble perceiving low

contrast, while others have difficulty with high contrast.

Avoid use of color as ONLY method to denote state or requirement

Provide contrast of text against background of 4.5 to 1 or higher

Media - Provide video captions for the hearing

impaired and audio descriptions for the visually impaired if

you want to convey info to the widest audience.

• Keyboard operable media player

• Caption audio content of video and synchronize to onscreen actions (YouTube has free tools)

• Describe key video content in audio description track or text transcript.

• Note it's great for those that are not in a space to listen to audio on a video but still want the message

• Knowbility blog has more info on how to do this, free tools, etc.

These are easy fixes

• Easy to learn, easy to do

• None cost money

• Will take extra time to fix an existing web site/online materials, but no/little extra time when building a new page, site, file it's a change in approach)

• Volunteers can help!

• Learn more at WAI Easy Checks

More difficult online barriers

• Address these with more significant redesign effort if you already have a web site - but it's worth it!

• Minimal additional costs for accessibility integration is site from scratch

• Let’s look at

• Structure

• Reading and focus order

• Keyboard access

Structure - To 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

Reading and focus order Reading, tab

and focus order should be the same as display order.

Sequence in which items receive focus should reflect

intent of the content.

• Provide meaningful page titles to orient users among set of pages

• Skip links as needed

• Create logical tab order through links, form controls, and interactive elements

Visible Keyboard Operation

Keyboard focus should be visible (ex: highlighted text) and follow a logical order.

• Allow functional elements to be reached and activated from keyboard (often tab and arrow keys)

• Make keyboard focus as clearly visible as mouse hover

Going forward

• Be an advocate for accessibility

at your organization. Get buy-in/

mandate from senior management.

• Use this presentation, OpenAIR Nonprofit curriculum, other resources (w3.org/WAI) to make the case.

• Recruit web designers, including volunteers, who understand or will commit to learning and applying accessibility

Join OpenAIR – a contest for web

designers

• OpenAIR: Accessibility Internet Rally – your nonprofit, NGO, school, government agency, other mission-based organization can have a new, fully accessible website, designed with the help of some of the leading accessibility developers in the country.

• $100 participation fee includes training, support.

• Your nonprofit will be promoted by Knowbility for its participation.

OpenAIR: Benefits

• Your organization is matched with team of web

professionals.

• Knowbility provides support to help you prepare

to be a good “Client” to your team

• Training

• Assigned mentor

• Regular check in sessions

• You control all content, styles, images, etc

• Maintenance and sustainability training provided

once site launches

OpenAIR: Details

• What: 6 week competition in which web

professionals and an accessibility mentor

team up to build new website for your org.

• When: Register by November 30th. The

competition kicks off in January and ends

with awards ceremony in March during

SXSW Interactive.

• How: More information and company or

team registration on air-rallies website.

Thank you!

• Sharron Rush srush@knowbility.org

• Jayne Cravensjcravens@Knowbility.org

@Knowbility on Twitter

Questions?

. © TechSoup Global | All rights reserved36

Tech Training Online, Anywhere Any Time

https://techsoup.course.tc/catalog

. © TechSoup Global | All rights reserved37

Upcoming Webinars and Events

• 9/14 Authentic Storytelling with Greenpeace: A 10 Step

Process

• 9/20 Getting Started: Making Your Grant Requests Sparkle

• 9/21 Building A Grants Strategy

Go to our webinar events page here or check out our webinar

archives for more!

. © TechSoup Global | All rights reserved38

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!