Common problems found by WebAudit

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

    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.

    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

    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

    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.

    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.

    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.

    Contributed By: 
    IANR Media
    IIM