Top Tips for QA Testers

QA Testing can help identify 6 common accessibility problems.

  1. Use Headings to Describe Page Content

    Problems

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

    Examples

    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.

    Testing Method

    • Open Google Chrome
    • Install the HeadingsMap extension
    • A new icon will appear in the Chrome toolbar.
    • Scan the page and guess which text is a heading.
    • Click on the HeadingsMap icon to view the page headings.
      • Do the headings match what you thought?
      • Is anything missing?

    Exercise

    WCAG Guidelines and Techniques

    The Web Content Accessibility Guidelines (WCAG) are the international standard for accessibility.

  2. Add a meaningful page title.

    Problems

    • Page titles are the first thing that screen reader users hear when a page loads.
    • Users often rely on page titles to confirm that previous steps were completed correctly and to identify the purpose of the current page.
    • Vague or misleading titles leave screen reader users confused as to where they are.
    • Poor page titles make bookmarking useless.

    Examples

    Bad
    <title>Web Accessibility</title>

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

    Tips for Good Page Titles

    • Titles should be unique to every page. No duplicates.
    • Use page specific information first, then site information.
    • Use proper sentences.

    Testing Method

    • Open Google Chrome
    • Scan the page and think about what it's title should be.
    • Click on the HeadingsMap icon that we used in Tip 1 to check headings.
    • Above the page headings, the page title will be displayed.
      • Does the title match what you thought the page title should be?
      • Is the page title unique, or is it repeated on multiple pages?
      • If you were reading title as a bookmark, would it make sense?

    WCAG Guidelines and Techniques

  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

    Testing Method

    WCAG Guidelines and Techniques

  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.

    Examples

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

    Tips for Creating Keyboard Friendly CSS

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

    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.

    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?

    WCAG Guidelines and Techniques

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

    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

    Tips for Better Link Titles

    • Link text should closely match the title of the page being linked to.
    • Never use generic text such as ‘click here’ or ‘more’ as link text
    • Links to web pages should open in the same browser tab.
    • Links to PDFs should open in a different browser tab.

    WCAG Guidelines and Techniques

  6. Connect Form Labels to Input Fields.

    Problem

    • Screen readers go into forms mode when they encounter form input fields. Unless form elements are grouped and have labels and instructions linked to them, the screen reader cannot tell the user what data needs to be entered.

    Examples

    Text Input Field - Example 1 - HTML

    The text field in the example below has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.

    Incorrect code
    First name
    <input type="text" id="firstname" />

    Correct code
    <label for="firstname">First name:</label>
    <input type="text" id="firstname" />


    Text Input Field - Example 2 - WAI-ARIA

    The text field in the example below has the explicit label of "First name:". The label element's id attribute matches the aria-labelledby attribute of the input element.

    Incorrect code
    First name
    <input type="text" />

    Correct code
    <div id="firstname">First name:</div>
    <input type="text" aria-labelledby="firstname" />


    Text Input Field - Example 3 - WAI-ARIA

    Sometimes there isn't room to add a visible label on the page. In the example below, the label of "Search" is provided by the aria-label attribute of the input element.

    Incorrect code
    <input type="text" placeholder="Search" />

    Correct code
    <input type="text" aria-label="Search" />


    Example 2: A checkbox


    Incorrect code
    <input type="checkbox" id="markuplang" name="computerskills" checked="checked">
    <p>HTML</p>

    Correct code
    <input type="checkbox" id="markuplang" name="computerskills" checked="checked">
    <label for="markuplang">HTML</label>


    Example 3: A group of radio buttons

    A small, related group of radio buttons with a clear description and labels for each individual element.

    Note: To provide clear associations and instructions for a large set of related radio buttons H71:  Providing a description for groups of form controls using fieldset and legend elements , should be considered.

    Incorrect code
    <h1>Donut Selection</h1>
    <p>Choose the type of donut(s) you would like then select the "purchase donuts" button.</p>
    <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
    <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
    <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
    <input type="submit" value="Purchase Donuts"/>

    Correct code
    <h1>Donut Selection</h1>
    <fieldset>
    <legend>Choose the type of donut(s) you would like then select the "purchase donuts" button.</legend>
    <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
    <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
    <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
    <input type="submit" value="Purchase Donuts"/>
    </fieldset>



    Example 4: Instructions and Validation Messages

    Often forms contain additional instructions or validation messages, which describe what to put in a particular input field. Like labels, these need to be connected to the input field.

    Incorrect code
    <label for="password">Password</label>
    <input type="text" id="password" required>
    <div>Must be at least 8 characters, contain one uppercase letter and a number</div>

    Correct code
    <label for="password">Password</label>
    <input type="text" id="password" aria-describedby="description" required>
    <div id="description">Must be at least 8 characters, contain one uppercase letter and a number</div>


    Testing Method

    • Install the WAVE toolbar for Firefox
    • Install the SiteImprove Accessibility Checker.
    • Click on the SiteImprove icon in the browser toolbar.
    • Examine the report to see if there are any errors under 'Labels or instructions'.

      Screen shot of SiteImprove error report

    Exercises

    WCAG Guidelines and Techniques

Contact Us

For accessibility problems please contact:

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

For all other enquiries contact: