Image
Accessibility Guide
This guide is intended to help content managers understand their users’ accessibility needs as described by the Web Content Accessibility Guidelines (WCAG) particular to content creation, and how best to attend to them.
Creating Accessible Content
-
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.
What this means for content creators
Non-text content like imagery should have meaningful text alternatives that can be accessed by screen reading software. Purely decorative visual content that is not vital to the comprehension of a site does not require a text alternative.
Alt text should be descriptive but brief, as the most popular screen readers will stop reading alt text aloud after 125 characters. For more information on writing helpful alt text, see external resources below.
For information on video and audio recordings, see Guideline 1.2.
External resources
Tips for writing useful alt-text → -
Time-based media: Provide alternatives for time-based media.
What this means for content creators
“Time-based media” is any media that has a runtime, like a video or an audio recording. The Success Criteria for this guideline recognize that media may be prerecorded or live but requires captioning or transcription for both. Recorded media that is already a clearly identified alternative to text (for example, a recording of a poet performing their poem alongside its text on a publication’s website) is exempt.
Transcripts: A transcript is a textual representation of content separate from the the media it represents–for example, the textual representation of an audio stream that appears below the audio player on a page. Transcripts of audio should clearly indicate who is speaking, and include notes for non-verbal cues like music or other sound effects that provide important context, offset by parentheses, brackets, or otherwise distinguished from the surrounding text. If a doorbell rings in a radio play, a user reading the transcript should be able to clearly identify the stimulus that caused the actors to answer the door. Transcripts are usually most appropriate for audio-only content.
Captions: Captions differ from transcripts in that they are synchronized with their content. This is beneficial to users because they do not need to switch back and forth between video input and a separate transcript. Like transcripts, captions should note non-verbal audio cues that an important to the user’s understanding. Captions are usually most appropriate for audio-visual content. Captions may be automatically generated by YouTube or other software (see resources below) but should always be verified by a human being for accuracy and the inclusion of non-verbal cues.
Silent Video: In the same way that still images require meaningful alt text for screen readers, ambient video without any accompanying sound should be accompanied by text that succinctly describes what is presented visually to sighted users.
External resources
-
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
What this means for content creators
Because your website is responsive, and the layout may appear in different configurations on different screen sizes, it is important to consider the dynamic nature of layouts when writing instructional content.
For instance, a button that appears to the right of a paragraph of instructions might appear below that paragraph at a smaller screen size, rendering a desktop-accurate instruction to “click the button to the right” illogical on a mobile phone. Users with impaired vision may also be unable to follow instructions that rely on visual cues.
User interactions should be labeled clearly and concisely to provide context. For instance, a call to action that reads “Next Page” or “Learn More” is more useful than one that simply says “Click Here.”
-
Make it easier for users to see and hear content including separating foreground from background.
What this means for content creators
This guideline refers primarily to the presentation of text on a site. All type styles on your site have been designed to meet the size and contrast guidelines for text supplied by WCAG 2.0, however there may still be areas where a content creator is responsible for ensuring good separation of foregrounds and backgrounds. The most common scenario is text overlapping an image, such as in a page header where the page title and an image occupy the same space. In such cases, programatically applied overlays will darken images to meet accessible contrast ratios, but page editors still have a role to play in selecting complimentary images.
When selecting an image background, consider:
- How busy or complex is the image? An image with a lot going on, like a photograph of a crowd of people, may produce too much visual noise and compete with the text when used as a background. Images with soft focus or fewer focal points tend to work better. In the examples below, both provide the required contrast ratio between text and its backround needed to be considered accessible, but one is much easier to read.
- How does component you’re preparing behave responsively? A face appearing on the right side of the image at a larger screen size could be cropped out or appear behind your text on a smaller device. For best results, refer to component notes and image style chart recommendations in the web style guide.
- Ambient video used as background works best when its movement is smooth and subtle, to avoid distracting from foreground content. See also Guideline 2.3 on avoiding video content that may trigger seizures in certain users.
When rendering text, creators should keep in mind the following:
- The use of real text is preferable to an image of plain text. Should it be necessary to use an image, WCAG 2.0 requires that the image should always show an equivalent of 14pt text or larger (keeping in mind that images may appear smaller on smaller screens) and that these images should have appropriate alt text indicating their content. These guidelines for sizing do not apply to logos or incidental text that appears in photographs or other imagery, but alt text should still reflect any important context text within imagery may supply. For instance, an image of a street sign where the sign itself is the focus should be clearly described in alt text, but a photograph of a person on a street where signage is visible in the background but does not provide meaningful context does not need to be described.
- The styling of hyperlinks on your site is automatically applied and has been tested for contrast compliance at its default type size. However, when linking text within a paragraph, editors selecting text for in-line links should consider the length of text they choose. Industry best practices for clickable or tappable objects online recommend a minimum target size of 48pt. For an in-line link, this would refer to the pixel width of the linked text itself. This will vary with typeface and size (and the way these facets render across a responsive site), but a good rule of thumb is to always link more than one word. It is easier for a user with limited dexterity to click this link than to click this link.
- Finally, WCAG 2.0 criteria on visual presentation of text specify that, in addition to typographic rules that have already been set by the site design, paragraph text not be justified (as opposed to left aligned) as it becomes difficult for some users to read. Long passages of text that is centered, bolded, italicized, or WRITTEN IN ALL CAPS should also be avoided in the interest of legibility.
-
Do not design content in a way that is known to cause seizures.
What this means for content creators
In order to protect users with photosensitivities or epilepsy, nothing on a site should flash rapidly (at a rate of three or more flashes per second), as rapid flashing may trigger seizures in some users. Red flashes should be avoided. This is most applicable to video content, which should be produced in such a way as to be safe for all users. All video content, including ambient video (see below), has been designed for your site with accessible user controls allowing users to pause motion at any time. If video content must include potentially problematic flashing, it should carry an appropriate Content Warning before the video begins.
Ambient video, or decorative video with no audio, used as a design feature postdates the current WCAG guidelines, and as such is not specifically addressed by those guidelines. However, given what WCAG recommends for narrative videos or other animations, and taking into account that ambient video auto-plays upon page load, we recommend the following precautions:
- Ambient video should not flash rapidly at any point.
- Ambient video should be edited so that transitions are smooth and do not cause unintended flashing. This includes the transition from the end of the video back to its beginning, as ambient video typically loops.
- If used as background, ambient video should be produced in accordance with Guideline 1.4. A moment of insufficient contrast between text and an ambient video background may be permissible, but in general, the same rules about contrast and legibility should apply.
For information on video and audio recordings, see Guideline 1.2.
External resources
• More information on epileptic triggers →
-
Provide ways to help users navigate, find content, and determine where they are.
What this means for content creators
For editors, Guideline 2.4 primarily relates to giving content meaningful names and context.
- Editors should use the provided title and heading styles to break up long passages of text. Not only will this allow sighted users to more quickly skim content for what they need, but it allows users of assistive technologies like screen reading software to aurally do the same by skipping from one heading to the next to find what they need. For instance, a page on University Admissions that clearly delineates information on financial aid from that about on-campus residential life by using provided text styling options for headings will be more usable for all prospective students.
- When linking away from content by means of an in-line text link, the link’s purpose should be self-evident and give a user reasonable expectations of where it might take them. For instance, a user encountering the sentence, “The bus schedule is available online for your convenience,” may logically expect that clicking on “the bus schedule” would take them to a page where they can view information on when and where they can catch the bus. “The bus schedule is available online for your convenience” might take the user to the exact same schedule, but the text of the link itself is less indicative of its purpose.
Additional Resources
Columbia University Website Accessibility Policy →
Columbia University is committed to supporting information technology that offers individuals with disabilities an equal opportunity to participate in University programs and services. This Website Accessibility Policy (the Policy) sets forth the actions that the University must take to meet its commitment to accessibility.
What is whocanuse.com? →
It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.