Skip to main content

Blog

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">
          <fieldset>
            <legend>
              Would you like to search this site specifically, or all WVU websites?
            </legend>
            <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>
            <div class="wvu-input-container">
              <input id="form-search__wvusearch" type="radio" name="as_sitesearch" value="wvu.edu" />
              <label for="form-search__wvusearch">Search WVU</label>
            </div>
          </fieldset>
        </div>
        

    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 />
            </div>
         

    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%;
            }