CINXE.COM

WebAIM: PowerPoint Accessibility

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: PowerPoint Accessibility</title> <link rel="shortcut icon" href="/media/favicon.ico"> <link rel="home" href="/"> <link rel="search" href="/search/"> <link rel="alternate" href="https://webaim.org/blog/feed" type="application/rss+xml" title="WebAIM Blog"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y41PF8WV9X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Y41PF8WV9X'); </script> <link href="/styles/main.css" rel="stylesheet" type="text/css"> <link href="/styles/print.css" rel="stylesheet" type="text/css" media="print"> <script src="/media/scripts/jquery.js"></script> <script src="/media/scripts/main.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kameron:400,700' rel='stylesheet' type='text/css'> <link href="/styles/documents.css?ver=2" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="headcontainer" class="clearfix" style="background-image: url(/media/banners/articles.jpg)"> <header> <div id="skiptocontent"><a href="#maincontent">skip to main content</a></div> <h2><a href="/"><img src="/media/logo.png" width="315" height="83" alt="WebAIM - Web Accessibility In Mind"></a></h2> <nav> <h2 class="hidden">Main Navigation</h2> <ul> <li><a href="/services/">Services</a></li> <li class="current"><a href="/articles/">Articles</a></li> <li><a href="/resources/">Resources</a></li> <li><a href="/projects/">Projects</a></li> <li><a href="/community/">Community</a></li> </ul> </nav> <div id="search"> <form method="get" role="search" action="/search/" id="sitesearch"> <p class="search"><span><label for="q">Search:</label> <input type="text" name="q" id="q"><input type="image" src="/media/template/search.svg" alt="Submit Search"></span></p> </form> <p class="intro"><a href="/intro">Introduction to Web Accessibility</a></p> <p class="training"><a href="/services/training">WebAIM Training</a></p> </div> </header> </div> <main id="maincontainer" class="clearfix"> <article id="maincontent"> <h1>PowerPoint Accessibility</h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> &gt; <a href="/articles/">Articles</a> &gt; PowerPoint Accessibility</p> <nav role="navigation"> <h2>Article Contents</h2> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#templates">Templates and Themes</a></li> <li><a href="#layouts">Slide Layouts</a></li> <li><a href="#order">Slide Reading Order</a></li> <li><a href="#alt">Alternative Text for Images</a></li> <li><a href="#tables">Tables</a></li> <li><a href="#links">Links</a></li> <li><a href="#check">Check Accessibility</a></li> <li><a href="#other">Other Accessibility Principles</a></li> <li><a href="#pdf">Convert PowerPoint to PDF</a></li> </ol> </nav> <div class="section" id="intro"> <h2>Introduction</h2> <p>Microsoft PowerPoint is one of the most popular tools for creating slide show presentations. It is often used to organize thoughts for a meeting or lesson, to present key points in a live presentation, and even to create handouts. This article outlines how to can make PowerPoint files more accessible on the web.</p> <div class="note" id="note1"> <div class="title">Note</div> <p>Unless noted, the steps outlined in this article apply to Office 2016 and 365, Windows and Mac. Most screenshots are from the PowerPoint 2016 for Windows.</p> </div> </div> <div class="section" id="templates"> <h2>Templates and Themes</h2> <p>The first step in creating a PowerPoint presentation is choosing a slide theme or template. The <span class="menuchoice">Design</span> tab contains many built-in <span class="menuchoice">Themes</span> and color <span class="menuchoice">Variants</span> that can be used to change the look of a presentation, as well as the ability to create custom themes</p> <p><img src="media/themes.jpg" width="616" height="219" alt=""/></p> <p>Some of these templates have low contrast between slide text and the slide background, and a few may also have busy backgrounds that can make text even more difficult to read. Be sure to choose a theme with good contrast and with simple backgrounds. If the presentation will be viewed on a projector, the contrast and readability may need to be even more pronounced.</p> <p>In addition to built-in and custom themes, there are thousands of templates available for download. You can search for a template by selecting <span class="menuchoice">File &gt; New,</span> and then describing the template in the <span class="menuchoice">Search</span> field. Add the word &quot;accessible&quot; to the search for templates that are tagged as &quot;accessible&quot; by the creator. While this doesn't guarantee accessibility, it increases the likelihood of finding a good template. If in doubt, Microsoft has identified several <a href="https://templates.office.com/en-us/Accessible-Template-Sampler-TM16401472?ui=en-US&rs=en-US&ad=US">templates that are optimized for accessibility</a>.</p> </div> <div class="section" id="layouts"> <h2>Slide Layouts</h2> <p>The most important part of PowerPoint accessibility is the use of slide &quot;layouts.&quot; Used correctly, these will ensure information on the slides have the correct heading structure and reading order.</p> <p>Most slide layouts include a slide &quot;title,&quot; usually at the top of the slide. They also typically contain one or more &quot;placeholder&quot; areas where you add content like lists, images, and tables to each slide. The title will be presented as a heading to screen reader users, and will be the first thing read on each slide. If each slide has a descriptive title, this will make it much easier for screen reader users to read and navigate the presentation.</p> <div class="section" id="new"> <h3>Create a new slide</h3> <p>Although you can change the layout of a slide at any time, it is usually easiest to choose your layout when creating a new slide. You can add a new slide from the <span class="menuchoice">Home</span> or <span class="menuchoice">Insert</span> tab. If you choose the<span class="menuchoice"> New Slide icon</span>, PowerPoint will usually create a new slide with the same layout as the currently-selected slide. </p> <p>You can also select the slide layout while creating a new slide. In Windows, select either the <span class="menuchoice">small arrow</span> or the text &quot;<span class="menuchoice">New Slide</span>&quot; right below the icon, and a menu will drop down with all the available slide layouts. Select one of these options to create a new slide with this layout.</p> <p><img src="media/new-menu.jpg" width="555" height="388" alt=""/></p> <p>In Mac, select the <span class="menuchoice">small arrow</span> next to the <span class="menuchoice">New Slide icon</span> to show a similar dropdown menu.</p> <p><img src="media/mac-new.jpg" width="501" height="330" alt=""/></p> </div> <div class="section" id="change"> <h3>Change slide layout</h3> <p>To change the layout of an existing slide:</p> <ol> <li>Select the slide you would like to change.</li> <li>On the <span class="menuchoice">Home</span> tab, select <span class="menuchoice">Layout</span>.</li> <li>Choose the desired layout from the dropdown.</li> </ol> <p><img src="media/layout-menu.jpg" width="475" height="218" alt=""/></p> <p>This new layout will be applied to the selected slide and PowerPoint will try to move the slide contents to the correct place in the new layout. If you're moving from one pre-built layout to another, this usually works fairly well. But if you apply a layout to a slide that wasn't structured correctly in the first place (e.g., pictures and text boxes added to a blank slide), it may take some work like cutting, pasting, and deleting unnecessary boxes to apply the correct layout.</p> </div> <div class="section" id="master"> <h3>Slide Master</h3> <p>It is possible to make changes to all slides within a presentation, like changing the text size of all slide titles. You can also make changes to a specific slide layout, or even create new custom layouts. All of these changes are possible in the Slide Master view. This view allows you to create accessible layouts that meet the needs of the presentation while maintaining a proper heading structure and reading order.</p> <p>To open Slide Master, select the <span class="menuchoice">View</span> tab &gt; <span class="menuchoice">Slide Master</span>.</p> <p><img src="media/slide-master.jpg" width="614" height="185" alt=""/></p> <p>The different layouts that are available in the presentation will be displayed in the left-hand sidebar. The first slide in this sidebar is the <span class="menuchoice">Master Layout</span>. Changes made to the Master Layout will usually be applied to every slide in the presentation. Below this Master Layout are the different individual layouts. Changes made to one of these will be applied to every slide that uses this layout.</p> <p><img src="media/master-layout.jpg" width="332" height="472" alt=""/></p> <p>To create a new slide layout, select <span class="menuchoice">Insert Layout</span>, and then <span class="menuchoice">Rename</span> to give the new layout a descriptive name. You can then insert placeholder objects, change the size and position of objects on the slide, etc. </p> <p><img src="media/slide-master-options.jpg" width="485" height="175" alt=""/></p> <p>Once all the changes are complete, select <span class="menuchoice">Close Master View </span>on Windows or <span class="menuchoice">Close Master</span> on Mac. Changes made within this view will automatically be applied throughout the presentation.</p> </div> </div> <div class="section" id="order"> <h2>Slide Reading Order</h2> <p>Although it is best to use slide layouts when possible, there may be times when you need to add content to a slide when it would be impractical to create a new slide layout. By default, a screen reader will read the slide title first, followed by other content in elements defined in the slide layout. Then it will read any additional content on the side in the order it was added to the slide. If you add content with this principle in mind, it should be presented to screen reader users in a logical order.</p> <p>You can check or change this reading order by selecting <span class="menuchoice">Home &gt; Arrange &gt; Selection Pane</span>. The Selection Pane will appear in the right-hand sidebar.</p> <p><img src="media/selection-pane.jpg" width="314" height="239" alt=""/></p> <p>The pane will show every object on the slide. Highlighting an object in the pane will also highlight it in the slide. The reading order for the elements in this page is <em>bottom to top</em>. At first this may seem illogical, but it helps to think of these objects as layers on a slide. The first object on the slide will be read first. If another object is added to the page on top of the this first object, it will be read next by a screen reader (and will also cover the first object visually). To reorder an item, simply <span class="menuchoice">click and drag</span>. PowerPoint for Windows also has <span class="menuchoice">up/down arrow buttons</span> that can be used to reorder items.</p> <div class="note" id="note2"> <div class="title">Note</div> <p>The Arrange dropdown menus also includes options to reorder a single object. This will change the visual position on the page as well as the reading order.</p> <ul> <li><span class="menuchoice">Bring to Front</span> moves an item to the top layer, meaning it will be read <em>last</em> by a screen reader. <li><span class="menuchoice">Send to Back</span> moves an item to the bottom layer. It will be read <em>first</em> by a screen reader. <li><span class="menuchoice">Bring Forward</span> moves an item up one layer, or <em>later</em> in the reading order. <li><span class="menuchoice">Send Backward</span> moves an item down one layer, or <em>earlier</em> in the reading order. </ul> <p>If you use these options, be sure to check the Selection Pane to ensure the reading order makes sense.</p> </div> <p>To the right of each item is an icon that looks like an eye (<img src="media/eye.jpg" width="24" height="17" alt="icon screenshot"/>). Clicking on this icon will hide the object visually in the slide, but it will still be read by a screen reader.</p> </div> <div class="section" id="alt"> <h2>Alternative Text for Images</h2> <p>PowerPoint presentations usually include images, and these images need equivalent <a href="/techniques/alttext/">alternative text</a>. </p> <div class="section" id="alt365"> <h3>PowerPoint 365 and 2019</h3> <p>The process to add alternative text is straightforward in PowerPoint 365 and 2019: </p> <p><span class="menuchoice">Right-click</span> on the image and select <span class="menuchoice">Edit Alt text</span>, then enter appropriate alternative text in the field that appears in the <span class="menuchoice">Alt Text</span> sidebar.</p> <p>If the image is decorative, leave the field blank and check <span class="menuchoice">Mark as decorative</span>.</p> <div class="important"> <div class="title">Important</div> <p><strong>Do not</strong> select the &quot;Generate a description for me&quot; button. The quality of the automatically-generated descriptions is usually very poor, and a description of an image is often not the same as alternative text.</p> </div> <p><img src="media/alt-365.png" width="304" height="344" alt=""></p> </div> <div class="section" id="alt2016"> <h3>PowerPoint 2016</h3> <p>To add alternative text to an image in PowerPoint 2016:</p> <ol> <li><span class="menuchoice">Right-click</span> on the image and choose <span class="menuchoice">Format Picture</span>.</li> <li>In the Format Picture sidebar, Select the <span class="menuchoice">Size &amp; Properties</span> icon and choose <span class="menuchoice">Alt Text</span>.</li> <li>Enter appropriate alternative text in the <span class="menuchoice">Description</span> field only (not the Title field).</li> </ol> <p><img src="media/alt-description.jpg" width="304" height="465" alt=""/></p> <div class="important"> <div class="title">Important</div> <p>Unless it is part of the slide background, there is no way to hide a decorative image in PowerPoint 2016 or older. If the presentation is saved to a PDF, <a href="/techniques/acrobat/acrobat#artifacts">decorative images can be hidden in Acrobat Professional</a>.</p> </div> </div> </div> <div class="section" id="tables"> <h2>Tables</h2> <p>In HTML, there are ways to identify row and column headers in a <a href="/techniques/tables/data">data table</a> that make the contents of the table much more accessible to screen reader users. PowerPoint allows you to identify a single row of column headers and a single column of row headers. To identify the headers in a table:</p> <ol> <li>Click inside the table. The <span class="menuchoice">Table Tools</span> options should become visible, and the <span class="menuchoice">Design</span> tab (called <span class="menuchoice">Table Design</span> on Mac) should be open .</li> <li>If the top row of the table contains headers for each column (most tables do), check the make sure the <span class="menuchoice">Header Row</span> checkbox is checked.</li> <li>If the first column of the table contains headers for each row, check the <span class="menuchoice">First Column</span> checkbox.</li> </ol> <p><img src="media/table-checkbox.jpg" width="584" height="235" alt=""/></p> <p>In the <span class="menuchoice">Table Styles</span> section, select a style where the table headers are clearly identified visually. Make sure the style has good contrast.<br> <img src="media/table-styles.jpg" width="647" height="235" alt=""/></p> <p>Most screen readers will not identify table headers in PowerPoint, but we still recommend going through this process. It is important to identify headers visually, and support for table headers in Microsoft Office is improving constantly. Plus, these headers will be identified when saving to PDF in the most up-to-date versions of PowerPoint.</p> </div> <div class="section" id="links"> <h2>Links</h2> <p>PowerPoint automatically creates a link when a user pastes a full URL onto a slide and presses Enter or Space. Raw URLs may not make sense to screen reader users or others, so make the link text descriptive. </p> <p id="docs-internal-guid-7a4a7d7c-fc6e-f802-b866-6ceef84d7ec5">To change the link text <span class="menuchoice">right-click</span> the link and select <span class="menuchoice">Edit Hyperlink</span>. On Mac, <span class="menuchoice">right-click</span> the link and select <span class="menuchoice">Hyperlink &gt; Edit Hyperlink</span>. A dialog will appear. Click in the <span class="menuchoice">Text to Display</span> field at the top of the dialog and enter descriptive link text. </p> <p><img src="media/link.jpg" width="547" height="299" alt="Screenshot of the Edit Hyperlink dialog with the Text to display field highlighted"/></p> <div class="note" id="note3"> <div class="title">Note</div> <p>If you are creating a presentation that is intended to be displayed both electronically and in print, you may want to include the URL and a description in the link text. For example, &quot;WebAIM Introduction to Web Accessibility (webaim.org/intro).&quot;</p> </div> </div> <div class="section" id="check"> <h2>Check Accessibility</h2> <p>PowerPoint includes a tool that will identify many common accessibility issues. The accessibility checker is basically the same in Windows and Mac, but the steps to start the check are different.</p> <p>To run the accessibility checker in Windows, select <span class="menuchoice">File &gt; Info</span>. Select the <span class="menuchoice">Check for Issues</span> button and choose <span class="menuchoice">Check Accessibility</span>.</p> <p><img src="media/check-windows.jpg" width="419" height="435" alt=""/></p> <p>To start the accessibility checker in Mac, select the <span class="menuchoice">Review</span> tab, then choose <span class="menuchoice">Check Accessibility</span>.</p> <p><img src="media/check-mac.png" width="450" height="130" alt=""/></p> <p>In Windows and Mac, the <span class="menuchoice">Accessibility Checker</span> sidebar will appear to the right. The checker presents accessibility errors (e.g., images with no alternative text), warnings (e.g., unclear link text) and tips (e.g., check slide reading order for slides with custom content). Selecting an item in the report will highlight the issue within the slide. Information about the issue, and instructions on how to repair it, will also appear at the bottom of the sidebar.</p> <p><img src="media/accessibility-checker.jpg" width="488" height="582" alt=""/></p> <p>When the issue is addressed, it will disappear from the report automatically.</p> </div> <div class="section" id="other"> <h2>Other Accessibility Principles</h2> <ul> <li>Make sure text is not too small, especially if the presentation will be viewed on a projector.</li> <li>Do not use color as the only way to convey information.</li> <li>Transitions and animations should be simple.</li> <li>Complex or automatic transitions and animations can be distracting.</li> <li>Use clear and simple language. If you have embedded video, ensure the video is captioned.</li> <li>If you have embedded audio, include a transcript.</li> </ul> </div> <div class="section" id="pdf"> <h2>Convert PowerPoint to PDF</h2> <p>PowerPoint is effective for face-to-face presentations, but it is usually not the best format for content on the web. The file can be large, and users must either have Microsoft Office or a plugin in order to view the file. PDF is often a better format to present PowerPoint presentations electronically. The file size is relatively small, distracting slide transitions are usually removed, and everyone has a PDF reader.</p> <p>All of the accessibility features outlined in this article will be retained in a PDF file, assuming it is created correctly. (See our article on <a href="/techniques/acrobat/converting#word">Creating PDF files from Office documents</a>). If your presentation has tables or decorative images, and you know how to add accessibility information in Adobe Acrobat, your PDF file could even be made more accessible than the original PowerPoint file.</p> </div> </article> <!-- --> <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2021-02-26">Feb 26, 2021</time></div> <div id="related"> <h2>Related Resources</h2> <ul> <li><a href="/training/docs/">Accessible Documents Online Training</a></li> <li><a href="/techniques/word/">Microsoft Word Accessibility</a></li> <li><a href="/resources/evaloffice">Word and PowerPoint Accessibility Evaluation Guide</a></li> <li><a href="/techniques/acrobat/">PDF Accessibility</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">&copy;2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li><li><a href="/blog/25-tips/">25 Accessibility Tips to Celebrate 25 Years</a></li><li><a href="/blog/celebrating-webaims-25th-anniversary/">Celebrating WebAIM's 25th Anniversary</a></li><li><a href="/blog/introducing-ncademi/">Introducing NCADEMI: The National Center on Accessible Digital Educational Materials & Instruction聽</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright &amp; Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10