Principle 1 - Perceivable
- RIT/
- Brand Portal/
- University Web Standards/
- Web Accessibility Guidelines for Developers/
- Principle 1 - Perceivable
Guideline 1.1 - Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.1.1 - Non-text Content - Level A
Form elements must have appropriate labels.
Use ARIA labels where possible.
For Captcha, only use Google’s reCAPTCHA.
Images must contain useful alt tags; describe the image so a blind person could understand it.
Decorative images
Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:
- Visual styling such as borders, spacers, and corners;
- Supplementary to link text to improve its appearance or increase the clickable area;
- Illustrative of adjacent text but not contributing information (“eye-candy”);
- Identified and described by surrounding text.
When possible, use CSS to display decorative images instead of image tags (ignored by assistive technology).
When decorative images are displayed via <img>, alt tags should be left empty.
Guideline 1.2 - Time-based Media
Provide alternatives for time-based media.
1.2.1 - Audio-only and Video-only (Pre-recorded) - Level A
All videos need open or closed captions.
For audio, an audio transcript is sufficient. Having captioned video is better
1.2.2 - Captions (Pre-recorded) - Level A
All videos need open or closed captions.
1.2.3 - Audio Description or Media Alternative (Pre-recorded) - Level A
For audio, an audio transcript is sufficient. Having captioned video is better
1.2.4 - Captions (Live) - Level AA
All videos need open or closed captions.
1.2.5 - Audio Description (Pre-recoreded) - Level AA
For audio, an audio transcript is sufficient. Having captioned video is better
Guideline 1.3 - Adaptable
Create content that can be presented in different ways (for example, simpler layout) without losing information or structure.
1.3.1 - Info and Relationships - Level A
Use headings tags when appropriate, not just styled text.
1.3.2 - Meaningful Sequence - Level A
Code the page in a meaningful sequence. The content should be meaningful, regardless of how it’s displayed on the page.
1.3.3 - Sensory Characteristics - Level A
Use aria regions, proper headings, labels, and other common structure.
1.3.4 - Orientation - Level AA
Use responsive layout, so that a user can get the same experience on both landscape and portrait displays.
1.3.5 - Identify Input Purpose - Level AA
Use correct input types when creating forms, and allow for autofill where applicable.
Guideline 1.4 - Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
1.4.1 - Use of Color - Level A
Color should not be used as the only visual means of conveying information.
Links must use a non-color visual distinction (underline, icon, italics, bold, etc.) - This does not apply to menu links.
1.4.2 - Audio Control - Level A
Do not auto-play audio, or video that contains audio.
1.4.3 - Contrast (Minimum) - Level AA
Normal text must have a contrast ratio of at least 4.5:1.
Large text must have a contrast ratio of at least 3:1.
- Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Note: Text that is part of a logo or brand name has no contrast requirement.
RIT has identified 2 different oranges to use throughout the site: RIT Brand orange and WCAG accessible orange:
RIT brand orange: #F76902
This color should be used whenever possible. This can be used for all background colors where orange is needed, as well as all fonts 18.67px or larger and bold. This generally includes all headings and large links.
WCAG accessible orange: #C75300
This should be used when font size is smaller than 18.67px, or when the font cannot be bolded for design reasons. This color SHOULD NOT be used as a solid background color.
1.4.4 - Resize text - Level AA
Do not set user-scalable=0
.
Test site at 200% scale to ensure nothing is off-screen.
1.4.5 - Images of Text - Level AA
Do not use images to display text, unless it is a logo.
1.4.10 - Reflow - Level AA
Allow for responsive layout, so that text flows when browser width changes.
1.4.11 - Non-text Contrast - Level AA
User interface components and graphics needed to understand content must have a 3:1 contrast ratio to adjacent colors.
1.4.12 - Text Spacing - Level AA
Text spacing must meet minimum requirements:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
1.4.13 - Content on Hover or Focus - Level AA
For hoverable additional content, use title tag, or role=”tooltip”
and aria-describedby.