Accessible University Document Accessibility Samples
This page summarizes the accessibility issues demonstrated in the Word, PDF, and PowerPoint sample files that accompany the Accessible University demo site. With each issue, a solution is suggested as demonstrated in the accessible files.
HTML
This document can be demonstrated using any web browser. Use the browser's developer tools to explore the source code as needed to show the underlying code. HTML is far more accessible than Word or PDF, and sets the bar for the level of accessibility we're striving for, to the extent possible, in other document formats. Noteworthy features of the sample HTML document include:
CSS styles are included.
All styles are defined using Cascading Style Sheet (CSS). Font family is sans-serif and background and foreground colors pass contrast ratios as defined by WCAG.
Image includes alt text.
An image is included in this file and alt text is assigned.
Headings are present with proper levels.
Headings are included in this file, and they form an outline of the content by using the appropriate levels.
Lists are coded properly.
A list is included and uses the proper coding for an unordered list.
Tables included proper markup for headers.
Two tables are included in this file; the first table is simple in its construction with a single table header for the top row. The second table is more complex and includes cells that are merged and span several columns or rows. Both tables include the “scope” attribute that provides proper semantic markup for row or column headers.
Language is properly defined.
This file includes foreign language content. Screen readers support multiple languages and can switch on the fly when announcing content in different languages. The paragraph at the end of the file includes proper language assignment, which will ensure that screen readers will announce the content with proper pronunciation.
Word
These documents should be demonstrated using Microsoft Office 365 desktop client or the most current version of Microsoft Word.
Word - Inaccessible version
No headings.
Avoid using font styling to make text bigger and bold to appear as a heading. Using defined paragraph styles and headings creates the scaffolding that forms an outline of a document and allows a screen reader user to navigate from section to section, and heading to heading.
Expand the Styles Pane then select the checkbox that says, “Show Preview” at the bottom of the pane. This will reveal what styles, if any, are used in the document. Notice only Normal styling is applied.
No alt text for meaningful images.
One image is included in this document, the logo at the top of the page, which does not have alternative text assigned to it. Visual content that is meaningful must have alt text associated with it so all users have access to the content.
Expose the alt text panel to reveal the empty text field. This can also be demonstrated by running the built in Accessibility Checker, this will be flagged as an error.
List is not created using the List feature.
The list in this document was created by inserting symbols for bullet points instead of using the bulleted list tool. This can be revealed when the “Show Preview” checkbox is selected in the Styles pane.
Tables do not have headers defined; table includes merged table cells.
Assistive technology will read a table from left to right starting at the top. If the relationship between the cells is not defined, then the table is not formatted correctly.
Reveal the Table Properties dialog window by selecting the Layout tab from the ribbon, then select the Properties icon. In the Table Properties window, select the Row tab; under Options, be sure the checkboxes labeled “Allow row to break across pages” and “Repeat as header row at the top of each page” are checked.
This document also contains a complex table with merged cells, tables that contain merged or split cells can cause challenges for screen readers. Using a keyboard, place focus in the first table cell, then use the tab key to emulate what it might be like for a screen reader to access the information in the table. Is the reading order logical?
Missing language assignment.
Notice the text at the bottom of the page is in a non-English language. Office flags some of the text with red squiggly lines underneath indicating a spelling error. An English speaking screen reader will announce this content with improper pronunciation. To define the language of the page, go to the Language dialog, accessible from the Review tab in the Ribbon.
Word - Accessible version
Headings are present.
This document uses Paragraph Styles, which provide anchor points for screen readers to navigate by. Expand the Styles pane and select the checkbox that says “Show Preview" at the bottom of the pane to reveal the styles used to author the document. Styles can be modified by highlighting text, then selecting the paragraph style dropdown menu and choosing “Update Heading to Match Selection.”
When using Styles, this provides an outline that is automatically used when initiating the Table of Contents tool in the References tab of Word. For longer documents of 10 pages or more, using styles in combination with Table of Contents provides additional navigation aids that will benefit all users.
Alt text is included for images.
The logo at the top of the document includes alternative text. Expose the alt text panel to display a text field where the user can review the description of the visual content.
Also included on this panel is a button for generating automated alt text, selecting this will initiate Microsoft’s AI for creating alt text. Review results of auto generated alt text for accuracy.
Any images included in a document that do not have significant meaning should be marked as decorative by selecting the checkbox, “Mark as decorative.”
List created using proper tool.
When encountering lists in a Word document, screen readers will announce how many items are included in a list if the proper tool was used to create it. Be sure to use the bulleted list tool to create bulleted lists, the numbered list tool to create numerical lists, and the multi-level list tool to create nested lists. Using the multi-level list tool to create nested lists will allow screen readers to accurately announce the number of list items, and where the user focus is located in the list and subsequent sub lists.
Tables include headers.
Reveal the Table Properties dialog window by selecting the table, then selecting the Table Layout tab and choosing the Properties icon. On the Table Properties window, select the Row tab. Under Options, the checkbox for “Allow row to break across pages” should be unchecked. A good table should not contain a data cell that spans more than one page. Also notice the checkbox for, “Repeat as header row at the top of each page” should be checked. Selecting this option defines the top row of the table as a header row and announces table data in a meaningful way.
Proper language identification.
Notice the text at the bottom of the page is a foreign language. Screen readers support multiple languages and can switch on the fly when announcing content in different languages. For most documents, the default language is English, for all other languages, be sure to set the language attribute from the Review ribbon so that assistive technology announces the content accurately.
These documents should be demonstrated using Adobe Acrobat Pro DC or another application that will allow participants to view the Tags, Reading Order, and Content panels.
PDF - Scanned version
Text is not selectable.
PDF documents that were scanned using a flatbed scanner or captured using a mobile devices camera are usually saved as an image of the document. Try using a mouse to highlight text; notice how the text is not selectable. A screen reader will not be able to access any of the content in this document.
Optical Character Recognition (OCR) will need to be applied to this document to convert the page image to machine readable text.
Tags are missing.
Exposing the tag tree, notice this document does not have tags. By exposing the Content panel and expanding the page information in the panel, notice there is no text present, only images.
PDF - Inaccessible version
Text is selectable.
Text can be highlighted, or selected, using a mouse, indicating screen readers can access the content.
Tags are missing.
Exposing the tag tree, notice this document also does not have tags. Extra: by exposing the Content panel and expanding the page, notice there is text present. Screen readers and assistive technologies will announce this text, but without tags, semantic structure is not available and navigation aids are missing causing barriers to understanding the information.
PDF - Accessible version
Text is selectable.
Text can be highlighted, or selected, using a mouse, indicating screen readers can access the textual content.
Tags are present.
Expose the tag tree, notice this document has tags.
Tags are semantically accurate.
Place focus on the top <Sect> tag, then use the down arrow key on a keyboard to walk down the tag tree. Notice that items highlighted in the tags panel are also highlighted in the document with a magenta rectangle. Tags are similar to HTML coding providing the proper semantic structure, screen readers will announce the text with proper context. Use the right arrow key on the keyboard to expand the tag to reveal the content of the semantic tag.
Images include alternative text.
The logo at the top of the document includes alternative text. From the tag tree, expose the Image content of the <Figure> tag, then expose the Object Properties window. On the Tag tab, reveal the alt text in the center text field. Any images included in a document that do not have significant meaning should be artifacted using the Reading Order panel.
Tables include ID headers.
From the tag tree, expose the first <Table> parent tag, then expose the first <TR> child tag, notice proper <TH> child tags are included for the table header.
The second table is more complex than the first table, requiring header IDs to properly identify column and row headers that span multiple cells. From the tag tree, expose the second <Table> parent tag, then expose the first <TR> child tag and review the Attributes and expand the Attribute Objects to reveal the <<Dictionary>>.
Proper language attribute.
From the tag tree, expose the last <P> tag of the foreign language text. Display the Object Properties window and reveal the correct Language attribute drop down at the bottom of the window.
PowerPoint
These documents should be demonstrated using Microsoft Office 365 desktop client or the most recent version of Microsoft PowerPoint. It is also recommended to demonstrate these documents using the Microsoft Windows operating system.
PowerPoint - Inaccessible version (presentation_NOTaccessible.pptx)
No alt text for meaningful images; non-meaningful images are not marked as decorative.
Meaningful images are included on slides 1 and 2, select the image then expose the alt text panel to reveal no information in the alt text field. Non-meaningful images are included on slide 5, the diagram was created using SmartArt. Some screen readers will announce all of the elements of a SmartArt diagram including text and the colorful background rectangles (announced as diagrams), while other screen readers will announce nothing at all.
It is possible to assign alt text to SmartArt, in which case screen readers will skip announcing the elements of the diagram and will announce the alt text insead. However, screen reader users are not able to navigate alt text, forcing the user to listen to the content from beginning to end.
Uninformative link text.
Slide 2 includes a live link, however this link is not meaningful as it includes the URL.
Screen reader users can call up a list of links included in a document, if the active link text is not meaningful then the user may not be certain where that link will take them.
Reading order of slide content is not accurate.
Slides 2 and 3 include content that is out of the expected reading order. Reveal the Reading Order panel (only available on winOS), select the Review tab, then select the Check Accessibility drop down and choose Reading Order Pane. Objects from the slide will appear in order from top to bottom. Placing focus at the top of the Reading Order pane and using the down arrow key on the keyboard to walk down the pane, notice that items highlighted in the Reading Order pane are also highlighted in the slide making it easy to identify slide contents.
To check reading order on macOS, users must use the Selection Pane. Items in the Selection Pane are arranged in reverse order.
Language needs to be assigned.
Slide 3 contains content in a foreign language. Office flags some of the text with red squiggly lines underneath indicating a spelling error. An English speaking screen reader will announce this text with improper pronunciation.
Tables inserted into slides can not have table headers assigned.
Slide 4 includes a table. Select the table, then select the Table Layout Tab from the Ribbon and notice that the Properties icon is not available.
Since this is a simple table with a single top header row, this table may not pose barriers to users of Assistive Technology. This can be confirmed by exposing the Table Design tab and reviewing the check box for Header Row is selected.
SmartArt diagrams pose barriers
Slide 5 includes a SmartArt diagram. These are challenging for screen readers to interpret and are not flagged in an Accessibility Report when using the built-in Accessibility Checker for Office.
PowerPoint - Accessible version (presentation_accessible.pptx)
Alt text is included for meaningful images, non-meaningful images are marked as decorative.
Meaningful images are included on slides 1 and 2; select an image then expose the alt text panel to reveal the content in the text field. Multiple images on slide 2 are grouped; each image is marked as decorative while the group has alt text assigned.
Informative link text.
Slide 2 includes a live link with meaningful text, indicating to screen reader users where that link may take them. This slide also includes an inactive link with the URL to share when presenting this information live, allowing participants to visit the link from their own devices in real time.
Reading order is accurate.
All slides pass logical reading order. This can be reviewed in the Reading Order Pane in winOS (reading order is top to bottom), or the Selection Pane in macOS (reading order is reverse, bottom to top).
Language is properly applied to foreign language text.
Slide 3 contains content in a foreign language. Language assignment appears on the status bar in the lower left corner of the window; select to change.
Using proper slide template.
Slide 5 uses a modified slide template that formats text in a similar way to using a SmartArt diagram but is completely accessible. Additional content added to the slide is presented in proper reading order and colorful background rectangles are marked as decorative in the Slide Master.