Top Tips

The 10 most common accessibility problems on the University of Melbourne website.

  1. Add alt text to images and add labels to forms

    Problem

    • Images, photos, and graphics are unusable by screen reading programs unless they are assigned alternative text.

    Example 1

    Students socializing on the South Lawn

    Bad
    <img src="Uni life">

    Good
    <img src="students.jpg" alt="Students socializing on the South Lawn">

    Example 2

    Percentage of primary school students studying Languages, 2007–13. The percentage of primary school students studying Languages has dropped from 73.6% in 2007 to 55.5% in 2012 and then increased again to 62.6% in 2013.

    Bad
    <img src="graph-1.jpg" alt="Percentage of primary school students studying Languages, 2007–13" >

    Good
    <img src="graph-1.jpg" alt="Percentage of primary school students studying Languages, 2007–13. The percentage of primary school students studying Languages has dropped from 73.6% in 2007 to 55.5% in 2012 and then increased again to 62.6% in 2013.">

    Example 3

    Figure 3.1. Percentage of primary schools providing Languages programs, by year level, 2007–13. Higher year levels appear to provide more Languages programs. Each calendar year the percentage of schools has dropped with the lowest point in 2012 (averaged around 50%), which increased again to an approximated average of 60% in 2013.

    Bad
    <img src="graph.jpg" alt="Graph showing primary school language programs" >

    Good
    <img src="graph.jpg" alt="Figure 3.1. Percentage of primary schools providing Languages programs, by year level, 2007–13. Higher year levels appear to provide more Languages programs. Each calendar year the percentage of schools has dropped with the lowest point in 2012 (averaged around 50%), which increased again to an approximated average of 60% in 2013.">

    Tips for Adding Alt Text

    • If the image conveys content, add alt text.
    • If the image is purely decorative, add null alt text (alt="").
    • When deciding whether an image is purely decorative, ask yourself the following:
      • Why was the image chosen?
      • Is the content in the image already described in the surrounding text?
    • Don't be too brief and don't be too literal.

    Practice Exercise

    WCAG Success Criterion

    WCAG Sufficient Techniques

    Testing Method

    • Install the WAVE toolbar for Firefox or the WAVE toolbar for Chrome
    • Open Firefox or Chrome.
    • On the WAVE toolbar, click on 'Errors, Features, and Alerts'.
    • This will perform a quick accessibility check of the page. Problems are highlighted in red. Things needing manual checking are shown as a question mark.
    • Are there any images missing alt text?
    • Tip: Click on 'Reset Page' to remove the errors and alerts.
    • Tip: If the an error is being reported but there is no red flag, try clicking on 'Disable Styles'.
    • Tip: Try making changes to the code with Firebug and then retesting the page.

  2. Headings

    Problem

    • 64% of screen reader users use headings to navigate the page, whereas only 8.5% read through the page.
      If headings are not included in the page, users are forced to listen to the entire contents of the page.

    Example

    Bad
    <b>WCAG Success Criteria</b>

    Good
    <h3>WCAG Success Criteria</h3>

    Tips for Creating Better Headings

    • Headings should be short and concise
    • Headings should only be used when followed by content
    • By reading the headings alone users should get a good idea of the page contents
    • Headings should be mainly used for page specific content, rather than content which appears on every page
    • Heading tags should not be used to change font size or add emphasis.
    • Appearance and presentation of text should be controlled via CSS rather than heading tags
    • Heading levels can't be skipped i.e. you can't jump from <h1> to <h3>
    • The contents of <h1> tag is of moderate importance to search engines
    • Keywords in <h2> - <h6> tags are of low importance to search engines, but are of key importance to screen reader users
    • Identification of structural elements of web pages, such as banners, menus and footers, are best achieved via the use of WAI-ARIA Landmarks

    Exercise

    WCAG Success Criteria

    WCAG Sufficient Techniques

    Testing Method

    • Install the WAVE toolbar for Firefox
    • Open Firefox
    • On the WAVE toolbar, click on 'Outline'
    • This will perform a quick accessibility check of the page. Problems are highlighted in red. Things needing manual checking are shown as a question mark list of page headings <h1> - <h6> will be displayed.
    • Is there a list of headings for the page?
    • Is the list of headings an accurate reflection of the page contents?
    • Tip: Click on 'Reset Page' to remove the errors and alerts
    • Tip: Try making changes to the code with Firebug and then retesting the page

  3. Provide sufficient contrast between text and background colors.

    WCAG Success Criterion: 1.4.3 Contrast (Minimum)

    WebAIM recommendation:

    • Text and images of text have a contrast ratio of at least 4.5:1.
    • Large text (over 18 point or 14 point bold) has a contrast ratio  of at least 3:1

    Check with: Contrast Analyzer 2.2

  4. Make each page navigable by keyboard alone.

    WCAG Success Criterion: 2.1.1 Keyboard

    WebAIM recommendation:

    • If a page or application has a time limit, the user is given options to  turn off, adjust, or extend that time limit. This is not a requirement  for real-time events (e.g., an auction), where the time limit is  absolutely required, or if the time limit is longer than 20 hours.

    Check by: Tabbing through the page with the keyboard

  5. Allow pausing of animations.

    WCAG Success Criterion: 2.2.2 Pause, Stop, Hide

    WebAIM recommendations:

    • Automatically moving, blinking, or scrolling content that lasts  longer than 3 seconds can be paused, stopped, or hidden by the user.  Moving, blinking, or scrolling can be used to draw attention to or  highlight content as long as it lasts less than 3 seconds.
    • Automatically updating content (e.g., automatically redirecting  or refreshing a page, a news ticker, AJAX updated field, a notification  alert, etc.) can be paused, stopped, or hidden by the user or the user  can manually control the timing of the updates.

    Check by: Visual examination

  6. Add skip to content links.

    WCAG Success Criterion: 2.4.1 Bypass Blocks

    WebAIM recommendations:

    • A link is provided to skip navigation and  other page elements that are repeated across web pages.
    • If a page has a proper heading structure, this may be considered  a sufficient technique instead of a "Skip to main content" link. Note  that navigating by headings is not yet supported in all browsers.
    • If a page uses frames and the frames are appropriately titled,  this is a sufficient technique for bypassing individual frames.

    Check: Manually

  7. Add a meaningful page title.

    WCAG Success Criterion: 2.4.2 Page Titled

    WebAIM recommendation:

    • The web page has a descriptive and informative page title.

    Check: Manually

  8. Avoid 'click here' link text.

    WCAG Success Criterion: 2.4.4 Link Purpose (In Context)

    WebAIM recommendation:

    • The purpose of each link (or form image button or image map  hotspot) can be determined from the link text alone, or from the link  text and it's context (e.g., surrounding paragraph, list item, table  cell, or table headers).
    • Links (or form image buttons) with the same text that go to  different locations are readily distinguishable.

    Check: Manually

  9. Keep navigation consistent.

    WCAG Success Criterion: 3.2.3 Consistent Navigation

    WebAIM recommendation:

    • Navigation links that are repeated on web pages do not change order when  navigating through the site.

    Check: Manually

  10. Avoid pop-up windows.

    WCAG Success Criterion: 3.2.5 Change on Request

    WebAIM recommendation:

    • Substantial changes to the page, the spawning of pop-up windows,  uncontrolled changes of keyboard focus, or any other change that could  confuse or disorient the user must be initiated by the user.  Alternatively, the user is provided an option to disable such changes.

    Check: Manually

    11. See Also

    A comparison of common web accessibility problems

    Contact Us

    For assistance or to report accessibility problems please contact:

    Andrew Normand
    Web Accessibility Lead
    Email: anormand@unimelb.edu.au
    Phone: +61 3 9035 4867