Meeting website accessibility standards is essential for private schools in the United States and Canada. Compliance ensures that school websites are available to all potential applicants, and it avoids potential litigation and the associated legal fees and fines. While the laws and ramifications are currently a work in progress in both countries, the Web Content Accessibility Guidelines (WCAG) developed by the World Wide Web Consortium (WC3) is the universally accepted standard to follow.
There are multiple versions of WCAG and three levels of compliance; however, most requirements in North America point to WCAG 2.0 AA Success Criteria as the standard to follow. Blackbaud School Website SystemTM meets the updated 2.1 AA guidelines, but full compliance also depends on whether the school is adhering to the accessibility standards within its website content.
Adhering to the following tips will help make your school’s website AA compliant.
1. Utilize ALT-text.
Alternative text (ALT-text) is a description of an image that displays for people who can’t see the image and are using a screen reader to translate the page. Most content management systems have a field for populating image ALT-text. In Blackbaud School Website System, ALT-text is populated by the image caption, or the title field if a caption isn’t available. Alt-text should briefly describe the image in a way that is meaningful to someone who can’t see the page, as well as utilize proper sentence punctuation.
2. Avoid embedding text in images.
Don’t embed text within website images or graphics because the text becomes unreadable on smaller devices such as phones. The one exception to this rule is when the image or graphic is essential to the school’s branding, such as a logo or crest. Instead of embedding text in images, use cascading style sheets (CSS) to overlay text on top of images, which enables the text to reposition at mobile displays.
3. Provide alternatives to audio and video.
To accommodate people with various impairments, audio and video should have closed captions for those with hearing disabilities as well as a text transcript or thorough description for those who can’t visually perceive the media. Many video editing tools and hosting platforms include the ability to add captions, and services such as 3PlayMedia and Rev can transcribe video audio into captions and transcripts.
4. Allow users to stop movement.
Moving content such as videos, rotating image galleries, or scrolling headlines should have controls to stop the auto-playing so that users have adequate time to consume the content. It’s also essential to avoid content that blinks or flashes more than three times per second as this can cause seizures or other physical reactions.
5. Keep headers and content in the proper order.
Within a web page’s coding, header tags outline the hierarchy of the page. In Blackbaud School Website System, the page’s title takes the Header 1 or H1 tag. Header text added to content widgets receives the H2 tag. Listed content such as news gets an H3 tag to call attention to the list of stories, and then each subsequent news story headline is assigned an H4 tag. H5 is assigned to photo album titles, and H6 applies to individual media item titles.
Make sure that headers and content are presented in the proper order at the desktop view as well as when content has been rearranged to fit mobile displays. For example, the H2 headline shouldn’t display before the H1 title. This guideline also applies to text organization: If the order of content in a list matters, use a numbered list; if it doesn’t, use a bulleted list.
6. Design readable text.
From an aesthetic standpoint, the text should have a contrast ratio with its background of at least 4.5:1, and large text over images should maintain a 3:1 ratio. Line height needs to be 1.5 times the font size, and the spacing between paragraphs should be twice the font size. If you aren’t sure how to measure all of this—don’t worry, your Blackbaud designer knows! Also, avoid two-way scrolling (vertical and horizontal) by checking pages on a mobile device to ensure the width isn’t getting broken by embedded widgets or fixed-width tables.
7. Write readable text.
From a comprehension standpoint, write website copy for a lower-secondary reading level, avoid unusual words, and spell-out the first reference to an acronym. It’s best to stick with one language per page, but if there are multiple languages on a page, include HTML attributes to indicate each change.
8. Avoid instructions that rely on sensory information.
Instructions that rely solely on sensory information such as shape, color, size, visual location, orientation, or sound, present challenges for those with impairments. For example, writing “click on the link in the sidebar to the right” is misleading because screen readers are transcribing from the code, so they view the page in a single column.
9. Make sure the site is navigable.
This guideline applies to individual pages and the content within. Each page should have more than one way to access it—the primary navigation menu and a search feature satisfy the guideline. Text links also help as long as the linked text describes the purpose of the link. For example, “Click here to learn about financial aid” should have the words “financial aid” included in the hyperlink. Avoid only linking the words “click here” or “learn more.” Page titles and content headers also need to describe the underlying content (e.g., “Steps to Apply for Financial Aid” as a header).
10. Maintain predictability throughout the site.
It’s important to keep navigation menus and other repeated elements in a consistent location on page layouts. Likewise, standardize text alternatives for items with the same purpose or functionality—for example, the school logo should have the same ALT-text on each page.
Also, don’t underline text as users might think it is a link. As for the links, avoid having a repeated link description that points to different pages such as “read more” buttons on a list of news stories. Likewise, don’t have links with different descriptions that go to the same place. A common example of this on school sites are “Students,” “Parents,” and “Faculty” links in the header that go to the same login.
11. Conduct a website accessibility audit.
WC3 maintains a comprehensive list of free and paid tools to test for WCAG compliance. Since most schools have multiple people editing the website, it’s a good idea to check for compliance periodically.
Learn how Blackbaud School Website System was designed to meet the unique website criteria—from academic listings to athletic team schedules—of K–12 private schools.
About the AuthorFollow on Linkedin More Content by Daren Worcester