CINXE.COM

WebAIM: Microsoft Excel - Optimizing Spreadsheet Accessibility

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WebAIM: Microsoft Excel - Optimizing Spreadsheet 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>Microsoft Excel<br><span class="subtitle">Optimizing Spreadsheet Accessibility</span></h1> <p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> &gt; <a href="/articles/">Articles</a> &gt; Microsoft Excel - Optimizing Spreadsheet Accessibility</p> <nav> <h2 id="contents">Article Contents</h2> <ol> <li><a href="#intro">Introduction</a></li> <li><a href="#space">Visual Space Around Text</a></li> <li><a href="#columns">Columns &amp; Rows</a> <ol> <li><a href="#freezing">Freezing Columns & Rows</a></li> <li><a href="#hiding">Hiding Unused Columns & Rows</a></li> <li><a href="#eliminating">Eliminating Empty Rows</a></li> </ol> </li> <li><a href="#title">Adding a Workbook Title</a></li> </ol> </nav> <div class="important"> <div class="title">Document Accessibility Online Course</div> <p>The techniques covered in this article are a subset of the Excel accessibility principles and processes taught in WebAIM's <a href="https://webaim.org/training/docs/#mod5">online course on document accessibility</a>. <!-- <ul> <li>Section 1: Navigating in Excel</li> <li>Section 2: Sheets &amp; Tables</li> <li>Section 3: Images &amp; Links</li> <li>Section 4: Charts</li> <li><em>Section 5: Optimizing Workbooks</em></li> <li>Section 6: Evaluating Accessibility in Excel</li> </ul> --> </p> </div> <div class="section" id="intro"> <h2>Introduction</h2> <p>This article will review some high-level techniques for optimizing Excel workbooks. It is important to note that none of these techniques are specifically required to meet current web accessibility guidelines. In the same regard, whether or not a technique is appropriate for a workbook must be determined on a case-by-case basis. Use your best judgement based on the information you have about a workbook's function and intended audience. If you would like to follow along as the techniques are described, please download the <a href="media/Optimizing-Workbooks.xlsx">Optimizing Workbooks (.xlsx)</a> example file.</p> </div> <div class="section" id="space"> <h2>Visual Space Around Text</h2> <p>In the context of electronic documents legibility may defined as "How easy text is to see and comprehend based on its visual presentation”. A common legibility issue in Excel workbooks is minimal spacing around text.</p> <p>When the example file is opened, the "Visual Spacing" sheet should be displayed by default. This sheet shows a table with the default spacing for the columns and rows:<p> <img src="media/default.png" alt=""> <p>To see the visual impact of increasing the column widths and row heights, switch to the "Freeze Top Row" sheet in the example file:</p> <img src="media/increased.png" class="border" alt=""> <p>Some users will find this visual presentation easier to process. To practice these techniques, switch back to the "Visual Spacing" sheet.</p> <h3>To increase the width of columns:</h3> <ol> <li>Place focus on the populated columns by selecting their column labels.</li> <img src="media/selectColLabel.png" width="80%" alt=""> <li>Right-click on any selected column and select "Column Width" from the drop-down menu.</li> <img src="media/colLabelRC.png" width="20%" alt="Screenshot of 'Column Width' highlighted on the right-click menu."> <li>Increase the numerical value in the "Column Width" dialog box [the column width has been changed from 10 points to 20 points in the example].</li> <li>Click "OK".</li> <img src="media/increaseColWidthDialog.png" width="25%" alt="Screenshot of the 'Column width' field labeled with the number 3, and the 'OK' button labeled number 4, on the 'Columns Width' dialog."> </ol> <h3>To increase the height of rows:</h3> <ol> <li>Select the whole sheet with the keyboard shortcut <span class="keycap">Control</span> + <span class="keycap">A</span>.</li> <li>Right-click on any row label and select "Row Height" from the drop-down menu.</li> <img src="media/rowLabelRC.png" width="20%" alt="Screenshot of 'Row Height' highlighted on the right-click menu."> <li>Increase the numerical value in the "Row Height" dialog box [the row height has been changed from 15 points to 25 points in the example]. </li> <li>Click "OK".</li> <img src="media/rowHeightDialog.png" width="25%" alt="Screenshot of the 'Row Height' field labeled with the number 3, and the 'OK' button labeled with the number 4, on the 'Row Height' dialog."> </ol> </div> <div class="section"> <h2 id="columns">Columns & Rows</h2> <p>With some spreadsheets, managing how columns and rows function, and their visibility, will provide benefits for some users. These techniques are applied at the sheet level, so the columns and rows in each sheet of a workbook must be evaluated separately.</p> <h3 id="freezing">Freezing Columns & Rows</h3> <p>When a sheet has populated columns and/or rows that extend beyond the visible area, a user must scroll with the keyboard or mouse to see all of the sheet's contents. In this circumstance we recommend that you use one or more of Excel's "freeze" tools.</p> <p>Switch to the <strong>View</strong> tab on the Ribbon. In the fourth section from the left there are three "freeze" tools: <ol> <li>Freeze Top Row</li> <li>Freeze First Column</li> <li>Freeze Panes</li> </ol> <img src="media/whereIBE.png" width="80%" alt="Screenshot of the 'Freeze Panes' menu, with the 'Freeze Top Row' option labeled with the number 1, the 'Freeze First Column' option labeled with the number 2, and the 'Freeze Panes' option labeled with the number 3."> <h4>Freeze Top Row</h4> <p>The "Freeze Top Row" sheet on the example file has a table with column headers, and rows of information that extend beyond the visible area: </p> <img src="media/freezeTopRow.png" width="100%" alt=""> <p>The column headers are labeled with generic text that corresponds to Excel's built-in labels: Column A, Column B, Column C, etc.&mdash;</p> <img src="media/genericColumns.png" width="100%" alt=""> <p>Starting at the left, the data cells are labeled: A2 data, B2 data, C2 data, etc.</p> <img src="media/genericRowLabels.png" width="100%" alt=""> <p>The same convention is used in the other sheets in this workbook.</p> <p>When a user scrolls down to see the all the rows in the table, the column headers are no longer visible:</p> <img src="media/freezeTopRowColumnNotVis.png" width="100%" alt=""> <p>To prevent this, click "Freeze Top Row" on the <strong>View</strong> tab on the Ribbon:</p> <img src="media/freezeTopRowSelected.png" width="50%" alt="Screenshot of 'Freeze Top Row' option highlighted."> <p>Now when a users scrolls down, the column headers remain visible and the rows appear to slide under them:</p> <img src="media/freezeTopColVis.png" width="80%" alt=""> <h4>Freeze First Column</h4> <p>The "Freeze First Column" sheet has a table with row headers, and columns of information that extend beyond the visible area: </p> <img src="media/firstColumn.png" width="100%" alt=""> <p>When a user scrolls across to see more columns, the row headers are moved out of the visible area:</p> <img src="media/firstColNotVis.png" width="100%" alt=""> <p>Return to the <strong>View</strong> tab and click "Freeze First Column":</p> <img src="media/firstColSelected.png" width="50%" alt="Screenshot of 'Freeze First Column' option highlighted."> <p>Now the row headers remain visible as a user scrolls right:</p> <img src="media/firstColVis.png" width="100%" alt=""> <h4>Freeze Panes</h4> <p>There may be times when you want to freeze more than one column and/or row at a time. Click on the "Freeze Panes" sheet. This sheet has descriptive text&mdash;"Freeze Panes"&mdash;in the upper-left corner, which in this case is cell B1, in the first row of the sheet. The column headers are in cells B2 to Z2, in the second row of the sheet. In this example we recommend freezing the first two rows:</p> <img src="media/freePanes2Rows.png" width="100%" alt="Screenshot of the 'Freeze Panes' sheet with the first two rows highlighted."> <p>The first column of this sheet has been left empty to provide some visual spacing for the table. There are row headers in cells B3 to B10 in the second column of the sheet, so we would recommend also freezing the first two columns:</p> <img src="media/freeze2Cols.png" width="100%" alt="Screenshot of the 'Freeze Panes' sheet with the first two columns highlighted starting at row 3."> <h5>To freeze more than one column and/or row:</h5> <ol> <li>Place focus on the first data cell (in the example file, the first data cell is located at C3 and has the text "C3 data").</li> <img src="media/freezePanesC3.png" width="80%" alt="Screenshot of the 'Freeze Panes' sheet with the C# cell highlighted."> <li>Click "Freeze Panes" on the <strong>View</strong> tab.</li> <img src="media/freePanesSelected.png" width="50%" alt="Screenshot of 'Freeze Panes' option highlighted."> </ol> <p>Now, when a user scrolls vertically or horizontally, the two columns and rows of interest remain static.</p> <h3 id="hiding">Hiding Unused Columns & Rows</h3> <p>By default, a new Sheet has more than sixteen thousand blank columns and over a million blank rows. The visual information created by the borders of the cells in unused columns and rows may be distracting for some users. This would include users with some cognitive or learning disabilities, which is the largest category of disability.</p> <p>Open the "Unused Columns & Rows" sheet. Compare the difference between this table surrounded by empty cells&mdash;</p> <img src="media/unusedColsRows.png" width="100%" alt=""> <p>versus that same table in the "Hidden Columns & Rows" sheet where the unused columns and rows have been hidden&mdash;</p> <img src="media/hiddenColsRows.png" width="100%" alt=""> <p>If you will not be continually adding information to a spreadsheet, consider hiding unused columns or rows as part of the optimization process. Return to the "Unused Columns & Rows" sheet.</p> <h4>To hide multiple unused columns:</h4> <ol> <li>Select the first column to hide by clicking on it.</li> <img src="media/unusedColsFirst.png" width="100%" alt=""> <li>Select the remaining default columns with a keyboard shortcut: <span class="keycap">Shift</span> + <span class="keycap">Control</span> + right arrow.</li> <img src="media/unusedColsSelected.png" width="100%" alt=""> <li>Right-click on any highlighted column label and select "Hide" from the menu.</li> <img src="media/unusedColsRC.png" width="25%" alt="Screenshot of the column label right-click menu with the 'Hide' option highlighted."> </ol> <h4>To hide multiple unused rows:</h4> <ol> <li>Select the first row to hide by clicking on it.</li> <img src="media/unusedRowsFirst.png" width="100%" alt=""> <li>Select the remaining default rows with a keyboard shortcut: <span class="keycap">Shift</span> + <span class="keycap">Control</span> + down arrow.</li> <img src="media/unusedRowsSelected.png" width="100%" alt=""> <li>Right-click on any highlighted row label and select "Hide" from the menu.</li> <img src="media/unusedRowsRC.png" width="25%" alt="Screenshot of the row label right-click menu with the 'Hide' option highlighted."> </ol> <p>If I need to unhide all rows or columns, I'll select the entire sheet by clicking where the columns and row labels meet in the top-left corner right-click&mdash;</p> <img src="media/selectAllRowsCorner.png" width="100%" alt="Screenshot of the top-left corner highlighted in the spreadsheet work area."> <p>either the columns or the rows, and select "Unhide":</p> <img src="media/unhideAll.png" class="border" width="25%" alt="Screenshot with 'Unhide' highlighted on the right-click menu."> <h3 id="eliminating">Eliminating Empty Rows</h3> <p>Another potential issue is the presence of empty rows between elements on the same sheet. Click on the "Empty Rows" tab on the example file. On this sheet, there are two tables with generic labels&mdash;"Table 1" & "Table 2". The unused columns and the unused rows at the bottom have already been hidden. But there are six empty rows between the last row on Table 1, and the label for Table 2:</p> <img src="media/emptyRowsHiglighted.png" width="100%" alt="Screenshot of the Empty Rows sheet with empty rows 8 - 13 highlighted."> <p>A screen reading software user encountering a series of empty rows may mistakenly assume that there is no more content on this sheet. We recommend selecting and deleting all but one row between elements on the same sheet:</p> <img src="media/deleteRowsRC.png" width="25%" alt="Screenshot of the row label right-click menu with the 'Delete' option highlighted."> <p>Leaving one row between elements as a way to provide some visual space is common and appropriate practice.</p> </div> <div class="section" id="title"> <h2>Adding a Workbook Title</h2> <p>Adding a <em>Title</em> provides metadata describing the workbook's contents. This information is required if the workbook will be exported to PDF.</p> <h3>To add a Title on Windows:</h3> <ol> <li>Click the <strong>File</strong> tab on the Ribbon.</li> <li>Select "Info" from the sidebar.</li> <img src="media/selectInfo.png" width="30%" alt="Screenshot of 'Info' highlighted on the File sidebar on Windows."> <li>Add the Title text in the "Title" field in the Properties section (for this example I'll enter the text "Optimizing Workbooks examples).</li> <img src="media/titleProperties.png" width="50%" alt="Screenshot of the Title field highlighted in the Properties section on Mac."> </ol> <h3>To add a Title on Mac:</h3> <ol> <li>Click on <strong>File</strong> from the application menu, and select "Properties".</li> <img src="media/macExcelFileProperties.png" width="30%" alt="Screenshot of 'Properties' highlighted on the File menu."> <li>Click on the "Summary" tab of the document properties dialog.</li> <li>Add in the Title text.</li> <li>Click "OK".</li> <img src="media/macPropertiesSummaryTitleicon.png" width="60%" alt="Screenshot of the 'Summary' tab labeled number 2, the 'Title' field labeled with number 3, and the 'OK' button labeled number 4, on the 'Properties' dialog."> </ol> </div> </article> <!-- --> <aside id="articlemeta"> <div id="updated">Last updated: <time datetime="2021-11-29">Nov 29, 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/powerpoint/">PowerPoint Accessibility</a></li> <li><a href="/techniques/acrobat/">PDF Accessibility</a></li> <li><a href="/techniques/ooo/">OpenOffice.org Writer</a></li> </ul> </div> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">&copy;2025 WebAIM</h2> <p id="contact"> 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/salary-survey-results/">Global Digital Accessibility Salary Survey Results</a></li><li><a href="/blog/join-the-discussion/">Join the Discussion—From Your Inbox</a></li><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></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