Web Accessibility for Content Editors

Content editors play an important role in ensuring RIT’s online content is accessible.

According to the Web Accessibility Initiative, web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Types of disabilities can include visual, auditory, physical, speech, cognitive, language, learning, and neurological.

Web accessibility also benefits people without disabilities, including people using mobile phones, people with changing abilities due to ageing, people with “temporary disabilities” such as a broken arm, and people with “situational limitations” such as being in a loud environment.

The Web Content Accessibility Guidelines (WCAG) define requirements for designers and developers to improve accessibility for people with disabilities. The following guidelines will help you create more accessible online content.

Text Alternatives

Alt tags

Images must contain useful alt text, in order to describe the image for people using screen readers. Alt text also appears when the image does not load on the page. Alt text should be concise and descriptive.

College student wearing chef coat handing out a paper grocery bag

Good alt text

alt="College student wearing chef coat handing out a paper grocery bag."

Bad alt text

alt="Student"
alt="photo"
alt=""

Title tags on embedded content

Videos and other content embedded (iFrames, etc.) must have meaningful title tags.

Screenshot of a youtube video, showing the front of the GCI building.

Good title tag

title="A Tour of the new Global Cybersecurity Institute at RIT"

Bad title tag

title="YouTube video player"
title=""

Using images of text

Do not use images to display text, unless it is a logo or diagram. Alt text on a diagram must include the text in the image.

Diagram showing a graphic of a street map with 5 circles of text: Collaboratory, Resiliency, Risk, Respond, and Recovery.

Good alt text

alt="Diagram showing a graphic of a street map with 5 circles of text: Collaboratory, Resiliency, Risk, Respond, and Recovery."

Bad alt text

alt="Diagram of circles"

Links

Meaningful

Link text should never be just 'read more' or 'learn more', because this is not helpful to a screen reader, and can be confusing if multiple links have the same text. All link text should be unique on a page, and should be descriptive of what the user is selecting.

Descriptive

Link text should not be URLs. Instead, be descriptive of the link.

Correct

Learn more on the Admissions website.

Incorrect

Learn more at https://www.rit.edu/admissions

Consistent

Use consistent naming for links on the same page, that go to the same location.

Correct

The 2023 Health Care Symposium will be held next month. Make sure you don't miss out!
Register for the Symposium

This year's Symposium will be held in The SHED.
Register for the Symposium

Incorrect

The 2023 Health Care Symposium will be held next month. Make sure you don't miss out!
Register for the Symposium

This year's Symposium will be held in The SHED.
Register on the Symposium form

Page Layout

Proper use of headings

When displaying text, use headings tags when appropriate. The page title is the only H1 on the page. Row headings are automatically set as H2. With this, any headings within a row should start with H3, and then follow accordingly.

When creating News stories, do not use heading tags. Instead, use style headings for laying out the text.

Meaningful sequence

The elements of a page will re-flow depending on the width of the browser and device being used. Because of this, you should avoid language such as "see below", or "the image to the right." 

Color and Color Contrast

Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

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.

The WebAIM Contract Checker allows you to enter the hex value for the text color and the background color and check for normal text and large text ratios.

Captions and Transcripts

Video

All videos need open or closed captions. This applies to both live and pre-recorded video.

Silent videos should include a .vtt file describing the video's scenes along with timestamps. See this example of a properly made .vtt file.

Audio

For audio, an audio transcript is sufficient. Having captioned video is better.

Webforms

All fields in a webform must be accompanied by a useful label tag.

References

The Web Content Accessibility Guidelines (WCAG) define requirements for designers and developers to improve accessibility for people with disabilities. These resources offer more in-depth information and explanation of the specific guidelines.

Understanding WCAG 1.1.1: Non-text Content (text alternatives)

Understanding WCAG 1.4.5: Images of Text

Understanding WCAG 1.4.1: Use of Color

Understanding WCAG 2.4.4: Link Purpose (In Context)

Understanding WCAG 2.4.6: Headings and Labels

Understanding WCAG 1.3.2: Meaningful Sequence

Guideline 1.2 – Time-based Media

Understanding WCAG 3.3.2: Labels or Instructions