Core Topics of Digital Accessibility
Developing inclusive digital content is essential to enable all users, regardless of ability, to interact with our resources. We require all staff to adopt and apply accessibility best practices in their work. This dedication is vital for building an inclusive online environment that meets the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA federal standards.
To enhance our digital accessibility and meet WCAG requirements, we will focus on these Core Topics:
Font Size:
Tiny fonts are hard to read. WCAG recommends that text should be at least 16 pixels or 12 points and sans-serif for easy reading. The sans serif fonts approved for use under the VCSU brand are Franklin Gothic, Oswald, and Arial. Text should be able to scale up to 200% without losing any content or functionality.
• Example of a clean font (Arial): VCSU Pride!
Avoid overuse of bolds, italics, and fancy fonts. Underlines should be used for links only.
• 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.
• Example of insufficient contrast, (i.e.: orange on yellow): VCSU Viking Pride!
• Example of sufficient contrast, (i.e.: black on yellow): VCSU Viking Pride!
Color contrast ratios vary based on font size. For standard text, a minimum contrast ratio of 4.5:1 is required, while large text (18pt or 14pt bold and larger) can have a lower ratio of 3:1. These ratios ensure readability for users with visual impairments, with higher ratios providing better accessibility.
Use of Color:
Do not use color as the only way of conveying information. For some with color blindness, it may be impossible to tell colors apart. Be sure that another way to identify the information is available.
• 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:
Using Alt text (alternative text) helps when your recipient cannot see the images in your content. 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".
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 and Headings:
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.
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.
VCSU A11y Resources:
Check out these resources we've put together to help you make your content more accessible.
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
[Updated: August 2024]