Text: 

• Use text instead of images of text.
• Text should be at least 16 pixels or 12 points and sans-serif for easy reading.
• VCSU approved sans-serif fonts are: Franklin Gothic, Oswald, and Arial.
• Text should be able to scale up to 200% without losing any content or functionality.
• Avoid overuse of bolds, italics, and fancy fonts.
• Underlines should be used for links only.
  • Example of a clean font (Arial): VCSU Pride!
  • Example of using underline, creating link confusion: VCSU Viking Pride!

Color Contrast:

• Improper use of color can be difficult to see, especially when it is like the color behind it.
• Color contrast ratios for standard 12pt text is 4.5:1. 
• Large text (14pt bold and larger) is 3:1. 
  • Example of insufficient contrast (i.e.: orange on yellow): VCSU Viking Pride! 
  • Example of sufficient contrast (i.e.: black on yellow): VCSU Viking Pride! 

Use of Color:

Color is great and images can add so much to content! Do not use color as the only way of conveying information. For some with color blindness, it may be impossible to tell colors apart. Color should be used in conjunction with other tools (descriptions, symbols, etc.) to convey meaning and there should always enough contrast.

    •    Example of color only: Enrolled students are in red: Jenna, Kyle, Troy.

    •    Example of color and another identifier: Enrolled students are in red and have an asterisk: Jenna, Kyle*, Troy.

Add texture to differentiate and describe colors in charts and graphs.

    •    Use data labels or patterns, not just color, to make your graphs easier to understand.

 Alt Text:

As the old adage goes, "a picture is worth a thousand words", images can definitely add a lot to content. But what if the person accessing the content has vision or cognitive issues? Screen readers (VoiceOver, Narrator) cannot read images, and without alt text on an image, a person who is blind would not even know that the image exists. Alt text is required for:

• Pictures and images.
• Shapes, Clip Art, and Word Art.
• Text Box and Lines.
• Embedded images with fixed text. *Another way to share information in a fixed image would be to type the message directly into the document space.
• Logos. *If the image (or logo) is purely decorative you would use the Alt text option "mark as decorative".
• Social Media posts.
• Headshots.
• Infographics.

Please note, that there is no need to write "image of" or "picture of" before an image. The screen reader will announce what the graphic file is before reading the description. Also, be sure to name the file properly, and not generic such as "image1234.jpg". You can find more in-depth training on alt text in the One Stop article: Core Topic: Alt Text.

Link text: 

Descriptive hyperlink text helps recipients understand where the link will take them. Replace any link text that may be generic. It is best practice to have the link open in a new window and to alert the user of the new window.

    •    Instead of: Click here to read more.

    •    Use descriptive text: Read the VCSU accessibility policy, opens in a new window.

Structure:

Headings are the main way users navigate documents and allow users to jump to each section. Bold and italics do not allow for this feature and are not recommended for the use of headings. It is best to use all built-in structure and style features.

• Avoid using tables as layouts.
• Use heading styles H1-H6 for a clear order of navigation and to break up content into chunks. 
• Heading 1 should only be used once as the page title.
• Keep your headings in order and do not skip headings.
• Write descriptive headings to easily search content.

You can find more key takeaways on accessible document structure in the One Stop article: Core Topic: Accessible Document Structure.

Captions:

Captions are text equivalents for spoken dialogue and no-speech sounds (music, sound effects) in audio or video content. They provide essential information for deaf and hard-of-hearing users, and can also benefit those with cognitive or learning disabilities. 

• Use clear and concise language that is easy to understand.
• Choose a font and size that is easy to read.
• Place captions in a position that does not obstruct visual content.
• Ensure captions appear at the right time and do not overlap. 
• Provide transcripts for audio content.

Federal Resources:

Check out all the criteria required to meet digital accessibility compliance.

• Section 508 of the Rehabilitation Act of 1973
  
• W3C Web Accessibility
• W3C Standards Overview

VCSU A11y Resources:

Check out these resources we've put together to help you make your content more accessible. 

• Core Topics Quick Tips downloadable pdf
• A11y Resource Hub
• A11y Toolkit

New to WCAG? That's OK! Check out this short YouTube video from Silktide:

For more information or to schedule training, please contact:

Debbie Dramstad

Certified Professional in Accessibility Core Competencies (CPACC)

Web Accessibility and Applications Specialist 

Technology Services

debra.dramstad@vcsu.edu