Website update March 2024: accessibility changes to links

Hi, everyone.

In our efforts to make all our electronic content (which includes documents, email, and the website) available to as many people as possible, I’ve been making changes in the website. Today’s post is about hyperlinks.

WCAG contrast requirements

You might notice that the links on the front page and all around the site look different. The Website Content Accessibility Guidelines (WCAG), which is the collection of guidelines for accessibility that is used by Canadian laws, specifies that both links and body text must have at least 4.5:1 contrast with the background (3:1 for large text) to meet WCAG 2 Level AA (the guideline, or, success criterion, that is used in the law that applies to our church). Also, WCAG specifies that link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically an underline) on mouse hover and keyboard focus. (Read the actual success criteria: 1.4.3 Contrast (Minimum) Level AA and 1.4.1 Use of Color Level A.)

What’s changed

The color of hyperlinks has been globally changed to a slightly different shade of blue which is visible on the yellow blocks on the home page. (picture 1)

WCAG 1.4.1 success criterion specifies that links be discernable when compared to body text either by color or (preferably) by an underline. Because the link-to-body text contrast fails contrast requirement, which means that the blue and black colors aren’t different enough to tell them apart, I’ve added underlines to text:

  •  In the “yellow boxes” on the home page:
    • On large text, only when you point your mouse over it (hovered) or tab to it (receives focus) (picture 2, #2)
    • On smaller text, always (picture 2, #1, #3, #4)
  • In articles around the site, always (picture 3) Note that this is a complicated process, and link underlines might not show on certain pages or parts of the site yet, but they will eventually.
  • In various places on the site where the contrast is adequate with surrounding text, when the link is hovered or receives focus (picture 4)

To read more about the laws that affect our church and will come into force in early 2025, read The Accessibility for Manitobans Act.

Questions? Send me an email!

Karin

Picture 1:

WebAIM Link Contrast Checker showing the blue link color, black text color, and yellow background color, where the link to background passes but link to body text does not.

Picture 2:

Screenshot of home page showing links on yellow background

Picture 3:

Site article text with several links that all have underlines

Picture 4:

Link showing an underline with mouse pointer hovering over it