Tips and Techniques for Accessible Digital Materials and Handouts Sina Bahram President, Prime Access Consulting www.SinaBahram.com @SinaBahram

What are we going to talk about? Why does this matter? Distribution of handouts Common accessibility tips and tricks Making accessible Word documents Making accessible PowerPoint presentations Recap and call to action @SinaBahram - #a11y

Why Does This Matter? More than 1 billion persons in the world have some form of disability Between 110 million and 190 million have significant impairment (WHO, 2011) @SinaBahram - #a11y

Distribution of Handouts - Digital Be prepared to make the original presentation available electronically (email or download link) If possible, generate shortened URL to download materials Download this presentation: https://goo.gl/ETjHCR Follow the tips in this presentation to make materials accessible @SinaBahram - #a11y

Distribution of Handouts - Physical Make sure that printed slides maintain readable font sizes and legible graphics (do not go below 12 point font) Provide large print version (at least 18 points, but 22 is preferred) @SinaBahram - #a11y

Tips and Tricks Fonts Color contrast Alt text Table headers Accessibility checker Saving, not printing, to PDF @SinaBahram - #a11y

Tips and Tricks - Fonts Avoid decorative fonts (like script, handwriting, or “display” typefaces, which are not meant to be used for body text) Slide body text should be a minimum of 24 points, and headers should be between 40 and 60 Keep in mind viewing distance – a large lecture hall may require larger fonts Watch out for nested lists as the font often gets smaller – make sure the smallest font on the slide is at least 24 points Avoid all caps Avoid blinking or animated text @SinaBahram - #a11y

Tips and Tricks – Color Contrast Make sure there is sufficient color contrast (4.5:1 for regular text, 3:1 for large text) Make sure text is not placed on busy or distracting backgrounds like videos, images, or bold patterns Tools Color Contrast Analyzer WebAIM Contrast Checker @SinaBahram - #a11y

Tips and Tricks – Color as Meaning Don’t rely on color alone. It is perfectly fine and appropriate to use color to convey meaning, but guarantee that there are other ways of understanding the message ❌ DANGER ✅ SAFETY @SinaBahram - #a11y

Tips and Tricks – About Alt Text Images, charts, and other graphics need descriptive text, called alt text, for people who can’t see them You should be able to replace the image with the alt text and have everything still make sense Descriptions should be concise @SinaBahram - #a11y

Tips and Tricks – Writing Alt Text How To: Click on the image In the top menu bar, select Format, then Picture In the format picture sidebar, go to the Size & Properties tab (blue square) and click Alt Text @SinaBahram - #a11y

Tips and Tricks – Text as Images Use actual text, not images of text @SinaBahram - #a11y

Tips and Tricks – Table Alt Text Tables can have alt text In the alt text, it is important to convey any meaningful takeaways from the table (e.g. maximum values, trends, surprising data points) Select the table; In the top menu select Format; Go to the Size & Properties Tab and select Alt Text @SinaBahram - #a11y

Tips and Tricks – Table Headers Make the table more accessible by selecting table headers and banding rows Select the table, which will add two table-related tabs to the menu ribbon. Click the Table Design tab then check the boxes corresponding to Header Row, First Column (if applicable), and Banded Rows. @SinaBahram - #a11y

Tips and Tricks – Enabling the Accessibility Checker Enable the checker by clicking the Review tab at the top of the document and selecting Check Accessibility This will open an Accessibility Checker tab on the right hand side of the screen @SinaBahram - #a11y

Tips and Tricks – Using the Accessibility Checker Errors Warnings Tips @SinaBahram - #a11y

Tips and Tricks – Saving to PDF Do not print to PDF! Do not click File --> Print Instead, click File --> Save As and select PDF from the file format menu If you save to PDF, the latest version of Office does an okay job of generating a PDF usable by persons with disabilities This is not a fully accessible PDF! @SinaBahram - #a11y

Accessible Word - Headings Make text a heading by selecting it, then clicking on the appropriate level in the Styles section of the Home tab Remember that order matters @SinaBahram - #a11y

Accessible Word – Lists Do not just copy the bullet symbol beside a series of items – use the actual list style in Word Ordered (numbered) vs. unordered (bulleted) lists @SinaBahram - #a11y

Accessible PowerPoint – About Reading Order Screen reader users will encounter the items on your slides in a random order related to how you edited them, unless you fix the reading order The reading order is not obvious visually, but it is critical to the accessibility of a presentation @SinaBahram - #a11y

Accessible PowerPoint – Correcting Reading Order On the Home tab, click Arrange then select Selection Pane In the selection pane, click and drag an item in the content list to change its order Remember that items read first should be on the bottom of the list, and items read last should be at the top @SinaBahram - #a11y

Accessible PowerPoint – Visualizing Reading Order You can visualize both the reading order and visual vertical flow of content using the Reorder Objects functionality On the Home tab, click Arrange then select Reorder Objects This will bring up a visualization of the layers of your slide using translucent “panes” stacked atop one another in space Content can also be rearranged in this view Again, content to be read first should be on the bottom @SinaBahram - #a11y

Accessible PowerPoint – Reading Order Visualized – Layer 3 @SinaBahram - #a11y

Accessible PowerPoint – Reading Order Visualized – Layer 2 @SinaBahram - #a11y

Accessible PowerPoint – Reading Order Visualized – Layer 1 @SinaBahram - #a11y

Accessible PowerPoint – Slide Titles Unique slide titles are very important If you want to hide a slide title, do so only visually On the Home tab, click Arrange then select Selection Pane In the selection pane, click the eye logo to the right of the slide title; this will change the icon to a dash @SinaBahram - #a11y

Accessible PowerPoint – Captions and Subtitles PowerPoint 2016 for Windows supports inserting videos that have captions in an external .vtt file Playing subtitled/captioned videos is only supported on Windows 10 and above It also supports multiple audio tracks (audio description) for videos Playing secondary audio tracks on videos is only supported in Windows 8.1 and above Alternative: hard-code this accessibility information in the video before adding to a slide @SinaBahram - #a11y

Accessible PowerPoint – Adding Captions To add captions from a caption file: Click on the video you would like to add them to A new tab set, called Video Tools will appear in the top ribbon Select Insert Captions and then click Insert Captions from the menu that drops down. @SinaBahram - #a11y

Recap – Tips and Tricks Fonts Images and Graphics Tables type, size, color, and meaning Images and Graphics alt text, actual text instead of images of text Tables alt text with main takeaways, headings The Accessibility Checker make sure to run before distributing Making PDFs save as PDF, don’t print to PDF @SinaBahram - #a11y

Recap – Application Specific Microsoft Word Headings Lists PowerPoint Slide titles Reading order Captions/subtitles Audio description @SinaBahram - #a11y

Call to Action Implement the tips in this webinar in your next presentation Read the links on the resources slide for more info Encourage friends and colleagues to make accessible presentations Ask plenty of questions on social media using #a11y as the hashtag @SinaBahram - #a11y

Resources Accessibility Checker for Windows Accessibility Checker for Mac Accessibility Checker Rules Making PowerPoint Slides Accessible Making Word Documents Accessible Making Excel Spreadsheets Accessible Making Outlook Email Accessible Adding Captions/Subtitles in PowerPoint Video Playback Accessibility in PowerPoint Color Contrast Analyzer WebAIM Contrast Checker @SinaBahram - #a11y

Contact Email: Sina@SinaBahram.com Twitter: @SinaBahram Personal Website: www.SinaBahram.com Blog: blog.SinaBahram.com Prime Access Consulting: www.PAC.bz @SinaBahram - #a11y