Top 10 tips to improve the accessibility of your website Gayle Whittaker – UX Consultant 9 th March 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Top 10 tips to improve the accessibility of your website
Gayle Whittaker – UX Consultant 9th March 2016
What we will cover…
What is Web Accessibility
Web Content Accessibility Guidelines (WCAG 2.0)
Testing Process
10 Accessibility Tips
Web Accessibility… making your digital products and services accessible and usable for all your customers:
Visual Blindness, low vision, colour blindness
Hearing Deaf and hard of hearing
Motor Inability to use a mouse, limited motor control
Cognitive Learning disability, distractibility, dyslexia
Web Content Accessibility Guidelines
WCAG v2.0 provides the foundation for web accessibility standards
61 checkpoints divided into 3 conformance levels - A, AA and AAA
Level A represents the minimum requirements for accessibility, 25 checkpoints
Only test the appropriate checkpoints
For level A conformance you must satisfy all Level A success criteria
If any fail, users with disabilities will not be able to use the web
Testing Process
1 2 3
Assistive technology
4
Colour Contrast Manual Automated
wave.webaim.org/extension
www.nvaccess.org
www.paciellogroup.com/resources/ contrastanalyser
Tip #1: Page Titles
Type all of your page titles into a spreadsheet and review them. If they make sense out of context, they will work on your website.
In many cases, it makes sense to repeat the page title or a variation of it as the main heading <h1> on your page.
Pages must have a page <title> that identifies the main content
Format suggestion: ‘Page name | Page description | Website name’
Should be descriptive and unique to each page on your site
Tip #2: Page structure
<header> <nav>
<main> <aside>
<footer>
<article> <article> <article> Assistive technologies use this information as alternate way of viewing, understanding and navigating a page
Test Procedure
Use NVDA to show elements list
Using WAVE to linearize page
Provide semantic elements to markup page sections
Represents logical sections of a web page
HTML5 section elements
ARIA landmarks
Tip #3: Page Headings
<h1>
<h2>
<h3>
<h4>
<h5> <h6>
Heading structure benefits screen readers to help navigate content
Test Procedure
Use Web Developer Toolbar to View Document Outline
Start with <h1>
Headings must be sequential and must not skip headings
Headings should separate content into meaningful sections
If it looks like a heading check that it is an actual HTML heading
Don’t use bold, italicise or underline to define sections
Tip #4: Skip navigation links
Add a link a the top of each page that does directly to the main content
Must be one of the first items on the page
Link must be visible on focus
Benefits keyboard-only and screen reader users to navigate to content quickly
Tip #5: Support keyboard interaction
Test Procedure
Stop using your mouse
Use the TAB key to move forwards through the page
Shift + TAB to go backwards
1
2 3
7 6 5 4
8
Test using just your keyboard
All active elements can be activated using spacebar or enter key
Tab order is logical, meaningful sequence
Keyboard focus does not get trapped
Interactive content needs to show keyboard focus
Tip #6: Make it focusable
Best practice is to include "a:focus" and "a:active" in the CSS as well as "a:hover" to make focus highlight effects work when tabbing to links as well as when using a mouse over them.
Clearly indicate which element currently has focus
Don’t rely on the browser default focus indicator
Tip #7: Alternative text for images
Appropriate alt text • The text needs to convey the same meaning as the image.
• Images that are functional — for example, images that initiate actions (like submit buttons) and linked images (like in navigation) — need alt text that is the functional equivalent.
• If there is text in the image that text needs to be included in the alt text.
What is not needed in the alt text • If the image is not important for understanding the content – should have a null attribute
• If the image is sufficiently described in the text – should have a null attribute
• The alternative text does not need to include the words ‘image of’, ‘graphic of’ or ‘link’
<img src=“image.gif” alt=“ ”>
All HTML images must have an alt attribute
Provides effective SEO
When to use null alt, ask yourself: if the image was removed, would the user still get all the information from the page?
Tip #7: Alternative text for images
Test Procedure
Use WAVE to display alt attribute
Or
Use Web Developer Toolbar to
Display Alt Attributes
Or
Use Code Inspector such as
Firebug in Firefox
Tip #7: Alternative text for images
Test Procedure
Use WAVE to display your page with no styles
Check for an alternative to reflect the purpose of the icon
Images display through CSS are ignored by assistive technologies <span title=“” class=“tick”></span>
Ensure there is an alternative to images displayed through a CSS file Add text that can be visually hidden, displaying if off screen through CSS
<span title=“” class=“tick visuallyHidden”>Cover includes online discount</span>
Tip #8: Use of colour
Instructions must not rely on colour alone
Ensure sufficient contrast between foreground and background colours
Too little contrast reduces legibility
Make font large enough
Use more contrast for text in a smaller font
Test Procedure
Check instructions don’t rely on visual cues, “click on the green button”
View presentation of page in grayscale when printing
Use Colour Contrast Analyser to verify colour combinations
Tip #9: Write helpful links
<a href="link.shtml“ aria-label=“Concise information ">Find out more</a>
Links should be meaningful and describe destination
Include the file type and size of downloadable files e.g. (PDF, 10MB)
Warn users of links opening in new window
Underline links and make colour contrast stand out from surrounding text
Test Procedure
Manually check links on your pages, look out for links that repeat same words
Use NVDA element list to provide list of links
Tip #10: Associate form labels with controls
Labels should clearly describe input required from the user
Labels should identify whether field is required or optional
Instructions should be positioned before they are needed
Place labels adjacent to the form field
Left for textboxes, right for radio buttons and checkboxes
Every form element must have an associated <label>
Associate labels with form fields via “for” and “id” attributes
Test Procedure
Use WAVE to identify form association
Combo box collapsed
Combo box collapsed
Combo box collapsed
Edit blank
Property type combo box collapsed
Tip #10: Associate form labels with controls
Tip #10: Form feedback
Errors should be clear and findable
Form fields in error should still have users data in them
Test Procedure
Submit the form uncompleted
Check how errors are presented
Check where page focus moves to – not still on the submit button
Tip #11: Resize Text
Text can be resized up to 200% without loss of content or functionality
Text doesn’t disappear under objects on page
Forms are still usable
Horizontal scroll is at a minimum
Users with low vision often use browser zoom
Benefits users with small screens – mobile
Test Procedure
Zoom page content using Chrome – Ctrl +
Tip #12: Data Tables
<th>
<td>
<td>
<td>
To present tabular information
Must be marked up correctly to enable assistive technology to identify content
Table captions indicates the content of the table
Identify row and column headers, <th> element is used for table header cells
Associate the data cells with appropriate headers using scope attribute
55 North Castle Street
Edinburgh
EH2 3QA
United Kingdom
Tel: 0131 225 0850 @UserVision
www.uservision.co.uk
Thank You
Gayle Whittaker
UX Consultant
Related Documents
