Digital Accessibility for All Citizens By David Ondich, M.S. and - - PDF document

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 1 Slide 1

Digital Accessibility for All Citizens

By David Ondich, M.S. and Bouton Jones City of Austin June 8th & 9th 2017

David Ondich, M.S. ADA Program Manager COA ada@austintexas.gov Bouton Jones IT Business Systems Analyst Senior COA bouton.jones@austintexas.gov For your convenience, these slides and handouts (with terms and additional resources) are available online at http://bit.ly/2saznyo.

Presentation title: Digital Accessibility for All Citizens

Authors: David Ondich, M.S. and Bouton Jones City of Austin June 8th & 9th 2017 David Ondich, M.S. ADA Program Manager COA ada@austintexas.gov Bouton Jones IT Business Systems Analyst Senior COA bouton.jones@austintexas.gov For your convenience, these slides and handouts (with terms and additional resources) are available

• nline at

http://www.austintexas.gov/page/americans-disabilities-act-news-media-and-links .

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 2 Slide 2

Introduction

With the recent final rule by the U.S. Access Board about Section 508 of the Rehabilitation Act of 1973, there’s a renewed urgency for cities and counties to make their digital media — including Word documents, PDFs, PowerPoint slides, e-training, videos, email and web pages — accessible to all citizens, including those with disabilities. In this session, you’ll learn the moral, legal and practical necessities for providing full accessibility and the consequences of bad accessibility. You’ll also learn specific technical solutions for lone-wolf PIOs and effective strategies for larger CIO

• rganizations.

No matter the size of your jurisdiction, this session is a must.

6/8/2017 2

Introduction With the recent final rule by the U.S. Access Board about Section 508 of the Rehabilitation Act

• f 1973, there’s a renewed urgency for cities and counties to make their digital media —

including Word documents, PDFs, PowerPoint slides, e-training, videos, email and web pages — accessible to all citizens, including those with disabilities. In this session, you’ll learn the moral, legal and practical necessities for providing full accessibility and the consequences of bad accessibility. You’ll also learn specific technical solutions for lone-wolf PIOs and effective strategies for larger CIO organizations. No matter the size of your jurisdiction, this session is a must.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 3 Slide 3

Three Reasons and Three Assumptions

Three Reasons for Accessibility: 1. Legal – Accessibility is legally necessary 2. Ethical – Accessibility is the right thing to do. 3. Practical – If you are distributing information you must want it used. Three Assumptions Against Accessibility: 1. The population needing accessibility is insignificant. We don’t value their participation. 2. Everyone can read this document as it is. Nobody will need this document to be accessible. 3. Accessibility is too expensive or too hard.

6/8/2017 3

Part One

Part One Three Reasons and Three Assumptions Three Reasons for Accessibility:

• 1. Legal – Accessibility is legally necessary
• 2. Ethical – Accessibility is the right thing to do.
• 3. Practical – If you are distributing information you must want it used.

Three Assumptions Against Accessibility:

• 1. The population needing accessibility is insignificant. We don’t value their participation.
• 2. Everyone can read this document as it is. Nobody will need this document to be accessible.
• 3. Accessibility is too expensive or too hard.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 4 Slide 4

Types of Disabilities

• Visual
• Auditory
• Physical
• Language
• Cognitive (Intellectual, Learning, and Memory)

6/8/2017 4

Types of Disabilities

• Visual
• Auditory
• Physical
• Language
• Cognitive (Intellectual, Learning, and Memory)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 5 Slide 5

The Relevant Laws

• Section 255 of the Communications Act of 1934
• Freedom of Information Act (FOIA) of 1967
• The Rehabilitation Act of 1973
• Section 504 (for providing appropriate auxiliary aids)
• Section 508 (for providing comparable access to and use of electronic information

technology)

• Americans with Disabilities Act of 1990
• Telecommunications Act of 1996
• 21st Century Communications and Video Accessibility Act (CVAA)of 2010
• Final Rule by the U.S. Access Board about Section 508 (2017)
• Chapter 206 of the Texas Administrative Code

6/8/2017 5

Laws  Section 255 of the Communications Act of 1934  Freedom of Information Act (FOIA) of 1967  The Rehabilitation Act of 1973

• Section 504 (for providing appropriate auxiliary aids)
• Section 508 (for providing comparable access to and use of electronic information

technology)  Americans with Disabilities Act of 1990  Telecommunications Act of 1996  21st Century Communications and Video Accessibility Act (CVAA)of 2010  Final Rule by the U.S. Access Board about Section 508 (2017)  Chapter 206 of the Texas Administrative Code

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 6 Slide 6

Three Visually Identical PDFs

They have the exact same content, title, headers, font, and colors. How are they different?

6/8/2017 6

Three Visually Identical PDFs They have the exact same content, title, headers, font, and colors. How are they different?

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 7 Slide 7

The Scanned PDF

Click Here!

6/8/2017 7

The Scanned PDF To users of assistive technology, scanned PDFs are blank.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 8 Slide 8

Untagged PDF with Text

Read Text Read Headings

6/8/2017 8

Untagged PDF with Text Untagged PDFs contain true text but they can’t be navigated. Screen readers can’t find the headers.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 9 Slide 9

PDF with Text and Navigation

Read Headings

6/8/2017 9

PDF with Text and Navigation David explains (and demonstrates) navigating a PDF.

• Headers (audio file)
• Lists (audio file)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 10 Slide 10

Mislabeled Fillable PDF

Read Empty Form Fields

6/8/2017 10

Mislabeled Fillable PDF

The NVDA Screen reader mis-identifies every one of the first three empty fields --- Last Name, First Name, and Middle Name --- as “Last Name.”

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 11 Slide 11

Completed Fillable PDF

6/8/2017 11

Read Completed Form

Audio file only reads the labels not the data.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 12 Slide 12

Can someone find a job with your city using adaptive technology?

Find “J” Links Find “E” Links Find “W” Links

6/8/2017 12

Can someone find a job with your city using adaptive technology?

• Start at the home page
• Is there a link labeled “Jobs?”
• Is there a link labeled “Employment?”
• Is there a linked labeled “Work?”

Generally, job-seekers who are blind conduct their job searches online. E-career sites that are developed with accessibility in mind provide a blind computer user with all of the information necessary to identify open positions at an organization and complete and submit an online application. Because screen-reading technology contains navigation tools to quickly jump to various links based on how those links are tagged, blind users anticipate the names of certain links and, if labeled using common (intuitive) words and/or phrases, can quickly locate and open desired links. Following is a brief description of the City of Austin page and how a blind user might navigate to the e-career site. The description assumes that the user is somewhat familiar with the adaptive technology, but not familiar with the City of Austin site. Starting on the home page of an unnamed city in central Texas, the user presses a series of keystrokes to operate in "links list". This feature allows the user to intuitively navigate to various links based on the tags. Since the user is looking for a "job", he is likely to press the "J" key

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 13

several times to see if the cursor navigates to a "jobs" link. Doing so on the current site renders no results; (1st audio file) The user can then type in another letter to see if he can get a hit, so intuitively, he presses the "E" key for "Employment". Such a process again yields no results; (2nd audio file) Just to make sure, the user presses "W" to see if the job list might be labeled "Work or Work

• pportunities". He gets no results;

(3rd Audio file)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 14 Slide 13

Search Box

6/8/2017 13

Search Box The user notices that there is an edit box labeled "Search", so he types "employment

• pportunities" into the search box.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 15 Slide 14

Read the Search Results Search Results

6/8/2017 14

Search Results The search results page asks “Do you mean ‘employees opportunities?’” He gets a long list of every page that contains the term "Employee Opportunities“ and variation

• f the term. Many of them link to articles and documents related to employment, but still no

job opportunities page. (audio file: list of page titles)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 16 Slide 15

Navigation Links Navigation Links

6/8/2017 15

Navigation Links As a last resort, the user turns off the links list feature and moves the cursor to the top of the

• page. He begins to arrow down through every line on the page.

(audio file: list of all the navigation links – including “departments” -- at the beginning of the page.) While there are some "loose" references to employment, i.e., Equal Employment, he begins to wonder where the site is. If he is intuitive enough, he recalls hearing the link to departments. Maybe he can find Human Resources listed.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 17 Slide 16

List of City Departments

6/8/2017 16

List of City Departments ASIDE: Are your department names consistent? Can your citizens anticipate what names your city is using? Here’s a department listing on the Internet site for an unnamed city.

• Do I look for the “Fire Department” or the “Austin Fire Department?”
• Do I look for the “Police Department” or the “Austin Police Department?”
• Do I look for the “Library” or the “Austin Library?” Neither. It’s listed as the “Austin Public

Library”

• How about “EMS?” That would be the “Austin/Travis County Emergency Medical Services.”
• How about “Real Estate Services?” It’s listed under “O” for “Office” along with the Medical

Director and the Police Monitor. (“ARIA labeling” can allow the web designed to keep the appearance of the links while changing the names for the screen reading software.) Resuming our narrative. The user clicks on "Departments" and sure enough, he spots Human

• Resources. He clicks that link.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 18 Slide 17

The Human Resources Page

6/8/2017 17

The Human Resource page As he reads, he hears the blurb inviting people to click on the "E-career" site to apply for a job. (No audio file on this page)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 19 Slide 18

Jobs at the City of Austin

6/8/2017 18

Jobs at the City of Austin He clicks on that link and is brought to a page titled “Jobs at the City of Austin". Hurray! He has reached his desired destination!

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 20 Slide 19

“Click Here” vs. Descriptive Links

“Click Here!” Links Descriptive Links

6/8/2017 19

“Click Here” vs. Descriptive Links

Table to display examples for both. “Click Here” links for audio files to demonstrate the difference between the two types.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 21 Slide 20

Pop-ups Windows

A dialog box like this can be invisible to screen reading software and “break” a web page for a user

• f adaptive technology.

6/8/2017 20

Pop-Up Windows IMAGE: A “Log In” box. At the bottom of the screen is this sentence: “A dialog box like this can be invisible to screen reading software and ‘break’ a web page for a visitor who can’t see it.”

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 22 Slide 21

Video by Rose Eveleth

Pop-ups Windows (continued)

6/8/2017 21

Open Video in a Browser Window

Pop-Up Windows (continued) A video is embedded on the screen.

