Versions Compared

Old Version 15

changes.mady.by.user Joyce Tsai

Saved on

compared with

New Version 16

changes.mady.by.user Mike McCaffrey

Saved on

Key

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

...

  •  Maintain proper heading hierarchy (no h1s except the page title). Should go h2 > h3 > h4 and doesn’t skip levels. Do not use headings just for emphasis or aesthetics.
  •  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).
  •  No underlines (since may be confused as links).
  •  Meaningful text for links, instead of “read more” or “click here”.
  •  Use html ordered and unordered lists (ol and ul tags) instead of just typing numbers and dashes, so screenreaders can properly navigate them.
  •  Use html tables (in the WYSIWYG) to show sets of data. Tables need to have headings for columns (and ideally rows).
  •  Do not use tables to create columns layouts.
  •  Upload high resolution images, and have the system size and crop them
  •  Videos should have captions and should not autoplay.
  •  Keep things consistent (don’t apply random colors and styles to the text for emphasis).
  •  Do not type in all-caps, because it can create issues with some screenreaders and is not good for reading comprehension.
  •  Good menu structure
    •  Try to have less than seven links at each level
    •  If you have more than one or two levels to your menu, make sure your system shows breadcrumbs so people know where they are in the site.
    •  Do not have multiple links to the same place in the menu structure.
  •  No adjacent links going to the same place.
  •  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.
  •  If you can set custom colors within the site content make sure the foreground and background colors have enough contrast.
  •  Use tel: and mailto: for telephone numbers and email addresses.
  •  Do not use empty paragraphs or line breaks for spacing.
  •  Use camel case or for visible urls (that don’t have separators like dashes between words) and hashtags so screenreaders can pronounce them. 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), and a hashtag would be #specificHashTag.
  •  When changing the url for a page, make sure redirects are automatically or manually create from the old location to the new one, so links do not break within and from without your site.
  •  Try not to delete pages, since that may break links and hurt SEO.
  •  Do not rely on PDFs to convey important information, because by default they are not terribly accessible to screen readers.
  •  Be careful when embedding video players or other widgets in the site, which may not be accessible using keyboard navigation or screenreaders.

Additional Resources