Blog

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, look for the code starting around line 16. Replace that code with the following:

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

   NOTE: In later versions of Brand Patterns, <div id="wvu-main-content"></div> could be <main id="wvu-main-content"></main>.

   NOTE 2: Depending on when your theme was made, you might not need to complete this step. Use a keyboard to tab through your site and see if your "Skip to main content" link works for all of your templates.

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