1 of 49

Web & Social Media

Accessibility

Annie Ross

Prof Computer Sci, Bucknell

a.ross@bucknell.edu

bit.ly/DIG_Access

Get Slides Here

Interested in additional accessibility support?

Reach out!

2 of 49

Annie Ross

Prof Computer Sci, Bucknell

a.ross@bucknell.edu

Aya Tarist

Alexa Horvath

Krystell Ewing

Farhaj Shahid

3 of 49

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

Tim Berners-Lee, W3C Founding Director �and inventor of the World Wide Web

4 of 49

Today's Plan

Overview of Accessibility
Accessibility Practice + Hands-On Experience
Wrap-up

5 of 49

What is Accessibility?

6 of 49

Disability

interaction between features of a person's body/mind and features of society

icons by Travis Avery from the Noun Project

7 of 49

Why it Matters

Human

Business

Legal

8 of 49

Business

"An estimated 1.3 billion people – or 16% of global population worldwide – experience a significant disability"

World Health Organization

9 of 49

Accessibility is Good Design

From Microsoft's Inclusive Design 101 Guidebook

10 of 49

Legal

* I am not a lawyer and this is not legal advice

11 of 49

Legal

Section 504 and 508 of the Rehabilitation Act of 1973

Americans with Disabilities Act (ADA)

International law

"Section 504 prohibits discrimination based on disability … If your organization receives federal funding or assistance, your website is required to be accessible."

"Section 508 requires federal agencies to develop, procure, maintain, and use information communications technology that is accessible to people with disabilities… if you manufacture, build, design, create, teach, or resell [technology]...to do business with the Federal government, you need to demonstrate your ICT product or service is accessible"

12 of 49

Assistive Technology

CC

13 of 49

Guess that App!

14 of 49

15 of 49

16 of 49

17 of 49

18 of 49

Accessibility Practices

19 of 49

Accessibility�and�YOU

Marketing

Web

Print Materials

Face-to-Face

Phone

PDFs

20 of 49

Accessibility Wizards

Look for accessibility support in your applications!

Microsoft (Word, Powerpoint, etc)

Adobe

Wix

21 of 49

Get Set Up

open a website you are working on
if you do not have one, open up your favorite platform or join someone else

22 of 49

Image Alt Text

23 of 49

Alt Text

describes visual content in text
used by screen readers
can also help SEO (search engine optimization)

Include

meaningful description
text in images
image's function
balance information and length

Avoid

keyword dumping
file name
generalizations or overly ambiguous

24 of 49

Alt Text - Examples

alt= ”baseball-2zr3.jpg”

BAD

GOOD

alt= ”baseball game player baseball batting”

alt= ”David Ortiz of the Boston Red Sox batting from home plate at Fenway Park”

BAD

25 of 49

Let's Try It!

26 of 49

Headings

27 of 49

A Few Examples

Good doc
Bad doc
NVDA Example

28 of 49

Heading Levels

Use Heading styles
Do not just visually make text bigger or styled

You can change the heading styles, but should still use the tags

Do not skip heading levels
Pick purposeful headings

29 of 49

Let's Try It

30 of 49

Meaningful Links

31 of 49

Meaningful Link Text

text of the link should describe where the link goes without needing to read surrounding text

screen reader demo

Bad	Click here for Wix’s Accessibility Checklist
Good	Check out Wix’s Accessibility Checklist

32 of 49

Let's Try It

33 of 49

Color

34 of 49

Color Contrast Overview

Normal Text: 4.5:1

Large Text: 3:1

35 of 49

Tips

be creative with low contrast brand colors

be wary of text over images

BUCKNELL

36 of 49

Let's Try It

37 of 49

Video Captions/Transcripts

38 of 49

Video Captions

provide alternative source of information for audio

Captions: play along with the video

Transcript: separate text file with all audio info

Tools:

Youtube

Beware- You'll need to edit auto captions

39 of 49

Plain Language

40 of 49

Plain Language

writing that can be understood by an audience the first time they read it.

active voice, concise paragraphs & sentences, and everyday words

41 of 49

Core Idea:�Multiple Ways to Access

42 of 49

Ways to Access

visual and text (alt-text)
text for audio (transcript)
covey meaning with color and …
Structure visually and programmatically

43 of 49

More Practices

44 of 49

Tools & Resources

45 of 49

Accessibility Wizards

Look for accessibility support in your applications!

Microsoft (Word, Powerpoint, etc)

Adobe

Wix

46 of 49

Checklists

Web Content Accessibility Guidelines (WCAG)

Ensuring designs and sites are perceivable, operable, understandable, and robust
Guidelines separated by conformance levels

Deque Accessibility Checklist

Wix Accessibility Checklist

47 of 49

Testing

WAVE Accessibility Testing Tools

Decent coverage of basics
Automated tests do not catch everything!

48 of 49

Key Takeaway: Just Start!

49 of 49

Thank You

Questions, Comments

or

Interest in Getting More Accessibility Support?

Reach out!

Annie Ross

a.ross@bucknell.edu