508 Tips for Content Editors

CSU has implimented the Accessible Technology Initiative, a system wide effort to meet the needs of the disabled members of its constituency. Below you will find tips on keeping your site ATI compliant through good content editing. Please take advantage of the styles and resources found on our CSUF Web Style Standards websiteOpens in new window (all styles meet 508 and CSU ATI guidelines), and for more information on our progress and to see if your site is passing, visit our Accessible Technology Initiative (ATI) websiteOpens in new window .

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

Accessibility 101

HeadINGS

  • ONLY one heading 1 per page.
    • This is your page title.
    • It should convey the overall message of the page to the user.
  • Following headings must be hierarchical and follow content structure.
    • Heading 2 is used for main sections of your page.
    • Heading 3 is for subsections of main sections.
    • Headings 4 through 6 are subsections of the previsous subsection.
    • You can use as many headers as needed - but if your page has too many headers, consider breaking the content into separate pages.
  • You can go from a heading 2, 3, 4, 5, or 6 back to a heading 2 to start new main sections, but you cannot go from a header 2 to a header 4, for example.
  • DO NOT use headings to style text.
  • Guide to Accessible HeadingsOpens in new window

Image Alt Text

  • DO use alt tags (the description box on the insert/edit image too).
  • A good rule of thumb is around 100 characters or less. If it needs to be more, that is fine, but do not include unnecessary details.
  • To craft a good alt tag, ask yourself:
    • What is in the picture
    • What is the purpose of the picture
    • The context of the image may be more important than what is actually in the image.
  • DO NOT use the word image, picture, icon, or graphic in your alt tag (i.e. "picture of student"). 
  • DO NOT use images with too much text that it won't fit in the alt tag. Screen readers cannot "read" an image. This applies to items such as infographics and flyers. 
  • Guide to Making Good Alternative TextOpens in new window

Links

  • DO NOT link urls. Screen readers will read each character (w-w-w-dot-h-t-t-p-colon...).
  • DO NOT use the words Click Here or Read More.  
      • These phrases lack context and tell the user nothing about the content of the link.
      • Using non-relevant link text makes it harder for users to understand what they need to do.
  • DO link words organically.
  • DO NOT link to two different urls using the same words on the same page.
  • DO NOT link to the same url using different words on the same page. 
  • Guide to Making Accessible LinksOpens in new window

How it looks and sounds when you link a url:

Colors

  • Colors MUST BE a minimum of 4.5:1 contrast ratio for regular text, and 3:1 for larger text.   
    • This also applies to images, PDFs, and all documents online.
    • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Anything below that is regular text.
    • Our template colors all meet minimum or grater standards.
  • It is lovely, but the campus orange cannot be used as text, nor can you have white text with an orange background.
  • If you want to add a bit of color to highlight a section on a page,  use on of our text noticesOpens in new window  styles.
  • WebAIM Accessibility Color Contrast CheckerOpens in new window
  • CSUF Web Style Standards - ColorsOpens in new window