Creating Accessible Documents: Basics February 2015 Creating Accessible Documents: Basics Gaeir (rhymes with “fire”) Dietrich HTCTU Director gdietrich@htctu.net 408-996-4636 www.htctu.net 11/10/2018 www.htctu.net www.htctu.net * Access to IT www.htctu.net * 408-996-4636 1 1

Not Equal Digital does not mean accessible! Just because something is on a computer, tablet, e-book reader, etc., does not make it accessible!

Online Documents Need to be text, not pictures of text In other words, not just scanned Text documents are searchable “Searchable PDF” is a text-based PDF But accessible is more than just text 11/10/2018 www.htctu.net

Accessible? What does it mean to be accessible? Web Content Accessibility Guidelines (WCAG) 2.0 from the W3C (World Wide Web Consortium) http://www.w3.org/TR/WCAG20/ 11/10/2018 www.htctu.net

In a Nutshell: Four Guidelines Perceivable Operable Understandable Robust So POUR yourself into your work. ;-) 11/10/2018 www.htctu.net

Perceivable Make sure pictures (graphics) have text descriptions Alt text or alt tag Use structure Allows for ease of reformatting Use good contrast Make sure that text can be distinguished easily from the background 11/10/2018 www.htctu.net

Operable Make sure everything works from the keyboard Make sure the tab order is logical Do not require a mouse Make content easy to find and navigate Use logical headings Make sure header rows in tables are clearly marked 11/10/2018 www.htctu.net

Understandable Write clearly Define terms Spell out acronyms Always write out the first time used 11/10/2018 www.htctu.net

Robust Use good design to ensure that the document will work with all assistive technology Not just JAWS Provide multiple formats PDF and RTF 11/10/2018 www.htctu.net

Accessible Documents U.S. Dept of Education

U.S. Dept of Ed Led a team to develop document guidelines for federal agencies Came up with 17 specific suggestions 11/10/2018 www.htctu.net

PDF Documents In the beginning was Word…

The Life and Times of PDFs Creating Accessible Documents February 2015 The Life and Times of PDFs PDFs happen two ways Documents are scanned Documents are authored in Word or other program and turned into PDF www.htctu.net 13 www.htctu.net * Access to IT www.htctu.net * 408-996-4636 13

Graphical vs. Text-based PDF Creating Accessible Documents February 2015 Graphical vs. Text-based PDF Scanned PDFs are pictures of text Computers cannot read a picture Documents are not e-text unless the computer can see the letters as text Text can be highlighted with the mouse Text can be selected a letter / word at a time Text can be searched www.htctu.net 14 www.htctu.net * Access to IT www.htctu.net * 408-996-4636 14

PDFs Need to be Text-based Creating Accessible Documents February 2015 PDFs Need to be Text-based Searchable PDFs are text-based Not scans or “pictures” of text If you scan, you need to run Optical Character Recognition (OCR) to obtain text If you start from a Word document, you will have text Now you just need to ensure the PDF will be accessible www.htctu.net 15 www.htctu.net * Access to IT www.htctu.net * 408-996-4636 15

Four Primary Steps to Access Use templates (PPT) and styles (Word) Add alt text Picture descriptions Mark the header row in tables Use logical hyperlink names THEN make it into a PDF

Step One Use styles Pay special attention to headings Headings Lists Numbered lists Pay special attention to headings 11/10/2018 www.htctu.net

Word Styles? Paragraph styles Attribute Styles Paragraph attributes Font type & size, line spacing, indent Affects entire paragraph Attribute Styles Applies only to selected characters Font type, size, style

Word Styles for Braille Use Word paragraph styles Normal, Body Text Headings One, Two, Three List, Bulleted List, Numbered List Index levels one-nine Can also use attribute styles Strong (for bold) Emphasis (for italic) www.htctu.net * 408-996-4636 19

Applying Styles Paragraph styles Attribute styles Click in text, click on style name Use format painter Use keyboard shortcut Attribute styles Select text, click on style name

