Making Written Words Accessible

These tips can help to make text more accessible to screen readers, magnifiers, people with most types of dyslexia, most types of color blindness, and to make it easier for an external brailler or refreshable braille device.

HTML or other webpages

  • Organize the page using Headings. <h1> should only be used once, for the title. <h2> through <h6> are used to make smaller or less-important headings.
  • Include ALT tags for images.
    • For images that are purely decorative and conveys no useful information, use the presentation role (<img src="image.jpg" role="presentation" alt="my image" />) to tell screenreaders to ignore the image completely. You can also use a null alt tag (<img src="image.jpg alt="" />), which will do the same.  
    • For graphs and images that convey extra or complex information, include a descriptive caption to ensure all users have access to the same information.
    • If you describe or otherwise refer to a specific image in your text, make sure the ALT tag uses the same wording. (ex. "As you can see in the first diagram, more people like cats than like roaches." <img src="image.png" alt="first diagram">)
    • HTML5 Guide to useful text alternatives.
  • Use sans serif fonts (Verdana, Calibri, etc.) or other simple fonts.
  • Use descriptive links, such as "Pre-register using this website" (do NOT use CLICK HERE for every link)
  • Keep your formatting as uniform as possible. Don't use rainbow letters or shift the font every paragraph.
  • Don't use colors or patterns for the background of the text, as it may interfere with the browser's ability to override the page's settings.
  • Use the <ul> (unordered list aka bullet points) or <ol> (numerical list) to create lists, rather than inserting your own icons and tabs, or use the built in option on your HTML editor.
  • You can also run your website through the WAVE analyzer.

Microsoft Word documents

To make word processing documents accessible, follow the above tips, plus:

  • Use the Headings options under the Styles button (or Ctrl+Alt+1 for Heading 1, Ctrl+Alt+2 for Heading 2, etc.)
  • Don't lock the file or prevent the end user from editing it.
  • If you are printing the handout, also have it available widely as an electronic file (on Canvas, or emailed to students).

PDFs

If you are creating materials for a website, it is best to keep to html or plaintext pages rather than have important information in PDFs. To make PDFs accessible, follow the above tips, plus:

  • Make sure the document is OCR'd
    • Adobe Acrobat Pro allows for basic OCR on scanned documents.
    • If you only a low quality image scan, you may need to use a higher quality program (such as ABBYY FineReader), as Adobe Acrobat Pro does not work well with low quality images.
  • Make sure the document is tagged for images, reading order, etc.
    • If you are going from a Word document or PowerPoint slideshow, you can simply used "Save as PDF" to create an OCR & tagged document. (Some versions of these programs may not correctly tag the entire document, and will require editing.)
    • If you already have a PDF that needs to be tagged, you can use Adobe Acrobat Pro's Accessibility Tools to create a tagged PDF, or you can use the online PAVE site.
  • Avoid creating PDFs that are scanned images only, as these are completely inaccessible to a screen reader.

Making Images Accessible