• Video displays the content window of a web browser.
• The video starts on a Google search results page for the phrase “nautilus magazine.”
• User clicks cursor on the first result: “Nautilus | Science Connected”
• The Nautilus home page opens and a computerize voice announces “Windows 'Nautilus

Science Connected' tab.”

• The user moves the cursor around the screen.
• The user selects the topmost line of text on screen with her cursor and the computerized

voice announces “Section: issue 040 --- Article.”

• The focus moves down to the next line of text on the screen and the computerized voice

announces "Learning: Heading One"

• At 16 seconds into the video, a new page opens and an advertisement for a "Back to School

Sale" appears on a layer above the web page. The web page itself is under a dark "wash" that indicates the advertisement is in focus.

• The user tries unsuccessfully for 18 seconds to resume reading the article.
• 34 seconds into the video, the user clicks the "X" symbol in the upper right hand corner of

the advertisement.

• The advertisement disappears, the web page comes back into focus, and the narration

resumes. Here’s the video creator’s description of the video:

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 23

“Here's a video of what the Nautilus website looks and, more importantly, sounds like with a screen reader. Note that when I navigate to the ad the screen reader is silent, because the ad hasn't been coded to talk to the reader at all. Imagine you're just hearing this page, and you're getting nothing at all.” (CITE: “Popup Ads Are Terrible, and They're Even Worse for the Blind” by Rose Eveleth)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 24 Slide 22

End of Part One

Thank you. Reminder: The slides and handouts are available at http://bit.ly/2saznyo. There will be time for questions after Part Two. David Ondich: ADA@austintexas.gov. Up Next: Part Two – Technical Solutions and CPIO Strategies.

6/8/2017 22

End of Part One Thank you. Reminder: The slides and handouts are available at http://www.austintexas.gov/page/americans-disabilities-act-news-media-and-links . Questions about Part One (five minutes) There will be time for additional questions after part two David Ondich: ada@austintexas.gov. Up Next: Part 2 – Technical Solutions and CPIO Strategies.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 25 Slide 23

Part Two: Technical Solutions and CPIO Strategies

But first --- show of hands:

• How many of you are generalists who “do it all?”
• How many of you have technical specialists reporting to you?
• How many of you outsource your digital media to vendors and contractors?

There’s more to digital accessibility than can be covered in depth in the time we have, so this will have to be largely a fast-paced over-view. Download the slides and handouts at http://bit.ly/2saznyo .

6/8/2017 23

Part Two: Technical Solutions and CPIO Strategies

Show of hands:

• How many of you do it all yourselves?
• How many of you have technical specialists working for you?
• How many of you outsource your digital media to vendors and contractors?

The remaining content will include:

• A few definitions (only what’s necessary)
• Some specific technical fixes (not too technical)
• CPIO strategies for developing and executing a digital accessibility policy
• Common pitfalls to avoid

There’s more to digital accessibility than can be covered in depth in the time we have so this will have to be mostly a fast-paced over-view. You’re encouraged to down-load the slides and handouts. It will be easier and more efficient than taking notes.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 26 Slide 24

What accessibility is not:

John Robert Wooden (1910-2010) was an American basketball player and head coach at the University of California at Los Angeles.

6/8/2017 24

What accessibility is not:

• You're not going to accidentally make something accessible.
• Accessibility is not expensive if done right
• Accessibility is best incorporated at every step of the development process. Accessibility is

not something you add at the end. “If you don’t have time to do it right. When will you have time to do it over?”

• John Wooden

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 27 Slide 25

Five Reoccurring Concepts

1. True Text: The text should be readable by screen reading software such as JAWS. 2. Tagged Navigation: Use semantic formatting so that the text can be navigated by screen reading software. (“Semantic formatting” will be defined shortly.) 3. Alternative Descriptions: Properly caption, label, describe, --- or ignore the non-text content such as graphic images or charts. 4. Write Clearly: Avoid jargon 5. Validate for Accessibility: Use the automated validation functions available for every format of digital document.

6/8/2017 25

Five Reoccurring Concepts

In my preparation for today’s session I noticed that there were several concepts that allied to multiple digital media. This is a concept I made up. You won’t find it if you google the phrase “the Five Reoccuring Concepts of Accessibility.”

• True Text: The text is readable by screen reading software such as JAWS.
• Tagged Navigation: Semantic formatting is used so that the text can be navigated by

screen reading software. (E.G. title, headings, tables, etc.,)

• Alternative Descriptions: non-text content can be properly captioned, labeled,

described, --- or ignored.

• Write Clearly: avoid jargon.
• Validate for Accessibility: There is automated validation available for every format of

digital document. (Definitions to follow.) NOTE: There’s more to accessibility than these five concepts, but applying these three concepts will address a lot of the issues. If you apply them consistently, the bulk of you work is done.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 28 Slide 26

Eschew Obfuscation, Espouse Elucidation!

• Choose words that are common and easy to understand.
• Avoid run-on sentences. Use clear, short sentences and paragraphs.
• Your content should be written in the active voice instead of the passive voice.
• Avoid using acronyms, abbreviations, and text messaging syntax that would

sound strange if read by a screen reader or that could be confusing to some

• readers. (e.g. “Austintexas.gov”)
• Limit your use of hashtags. But when you do, use camel case (e.g. #CityOfAustin,

#TunaTexas)

6/8/2017 26

(Sorry! You being Information Officers, I’m sure you know this. But in the interest of thoroughness ...)

(Sorry! You being Information Officers, I’m sure you know this. But in the interest of thoroughness ...)

Eschew Obfuscation, Espouse Elucidation:

• Choose words that are common and easy to understand.
• Avoid run-on sentences. Use clear, short sentences and paragraphs.
• Your content should be written in the active voice instead of the passive voice.
• Avoid using acronyms, abbreviations, and text messaging syntax that would sound strange if

read by a screen reader or that could be confusing to some readers.

• Limit your use of hashtags. But when you do, use camel case (e.g. #CityOfAustin,

#TunaTexas)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 29 Slide 27

“Blank PDF”

“A picture may be worth a thousand words --- but not if it's a picture of a thousand words that you're trying to read with accessible technology.”

• David Ondich

6/8/2017 27

“Blank PDF” To quote David: “A picture may be worth a thousand words --- but not if it's a picture of a thousand

words that you're trying to read with accessible technology.”

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 30 Slide 28

True Text or Graphical Text?

Open Word Document Open Text File

6/8/2017 28

True Text or Graphical Text? “Click here!” Link for demonstrating the difference between real text and an image of a text with the “Welcome to Fabulous Las Vegas Nevada” message. The easiest -- but by no means complete -- method to confirm that the verbiage displayed is actual text and not merely the image of a document is to cut and paste the text into a text file. People who are visually enabled can recognize the text in the images but computers cannot -- unless an advanced OCR program is run to interpret the images in the photograph but even that is unlikely with a complex image like this.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 31 Slide 29

Question: When is a PDF with text a “blank” document?

When you scan a printed document -- E.G. a signed contract, police report, city policy, or anything requested for discovery – it is no more than an image

• f the hard copy.

6/8/2017 29

Question: When is a PDF with text a “blank” document? Answer: When you scan a printed document (E.G. a signed contract, police report, city policy, or anything requested for discovery.)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 32 Slide 30

Question: When is a PDF with text an “untagged” document?

Answer #1 of 2: When semantic markup is not used to tag the structural elements in a document, the document is called “untagged.”

(Next: Defining “Tagged document” and “Sematic markup.”)

6/8/2017 30

Question: When is a PDF with text an “untagged” document?

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 33 Slide 31

Tagging and Semantic Markup

Tagged PDF A PDF file that -- in addition to text and graphics -- contains meta-data for text-extraction, content-reflow, document accessibility, geographic information in PDF containing maps, etc., With the correct tags, a screen reader can:

• Understand where headings fall
• Follow the correct reading order
• Identify footnotes & graphics
• Understand the structure of tables
• Complete fillable forms

In most cases, tags are necessary in order to make a PDF file comply with Section 508. Semantic Markup (sometimes called “Structural Markup”): 1. (In Technical and Business Writing) naming sections of text according to the structural role they play in the document. (CITE: “Highlighting and Emphasis” in Online Technical Writing by David McMurrey at https://www.prismnet.com/~hcexres/textbook/) 2. (In Information Technology) the use of a markup language such as HTML to convey information about the meaning of each element in a document through proper selection of markup elements, and to maintain complete separation between the markup and the visual presentation of the elements contained in the document.

6/8/2017 31

Definitions: Tagging and Semantic Markup Tagged PDF A PDF file that -- in addition to text and graphics -- contains meta-data for text- extraction, content-reflow, document accessibility, geographic information in PDF containing maps, etc., With the correct tags, a screen reader can:

• Understand where headings fall
• Follow the correct reading order
• Identify footnotes & graphics
• Understand the structure of tables
• Complete fillable forms

In most cases, tags are necessary in order to make a PDF file comply with Section 508. (CITE: "What is 'Tagged PDF'?" http://stackoverflow.com/questions/6397984/what-is- tagged-pdf)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 34 Slide 32

Presentational Markup vs. Semantic Markup (in Microsoft Office)

Presentational Markup Semantic Markup

• bold
• italic
• underline
• red, green, blue, etc.,
• borders
• font-face
• font-size
• strike-through
• title
• header
• definition
• language
• numbered list
• table
• label
• footnote
• caption
• citation

6/8/2017 32

Appearance vs. Significance

Presentational Markup vs. Semantic Markup A table listing examples of presentational markup and semantic markup. Presentational Markup

• bold
• italic
• underline
• red, green, blue, etc.,
• borders
• font-face
• font-size
• strike-through
• line break

Semantic Markup

• title
• header
• definition
• language
• numbered list
• table
• label
• footnote
• caption
• citation

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 35 Slide 33

Presentational Markup for Titles and Headers

6/8/2017 33

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 36 Slide 34

Sematic Markup for Titles and Headers

6/8/2017 34

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 37 Slide 35

Navigating a Word Document

6/8/2017 35

Screen capture shows the navigation panel in Word. "A non-web example of the benefits of a structural approach to content markup can be found when using Microsoft Word. If headings are used consistently throughout a document, then a table of contents can be generated auto-magically. If text has only been styled to look like a heading, then the program cannot distinguish headings from body copy, and the resulting table

• f contents is likely to be meaningless.“

(CITE: http://www.motive.co.nz/glossary/markup.php)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 38 Slide 36

The Proper Order of Titles and Headings

6/8/2017 36

RIGHT WRONG

Title

• Heading 1
• Heading 2
• Heading 2
• Heading 1
• Heading 2
• Heading 2

Title

• Heading 2
• Heading 4
• Heading 4
• Heading 2
• Heading 3
• Heading 3

Don’t skip header levels.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 39 Slide 37

Validate Word for Accessibility

6/8/2017 37

Recent editions of Microsoft Word include a built in accessibility checker. But in order for the accessibility check to run on a document, the document must be saved with the default .docx extension. If you try to save the document using another format -- such as .doc -- the accessibility checker won't run.

Recent editions of Microsoft Word include a built in accessibility checker. But in order for the accessibility check to run on a document, the document must be saved with the default .docx

• extension. If you try to save the document using another format -- such as .doc -- the

accessibility checker won't run. To validate your Microsoft Word document (*.docx) in Word:

• Select the file tab in the Office Ribbon.
• In the File view, select the Info option
• Select the Inspect Document button.
• Select the Check Accessibility option

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 40 Slide 38

6/8/2017 38

Never Print to PDF! Always Export to PDF instead

Question: When is a PDF with text an “untagged” document? Answer #2 of 2: When you print a document to PDF. The text is passed on to the PDF but any tags for indicating structure are lost.

Question: When is a PDF with text an “untagged” document? Answer #2: When you print to PDF. The text is passed on to the PDF but any tags for indicating structure are lost.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 41 Slide 39

Mislabeled Fillable PDF

6/8/2017 39

Mislabeled Fillable PDF Waiting on an example PDF. Audio file pending

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 42 Slide 40

Editing the labels in a fillable PDF

6/8/2017 40

Mislabeled Fillable PDF Waiting on an example PDF. Audio file pending

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 43 Slide 41

Mislabeled Fillable PDF

6/8/2017 41

Re-order the form fields

Label Order

Mislabeled Fillable PDF Waiting on an example PDF. Audio file pending

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 44 Slide 42

PowerPoint

• Add alternative text to images and objects
• Use clear table structure
• Specify column header information in tables
• Ensure that all slides have unique titles.
• Use hyperlink text that is meaningful.
• Use simple table structure.
• Avoid using blank cells for formatting.
• Include closed captions for any audio or video.
• Ensure that the reading order of each slide is logical and that the

slide titles are unique and meaningful.

• Increase visibility for colorblind viewers.
• Run the Accessibility Checker

6/8/2017 42

PowerPoint

• Add alternative text to images and objects
• Use clear table structure
• Specify column header information in tables
• Ensure that all slides have unique titles.
• Use hyperlink text that is meaningful.
• Use simple table structure.
• Avoid using blank cells for formatting.
• Include closed captions for any audio or video.
• Ensure that the reading order of each slide is logical and that the slide titles are unique and

meaningful.

• Increase visibility for colorblind viewers.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 45

• Run the Accessibility Checker

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 46 Slide 43

PowerPoint (continued)

6/8/2017 43

PowerPoint (continued) Be sure to explain the accompanying narration for the slides in the notes panel so that deaf and hard of hearing Computer Based Training students can read the content. Include a transcript of the narration in the notes panel if deaf users will have access to the PowerPoint file.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 47 Slide 44

Social Media (e.g. Twitter, Facebook)

• Make your contact information (800 number, “contact us” form, and email address) available on your social media

account page.

• Make your social media content available through more than one channel (e.g. Twitter, Facebook, You Tube, email

distribution list.)

• Provide links or contact information to official social media support and accessibility teams.
• Write clearly
• Caption photos to ensure that individuals will understand what is going on in the picture.
• Provide closed captions or transcripts for videos on Facebook and YouTube. (More on this later.)

CITE:

• Federal Social Media Accessibility Toolkit Hackpad
• “Accessibility in Social Media” by Debra Ruh

NEXT: Social Media (Specific to Twitter)

6/8/2017 44

Social Media (e.g. Twitter, Facebook)

• Make your contact information (800 number, “contact us” form, and email address)

available on your social media account page.

• Make your social media content available through more than one channel (e.g. Twitter,

Facebook, You Tube, email distribution list.)

• Provide links or contact information to official social media support and accessibility teams.
• Write clearly
• Caption photos to ensure that individuals will understand what is going on in the picture.
• Provide closed captions or transcripts for videos on Facebook and YouTube. (More on this

later.) CITE:

• Federal Social Media Accessibility Toolkit Hackpad
• “Accessibility in Social Media” by Debra Ruh

NEXT: “Social Media (Specific to Twitter)”

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 48 Slide 45

Social Media (Specifically Twitter)

• Place the main content first and place the hashtags and @mentions at the end.
• Use camel case when appropriate (i.e., capitalize the first letters of compound words as in

#KattyIsTheBomb and #KeepArlanLame)

• Caption photos to ensure that individuals will understand what is going on in the picture.
• Indicate that a link in a tweet is a photo, video or audio file with a prefix (e.g. [PIC], [VIDEO], [AUDIO].)
• Enable the "image description" feature.

CITE:

• Federal Social Media Accessibility Toolkit Hackpad
• “Accessibility in Social Media” by Debra Ruh

6/8/2017 45

Social Media (Specifically Twitter)

• Place the main content first and place the hashtags and @mentions at the end.
• Use camel case when appropriate (i.e., capitalize the first letters of compound words as in

#CityOfAustin)

• Caption photos to ensure that individuals will understand what is going on in the picture.
• Indicate that a link in a tweet is a photo, video or audio file with a prefix (e.g. [PIC], [VIDEO],

[AUDIO].)

• Enable the "image description" feature.

CITE:

• Federal Social Media Accessibility Toolkit Hackpad
• “Accessibility in Social Media” by Debra Ruh

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 49 Slide 46

Closed Captioned Video (Standards)

• Ensure all videos have synchronous closed captioning and appropriate audio description. Or link to a

version of the video that has closed captioning audio descriptions.

• You do not need video editing software to provide synchronous close captioning for a video. The

captioning will be saved to a separate file that accompanies the video file.

• Use synchronous closed captioning for existing video.
• 1-3 lines of text onscreen for 3-7 seconds
• Maximum of 32 characters per line
• Mixed case (appropriate use of upper and lower-case)

(Continued on next slide)

6/8/2017 46

Closed Captioned Video (continued)

• Ensure all videos have synchronous closed captioning and appropriate audio description

(or a link to a version of the video that has closed captioning audio descriptions).

• You do not need video editing software to provide synchronous close captioning for a
• video. The captioning will be saved to a separate file that accompanies the video file.
• Use synchronous closed captioning for existing video.
• 1-3 lines of text onscreen for 3-7 seconds
• Maximum of 32 characters per line
• Mixed case (appropriate use of upper and lower-case)

(Continued on next slide)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 50 Slide 47

Closed Captioned Video (Best Practices)

• Place music or audio descriptions in [brackets]
• Identify speakers
• Describe relevant sound effects
• Preserve slang
• Quote verbatim when possible

6/8/2017 47

Closed Captioned Video (continued)

Best Practices

• Place music or audio descriptions in [brackets]
• Identify speakers
• Describe relevant sound effects
• Preserve slang
• Quote verbatim when possible

(Continued on next slide)

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 51 Slide 48

Web Pages and Web Applications

Hey Jay, how much time do we have left? Questions before preceding:

Show of hands: How many information officers here edit their own HTML? Show of hands: How many here use a Web Content Management System like Plone, Drupal, Sharepoint, or Sitefinity? Show of hands: How many information officers work alone? Show of hands: How many have web developers reporting to them?

6/8/2017 48

Web Pages and Web Applications Questions before preceding:

How much time do we have left? How many information officers here edit their own HTML? How many here use a Web Content Management System like Plone, Drupal, Sharepoint, or Sitefinity? How many information officers work alone? How many have web developers reporting to them?

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 52 Slide 49

Administrative Strategies

• Require all your developers to read the W3C guidelines.
• Set up an Accessibility team or committee.
• Decide on standards, priorities, and guidelines, and

distribute them internally as your city’s Accessibility policies.

• Create and post a public accessibility statement. Post a link

to the statement in the footer of all your external web

• pages. Include contact information such as phone

numbers, TTY numbers, and email addresses.

• Set realistic goals and dead lines. Start with the top tier of

your Internet and intranet sites and work your way down to all your pages and documents.

• Design and develop for accessibility from the start and

continue through the development process.

• Educate your entire team about Usability concepts and

Accessibility best practices.

• Separate content from presentation: Require your

designers and developers to create pages using valid HTML5 and CSS. Your designers and developers should use CSS for layout --- never tables.

• Require documentation/comments in your markup.
• Validate your HTML and CSS.
• Use plain language for content.
• Follow up with Accessibility Quality Assurance at all stages:

Starting with the initial design and at every milestone.

• Have your staff review each other’s work -- not their own.
• Audit with screen readers like JAWS, VoiceOver (MacOS),

and Microsoft NVDA.

• Perform usability testing with disabled users.

6/8/2017 49

Administrative Strategies

• Decide on standards, priorities, and guidelines, and distribute them internally as your city’s

Accessibility policies.

• Create and post a public accessibility statement. Post a link to the statement in the footer
• f all your external web pages. Include contact information such as phone numbers, TTY

numbers, and email addresses.

• Set realistic goals and dead lines. Start with the top tier of your Internet and intranet sites

and work your way down to all your pages and documents.

• Design and develop for accessibility from the start and continue through the development

process.

• Develop for utility first. Aesthetics should follow.
• Educate your entire team about Usability concepts and Accessibility best practices.
• Require all your developers to read the W3C guidelines
• Set up an Accessibility team or committee.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 53

• Separate content from presentation: Require your designers and developers to create

pages using valid HTML5 and CSS. Your designers and developers should use CSS for layout

• -- never tables.
• Require documentation/comments in your markup.
• Validate your HTML and CSS.
• Use plain language for content.
• Follow up with Accessibility Quality Assurance at all stages: Starting with the initial design

and at every milestone.

• Require all your developers to read the W3C guidelines
• Set up an Accessibility team or committee.
• Separate content from presentation: Require your designers and developers to create

pages using valid HTML5 and CSS. Your designers and developers should use CSS for layout

• -- never tables.
• Require documentation/comments in your markup.
• Validate your HTML and CSS.
• Use plain language for content.
• Follow up with Accessibility Quality Assurance at all stages: Starting with the initial design

and at every milestone.

• Have your staff review each other’s work -- not their own.
• Audit with screen readers like JAWS, VoiceOver (MacOS), and Microsoft NVDA.
• Perform usability testing with disabled users.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 54 Slide 50

World Wide Web Consortium's Collection of Web Content Accessibility Guidelines

6/8/2017 50

World Wide Web Consortium's Collection of Web Content Accessibility Guidelines

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 55 Slide 51

WCAG Prio riority ty Levels ls

6/8/2017 51

• Level A (minimum) – the most basic web accessibility features
• Level AA (mid-range) – deals with the biggest and most common

barriers for disabled users

• Level AAA (highest) – the highest level of web accessibility

“The WCAG document does not recommend that Level AAA conformance be required as a general policy because it is not possible to satisfy all Level AAA success criteria for some content.” CITE: https://www.section508.gov/content/build/website-accessibility-improvement/WCAG-conformance

WCAG Priority Levels

• Level A (minimum) – the most basic web accessibility features
• Level AA (mid-range) – deals with the biggest and most common barriers for disabled users
• Level AAA (highest) – the highest level of web accessibility

“Level A sets a minimum level of accessibility and does not generally achieve broad accessibility for many situations. Level AA is proposed as the new standard for the anticipated refresh of the Access Board Standard for Section 508. The WCAG document does not recommend that Level AAA conformance be required as a general policy because it is not possible to satisfy all Level AAA success criteria for some content.” CITE: https://www.section508.gov/content/build/website-accessibility-improvement/WCAG- conformance

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 56 Slide 52

The W3C Guidelines are available in different versions.

Version URL WCAG 2 at a Glance https://www.w3.org/WAI/WCAG20/glance/ Web Content Accessibility Guidelines (WCAG) Overview https://www.w3.org/WAI/intro/wcag.php How to Meet WCAG (Quick Reference) https://www.w3.org/WAI/WCAG20/quickref/ Web Content Accessibility Guidelines (WCAG) 2.0 (Verbose) https://www.w3.org/TR/WCAG20/ Web Content Accessibility Guidelines (WCAG) 2.0 (Verbose) - PDF https://www.w3.org/WAI/WCAG20/versions/guidelines/wcag20-guidelines- 20081211-a4.pdf Checklist for Web Content Accessibility Guidelines 2.0 https://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html

Each version is appropriate for its own specific purpose and situation. The version you should use is dependent

• n your role and responsibilities.

Consider as an additional resource for low hanging fruit: “Easy Checks - A First Review of Web Accessibility” https://www.w3.org/WAI/eval/preliminary More checklists can be found by googling the phrase “WCAG Checklist.”

6/8/2017 52

The W3C Guidelines are available in different versions. Each version is appropriate for its own specific purpose and situation. The version you’ll use will be dependent on your role and responsibilities (table) Consider as an additional resource for low hanging fruit: “Easy Checks - A First Review of Web Accessibility” https://www.w3.org/WAI/eval/preliminary More checklists can be found by googling the phrase “WCAG Checklist.”

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 57 Slide 53

Strategies for Working with Vendors and Contractors (E.G. Hosting & Design)

• Share your Accessibility policy with the vendor
• Include your accessibility requirements in your contract with the vendor. Specify your WCAG

priority levels and target dates for compliance.

• Include your vendors and contractors in the auditing and usability testing.
• For Web Content Management Systems (WCMS), design the site to conform to your unique
• situation. Don’t expect the platform to work out of the box.

6/8/2017 53

• Share your Accessibility policy with the vendor
• Include your accessibility requirements in your contract with the vendor. Specify your

WCAG priority levels and target dates for compliance.

• Include your vendors and contractors in the auditing and usability testing.
• For Web Content Management Systems (WCMS), design the site to conform to your unique
• situation. Don’t expect the platform to work out of the box.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 58 Slide 54

“Skip links” Demonstration

This version of the “skip link” technique benefits blind users as well as users who navigate with the keyboard only. Click Here!

6/8/2017 54

“Skip links” Demonstration For sighted users web pages are ordered spatially: Headers, Footers, Navigation Bars, and Content Areas. It’s fast, easy, and somewhat intuitive for us to move our focus around a page. But for the users of screen readers, web pages are ordered sequentially: beginning, middle, and

• end. Depending on the page it can be difficult to get past the header and the navigation bar to

the page content. That’s where the concept of the “skip link” comes into play. The “Click Here” button opens a page on webaim.org for demonstrating a good use of “skip to main content” links. As promised in the session description, here’s a pitfall to avoid: The common practice is to hide the skip link or make is invisible in browsers but discoverable to screen readers. This helps with the aesthetic and the skip links remain available to blind users but it’s inconvenient to users who must use the keyboard to navigate inside the browser window.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 59 Slide 55

Quality Assurance (QA) Testing for Web Accessibility

TIP: View your web site with the images turned off in your browser settings. (You can find plugins for toggling that setting however many of them will not display the ALT attribute values so you will not get a accurate idea of the accessibility.) TIP: Navigate your web pages and fill out your online forms using the keyboard only.

6/8/2017 55

TOOLS:

• Screen Readers: JAWS, NVDA (Windows), VoiceOver (MaxOS), ChromeVox (plugin for Chrome),

Microsoft Narrator, etc.,

• Browser Plugins for Accessibility Checking: Siteimprove, A11Y Compliance Platform, Axe Chrome Plugin,

Chrome Accessibility Developer Tools, etc.,

• Online Validators and Accessibility Checkers: W3C, WAVE, Web Accessibility Checker, etc.,

WARNING: Automated accessibility checking is inherently limited. A complete check requires a human review to evaluate the results in context. (E.G. Are images labeled appropriately?)

Quality Assurance (QA) Testing for Web Accessibility TIP: View your web site with the images turned off in your browser settings. (You can find plugins for toggling that setting however many of them will not display the ALT attribute values so you will not get a accurate idea of the accessibility.) Chrome In the upper right, open the Customize and control Google Chrome menu by clicking the three horizontal bars. ... Click the Show advanced settings... link, and then, under "Privacy", click Content settings.... Under the "Images" heading, select Do not show any images. Click OK, and then close the Settings tab. Firefox Go to about:config, search for this option "permissions.default.image" change to 1. Possible values: 0 -- always load the images 1 -- never load the images 2 -- dont load third images TIP: Navigate your web pages and fill out your online forms using the keyboard only. Make sure the sites or application is fully navigitable or usable with only the keyboard. Make sure the focus follows naturally.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 60

TOOLS:

• Screen Readers: JAWS, NVDA (Windows), VoiceOver (MacOS), ChromeVox (plugin for

Chrome), Microsoft Narrator, etc.,

• Browser Plugins for Accessibility Checking: Siteimprove, A11Y Compliance Platform, Axe

Chrome Plugin, Chrome Accessibility Developer Tools, etc.,

• Online Validators and Accessibility Checkers: W3C, etc.,

WARNING: Automated accessibility checking is inherently limited. A complete check requires a human review to evaluate the results in context. (E.G. Are images labeled appropriately?) “Even if you meet every high priority checkpoint, users with disabilities might still be completely incapable of using your site."

• Jakob Nielsen in "Accessibility Is Not Enough" on November 21, 2005

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 61 Slide 56

The Missing “Jobs” Link in the COA Footer

6/8/2017 56

"Programmers program for the person they know best.“

• Jim Allen, the accessibility coordinator at the Texas School for the Blind and Visually

Impaired

Developers can use the WAI-ARIA specification to change the audio description of the “City Jobs” link to “Jobs at Austin,” “e-Careers,” “employment,” or anything else. The visual presentation wouldn’t change. <a href=“cityjobs.html" aria-label=“Jobs at Austin">City Jobs</a>

On the COA site there’s a link in the footer that reads “City Jobs.” By labeling the link with ARIA, a screen reader can read it as “Jobs at the city.” The link wasn’t actually missing, it was simple labeled “City Jobs.” Developers can use the WAI-ARIA specification to change the audio description of the “City Jobs” link to “Jobs at Austin,” “e-Careers,” “employment,” or anything else. The visual presentation wouldn’t change. Fore example: <a href=“cityjobs.html" aria-label=“Jobs at Austin">City Jobs</a>

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 62 Slide 57

End of Part Two

Thank you. Reminder: The slides and handouts are available at http://bit.ly/2rvnbYs . Any Questions for either David or Bouton about either Part One or Part Two? David and Bouton will also be available after the session. Or you can email questions to them. (Their email addresses are on the next slide.)

6/8/2017 57

End of Part One Thank you. Reminder: The slides and handouts are available at http://www.austintexas.gov/page/americans-disabilities-act-news-media-and-links . Questions about Part One (five minutes) There will be time for additional questions after part two David Ondich: ada@austintexas.gov. Up Next: Part 2 – Technical Solutions and CPIO Strategies.

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 63 Slide 58

Digital Accessibility for All Citizens

By David Ondich, M.S. and Bouton Jones City of Austin June 8th & 9th 2017

David Ondich, M.S. ADA Program Manager COA ada@austintexas.gov Bouton Jones IT Business Systems Analyst Senior COA bouton.jones@austintexas.gov For your convenience, these slides and handouts (with terms and additional resources) are available online at http://bit.ly/2saznyo.

Presentation title: Digital Accessibility for All Citizens Authors: David Ondich, M.S. and Bouton Jones City of Austin June 8th & 9th 2017 David Ondich, M.S. ADA Program Manager COA ada@austintexas.gov Bouton Jones IT Business Systems Analyst Senior COA bouton.jones@austintexas.gov For your convenience, these slides and handouts (with terms and additional resources) are available online at http://www.austintexas.gov/page/americans-disabilities-act-news-media-and-links .

Slide Handout for “Digital Accessibility for All Citizens” Thursday, June 08, 2017 64 Slide 59

The e NVDA Screen Rea eader Auditions for

• r th

the BB BBC

6/8/2017 59

Merely a joke at the expense of the NVDA screen reader.