All Rutgers websites are required to follow the Rutgers IT Accessibility Initiative. While your site template is accessible to all users with disabilities right out of the box, any additional content you add must follow these guidelines as well.
Here are some easy steps you can take to make your site’s content more accessible.
Links
All hyperlinks should be given labels that hint at their destination. This helps screen reader users who might navigate by listening to a list of all the links on a page out of context.
In order to be accessible, link labels should:
- Hint at the page they lead to
- Include (PDF) or (Video) or other signifier at the end if it’s a specific file type
- Make sense out of context
And should not be:
- A long URL
- Vague phrases like “click here”
- Excessively long
Following these practices also benefits sighted users who want to quickly skim your page for a certain link.
Headings
Headers such as Heading 1 (<h1>), Heading 2 (<h2>), etc., are a not only a great way to organize your content, but also help screen reader users get a quick idea of what your page is about.
For this reason, it’s best to use heading tags instead of regular large bolded text when labeling content because of the difference it makes when a screen reader reads the HTML of your page.
Using headers instead of plain text to organize content creates:
- An better experience for screen reader users
- A uniform, visually-appealing look for your pages
- Less work for you!
Be sure to not skip any headings in your hierarchy – move from h1 to h2 instead of h1 to h3 to denote subcategories, even if you prefer the look of Heading 3. To skip directly from h1 to h3 is like having no number two on a table of contents.
You can access headings at the top left drop down menu of any WYSIWYG editor when editing a page or post on Sites@Rutgers.
Alt Text
Alt text is a brief description of an image’s purpose on a webpage for those who cannot view it. You can use the “alt text” box in the media library to associate this with each image.
Alt text should:
- Reflect the image’s purpose on the page
- Be 125 characters or less
- Not include phrases like “picture/image of…”
For example, if you’ve included an image of yourself with students in your lab, your alt text might be “Henry Rutgers with his student lab members”.
Try to describe as much of the image as you can in as few words as possible.
Captions
If you include a video on your site that contains spoken words, it must have either closed (can be toggled off) or open (cannot be toggled off) captions. This is for the benefit of any deaf or hard of hearing users who may visit your site, as well as any hearing users who prefer to have subtitles on.
Captions should always be:
- Legible
- Accurate
- Synced properly with the audio
Try to the best of your abilities to use only videos with captions that fit these standards on your site – or even create your own if you’re up for it.
YouTube videos with auto captioning can do in a pinch, but because those captions are automatically generated, they tend to be full of inaccuracies and do not serve as an adequate replacement for audio. Avoid relying on these types of captions.
Transcriptions
A transcription is a plain text copy of the spoken words in any video or audio media. This includes:
- Text-heavy images
- Audio recordings
- Video recordings
Why transcribe? Anyone unable to read captions or hear audio, such as deaf-blind users, cannot access that information unless it can be read by a screen reader.
There are also several side benefits to transcribing your content:
- Plain text is indexable by search engines like Google, while audio is not
- Having your content available in multiple formats makes it more versatile
- It’s easier for your users to skim text for a specific line than an entire recording
When transcribing, make sure that your transcriptions are accurate and readable. Check this beginner’s guide to transcriptions to learn more about how you can transcribe your content.
Color
Any content you add to your site must account for color contrast ratio requirements, as well as colorblindness.
Here are a few principles to follow when creating infographics or image-based content modules:
- The smaller your text, the higher the contrast
- Text superimposed onto an image must contrast the background
- Avoid highlighting information in red and green
- Make your points in a way that doesn’t rely on color
If you’re not sure whether your color contrast ratio is acceptable, there are many color contrast checkers available online to help you verify.
If you keep these guidelines in mind, you will be well on your way to creating a versatile site that is open to a diverse range of users.