Skip to main content


Accessibility fixes for Brand Patterns and Super Theme

The Brand Patterns and Super Theme show two accessibility errors in Siteimprove. Below are the fixes for these:

  1. Add a fieldset and legend to the WVU search pattern. In your _wvu-search.html file, the code should look like this:

        <div class="form-search__search-type">
              Would you like to search this site specifically, or all WVU websites?
            <div class="wvu-input-container">
              <input id="form-search__sitesearch" type="radio" name="as_sitesearch" value="<r:site:domain />" checked="true" />
              <label for="form-search__sitesearch">Search this site</label>
            <div class="wvu-input-container">
              <input id="form-search__wvusearch" type="radio" name="as_sitesearch" value="" />
              <label for="form-search__wvusearch">Search WVU</label>

    Here is how you style it in your_wvu-search.scss file:

        .form-search__search-type {
            legend {
                position: absolute;
                left: -9999999em;
            label {
                float: left; margin: 0 1em 0 .5em;
            input {
                float: left; position: relative; top: 3px; 
  2. Remove the <a name="maincontent"></a> code from your frontpage.html file and assign an ID of wvu-main-content to a <div> where your content begins. For example, in my default.html layout, I did this:

            <div id="wvu-main-content">
                <r:yield />

    You will also need to change your "Skip to Main Content" link to reference the new ID i.e. from <a class="wvu-skip-nav" href="#maincontent">Skip to main content</a> to <a class="wvu-skip-nav" href="#wvu-main-content">Skip to main content</a>

    Then style it like this in a scss/1-base/wvu-main-content.scss file (be sure to add this to your base-dir.scss file and re-compile your Sass):

            .wvu-main-content {
                clear: both;
                display: table;
                width: 100%;