Accessible Design

For a detailed guide to creating accessible and universal design, visit the I-See-U website



Layout

  • The content should be displayed in a left to right, top to bottom hierarchy.
  • Do not differentiate categories of information using only color. Other indicators such as value, text and iconography, borders, etc. will work better for the sight impaired.
  • Text blocks should be left-aligned in most cases.
  • Use alphabetical, unordered or ordered lists when organizing information.
  • It is very likely that a sight impaired person will navigate a web page by tabbing through the headings. The headings should be written to maximize that process. Hierarchical/chronological use of text tags is also critical. For example:
      • Title, Heading, Sub-heading, Normal
      • H1, H2, H3, H4, Normal
  • Do not use large rapidly animating images that can cause epileptic seizures (no more than 3 blinks per second... or between 2 and 25 hz). Also, avoid overlaid complimentary colors or stripes that may scintillate. You can dive deeper into this requirement by reading the siezure guidelines from Webaim (external link).


Images


  • Images should be high contrast to ensure sight impaired persons can understand them. Reference the imaging design principles in this site.
  • Should be understandable for persons with colorblindness. Use the the NoCoffee Chrome extension (external link) to test color combinations for various color blind conditions.
  • Descriptive alt tags should be included for all images. They need to succinctly describe the image. If the image serves as a link, it should include the link destination.
      • An example of a bad tag: figure 2
      • An example of a good tag: cartoon of a dog in a window barking at a postal delivery woman approaching a house on foot.
      • An example of a tag with a link destination: fish icon: links to the fishing guide
  • Purely decorative images, like those sometimes used as backgrounds in page headers, do not need descriptive alt tags. Null alt tags ( "" ) should be inserted instead.
  • Image captions (when used) should always be located directly below the image and work in tandem with (but not be redundant to) the image alt tag to describe the content and meaning of the image.
  • Captions should not be used in place of alt tags. Captions should be used for adding context to an image such as: 'It's source' or 'why it is important', etc.
  • Icons should always include text with them.
  • The visual presentation of icons and other graphical images utilized for navigation should have a contrast ratio of between 3:1 and 16:1 (Level II). Use the WCAG Contrast Checker (external link) tool to test color combinations. The Color pick Eyedropper Chrome Extension (external link) can be used to get he color numbers from your design and plug the into the contrast checker.


Text

  • Should be high contrast against its background (light on dark or dark on light). Use the WCAG Contrast Checker (external link) tool to test color combinations. The visual presentation of text and images of text should have a contrast ratio of between 4.5:1 and 16:1 (Level II) or 7:1 and 16:1 (level III). I strongly recommend level III. The Color pick Eyedropper Chrome Extension (external link) can be used to get he color numbers from your design and plug the into the contrast checker.
  • Should be understandable for persons with colorblindness. Use the the NoCoffee Chrome extension (external link) to test color combinations for various color blind conditions.
  • Should be sized for easy reading.
  • If you use image based text, the text in the image must be included, in full, in the image alt tag.
  • Avoid redundant text: especially between title and header tags
  • Don't use all upper case type setting. Screen readers will read that text one letter at a time. However setting text to a TT style will make the text appear all caps, even though it is not. TT style text will work well with screen readers.


Links


  • Links in body text should be underlined
  • Links to the same location with different names should not be on the same page and avoid redundant links in general
  • Links to external sources should labeled as such:
  • Link text should make sense out of context and it should be obvious where the link will take a user. Users of screen readers will often search the content of the site for links. Don't use 'Click Here' or 'More Information' for your link text. Instead, make the text more descriptive.