Top Tips

A look at some of the most common accessibility problems.

1. Add alt text to images

   Problem

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

   Example 1

   

   Bad
   <img src="Uni life">

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

   Example 2

   

   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

   

   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

   • Can you fix the alt text on these images?

   WCAG Success Criterion

   • 1.1.1 Non-text Content

   WCAG Sufficient Techniques

   • G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
   • G95: Providing short text alternatives that provide a brief description of the non-text content

   Testing Method

   • 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 'Non-text Content'.
     
     

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

   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?
     • Tip: Problems are highlighted in red.

   Exercise

   • Try fixing the headings on this page

   WCAG Guidelines and Techniques

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

   • 1.3.1 Info and Relationships
   • H42: Using h1-h6 to identify headings

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

   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
   • Install the HeadingsMap extension
   • A new icon will appear in the Chrome toolbar.
   • Scan the page and think about what the page title should be.
   • Click on the HeadingsMap icon 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

   • 2.4.2 Page Titled
   • G88: Providing descriptive titles for Web pages
   • H25: Providing a title using the title element

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

   • Fix the contrast on this page

   Testing Method

   • Check contrast using the Color Contrast Analyzer.

   WCAG Guidelines and Techniques

   • 1.4.3 Contrast
   • Text less than 18 point if not bold and less than 14 point if bold
     G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
   • Text at least 18 point if not bold and at least 14 point if bold
     G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

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

   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?

WCAG Guidelines and Techniques

• 2.1.1 Keyboard
• G202: Ensuring keyboard control for all functionality
• G90: Providing keyboard-triggered event handlers

6. 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 Guidelines and Techniques

   • 2.4.4 Link Purpose (In Context)

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

   

   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

   • 2.2.2 Pause, Stop, Hide

8. Add captions to video

   Problems

   • Users who are Deaf or hard of hearing need to read captions of audio, so that they can understand what is being said.
   • Auto-captions are not adequate for users in situations where a high degree of accuracy is required.

   Example

   

   Tips

   Captions should include:

   • All words spoken by characters (including stuttering etc).
   • Words spoken by a narrator.
   • The words to any song.
   • Identification for off screen speakers.
   • Descriptions of sound events that impact on the story or meaning.
   • Sound effects should be shown in square brackets, e.g. [dog barking]
   • The speakers name should be identified in round brackets, e.g. (John)

   Tools

   • Adding captions to YouTube videos.
   • Creating captions using Microsoft Stream.

   WCAG Success Criteria

   • 1.2.2 Captions (Pre-recorded)
   • 1.2.4 Captions (live)

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

   See ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls.

   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 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 Reader Testing Tools

   • Testing web pages on PC using NVDA
   • Testing web pages on Mac using VoiceOver

   Exercises

   • Add correct labels to the form fields on this page
   • Examine how ARIA can be used to auto-complete input field values

   WCAG Guidelines and Techniques

   • 3.3.2 Labels or Instructions
   • H44: Using label elements to associate text labels with form controls
   • H65: Using the title attribute to identify form controls when the label element cannot be used
   • H71: Providing a description for groups of form controls using fieldset and legend elements

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:

• Course enrolment information.
• Scholarship information.