Common Errors and Solutions

This page gives a very brief overview on fixing and avoiding some of the most common errors found in regards to web accessibility. For solutions to a specific problem, visit the Section 508 Standards and Solutions section of this website.


  • Use the clearest and simplest language appropriate for a website's content.
  • When applying style sheets, make sure the page is readable when style sheets are turned off.
  • Identify any changes in language (such as English to Spanish).
  • Do not use blinking text or marquees.
  • Label headings with proper HTML mark-up, but do not skip headers.
    Headings Example:

    Incorrect (using an H4 heading after an H1)
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <h4>Recent Activity</h4>
    <p>Maecenas urna fermentum id, molestie in, commodo porttitor. </p>
    Correct (headings kept in sequential order)
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <h2>Recent Activity</h2>
    <p>Maecenas urna fermentum id, molestie in, commodo porttitor. </p>


  • Insert Skip Navigation links that take users directly to the page content (already built-in in the new Web Platform).
  • Make sure hyperlinks can be accessed with the keyboard using the TAB-key.
  • Make your hyperlinks descriptive, but concise. Avoid using the text "click here". Use the title attribute for a more detailed description of the link destination if needed.
  • Do not use the same text for links that go to different destinations.


  • All images must include the alternative attribute (alt="image description") to provide a text equivalent for the image.
    <img src="welcome.jpg">

    <img src="hrbanner.jpg" alt="Human Resources">

  • If you use decorative images that do not convey any type of information or data, use the empty alternative attribute (alt="").


  • When using color, make sure to use sufficient contrast between the background and foreground elements.
  • Ensure that all information conveyed with color is also available without color. Consider how a gray scale user would view the same image.
    Click on the red button.
    Click on the Stop button.
    Grayscale Button
    For a gray scale user, its impossible to figure out which button is red or green. By focusing on the word, our instruction is no longer dependant on color. Also note the contrast for the Start button, the contrast is low which makes the button text hard to read.


  • Identify row and column headers with the table header tag <th>.
  • Label table elements with scope and header attributes when creating data tables.
  • Do not use tables for layout purposes. Use DIV tags to create page layouts.
  • Avoid copying and pasting tables from Microsoft Word. It can result in complicated coding and may require a clean up. We recommend you use CSS to style your table.
    Table Pasted from Word:
    <table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" align="left" width="432" style="width: 500; border-collapse: collapse; border: medium none; margin-left: 2.25pt; margin-right: 2.25pt">
    <td width="133" style="width: 99.4pt; border: 1.0pt inset #111111; padding: 0in; background: #FFD400">
    Simple Table Code with a Class for CSS Styling:
    <table class="normal">


  • For video and audio media, provide captions and/or a transcript
  • Avoid causing the screen to flicker
  • If you use frames, title each frame for users using assistive technology.
    <frame name="topframe" src="menu.html">
    <frame name="topframe" src="menu.html" title="page navigation">
  • If a webpage cannot be made accessible, link to an alternative page that is accessible.
  • Use quotation marks on all attributes.
    <img src=welcome.jpg>
    <img src="welcome.jpg" alt="">