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 Criterion

    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.

    Problem

    • Users in general, and particularly those with low vision, have trouble reading text if the contrast against the background is insufficient.

    Examples

    Good Contrast
    All the things one has forgotten scream for help in dreams - Elias Canetti
    All the things one has forgotten scream for help in dreams - Elias Canetti
    Poor Contrast
    All the things one has forgotten scream for help in dreams - Elias Canetti
    All the things one has forgotten scream for help in dreams - Elias Canetti

    Tips for Creating Better Contrast

    • It is much easier to achieve sufficient contrast by using dark text on a light background.

    Exercise

    WCAG Success Criterion

    WCAG Sufficient Techniques

    Testing Method

    • Install the WCAG Color Checker toolbar for Firefox
    • Open Firefox
    • Click on Tools > ColorChecker
    • The Color Checker panel will open
    • Click on 'Document' and then 'Test (WCAG 2)'
    • Is the Luminosity Ratio above 4.5 for all text elements? (Tip: You can click on each ratio to see what text it refers to)
    • Tip: For additional testing try Contrast Analyzer

  4. Make each page navigable by keyboard alone

    Problems

    • Screen reader users generally do not use a mouse.
    • 40% of people with a motor impairment have difficulty using their hands. Many cannot use a mouse.

    WCAG Success Criterion

    WCAG Sufficient Techniques

    Testing Method

    • Try tabbing through the page using the keyboard
    • Can you select and navigate menus using the arrow keys?
    • Do mouse hover states for links and buttons work?
    • Can you successfully tab to the end of the page?
    • Tip: You can use SHIFT and TAB to tab back up the page

    Keyboard Friendly CSS

    • Wherever you have a style for :hover, make sure that you also have a style for :focus

    Bad
    /* link styles */
    a:link { color: #03c; }
    a:visited { color: #606; }
    a:hover { color: #c00; }
    a:active { color: #600; }
    li { margin-bottom: 0.4em; }

    Good
    /* link styles */
    a:link { color: #03c; }
    a:visited { color: #606; }
    a:hover { color: #c00; }
    a:focus { color: #600; }
    a:active { color: #600; }
    li { margin-bottom: 0.4em; }

    Exercise

    • Open a web page that you are familiar with
    • Try tabbing through the page from top to bottom
    • Can you see which link has focus?

  5. Allow pausing of animations

    Problems

    • Automatically updating content can be extremely distracting for users with attention difficulties.
    • Users will often try and scroll page content in order to remove the animation from their field of view, or will try and look at something else in the room.

    Example

    animated gifs can be annoying

    Tips

    • Allow animations to be paused or stopped.
    • Make sure that banner animations don't distract users from the key purpose of the page.
    • Users are more likely to click on banner animations on content pages, rather than top level navigation pages.

    WCAG Success Criterion

  6. Add skip to content links.

    WCAG Success Criterion

    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.

    Problem

    • Users with visual disabilities rely on page titles to identify pages when they have multiple pages open.

    Example

    Bad
    <title>Web Accessibility</title>

    Good
    <title>My Page Title - Web Accessibility - The University of Melbourne</title>

    WCAG Success Criteria

    WCAG Sufficient Techniques

    Check: Manually

  8. Avoid 'click here' link text.

    Problem

    • Screen reader users often navigate using a list of links. Unless the link describes the destination, they need more information in order to decide if they want to follow it.

    Tips

    • Links to web pages should open in the same browser tab.
    • Links to PDFs should open in a different browser tab.
    • Link text should:
      • Describe what it’s linking to
      • Be meaningful to your audience
      • Be as short as possible, while remaining meaningful.
    • Never use generic text such as ‘click here’ or ‘more’ as link text.

    Bad
    More information about how to find a prospective supervisor can be found here.

    Better
    More about finding a prospective supervisor.

    Never use a URL as link text (unless you have a particular reason to publicise a URL).

    Bad
    Read more about the University’s history at https://about.unimelb.edu.au/our-history.

    Better
    Read more about the University’s history

    WCAG Success Criterion

    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

    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

    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

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