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>
         

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