Handy Style Shortcuts Heading One Heading Two Heading Three Ctrl + Alt + 1 Heading Two Ctrl + Alt + 2 Heading Three Ctrl + Alt + 3 List Bullet Ctrl + Shift + L Change case Shift + F3 www.htctu.net * 408-996-4636 21

Seeing Styles Work in Draft Mode Turn on “Area Pane” View Draft Button > Word Options Advanced > Display Set area pane over 1 inch

Area Pane

PPT Styles Themes Styles Use built-in themes (under design tab) Allows user to adjust contrast as needed Styles Are applied automatically If you have issues with the styles check the layout master 11/10/2018 www.htctu.net

Step Two Add descriptive text to graphics Two steps involved How to add alt text What to say (how to describe the graphic) First the how… 11/10/2018 www.htctu.net

Right-click on Picture Choose Format Picture 11/10/2018 www.htctu.net

Alt Text Right click on picture At bottom of window, choose Alt Text Note: Put the alt text where it says “Description” 11/10/2018 www.htctu.net

PowerPoint Same thing: right click (When in doubt, right click…) And remember to always keep the description SHORT 11/10/2018 www.htctu.net

Now the What First figure out the purpose of the graphic. What does the graphic convey? How much is the purpose of the graphic informational? How much decoration?

Describing Graphics When determining the purpose, always consider the context in which the graphic is being shown. The same graphic may have a different purpose in a different context. Sometimes decoration Sometimes informational

How Do I Decide?? Does the reader need to do something with the graphic or understand something from it? Informational Is the graphic simply entertaining or “pretty”? Decoration

Informational If information is being conveyed, then consider… What is the information being presented in the graphic? Is that information already conveyed in the text? How can I describe the graphic in as few words as possible?

Decoration Does it even need to be described? If not, null text it or “_” . If yes, how much? Usually very little.

What Do I Say?* 1. Be objective 2. Be brief 3. Be descriptive Stick to the facts, do not interpret 2. Be brief The shorter the better 3. Be descriptive Use words that convey clear meaning 4. Be logical Use a sequence or structure 5. Be accurate Make sure the information you give matches the book/site * From A Picture Is Worth 300 Words: Writing Visual Descriptions For An Art Museum Web Site by Adam Alonzo

No Single Right Way There is not only one way to describe graphics. Just remember… Keep context in mind Ask yourself: Is this something the person really needs to hear?

Exercise Photo 1 In a book about exercise, this photo appears at the beginning of a chapter on nutrition:

Possible Alt Text The photo is decorative. It is simply illustrating the theme of the book. Keep the description simple: People biking Gaeir: tell story about the over-described graphic

Exercise Photo 2 In the same textbook, the graphic below is included next to boxed text about the benefits of strength training.

Possible Alt Text This graphic is purely decorative. Since this graphic is essentially “eye candy,” it is a good example of when a null tag might be useful. If you do want to describe, keep it very short: “Smiley face lifting weights.” Robert: Several ways can do; any of them could be right

Logo Example 1 Kansas City Kansas Community College Presents an Evening of Jazz Come join us for two hours of wonderful jazz by the lake. …

Possible Alt Text The logo is decorative. Logo is branding for school, but in this context is essentially decorative from the end-user’s viewpoint. Since the graphic is decorative, keep it simple. College logo KCKCC logo

Logo Example 2 In marketing your business, the design of a logo can make a big impression or can be a waste of money. The logo needs to be attractive but not dominate other information presented along with the logo. In the example below, what catches your attention?

Possible Alt Text The logo is informational. In this case, the same logo is a specific example and requires a more lengthy description. Focus on what the reader needs to know: Interlocking blue K and red C on left with the words “Making Life Better” in red above the college name in black blocked and underlined with a blue line. Robert: two opposite interns Gaeir: When a graphic is part of an exercise, a lengthier description is required.

