Common problems found by Web Audit

Skill Level: 
Intermediate

This guide will walk you through how to fix some of the most common problems discovered by UNL WebAudit

    A PDF link was found

    This notice means that WebAudit found a link to a PDF document on your site. The use of PDF documents are discouraged because they do not work well on mobile and are often not built with accessibility in mind. The majority of the time, these PDF documents contain information that would be perfectly suited (and work better) as a web page on your site. Converting PDF content to webpages has the benefits of making the content more accessible, mobile-friendly, and UNL branded. Tools like UNLcms make creating web content a breeze, and even offer tools to create web forms which can easily replace PDF forms.

    Ampersands (&) did not start a character reference

    This HTML error means that an & character was found on your page that was not escaped. The ampersand should always be escaped in HTML documents to prevent browsers from trying to interpret them as the beginning of a character reference such as &

    Ampersands (&) in URLs

    When writing a URL as text in HTML & needs to be written as &

    An anchor tag must be around text or an image, the contents can not be blank.

    <a href="">something must go in here</a>

    Bad value "" for attribute "href" on element "a": Illegal character in path segment: not a URL code point.

    URLs can not have spaces, replace spaces with %20

    Bad value _ for attribute _ on element _: Expected a digit but saw _ instead

    This error usually means that a percent value was given for an attribute that requires a pixel value. Most HTML height and width attributes require pixel values. Furthermore, the height and width attributes, as well as inline CSS should be avoided in favor of styles in the HTML <head> or in CSS style sheets. Removing presentation from HTML markup will help improve code maintainability. Example: remove width="100%"

    Consecutive hyphens did not terminate a comment

    HTML5 does not allow for consecutive hyphens such as -- to be used inside of a comment. You can fix this by adding a space between hyphens such as - -

    Duplicate ID _

    The id="" must be unique. Rename the id="" for one of the elements.

    Place <link> in the <head> instead of the <body>

    Element "style" is missing required attribute "scoped"

    When using <style> in the body, add scoped to the style tag <style scoped>. It is preferred to place <style> in the <head> instead of the <body> when possible.

    Element "thead" not allowed as child of element "table" in this context.

    The element <thead>...</thead> must open and close before the <tbody>...</tbody>. For example:

    <table>
      <thead>
      ...
      </thead>
      <tbody>
      ...
      </tbody>
    </table>
    

    End tag for "body" seen, but there were unclosed elements

    Most likely missing a closing div tag.

    Fieldset does not contain a legend element.

    This means that a form on the page uses a <fieldset> to group form controls, but does not have an associated <legend> element. The <legend> element is used to describe the group of form controls, and is required to help users identify the purpose of the grouped content.

    The following example is not valid because it does not have a <legend> element:

    <form>
       <fieldset>
           <input type="radio" name="accept_agreement" id="yes"> <label for="yes">yes</label>
           <input type="radio" name="accept_agreement" id="no"> <label for="no">no</label>
       </fieldset>
    
       <input type="submit">
    </form>
    

    The following is valid

    <form>
       <fieldset>
           <legend>Do you agree to the terms?</legend>
           <input type="radio" name="accept_agreement" id="yes"> <label for="yes">yes</label>
           <input type="radio" name="accept_agreement" id="no"> <label for="no">no</label>
       </fieldset>
    
       <input type="submit">
    </form>
    

    In UNLcms, the WebForms module allows you create fieldsets to group related form controls. If you use fieldsets with webforms, be sure to give each fieldset a title, which will be used for the fieldset legend when rendered to the user. One thing to note here is that you should not check the box to 'Hide Label' under the fieldset options.

    Legends are required so that screen readers and other assistive technology can properly interact with the fieldset element in a form.

    Heading tag found with no content.

    An <h1>...<h6> tag must be around text, the contents can not be blank or contain something that isn't text, like an image.

    <h2>text must go in here</h2>

    Iframe element requires a non-empty title attribute that identifies the frame.

    Add title="text describing iframe contents goes in here" inside the iframe tag

    Image missing alternate text

    When adding an image to a page, please be sure to fill out the ‘Image Description’ in the image uploader or include an alt attribute with HTML. Alts help with search engine optimization and are useful for people using assistance devices or opting not to load images.

    Links must have text. If the link is an image, the image must have alternate text to describe it.

    The following examples are not valid

    <a href="https://unl.edu"></a>
    <a href="https://unl.edu"><img src="unl-logo.jpg" alt="" /></a>

    The following examples are valid

    <a href="https://unl.edu">University of Nebraska-Lincoln Website</a>
    <a href="https://unl.edu"><img src="unl-logo.jpg" alt="N logo. Return to University of Nebraska-Lincoln Website" /></a>

    This notice means that a link was found on your page that is now permanently redirecting to a different web page. After time passes, permanent redirects often turn into broken links because the redirect is no longer maintained. It is a good idea to update these links to the new URL.

    No "p" element in scope but a "p" end tag seen.

    Either a closing </p> tag is missing or the <p> tag contains a block element

    No space between attributes

    For elements with multiple attributes, put a space between them.

    The following example is not valid

    <img src="unl-logo.jpg"alt="University of Nebraska-Lincoln logo" />

    The following example is valid

    <img src="unl-logo.jpg" alt="University of Nebraska-Lincoln logo" />

    This error means that a link was found on your site which no longer works. Broken links can lead to bad user experience, and cause users to look elsewhere for information. It is often possible to tell which link on the page is broken by looking at its URL. If you still can not locate the link, it might be helpful to view the page source in your browser, and search for the last part of the link. In other words if the link is http://www.unl.edu/folder/test.html, search for test.html.

    Saw """ when expecting an attribute name.

    An attribute has too many quotations.

    The following example is not valid

    <p class="dcf-txt-center"">...</p>

    The following example is valid

    <p class="dcf-txt-center">...</p>

    The relationship between td elements and their associated th elements is not defined. Use either the scope attribute on th elements, or the headers attribute on td elements.

    This error occurs when responsive table code is missing headers="", which contains corresponding row and column id attributes, in the td tags. Consider using the Responsive Table Generator.

    The "type" attribute on the "ul" element is obsolete.

    For lists, type="disc" is obsolete. Use CSS instead: <ul style="type:disc;">.
    *Please note that the default setting for lists is 'disc'. Removing the attribute type="disc" is also valid.

    This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1

    Text or background color is too light or dark. Use a color contrast tool to find values that pass WCAG 2 AA and AAA compliance.

    The "frameborder" attribute on the "iframe" element is obsolete. Use CSS instead.

    Remove frameborder=0 from the <iframe> tag and in the CSS add

    iframe {
    border: none;
    }

    The font element is obsolete. Use CSS instead

    In HTML5, the <font> element is now obsolete. To fix this error, remove the font element and use CSS to change the font instead. The reason for this is that HTML should only contain structural and semantic markup, while presentation should be separated into the CSS layer. This best practice will help ensure that your code is more inter-operable and easier to maintain. Take the following as an example.

    <font size="3" color="red">This is some example text</font>

    The above code could be replaced by:

    
    <!-- Style should be in the head or in a separate style sheet --!>
    <style>
    .font-style-1 {
     font-size: 3em;
     color: red;
    }
    </style>
    
    <!-- the span should be in the body --!>
    <span class="font-style-1">This is some example text</span>
    

    The UNLedu framework dependents are out of date

    This error means that your website does not have the latest includes and assets for the UNLedu Web Framework. Please see our guide on Synchronizing the UNLedu Web Framework for details on how to fix this problem. Every month the UNLedu Web Framework is updated to improve security, accessibility, fix bugs, and/or improve design. It is important to stay up to date because only the latest version of the framework is supported and the use of the latest version is requires by the terms of use.

    The UNLedu framework HTML is out of date

    This error means that your website is not in the latest major version of the UNLedu Web Framework. As with the dependents error, it is required that your website stay up to date with the latest version. Please see our guide on Synchronizing the UNLedu Web Framework for details on how to fix this problem.

    The width attribute on the TD element is obsolete. Use CSS instead

    As with the font element is obsolete error, CSS should be used to apply a width rather than a width attribute.

    Element 'ul' not allowed as child of 'ul' at this point.

    Double check list nesting. Lists should follow this pattern:

    
    					<ul>
      <li>Beef
        <ul>
          <li>ribs</li>
          <li>roast</li>
          <li>steak</li>
        </ul>
      </li>
      <li>Pork</li>
      <li>Lamb</li>
    </ul>

    Unclosed element 'div' / End tag 'main' seen, but there were open elements.

    A <div> in the body is not properly closed.

    Contributed By: 
    IANR Media
    IIM