Web Accessibility Guidelines

Color

Ensure sufficient color contrast

Please visit the Mines brand guidelines for more information on fonts and colors for Mines websites.

WCAG 2.1 AA standards require a color contrast ratio of at least 4.5:1 for normal text on a website background. If you need to check a color contrast ratio, use the free WebAIM Color Contrast Checker.

Notes on color contrast with Mines brand colors

• Default website colors are a white (#FFFFFF) background with very dark gray text (#2B2B2B).
• For contrasting elements, Mines Dark Blue (#21314D) backgrounds can be used with white text.
• Mines Dark Blue (#21314D) is a good choice for headings.
• Light Gray (#AEB3B8), Light Blue (#879EC3), and Pale Blue (#CFDCE9) can also be used as text on Mines Dark Blue backgrounds (#21314D). These colors will not pass color contrast checks for normal sized text with white text or white backgrounds.
• Colorado Red (#CC4628) is used as the color for hyperlinks in text on a white background. Use this color sparingly otherwise (see the Mines brand page for more information).
• Do not use Colorado Red and Mines Dark Blue together as text and background colors. The color combination does not have sufficient contrast.

Don’t use color alone to convey meaning

To ensure that all information is available to people with colorblindness, low vision, or no vision, make sure that color isn’t the only way you convey meaning.

• If you are using colors to code items in a spreadsheet, document, image, or webpage, include text such as “no and yes” or different icon shapes such as an X or a check to convey the same information as the color. This page has more examples of how to use text for information conveyed by color.
•   Avoid using only color to indicate links in text whenever possible. Links should also be underlined by default in paragraph or list text.
•  If links are not underlined, the color used for them must have a 3:1 contrast ratio with the surrounding text, and the link must be underlined on focus.

Images

Alternative text

There are two types of images on a website: “decorative images” that are used to increase visual appeal, and “content images” that include important context or information.

To make sure that all users can perceive non-text content on web pages, add alternative text or “alt text” to content images.

Useful alternative text

• is concise (a short sentence or phrase),
• captures what is significant about the image in its context, and
• does not repeat information in captions or other text near the image.

Decorative images should include a blank alt text attribute (alt=””) or otherwise be coded so that screen reader users can skip them.

Impact of alternative text

• Alt text makes content in images perceivable to blind or low vision users who use screen readers.
• Alt text improves the searchability of images and webpages in search engines.
• Alt text displays instead of an image if the webpage can’t load an image.

More alt-text resources

• Alt-text decision tree
• Alt-text tips and tricks
• WebAIM alt-text examples

Images of text

Do not use images of text such as screenshots or images from graphic design programs as the sole way to convey textual information. If you create and share a digital invitation, poster, flier, be sure to reproduce all the important information in text in the email or web page.

Impact of images of text

• Images of text cannot be read by screen readers.
• Many images become less clear when users try to zoom in on them.
• Users can’t copy and paste text or click on links in images, making the content in images inoperable.

Links

Use meaningful link text

When adding links to websites, emails, or documents, you should generally avoid displaying the entire URL in the text of the document. Instead, insert the link with meaningful text in the display.

“Meaningful text” is a short, descriptive phrase that describes the destination and purpose of the link and isn’t repeated on that page for links that go to other destinations. The text should work in the natural flow of the text and stands on its own for screen reader users who are navigating between all links on the page.

Use text instead of URLs

• Incorrect: Visit https://www.mines.edu/human-resources/ for benefits information
• Correct: Visit Mines Human Resources for benefits information

Don’t link generic phrases like “click here,” “see more,” or “website”

• Incorrect: Click here for faculty benefits and click here for staff benefits
• Correct: More information is available about faculty benefits and staff benefits

Underline links in text by default

Avoid using only color to indicate links in text whenever possible. Links should also be underlined by default in paragraph or list text. If links are not underlined, the color used for them must have a 3:1 contrast ratio with the surrounding text, and the link must be underlined on focus.

Links in menus or text on buttons that serve as links do not need to be underlined by default, but these links should also have an indication that they are a link on focus.

Using images as links

If you are using a decorative image as a link alongside a text link, use an empty alt text value of alt=””. If possible, use a single link to encompass both the image and the text link rather than linking them separately.

If you use an image or icon as a link or button, the alt text should indicate the function of that link or button such as “print this document” or “open PDF in new window.” The Web Accessibility Initiative has more examples of alt text for functional images.

Text

• Avoid using all caps as a heading style or for emphasis. Words written in all caps may be harder to read for users with some disabilities, such as dyslexia. Words in all caps may also be read as acronyms (letter by letter) by screen readers.
•  Do not underline words for emphasis in web pages or electronic documents. Underlined words should only indicate that the words are a link.
• Screen reader software does not read whether words are in bold or italics. Make sure that emphasis is clear without the use of bold or italics. Avoid using large blocks of bold or italic text, as these styles may make text more difficult to read for some users.

Headings

• Use headings for structure

  Organize web content with headings to provide structure and clarity.

  • Each page should have one H1 heading that contains the title of the page.
  • Use other headings in order (don’t skip heading levels).

Lists

When presenting content visually as lists, use HTML lists to encode the information as a list. Numbered or lettered lists should be marked as ordered lists and lists with bullets should be marked as unordered lists. Semantic markup helps users of some assistive technologies navigate lists or skip them.

Keyboard Navigation

People who use screen reader software and people who cannot use a mouse navigate websites using the keyboard only. This means that all navigation elements, content, and functionality on a web page must be operable without a mouse.

To test navigation and other elements, press Tab repeatedly to cycle through all the elements on a page in order. Make sure that each element is highlighted with a focus indicator to show that it is active. When you have highlighted an interactive item such as a menu, slider, or form, make sure that it can be operated using keys such as the arrow keys or Enter key.  

Forms

If you need to create a form for short-term data collection, signups, or a survey, consider using a form created with Mines-provided services such as Google Forms, Microsoft Forms, or QuestionPro. These services are generally accessible and less complex to set up than an HTML form. If you need to use an HTML form in WordPress, consult the WAI Forms Tutorial on making accessible forms.

Tables

Do not use tables for web layout

Don’t use HTML tables for web page layout, such as arranging images or icons in a grid, or creating columns for text. Tables should only be used for tabular data. If you need to arrange content in a grid or columns, use the layout editor or a responsive CSS theme that will scale to many different screen sizes.

Create accessible tables for data

Data tables should include headers and captions and use correct HTML markup for each cell of the table. Tables are easier to navigate if you don’t leave cells blank or merge cells, but if your table is complex and needs these attributes, the WAI table tutorial explains how to mark up tables.