Skip to main content
  • Home
  • Tutorials
  • How to Make Your Super Template and Shared Partials Accessible

How to Make Your Super Template and Shared Partials Accessible

The Super Template and shared partials have built-in features to make your components accessible. To make your web pages accessible (this does not include making your content accessible in general, only your page template), there are 2 common things you need to do:

  1. Set a main component.
  2. Add an id that corresponds to your component’s aria-labelledby attribute.

The aria-labelledby attribute is pre-populated in your template, and the corresponding id is pre-populated either in your component’s <h1> or <h2> tag, either in the template or in your component’s header region. But when setting an id manually i.e. in your component’s header region, you have to make sure your aria-labelledby and id match, and are unique relative to other components.

For example, if you are using a featurette with an instance of 2, make sure no other featurettes have the same instance number, and you must set 2 manually in your component’s header region (more on this below).

Set a main content region

If your site is based on the Super Theme, in your page’s custom data (Properties > Custom Data), each slot has an checkbox next to “Is main?”. To make a component the main component, just check the box.

Screenshot showing how to set a component to main

This will wrap your component in a <main> tag.

Note you can set any number of components to be the main component, but you should only set one component to be the main component.

For shared partials, you can pass in a variable to set the component to main. Set $isMain to 1 right before calling the partial for your component.

<r:set_var name="isMain" value="1" />
<r:partial name="wvu-hero" theme="University Relations: WVU Design System" />

Add an ID that corresponds to your component’s aria-labelledby attribute.

By default each component is contained in a <section> tag unless you designate it as the main component. aria-labelledby attributes are built in to your <section> tag and set by default. The opening <section> tag looks something like this:

<section aria-labelledby="featurettes-1-label">

But you need to make sure an element within your component (usually a header) has an ID that corresponds to this label. In the editable region for your header, for example, you want to have an <h2> tag that looks something like this:

<h2 class="wvu-shout display-3" id="featurettes-1-label">My Header Text</h2>

Note that only some components need an ID applied manually. A hero component always has a header that is assigned an id that matches the component’s aria-labelledby tag. So you don’t need to worry about it. But for other components, you will need to add your own <h2> tag (most have one as the default content of the component’s header region).

Sometimes your component will not have a header visibly displayed. If your component does not have a header, you can create a header that is hidden in the header region of your component, but visible to screen readers. Just make sure to apply an sr-only class, like this:

<h2 class="sr-only" id="featurettes-1-label">My Header Text</h2>

Just make sure your header text accurately describes the content of the component. For example, if your component contains a news feed and a calendar, you might use “What’s Happening on Campus” or even “News Feed and Calendar” as your header text.