Creating Accessible Documents: Key Guidelines for Inclusive Content

Slide Note

Understanding the essentials of creating accessible digital content is crucial to ensuring inclusivity and usability for all users. This guide covers the basics such as perceivability, operability, understandability, and robustness, along with practical tips and guidelines for enhancing accessibility. Learn how to make your documents more user-friendly and compliant with Web Content Accessibility Guidelines (WCAG) 2.0.

emm_a Follow

Uploaded on Sep 27, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Creating Accessible Documents: Basics Gaeir (rhymes with fire ) Dietrich HTCTU Director gdietrich@htctu.net 408-996-4636 www.htctu.net 9/27/2024 www.htctu.net 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 9/27/2024 www.htctu.net 3

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/ 9/27/2024 www.htctu.net 4

In a Nutshell: Four Guidelines 1. Perceivable 2. Operable 3. Understandable 4. Robust So POUR yourself into your work. ;-) 9/27/2024 www.htctu.net 5

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 9/27/2024 www.htctu.net 6

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 9/27/2024 www.htctu.net 7

Understandable Write clearly Define terms Spell out acronyms Always write out the first time used 9/27/2024 www.htctu.net 8

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

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 9/27/2024 www.htctu.net 11

PDF Documents In the beginning was Word

The Life and Times of PDFs PDFs happen two ways 1. Documents are scanned 2. Documents are authored in Word or other program and turned into PDF www.htctu.net 13

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

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

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 Headings Lists Numbered lists Pay special attention to headings 9/27/2024 www.htctu.net 17

Word Styles? Paragraph 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)

Applying Styles Paragraph 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 Ctrl + Alt + 1 Heading Two Ctrl + Alt + 2 Heading Three Ctrl + Alt + 3 List Bullet Ctrl + Shift + L Change case Shift + F3

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

Area Pane

PPT Styles Themes 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 9/27/2024 www.htctu.net 24

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 9/27/2024 www.htctu.net 25

Right-click on Picture Choose Format Picture 9/27/2024 www.htctu.net 26

Alt Text Right click on picture At bottom of window, choose Alt Text Note: Put the alt text where it says Description 9/27/2024 www.htctu.net 27

PowerPoint Same thing: right click (When in doubt, right click ) And remember to always keep the description SHORT 9/27/2024 www.htctu.net 28

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

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.

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.

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 9/27/2024 www.htctu.net 44

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 9/27/2024 www.htctu.net 45

Working with Tables Tables are awesome tools! 9/27/2024 www.htctu.net 46

Select Header Row Right click on header (top) row and select Table Properties 9/27/2024 www.htctu.net 47

Marking the Header Choose Row Tab Under Options click Repeat as header row 9/27/2024 www.htctu.net 48

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 9/27/2024 www.htctu.net 49