Web Accessibility Guidelines 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.
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.
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.
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.
Correct
Incorrect
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.
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