Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  •  Avoid text in images (and make sure there is alt text if any do have text). In cases where important text must be included in images, make sure the same information in conveyed in the written copy so everyone regardless of their visual acuity is able to access the information.
  •  All images should have an alt attribute, either with alt text or blank so screen readers know it is purely decorative.
  •  Meaningful alt text which calls out the reason that the image was included in this context (explain diagrams and graphs).
  •  Upload high resolution images, and have the system size and crop them for different uses (banner/card/content photo). Uploading multiple versions of the same image in different sizes increases the likelihood of display and alt text mistakes that could make the image less clear to users.

...

  •  Use the table button in the WYSIWYG to create html tables to show sets of data.
  •  Tables need to have headings for columns (and ideally rows)(th tags) at the top of all columns and ideally at the start of all rows.
  •  Do not use tables to create columns layoutsjust for layout purposes, to place things side-by-side.
  •  Use meaningful text for links, instead of “read more” or “click here”.
  •  No adjacent links going to the same place. For example, don’t link to the same page/website twice in the same paragraph or in two adjacent paragraphs.
  •  Do not open links in a new tab unless your site can display an icon next to it, and usually only use for external links.
  •  When creating paths/urls, use dashes between the words so screen readers can read the individual words, for example: www.example.com/specific-page-name
  •  If an external url does not have dashes between words, use camel case when displaying visible urls. For example if you would like include this url (www.example.com/specificpagename) in the text, then type the url like so (www.example.com/specificPageName).
  •  When posting hashtags to your site and social media, use camel case for screenreaders support, such as #specificHashTag.
  •  Do not rely on PDFs to convey important information, because by default they are not terribly accessible to screen readers.

...

  •  If you can set custom colors within the site content make sure the foreground and background colors have enough contrast. You can use this color contrast checker.

...

Video / Audio

  •  Videos should have captions and should not autoplay.
  •  Video and audio should have transcripts.
  •  Be careful when embedding video players or other widgets in the site, which may not be accessible using keyboard navigation or screenreaders.

...