Techniques

Techniques

Alt Text

Problem

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

Examples

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

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.

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

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

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

animated gifs can be annoying

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

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

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

Is this appl a result of training needs identified at your Perf Development mtg?

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

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.

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

Meeting Policy PDF, 520 KB

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

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

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>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>May 28</td><td>Memorial Day holiday</td><td>&nbsp;</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>&nbsp;</td><td>&nbsp;</td></tr>
<tr><th scope="row">May 28</th><td>Memorial Day holiday</td><td>&nbsp;</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

Contact Information
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

Examples

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