Content Guide

Accessibility

URI’s website is for everyone. The institution embraces equity, diversity, and inclusion, and its website must communicate the same. 

As a state institution, we aim to be compliant with the Web Content Accessibility Guidelines (WCAG) v2.1, the technical standard for website accessibility under the Americans with Dissabilities Act (ADA). Familiarize yourself with the best practices outlined here to help ensure your site works well for everyone.

Web Accessibility at URI

Images and Videos

  • Use alternative text for images: Always include appropriate “alt” text for uploaded images.  Alt text helps visitors using assistive technology understand your web content.
  • Ensure videos have captions: All videos must be closed captioned. Those that aren’t must provide a transcript. Avoid using videos to display text that should otherwise be in the body of the page.
  • Avoid text in images: While it’s possible to use alt text as a stand-in for text embedded in images, it’s better to keep text separate. Text that’s contextually important to the page should never be included in an image.

Design and Interaction

  • Use sufficient contrast: Text must have sufficient contrast against backgrounds, and should generally not be layered over images. Some components, like heroes, are specifically designed for this purpose, but particularly busy or high-contrast images may still make reading text difficult. If any part of the text becomes illegible at any screen size, consider a different image or place the text elsewhere.
  • Use color appropriatly: People who are color-blind may see certain elements differently than intended. If you are not color-blind, use a tool like Sim Daltonism to understand how different types of color blindness impact the way text, images, and other elements may appear, and ensure that all elements are meaningful and legible to everyone.
  • Test your pages on a small screen: Many URI pages are primarily viewed on a phone. Your page must work well on small screens. Tip: design first for a phone, second for a larger display.
  • Avoid instructions on how to use a page: If your page requires instructions, redesign it. Most content can be designed intuitively for the intended audience, and unnecessary language can be avoided. For example, visitors already know how forms work; there’s no need to use language like, “fill in the form below.”
  • Avoid opening links in new windows: Research indicates that new windows make it harder for your visitor to browse your site.

Writing

  • Use plain language: Simple and positive language makes it easier for the public to read and understand our website. Consider visitors who aren’t fluent in English or otherwise struggle with reading.
  • Use proper headings: Assistive technology relies on heading elements to navigate a page’s content hierarchy. Heading hierarchy is more important than visual styling. Avoid skipping over a level when nesting content (e.g. follow an H2 with an H3, not an H4).
  • Use engaging link text: A good link informs the visitor what it is without reading the content around it. It can be a few words. Try to include a verb in your link text. Do not use “click,” “tap,” or any other hardware reference.
  • Avoid FAQs: Frequently asked/anticipated questions can be overwhelming and are known to be a visitor’s last resort and source of frustration. Instead, organize your content intuitively.
  • Avoid describing where elements appear: On a big monitor, something might be on the right, but on a smaller screen, it may appear below.  Either link directly to the resource or reference it without describing its location.