Accessibility in Splash Follow
Accessibility refers to how viewable or usable a Splash page is to guests with disabilities, which can include blindness and those who have difficulty hearing, reading, and understanding. Improvements in accessibility benefit everyone's experience on page.
WCAG 2.1 Compliance
While your Splash event page is not WCAG (Web Content Accessibility Guidelines) 2.1 compliant out of the box, we use their standards as a guide for making our event pages more accessible.
Link: Check out our checklist for WCAG 2.1 standards in Splash. |
Accessibility Tips
Here are our top tips for improving your Splash page's accessibility:
1. Use Image and Text elements on top of each other instead of images that have text in them.
2. Assign a hierarchy level to headline elements to optimize your text for screen readers.
Note: Hierarchy levels can only be assigned to headline elements. |
3. Add alt text on Image and Square elements as well as Background Images.
Pro Tip: Alt text refers to the description of the image that appears in the HTML code. This is the text that screen readers will read aloud, so we suggest making it indicative of what the picture represents. |
4. Add alt text to image elements in email campaigns.
5. Add alt text to the headline image in your form.
6. Assign a focus state color to the elements on your Registration Form touchpoint, including:
- Close Button
- Text Links
- Input Border
- Button Border
Pro Tip: When a visitor uses a keyboard or a screen reader to navigate your page, they rely on a focused state to understand what element of the form is highlighted. |
7. Avoid text below 1rem or 16px, especially on lower-contrast backgrounds.
7. Add a title attribute to your iFrames
When an iframe is given a title, screen reader users can pull up a list of frames and identify the content based on its title. Without a name, a screen reader user may just hear "frame," the file name, the path of the iframe, or an unhelpful name like "javascript".
For iframes that have meaningful content, provide a title using the title attribute.
<iframe title="Campus Tour" src="campustourvideo.html"></iframe>
For iframes that contain non-readable content, provide a title to pass automated tests, but be sure to hide the content altogether from screen reader users using aria-hidden="true".
<iframe title="Intentionally blank" src="noreadablecontent.com" _aria-hidden="true"_></iframe>
Comments
0 comments
Please sign in to leave a comment.