Accessibility Tips

Techniques for improving web site accessibility.

Top 10 Accessibility Tips

The following list outines the 10 most common accesssibility problems on the University of Melbourne web site.

1. Add alt text to images and add labels to forms.

WCAG Success Criterion: 1.1.1 Non-text Content

WebAIM recommendations:

• All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
• Images that do not convey content, are decorative, or with content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.
• Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page.
• Form buttons have a descriptive value.
• Form inputs have associated text labels or, if labels cannot be used, a descriptive title attribute.
• Embedded multimedia is identified via accessible text.
• Frames are appropriately titled.

Check with: WAVE Toolbar Add-On for Firefox

 

2. Use heading tags, table headings and lists.

WCAG Success Criterion: 1.3.1 Info and Relationships

WebAIM recommendations:

• Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.
• Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.
• Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.

Check headings with: WAVE Toolbar Add-On for Firefox

Check table headings and lists: Manually

 

3. Provide sufficient color contrast.

WCAG Success Criterion: 1.4.3 Contrast (Minimum)

WebAIM recommendation:

• Text and images of text have a contrast ratio of at least 4.5:1.
• Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1

Check with: Contrast Analyzer 2.2

 

4. Make each page navigable by keyboard alone.

WCAG Success Criterion: 2.1.1 Keyboard

WebAIM recommendation:

• If a page or application has a time limit, the user is given options to turn off, adjust, or extend that time limit. This is not a requirement for real-time events (e.g., an auction), where the time limit is absolutely required, or if the time limit is longer than 20 hours.

Check by: Tabbing through the page with the keyboard

 

5. Allow pausing of animations.

WCAG Success Criterion: 2.2.2 Pause, Stop, Hide

WebAIM recommendations:

• Automatically moving, blinking, or scrolling content that lasts longer than 3 seconds can be paused, stopped, or hidden by the user. Moving, blinking, or scrolling can be used to draw attention to or highlight content as long as it lasts less than 3 seconds.
• Automatically updating content (e.g., automatically redirecting or refreshing a page, a news ticker, AJAX updated field, a notification alert, etc.) can be paused, stopped, or hidden by the user or the user can manually control the timing of the updates.

Check by: Visual examination

 

6. Add skip to content links.

WCAG Success Criterion: 2.4.1 Bypass Blocks

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.

WCAG Success Criterion: 2.4.2 Page Titled

WebAIM recommendation:

• The web page has a descriptive and informative page title.

Check: Manually

 

8. Avoid 'click here' link text.

WCAG Success Criterion: 2.4.4 Link Purpose (In Context)

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: 3.2.3 Consistent Navigation

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: 3.2.5 Change on Request

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

Help

For assistance please contact Andrew Normand, Web Accessibility Program Leader
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867