Techniques
Alt Text
Problem
- Images, photos, and graphics are unusable by screen reading programs unless they are assigned alternative text.
Examples
Incorrect code
<img src="graph-1.jpg" alt="Percentage of primary school students studying Languages, 2007–13" >
Correct code
<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.">
Incorrect code
<img src="graph.jpg" alt="Graph showing primary school language programs" >
Correct code
<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.">
WCAG Success Criteria
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 WAVE toolbar for Firefox
- Open Firefox
- 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
Practical Exercise
- Look at the images on this prospective students page.
- What alternative text would you use to describe them?
- What alternative text did they use?
Animations
Problem
- 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
WCAG Success Criteria
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.
Color Contrast
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 |
WCAG Success Criteria
WCAG Sufficient Techniques
- 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
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
Exercise
Tip
- It is much easier to achieve sufficient contrast by using dark text on a light background.
Form Labels
Problem
- Screen readers go into forms mode when they encounter form input fields. Unless form elements are grouped and have labels associated with 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">
HTML
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>
WCAG Success Criteria
WCAG Sufficient Techniques
- 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
Testing Method
- Install the WAVE toolbar for Firefox
- Open Firefox
- 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 red flags next to the form fields?
- 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
Exercise
Exercise - Advanced
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
Incorrect code
<b>WCAG Success Criteria</b>
Correct code <h3>WCAG Success Criteria</h3>
Tips for Creating Better Headings
The following guidelines should be borne in mind when adding headings to web pages:
- 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
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
Exercise
Jargon
Problems
- Certain disabilities make it difficult to understand nonliteral word usage and specialized words or usage.
- Users with English as a second language find it difficult to understand made up words.
Example

