Purdue University Calumet
Web Accessibility
Best Practices & Guidelines
Accessibility – Best Practices and Guidelines:
Some tools are built into WordPress and into the PUC templates to make them automatically more accessible.
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. And there is a link here to the WebAIM (Web Accessibility in Mind)
site, if you find you need more information about anything listed.
Images:
•
•
•
•
•
Do fill in the Alternative Text (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 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
o On the General properties tab, check the box for Table caption
o 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
o In the Table Cell properties dialog box, choose the Cell type of either Data or header on the
General properties tab
Links:
•
•
•
•
•
•
•
Don’t use phrases that convey no information as links such as:
o Click here
o Here
o More
o Read more
o Link to (some destination as in ‘this page’)
o 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
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 (link opens a new window)
Do include information about the type of file in a download link, as in Web Accessibility Best Practices
Handout (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 768KB).
Rev. April 17, 2012
Page 1 of 2
Purdue University Calumet
Web Accessibility
Best Practices & Guidelines
Media:
•
•
•
Do provide captions and/or transcripts for audio and video files
Do make media content such as PDFs, Word documents, PowerPoint and Flash PDFs accessible to screen
readers.
Do include a link to a plugin when offering file downloads. All of these are free:
o Adobe Reader [Opens in New Window] for PDF documents.
o Microsoft Word Viewer [Opens in New Window] view and print MS Word documents
o Microsoft Excel Viewer [Opens in New Window] view and print MS Excel documents
o Microsoft PowerPoint Viewer [Opens in New Window] view presentations created in MS
PowerPoint
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
o White on black or black on white are high contrast
o 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
Employ scannable text
one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few
words in the paragraph)
half the word count (or less) than conventional writing - At least 20-50% of the words on an average Web
page can be eliminated without changing the meaning of the content.
Resist the urge to change fonts, sizes or colors
Need larger or smaller text?
• Would it be better as a heading?
•
Or do you need special styles? (if so, call Web Communications Coordinator Robert Peterson at
University Relations, Extension 2097 for help!)
Structure – Headings & Lists:
•
•
•
•
•
•
•
Do use headings to structure your document
Don’t just use a larger font if a heading is appropriate.
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 –
o Heading level 2 (h2) should be used as a sub-heading after a heading level 1 (h1)
o Heading level 3 (h3) should be used as a sub-heading after a heading level 2 (h2)
o Heading level 4 (h4) should be used as a sub-heading after a heading level 3 (h3)
o Heading level 5 (h5) should be used as a sub-heading after a heading level 4 (h4)
o 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
If you have a list – of links or information – use bulleted or ordered lists to display the content.
o Bulleted or unordered if the order of the items doesn’t matter,
o Ordered lists if it does
Rev. April 17, 2012
Page 2 of 2