Best Practices – Web Accessibility

Accessibility – Standards and Guidelines:

Some tools are built into WordPress and into the Purdue Calumet Web templates to make them automatically more accessible and some things, you will have little control over as a content editor. This list is intended as a quick reference guide to the things over which you do have control. Visit the WebAIM (Web Accessibility in Mind) site, if you find you need more information about anything listed.

Images

  • Do fill in the Alternative Text, Caption and (or Image Description) box in the image dialog box.
  • Do provide a description of the image, for photos and graphics that do not contain text.
  • For graphics that are used to convey copy, Do repeat what the graphic says (i.e. for the Purdue Calumet logo, good alternative text could be “Purdue Calumet Logo”.)
  • Do leave the alternative text blank ONLY if the image is just decorative, contains no relevant or meaningful content. That’s actually preferred so that the screen reader can ignore the image.
  • Don’t use the words “image,” “graphic”, or “picture of” as part of the alternative text – the screen reader will fill that in.

Tables

  • Do use tables for tabular data, as in degree requirements or event dates and times.
  • Don’t use tables for page layout.
  • Don’t nest tables, if you absolutely must use them for layout.
  • Don’t use a table if all you have is one column of data – use an unordered or ordered list instead.
  • Do use the Table properties dialog box in WordPress to create a summary and a caption
  • On the General properties tab, check the box for Table caption
  • On the Advanced properties tab, add a brief summary of what the table is about (i.e. Degree requirements for Nursing 101).
  • Do use the Table Cell properties dialog box to mark the beginning of columns and rows by using table header tags
  • In the Table Cell properties dialog box, choose the Cell type of either Data or header on the General properties tab

Links

Screenreader users may listen to just the link text on a page. Think about whether just the links would make sense if that’s all you heard. Think about whether the links would be too long to comfortably listen to or too short to convey enough information about where the link leads

  • Don’t use phrases that convey no information as links such as:
    • Click here,
    • Here,
    • More,
    • Read more,
    • Link to (some destination as in ‘this page’),
    • More Info
  • Do use text that makes sense out of context such as ‘degree requirements for BS in journalism’.
  • Do make links long enough to make sense – think about the copy you write
  • Don’t make links too long or too short. About seven words is a good maximum to aim for.
  • Don’t use the actual link as your text (i.e. http://webs.purduecal.edu/creative/services/ ) Use something descriptive such as Creative Services as your link text.
  • Don’t allow a link to open a new page unless absolutely necessary. If you do, in the link text, use the new window button on the WYSIWYG editor or add the phrase (opens a new window or tab) or something similar to warn the person that they’re being taken to a new location and that their back button won’t return them to their initial page, such as: Creative Services (new window)
  • Do include information about the type of file in a download link, as in Web Accessibility Best Practices at Purdue Calumet (PDF).  And if you want to be very helpful, you may want to put the size of the file in the link text as well, as in Web Accessibility Best Practices Handout (PDF 260KB).

Media

Color

  • Don’t use color alone to indicate meaning – A warning in red text means nothing to a color blind person who may see it as green.
  • Don’t use colors that have a low contrast ratio. For example: if the background for your copy is white, don’t use gray text
    • White on black or black on white are high contrast
    • Light gray on dark gray provides less contrast and can be harder to see

Content

  • Write clear content that’s easy to read – both from a visual aspect with clear fonts, and from a style perspective
  • Follow best practices for Purdue University Calumet Writing for the Web

Structure – Headings & Lists

  • Do use headings to structure your document, much as you would create an outline.
  • Don’t just use a larger font if a heading is appropriate.
  • Don’t underline text that is not a hyperlink.
  • Don’t use a series of paragraphs or a one-column table, if a list is more appropriate for your content.
  • Do start your post or page with heading level 2 (h2). (Heading level 1 is built into the template so your first heading should be no higher than heading level 2.)
  • Do nest headings –
    • Heading level 2 (h2) should be used as a sub-heading after a heading level 1 (h1)
    • Heading level 3 (h3) should be used as a sub-heading after a heading level 2 (h2)
    • Heading level 4 (h4) should be used as a sub-heading after a heading level 3 (h3)
    • Heading level 5 (h5) should be used as a sub-heading after a heading level 4 (h4)
    • Heading level 6 (h6) should be used as a sub-heading after a heading level 5 (h5)
  • Do use the Format drop down in the WordPress WYSIWYG editor to apply heading levels

Download these tips as a PDF. Visit the Adobe Web site to obtain a free copy of Acrobat Reader.