Keep it brief
People read much less on screens, particularly on phones, so cut your content down to an absolute minimum. Be ruthless!
Worse: "There is an ongoing program to keep our research facilities at world standard."
Better: "Our research facilities are world standard."
Welcomes and introductions are usually not needed at all. Remember not everything needs to be in a full sentence, especially links.
Worse:
School of Physics Diversity Committee
The School of Physics Diversity Committee is committed to providing support and resources to create an equitable environment for all staff and students. For more information read our mission statement and terms of reference.
Better:
School of Physics Diversity Committee
Providing support and resources to create an equitable environment for all staff and students.
Talk to your audience
Writing on the web can be slightly more informal than the University’s usual approach.
Where appropriate, use ‘you’ and ‘your’ to speak to your readers, and ‘we’ and ‘us’ to refer to the university.
Worse: Students are provided with the opportunity to undertake a range of internship subjects for credit towards their degree.
Better: You’ll be able to take internship subjects for credit.
Focus on what the user wants
Users are on your website only because they’re looking for specific information, or trying to complete a task.
Understand what it is they want to do, and make it as easy as possible for them.
Instead of focusing on the University, reframe the copy in terms of the user’s interests and goals.
Worse:
Donate to student scholarships
The University of Melbourne supports excellence and endeavour through awards, bursaries and scholarships for students who experience disadvantage.
Better:
Help a deserving student succeed
Your gift will assist a promising student to achieve their full potential, regardless of their background or circumstances.
Choose plain English
Use uncomplicated words and simple sentence structures. You’ll improve comprehension for all readers – native and non-native speakers alike.
Worse: This suite of instructional videos will assist you with the enrolment process.
Better: These videos will help you enrol.
WCAG Success Criteria
Further Reading
Exercise
Keyboard Access
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 Criteria
WCAG Sufficient Techniques
- G202: Ensuring keyboard control for all functionality
- G90: Providing keyboard-triggered event handlers
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
Incorrect code
/* link styles */
a:link { color: #03c; }
a:visited { color: #606; }
a:hover { color: #c00; }
a:active { color: #600; }
li { margin-bottom: 0.4em; }
Correct code
/* 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?
Links
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.
Worse: 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).
Worse: Read more about the University’s history at https://about.unimelb.edu.au/our-history.
Better: Read more about the University’s history
Don’t link the punctuation that follows link text.
Link location
There are three main ways to place links.
Use embedded links if the link text occurs naturally in the sentence. This approach provides the option of more information, but doesn’t strongly encourage a click.
If you believe your DELA results have been affected by a disability, support is available.
Note that too many embedded links in the one paragraph can make it difficult to read.
Use a call to action link (often styled as a button) to strongly encourage the user to take a specific action after reading. The link text should be very short, and start with a verb (e.g. register, view, read, enrol).
Connect with other Melbourne Law School alumni by getting involved with an alumni group in your local area.
Find your network
Use link lists if you have around 3–10 self-explanatory links, and want users to finish reading the text before giving them the opportunity to find out more. Use bullet points for link lists. Page 4 of 4
Advanced standing (sometimes known as credit or recognition of prior learning) is acknowledgement of prior study granted towards your current degree.
- Types of advanced standing
- Frequently asked questions about advanced standing
- How to apply for advanced standing
Don’t put links on headings.
Linking to documents
If linking to a document, indicate the document type and approximate file size after the link (in Matrix, enable ‘Include Summary’ in the ‘Insert Link’ window).
Linking to email addresses
Email addresses should be:
- Always provided in text (not hidden as a link)
- All lower case
- Always hyperlinked.
For more information on exchange opportunities, contact jane.nguyen@unimelb.edu.au.
Page Title
Problem
- Users with visual disabilities rely on page titles to identify pages when they have multiple pages open.
Example
Poor title
<title>Web Accessibility</title>
Better title
<title>My Page Title - Web Accessibility - The University of Melbourne</title>
WCAG Success Criteria
WCAG Sufficient Techniques
PDF is rarely chosen because it's been assessed as the best format for the content.Neil King, Vision Australia
PDF at The University of Melbourne
- PDF is rarely the best format for online content.
- The preferred format for content at The University of Melbourne is HTML.
Legal status of PDF documents
- The Australian Human Rights Commission has taken the view that "organisations that publish documents only in PDF risk complaint under the DDA unless they make the content available in at least one additional formal and in a manner that incorporates principles of accessible document design".
- The preferred alternative format for PDF is HTML.
PDF Accessibility Techniques
- The W3C has a set of PDF Techniques for WCAG 2.0 which are a useful guide for PDF creators.
Making Documents Accessible
- Vision Australia has created an excellent Document Accessibility Toolbar (DAT) for Microsoft Word that makes creating accessibaccessible PDFs easy. Document Accessibilty Toolbar - Installation Instructions
Whether it be PDF, Word, or HTML the following issues need to be addressed in order to make a document accessible:
- Use headings. In HTML this means adding heading tags, e.g. <h1> - <h6>. In Word this means using styles, e.g. Heading 1, Heading 2, Normal.
- Use lists. In HTML this means adding bulleted and numbered lists, e.g. <ul>, <ol>, <li>. In word this means adding bullets and numbering, e.g. Bulleted, Numbered.
- Present information in a linear format. In HTML this means using <div> tags and CSS to position elements on the page. In Word this means using Columns.
- Use table headings. In HTML this means adding <th> tags.
- Provide alt text for images
- Identify the language of the document
- Allow text to be resized
- Use sufficient color contrast
- W3C PDF techniques
- Acrobat X has an inbuilt checker which is very useful
- The PAC PDF accessibility is also very good and is free.
A Quick Reference Card for Accessibile PDF Creation can be downloaded form Adobe.
Exporting PDF from Word
- Using Windows, click on the Acrobat menu and select preferences.
- Ensure that 'Enable Accessibility and Reflow with tagged Adobe PDF' is checked.
- Publishing the PDF document needs to be done via the 'Acrobat' menu by clicking on the 'Create PDF' button
- Documents can also be saved by clicking on 'File' and then 'Save as PDF or XPS'. You will need to click on 'Options' and ensure that 'Document structure tags for accessibility is checked.
Common misunderstandings about PDF
Users with vision impairments can't access PDF documents
Not true. In fact some users with vision impairments actually prefer PDF. The problem is that some users can't access them at all if they are in an inaccessible format. Hence the call for documents to be provided in an alternative accessible format.
PDF documents are secure and can't be tampered with
Anything that is published on the web can be changed, including PDF files. Web sites such as www.pdfunlock.com allow users to remove passwords and restrictions from secured PDF files in seconds. Source documents should be archived locally, not stored on the web.
Publishing in PDF document is quicker because you can just convert it from MS Word
Not true. Publishing PDF documents that do not discriminate against users with disabilities is often more time consuming than creating a HTML document because there are a number of additional steps and checks that need to be undertaken. Very few PDF documents produced at THe University of Melbourne are accessible to users with disabilities.
Users who are having problems can just contact us directly
Users with disabilities will rarely contact publishers about problems that they are having because, like everyone else they have other things to do, and often they don't know where the problem lies, they just know they can't get the information.
Table Headings
Problem
- Screen reader users may have trouble telling where they are when listening to table cell contents.
Solution
- Add table headings <th> to tables.
Example
Incorrect code
<table>
<tbody>
<tr><td>Date</td><td>Event</td><td>Time</td><td>Place</td></tr>
<tr><td>May 11</td><td>Band concert</td><td>7:00 pm</td><td>Auditorium</td></tr>
<tr><td>May 21</td><td>Final exam week</td><td> </td><td> </td></tr>
<tr><td>May 28</td><td>Memorial Day holiday</td><td> </td><td><em>campus closed</em></td></tr>
<tr><td>May 30</td><td>Commencement</td><td>1:00 pm</td><td>Launchers Stadium</td></tr>
</tbody>
</table>
Correct code
<table>
<thead>
<tr><th scope="col">Date</th><th scope="col">Event</th><th scope="col">Time</th><th scope="col">Place</th></tr>
</thead>
<tbody>
<tr><th scope="row">May 11</th><td>Band concert</td><td>7:00 pm</td><td>Auditorium</td></tr>
<tr><th scope="row">May 21</th><td>Final exam week</td><td> </td><td> </td></tr>
<tr><th scope="row">May 28</th><td>Memorial Day holiday</td><td> </td><td><em>campus closed</em></td></tr>
<tr><th scope="row">May 30</th><td>Commencement</td><td>1:00 pm</td><td>Launchers Stadium</td></tr>
</tbody>
</table>
WCAG Success Criteria
WCAG Sufficient Techniques
Testing Method
- Install the WAVE toolbar for Firefox
- Open Firefox
- 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.
- Is there a square 'th' symbol next to the table headings?
- 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
Exercise
-
Use the WAVE toolbar to compare the following tables. Which is marked up correctly?
Table 1
Monday | Tuesday | Wednesday | Thursday | Friday | |
---|---|---|---|---|---|
8:00-9:00 | Meet with Sam | ||||
9:00-10:00 | Doctor Williams | Sam again | Leave for San Antonio |
Table 2
Monday | Tuesday | Wednesday | Thursday | Friday | |
8:00-9:00 | Meet with Sam | ||||
9:00-10:00 | Doctor Williams | Sam again | Leave for San Antonio |
Table 3
Homework | Exams | Projects | ||||
---|---|---|---|---|---|---|
1 | 2 | Final | 1 | 2 | Final | |
15% | 15% | 15% | 20% | 10% | 10% | 15% |
Table 4
Name | Phone# | Fax# | City | |
---|---|---|---|---|
1. | Joel Garner | 412-212-5421 | 412-212-5400 | Pittsburgh |
2. | Clive Lloyd | 410-306-1420 | 410-306-5400 | Baltimore |
3. | Gordon Greenidge | 281-564-6720 | 281-511-6600 | Houston |
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