4 Easy Ways to Optimize Your Documents for Screen Reader Users

Web accessibility best practices icons: eye, hand, ear, brain.

Headings

When creating a document, it is important to consider the digital organization and how a screen reader will navigate the content in addition to just the visual attractiveness. It is vital to use headings properly. When writing a blog post on WordPress Block Editor or an article with multiple sections and subsections in Microsoft Word, rather than changing the font or color of a text to make it look like one, make it an actual heading by changing the style form paragraph to heading. You can change the font from steel blue Calibri light afterwards, but a screen reader will only identify a line as such if the style has been changed to reflect that. It will also announce the level number to help a user understand the hierarchical structure of your content, so use leveling carefully. A screen reader user expects a logical procession of heading levels with one being the overall main heading, two being a subheading within that main category, 3 being a subsection of the subsection, and so on. Even if heading four looks prettier than level 2, if you haven’t already used heading levels two and three, stick with two and change the appearance through the font rather than the style group box. 

Tables

Pay attention to how you are using tables. In Word, make sure to use the insert table tool in the ribbon rather than inserting an image of a table from elsewhere. Screen readers can navigate these tables just fine but those imported from elsewhere often do not contain the correct markup for a screen reader to announce row and column names/numbers etc. Additionally, if possible, keep your tables simple and to the point. Complex tables with cells of different length that do not line up in a uniform way are very hard for screen readers to understand. Afterall, these kinds of diagrams rely on spatial information which cannot be conveyed simply by hearing the column and row numbers unless you have incredible powers of mental imagination to construct complex mental pictures merely from strings of spoken data. 

Links

Follow web accessibility best practices and take a second to ensure your hyperlinks convey genuine meaning. A screen reader can pull up a list of all the links on a webpage or document in word and few things are more frustrating than to pull up a list of links all titled “click here” or long strings of “http://www…”. Instead of listing a website and then pasting in the full URL underneath, take the time to highlight the text of the website name, activate the apps key or hit shift f10 to bring up the context menu and select hyperlink. Paste the URL into the form field and tab to OK. The text you selected will then link to the site and the screen reader will know clearly where that link will take them because it has a meaningful name to it.

Question: If you are talking about your favorite fast food place and dropping a link to their menu, which option is best?

  1. Click here to see their amazing chicken options! (Please no!)
  2. See the menu at https://www.chick-fil-a.com/menu?gclid=EAIaIQobChMI45LYiorK_AIVUeTICh3v8QAXEAAYASAAEgKB9vD_BwE (Seriously?)
  3. Browse the Chick-fil-a menu to prepare for deliciousness! (Yes! This is how to link correctly!)

Answer: Go with 3 every time! Meaningful, clear, concise, quick, easy peasy.

Alt Text

Don’t forget to add alternative text to all your images and graphical diagrams. Don’t just give a general title. Pick one that conveys the same meaning that looking at the image would give. Use two or three sentences if necessary to describe what the graphic is in a way that the screen reader user can understand the purpose of its inclusion. For example, rather than saying “a person stands on a hill”, try “a smiling child stands on a hill framed in a rainbow holding a welcome sign overhead”. Many images convey emotions and alt text can do the same. If the purpose is informational, ensure the same information is included. For example, if a graphic containing a quote is shown, rather than saying “blue background with a book quote,” try “sign shows the phrase, “Those Who Wander are Not Lost” by J.R.R Tolkien”. 

Concept map diagram: Best practices and techniques in center with arrows going outward around the outside reading: captions and transcripts, ARIA, form labels, keyboard accessibility, text size and language content, internationalization and localization, responsiveness, web performance, color contrast, semantic HTML markup, text alternative images.
Web A11y Best Practices for Digital Accessibility

Read More: