Basic Guidelines
These guidelines apply to all page (body copy) content, regardless of platform: website, mobile app, Word document, Google Doc, email, etc.
Guidelines marked with an asterisk * also apply to paper: posters, flyers, letters, postcards, etc.
Images
All images should have equivalent alternative text (“alt text”). This means you describe what is happening in the photo.
Alt text should be contextual: describe why the image appears on the page.
Limit alt text to about 150 characters.
See: Everything you need to know to write effective alt text (via Microsoft)
Graphics *
If you include a graphic that contains text, the text must also appear in the body of the page. (such as instructions or event details)
Graphics cannot take the place of text on a page, in an email, etc.
Animated .gif files:
- must not flash more than three times per second
- must be no longer than five seconds in length
- must not loop
Galleries and Slideshows
Galleries and slideshows have the same requirements that individual photos do: all images in a gallery or slideshow must have alt text. They may not contain information (such as text) that a screen reader cannot access.
Galleries and slideshows must not require a mouse to view. If you cannot guarantee that your gallery or slideshow can be used with a keyboard only, do not use it.
Colors *
Colors used on pages and in graphics must meet contrast standards. You can check colors using a contrast checker, such as this one: WebAIM Contrast Checker
Blue can only be used for links, not for plain text.
Links
Link text should always indicate what the visitor will encounter after clicking the link.
Do not link to words and phrases such as "here" or "click here" or "more."
NO: Read more about our summer courses.
YES: Read more about our summer courses.
Links to PDFs or other documents should indicate that they point to a PDF or other document.
NO: Download our summer course catalog here.
YES: Summer Course Catalog (.pdf) or Download our summer course catalog here (.docx)
Do not copy and past URLs into the text to serve as links.
NO: https://www.youtube.com/watch?v=CZGqnp06DnI
YES: Just use button -- A11ycasts #05
Tables
Tables should be used for data only. Do not use tables for text layout.
Data tables should include column and row descriptions.
Styles*
Underline links only. Use italics or bold in place of underlining for other kinds of text.
Use small font sizes very judiciously. Small fonts are hard to read for many individuals.
Use ALL CAPS sparingly.
Heading/Header (H) Tags
As you build web pages and documents, think about the text like an outline for a research paper. Instead of numbers and letters, H tags are used to indicate structured web content. Always use H tags in order: H1 (page title), H2 (section title), H3 (section subtitle), etc. (see H Tags document)
H tags should never be used for decorative purposes.
Every page must have an H1 header (page title). In certain circumstances, the H1 header may be replaced by an image, but special code must be added to the page to make it accessible.
Audio
If you link to or embed an audio files, you must include a written transcript.
Video
Videos must be closed captioned, no exceptions.
Captions contain the verbatim speech from the video. They must have proper capitalization, punctuation, and have speakers identified.