Categories
UT Drupal Kit

Accessibility changes in the UTDK 2.25 release

The UT Drupal Kit 2.25 release included a number of changes under the heading of “Accessibility Improvements” that may impact the way existing sites are using the affected custom content components. This post will discuss the background and rationale for these changes, in order to help site owners and developers better understand the impact.

Please note that these same changes also affect sites built using the UT QuickSites service.

Background

During a recent third-part accessibility audit, a number of issues were brought to the UTDK team’s attention that had not been previously identified. The majority of these issues fell into four broad categories:

  • Keyboard navigation
  • Visual indicators for links
  • Redundant links (multiple elements in the same component linking to the same destination)
  • Ambiguous or misleading link descriptions for assistive technology users on linked images

The UTDK 2.25 release includes changes to address each of these issues.

Keyboard navigation

When using the site either on a small screen/device or with the zoom-level set high enough to trigger the appearance of the “mobile” menu navigation, users could navigate into the main menu using a keyboard by tabbing to the “hamburger” icon and hitting the “enter” key. But users could not exit the menu without either reverse-tabbing to the top of the menu again, or by selecting a menu item and navigating to a new page.

This issue has been addressed by enabling the “Escape” key as a shortcut to immediately exit the mobile menu.

Visual indicators for links

The default styling for links in the UTDK’s Forty Acres theme has always been to use color (burnt orange) as the primary indicator of a link, with an underline added on hover.

The results of the audit pointed out that for links which are surrounded by other text, color cannot be used as the sole method of distinguishing links unless there is a contrast ratio of at least 3:1 with surrounding text and 4.5:1 with the background.

To meet this requirement within the UT brand guidelines, all linksĀ  surrounded by other text are now underlined in all states.

See https://webaim.org/blog/wcag-2-0-and-link-colors/ for more information on this requirement.

Redundant links

Many of the UTDK custom content components consist of combinations of images, headlines, body text, and call-to-action (CTA) link fields. Depending on the component, this could result in as many as three of those elements linking to the same destination.

For example, the “Promo Unit” component would automatically link the image, headline, and call-to-action elements to the URL of the CTA link field.

Example Promo Unit component with annotations showing redundant links
Example Promo Unit component with annotations showing redundant links

For assistive technology users, this double or triple linking for the same destination results in seeing the same link repeated in the page’s list of links multiple times.

This issue has been addressed in two ways to make sure that each component instance only presents a single link to assistive technology users:

  1. Add the aria-hidden="true" attribute to the CTA link of the following components, in order to “hide” those duplicate links from assistive technology:
    1. Featured Highlight
    2. Flex Content Area
    3. Promo Unit
  2. Remove the link around the image fields of the following components:
    1. Featured Highlight
    2. Promo List
    3. Promo Unit

Additionally, linked headline fields on the Flex Content Area and Promo Unit components will now consistently render in burnt orange, in order to clearly and consistently indicate to sighted users that they are links.

Inaccurate link descriptions

The audit also identified a separate accessibility issue created by that same design pattern of linking the images in components to the same destination as the component’s associated link, which can result in misleading or ambiguous alt text for the images.

In the UT Drupal Kit distribution, alt text is initially entered forĀ  an image when it is uploaded to the media library. This encourages the practice of writing alt text that describes the image itself, rather than the context for the image, since the image and its alt text may be re-used in other contexts on the site.

However, when component images were linked to the same destination as the component’s link field, the image’s alt text was being inherited as the link’s description for assistive technology users. In most cases, these linked images are being used in ways that are decorative, and the image alt text would not accurately describe the link.

Example screenshot showing the impact of image alt text on link descriptions in linked images
Example screenshot of a Promo Unit and the browser inspector’s accessibility tab, showing the impact of image alt text on link descriptions in linked images

In the Featured Highlight, Promo List, and Promo Unit components, this issue is already addressed by the removal of the links on the image elements described above.

For the Image Link component, a different approach was required, since the purpose of that component is to actually provide a linked image element. In this case, the optional “Title” field on the Image Link component can now be used by content editors to override the alt text for the image that is provided from the media library.

Impact

For most site owners, the impact of these changes should be minimal. Components with images now have one fewer link target than previously, but the visibility of component headlines as links has been improved.

One creative pattern which is no longer possible with these changes is the use of a component in such a way to emulate functional “buttons” by using only the image and link fields, without a headline or body copy. The Promo List component’s square image styling in particular lent itself to this approach.

Example page showing pattern of using Promo List items as image "buttons"
Example page showing pattern of using Promo List items as image “buttons”

Conclusions

The UT Drupal Kit team is committed to providing a content management framework that meets the University’s accessibility requirements. The changes described this article will also be rolled out to the newer versions of these same components in an upcoming release of UT Drupal Kit 3.

Feedback or questions on these changes can be submitted to drupal-kit-support@utlists.utexas.edu.

 

By Paul Grotevant

Paul Grotevant is the Senior IT Manager of Web Content Management Solutions for Information Technology Services at the University of Texas at Austin.