Step Three Mark the header row in your tables Word calls this “Repeat as header row at top of every page” or just “Repeat Header Rows” 11/10/2018 www.htctu.net

Tables By setting the header row in a table, screen reader users will be able to hear the header text repeated as needed Note: If you have column headers (i.e., header in first column), that will need to be marked in Adobe Acrobat Pro 11/10/2018 www.htctu.net

Working with Tables Tables are awesome tools! 11/10/2018 www.htctu.net

Select Header Row Right click on header (top) row and select Table Properties 11/10/2018 www.htctu.net

Marking the Header Choose Row Tab Under Options click Repeat as header row… 11/10/2018 www.htctu.net

And for Column Heads If column one is a header that applies to the entire table, you will need to mark that in Adobe Acrobat Pro 11/10/2018 www.htctu.net

Checking Your Word…er…Work Accessibility Checkers Can Help

MS Word Built-in Checker 11/10/2018 www.htctu.net

Color Contrast Color Contrast Analyzer (CCA) http://www.paciellogroup.com/resources/contrastanalyser/ Can download checker for free Windows or Mac version 11/10/2018 www.htctu.net

Create the PDF Adobe Acrobat Pro is your friend!

Create PDF and Run Action Install Adobe Acrobat Pro XI From the ribbon go to the Acrobat tab and choose Create PDF and Run Action 11/10/2018 www.htctu.net

Create Accessible PDF 11/10/2018 www.htctu.net

Older Version of Pro Check your conversion settings and make sure “Enable accessibility” is selected 11/10/2018 www.htctu.net

Checking in Acrobat Tags View > Show/Hide > Navigation Panes > Tags 11/10/2018 www.htctu.net

No Tags? Tools > Accessibility > Add tags And tags can be changed by right-clicking on them 11/10/2018 www.htctu.net

Reading Order Occasionally a document will not read in the proper order Accessibility > Touch Up Reading Order 11/10/2018 www.htctu.net

Table Inspector If a table has a column header, you will add it with the Table Inspector. From Touch Up, select table then Inspector 11/10/2018 www.htctu.net

Accessible Documents For maximum accessibility include both the PDF and the Word document online PDF and RTF If concerned about security with Word, can apply permissions 11/10/2018 www.htctu.net

Permissions in Word File > Info 11/10/2018 www.htctu.net

Restrict Access as Needed 11/10/2018 www.htctu.net

Getting Buy-in Make sure that staff understand that accessibility is not the enemy There are ways that creating accessible documents benefits all of us 11/10/2018 www.htctu.net

Styles for Example Quick and easy formatting Very simple to change Using “Outline” feature allows for rapid editing and rewriting Oh…and BTW, it’s now accessible! 11/10/2018 www.htctu.net

Additional Resources

Learning from Others W3C Guidelines DO-IT (University of Washington) WCAG (Web Content Accessibility Guidelines) 2.0 http://www.w3.org/TR/WCAG20/ DO-IT (University of Washington) http://www.washington.edu/doit/ WebAIM http://webaim.org/ http://webaim.org/techniques/word/ www.htctu.net * 408-996-4636

Digital Media DCMP Captioning Key NCAM – STEM WGBH – Web Media http://www.dcmp.org/captioningkey/ NCAM – STEM http://ncam.wgbh.org/experience_learn/educational_media/stemdx/guidelines WGBH – Web Media http://ncam.wgbh.org/invent_build/web_multimedia/accessible-digital-media-guide/guideline-h-multimedia 11/10/2018 www.htctu.net

What the CSUs Are Doing CSU Accessible Technology Initiative www.calstate.edu/Accessibility/ 11/10/2018 www.htctu.net

Thank you! Gaeir (rhymes with “fire”) Dietrich gdietrich@htctu.net 408-996-6047 To schedule a site visit, please contact Admin Assistant Jasper Haze: 408-996-4636 or jhaze@htctu.net 11/10/2018 www.htctu.net