Accessibility Guidelines

Customize family-facing enrollment pages by adding text, links, colors, images, and videos. To meet accessibility compliance, you must follow the guidelines below.

Disclaimer: While we recommend using the official WCAG site as a starting point, there are other tools to check accessibility compliance. Feel free to use your own tools to check conformance. 

1. Color Contrast (Guardian Theme):
   1. Large text (24px or 18.5px bold and above) requires a minimum contrast ratio of 3:1.
   2. Smaller text must meet a contrast ratio of 4.5:1.
   3. Icons and graphic elements should also have a contrast ratio of at least 3:1.

 What this means for you:

1. Primary Color: Choose a color with a minimum 3:1 contrast ratio (against white) as the Primary Color in the “Guardian Theme” under Enroll Settings. Enroll will automatically check compliance and issue a warning if the selected color does not meet contrast standards.
   1. Go to Figure 1 below
2. Secondary Color: Select a color with at least a 4.5:1 contrast ratio as the Secondary Color (darker than the primary).
   1. How to check 4.5:1 or above color contrast:  Go to Figure 2 and Figure 3 below
      1. Open https://webaim.org/resources/contrastchecker/
      2. Locate the “Foreground” color section and input the 6-digit HEX code that appears in Enroll/Guardian Theme, next to “Secondary Color” (e.g. #07D432)
         (note: Background color should be #FFFFFF / White)
3. Text Color: When adding text via a content snippet, use colors that follow contrast guidelines. We recommend using black or the Secondary Color. Only large text (24px or 18.5px bold and above) may use the Primary Color. Figure 4

2. Adding Links: 

The purpose of this guideline is to help users, especially those relying on screen readers, understand the intent of each link.

What this means for you:

1. Text Links: Use descriptive text that clearly conveys the link’s purpose without needing surrounding context. Assistive technology has the ability to provide a list of links that are on the web page. Link text that is as meaningful as possible will aid users who want to choose from this list.
   1. Example: Instead of “Read More” or “Find out More Information”, add more context: “Read more about our school programs”
   2. More Examples
2. Link Color and Color Background: Most systems style links in cobalt blue by default. To maintain clarity and accessibility:
   1. Place links only on white or light backgrounds.
   2. Avoid placing links, including email addresses, in dark areas like the footer, as this may violate accessibility standards.

3. Text Spacing: 

Proper spacing enhances readability and ensures content is accessible to all users. 

What this means for you:

1. Adding Text: Default settings in Enroll’s content snippets meet these spacing requirements.
2. Adding HTML: If you use custom HTML, default styles are overridden. Ensure the following:
   1. Set line height (line spacing) to at least 1.5 times the font size
   2. Add spacing after paragraphs of at least 2 times the font size.

4. Images: 

Provide descriptive alternatives for images so users who cannot see them can still understand the content. 

What this means for you:

1. Adding Images: When uploading images using Enroll content snippets, you’ll be prompted to enter the image URL and an Alternative Description (Text Field). This text is used by screen readers. Figure 5
   1. Keep descriptions concise and focused on essential details.
   2. Example: “Educator greeting students as they enter a classroom"
   3. More Examples

5. Videos Captions: 

Captions make video content accessible to users who are deaf or hard of hearing. They should include spoken dialogue, speaker identification, and meaningful sound cues.

What this means for you:

1. Adding Video: Only upload videos that include audio or narration explaining the video's purpose or content.
2. Captions: Use platforms like YouTube to generate or add captions before embedding the video on your page. View How to Add Subtitles to YouTube Videos
3. Examples

Figure 1:

Figure 2 and 3:

Figure 4:

Figure 5: