RANCH Rules

R is for Readability

There are two fundamental concerns regarding readability.

The first is font clarity and scaling. For website visitors with low vision, a small or highly-decorative font can be challenging. Websites should use clear fonts that scale to larger sizes with the browser’s built in magnification functions. Having a “large font” option on your website can be helpful but is not required if the fonts scale appropriately.

The second is screen reader compatibility. Your website’s information should be generally consumable for people using a screen reader. Blind or very-low vision website visitors use these tools to navigate the web. Alt tags should be used on every image to convey the meaning behind the image, and images should not be used to convey what is largely text-based in nature.

A is for Architecture

Architecture is an overarching concern regarding the structure of your pages.

Web pages must be configured logically so visitors using a screen reader can logically navigate the page. Beyond logical hierarchy, web pages should use Heading tags to highlight topical sections of the website.

N is for Navigation

Your website must be navigable by people of all abilities. Some website visitors may not possess the ability to use a mouse for navigation. All pages should be navigable by keyboard navigation. This includes menu navigation.

If you have Javascript drop-down menus, these menus must support keyboard navigation OR an alternative keyboard-navigable menu must be available on the screen.

C is for Contrast (or Color)

Your website must have appropriate contrast in a variety of ways.

The website should use a font color over a background providing adequate contrast for easy legibility. Links should be clearly differentiated from non-hyperlinked text to clearly identify navigation points. Visited links should be easily differentiated from non-visited links. And menus that change color with a “mouse over” should also be identifiable when using keyboard navigation. Images and logos that contain text must also have adequate contrast to ensure legibility.

Use the WAVE tool or another color contrast checker to see what contrast issues you may have. Remember, images must meet contrast concerns as well.

H is for Helper

Your district website almost certainly houses a multitude of supporting documents, videos, graphics, PDFs and other “helpers”. These Helpers must all be generally accessible via ADA guidelines.

Each type of Helper must comply with all of the other aspects of RANCH (Readability, Architecture, Navigation and Contrast). For different types of Helpers, this will mean different things. Let’s review a few examples:

1. PDF documents: PDFs must be Readable (text-to-speech capable). This means that they must either have been created from an original digital document while preserving the text, or they must be scanned from paper and been accurately processed with optical character recognization. They must also follow the Architecture rules and be logically organized and flow appropriately. Graphics must be properly described via text. PDFs that are scanned from a piece of paper on a scanner to PDF will rarely comply with these guidelines.
2. Videos: Videos must be closed-captioned. A hearing-impaired visitor must be able to gather information from the videos. A transcript-alternative may be a lightweight alternative to closed-captioning, but simply providing a transcript of the video is not WCAG2.0aa compliant. Note: closed-captioning is required on all videos embedded by the district on their website, even those videos that were not created by the district.
3. Links to teacher websites: Teacher websites are extensions of the district and therefore must be fully accessible.
4. Links to PTA website: the PTA website, while not a district website, is closely related to and only exists because of the district website. Consult your legal counsel on this topic.