20% of the population has a disability. How can your website reach this 20%? We look at the problem, creating the right mindset, understanding what gets in the way and then a number of simple practical things you can do to extend the reach of your website.
1 of 46
Download to read offline
More Related Content
Extend your reach - making your website accessible to everyone
1. Extend your reach
Mike Osborne - AccEase Ltd
www.AccEase.com
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
2. Where are we going today?
1. Whats the problem
2. Get the mindset right
3. Some simple things that make a
big difference
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
3. Whats the problem?
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
4. Whats the problem?
20%
may be struggling with your website
And the other 80%
could be having a better experience
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
5. Will you have a
WCAG 2.0 AAA
compliant website
after this
webinar?
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
6. No.
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
7. But, you will be able
to remove a number
of common barriers.
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
8. Get the right mindset
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
9. Universal Design
A universal approach
to improving accessibility.
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
11. UD Principles
Equitable use
Flexibility in use
Simple and intuitive
Perceptible information
Tolerance for error
Low physical effort
Size and space for approach and use
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
12. Rich Information
Information is available in different formats
and can be delivered by different technologies
Plain English
Magnifiers
Sign language
Captions
Audio description Voice Recognition
Easy Read Internet
Web / email
Readers
Regular Print E-,screen, human, talking book
Large Print Braille
hard copy braille display
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
13. Limited approaches
Deaf Blind Low vision Mobility Reading
4 million careful owners
Beehive
Bioethics Council
Community Net
Companies Office
Department of Labour
Embassies
Employment Relations Service
Ministry for the Environment
GCSB
Good Practice Funding
Government Jobs
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
14. How should we get started?
Use a broad ranging group
Accessible communication starts at the beginning
you cant add it in later
Accessible design is about everyone
80% get it for free
Go for the low-hanging fruit start easy
well pick some today
Pick your experts carefully
they really need to know the area
Accessible communication is as much about attitude as
expertise
Its not about techies who get hung up on methodologies instead of
results
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
15. Important factors
Accessible web platform
Visual designer who gets it
Structured approach
Early and frequent testing & validation
User/customer-centred focus
Think task completion
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
16. Action to task completion
Its about action helping people to get
things done faster and easier
When completing tasks on websites, the
longer they take the less satisfied they are
Hence, usability is a near relative of
accessibility
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
17. Accessibility
does not mean making
your website equally
unusable for everyone.
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
18. What gets in the way?
Lack of knowledge
Lack of will
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
19. What gets in the way?
Branding & Visual Designers
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
20. What gets in the way?
Internal Focus
Its all about us
Narrow focus
make the site accessible for screen readers
Customers dont care about your website
or you organisation
they care about themselves.
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
21. What gets in the way?
Belief that its too hard
more expensive, take longer, little return
If you do it at the start,
the difference is negligible.
Poor platform choices
You will never adequately overcome a platform
that delivers inaccessible HTML
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
24. Make a difference
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
25. When is best time
to make your site accessible?
Now
But the easiest time is
when youre designing and
building it
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
26. Hyperlinks
What is the rule/convention?
Blue underlined
Whatever colour this site chooses, may or
may not be underlined.
(capture by branding/designers)
Must you do blue underlined? No.
Would it make it easier for your site visitors?
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
30. Size does matter
Make your hypertext links longer.
Better meaning & larger target size
Find out more about the Building Act.
Find out more about the Building Code.
This scheme was introduced in November 2007.
This revised qualifications scheme was introduced in
November 2007.
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
31. PDFs
Think of PDF as an alternative format
That facilitates nice print quality
HTML is always your first choice
Dont put text in images
Dont scan text and make PDF
Check if Reflow works
View | Zoom | 150%
View | Zoom | Reflow
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
32. Accessible PDF example
SOCIAL MEDIA FOR PEOPLE WITH A DISABILITY
http://www.mediaaccess.org.au
/online-media/social-media
http://www.mediaaccess.org.au/sites/default/fil
es/files/MAA2657-%20Report-
OnlineVersion.pdf
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
37. Linking to Documents
No Surprises
When linking, include the size and type inside
es
the link
pris
Annual Report (PDF 250kB)
S ur
Membership Survey Analysis (MS Excel 150kB)
N o
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
38. Images
Use images
- they break up text,
- give visual cues,
- help people with reading difficulties.
Dont put text in images
But do add text that describes the image
- as alt text,
- captions, or
- long descriptions.
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
39. Highlight links for tab key
Keyboard only users tab their way round
But its really hard to see where they are
a:link {border:2px solid white}
a:focus {border: 2px solid blue}
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
40. Adequate contrast
Also avoid red/green contrast
Red text on green background Red text on green background
Download the contrast
analyser
Vision Australia
www.visionaustralia.org.au/info.aspx?page=628
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
41. Screen Readers - Fangs
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
42. Screen Readers - Fangs
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
43. Screen Readers - Fangs
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
44. Plain English
Use simple plain English
Assess it here
http://www.usingenglish.com/resources/text-statistics.php
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
45. Plain English
Or here
http://juicystudio.com/services/readability.php#readingresults
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
46. Questions - Discussion
Mike Osborne AccEase Ltd
Ph: 64 4 974 5235 Web: www.AccEase.com
Mob: 64 21 675 010 Blog: www.LowVisionary.com
息Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
Editor's Notes
#2: How to get your website reaching out to the full audience, including the 20% of the population that has some form of disability.
#5: 20% of the population has some form of disability, of that 20% over 50% have multiple disabilities.. Some of the features/functions of your website may create barriers for the disabled and they may be creating barriers for the other 80% too.
#9: Creating an accessible website first begins with having the right mindset.
#10: At AccEase we take a Universal Design approach to delivering accessible communications.
#11: Universal Design Provide a Rich Experience Traffic Light Example: Catering for all users Crossing Signal -Picture not wording (for people who are illiterate or non English speaking) -Different pictures for people that are colour blind -led lighting so can be seen clearly during daytime Ramp for wheelchair access Raised bumps on ground for blind people using sensing sticks Large button for people with low vision Large arrow pointing in walking direction White markings on road so walk-way is easy to follow Crossing sound for blind people
#12: These principles, generally applied to the built environment are equally applicable when delivering information.
#13: Multiplicity from the built environment is transferred to rich information delivery in a wide range of media and formats.
#14: Speed of task completion Site ratings by impairment: From a AccEase study of 120 government web sites for all of those in the top 30, any site that was in the top 10 fastest sites for one or more impairment groups was also in the bottom 10 slowest for at least one other impairment group.
#15: Start by applying multiplicity to the group creating your website. Make your commitment to being accessible up front so much easier if yu do it then. There are some techniques and things you can do to make your site accessible that are quite easy (the low hanging fruit) do them first. If you alt least did those things, that would make a big difference. Use outside expertise if you can but ensure your experts understand disability. Its about getting the ends (maximum communication) and far less about the means.
#19: Why isnt every website accessible to all? Despite your commitment to creating an accessible website, there are things that get in the way of delivering to that intention. If we know what those likely barriers are then we can recognise them and be better prepared to handle them.
#20: Slavish adherence visual branding rules can create usability and more commonly legibility issues through colour choices not providing sufficient contrast or using colours that people with visual impairments commonly have difficulty perceiving. Use the banner to establish your visual branding but emphasise legibility and readability in the page body. Visual designers may select colours that cause difficulties and they may design layouts that do not magnify well. It ir s possible to have a stylish website that is accessible. Make sure your graphic designer places accessibility number one in their design priorities.
#21: Centre your website around your customers and what they want to do. Dont just focus on a single impairment type e.g. make the site accessible just for screen reader users.
#22: Make the site accessible from the outset, do the easy things first. Its not hard if you do it upfront. Select your content management system carefully you cant change that easily.
#23: An example clear open layout, images, simple left hand navigation. Prominent 0800 number cant get the information from the website call us.
#24: Link to Accessibility page what to do if you have problems accessing the site. Link to Site Map site maps help people get a shpae of the whole site and a chance to see lower-level pages. Skip to content benefits two types of users: screen reader users who dont want to hear all the navigation items and keyboard-only users who may want to click on a link in the body of the page (means they dont have to tab through all the menu items first). A block of text at top of the page that is in larger font size providing a very simple summary of the page. Helps people with reading difficulties, vision impaired and indeed everyone who scan reads web pages.
#25: Now some practical things you can do to reduce the barriers in your website.
#27: One of the principles of usability is consistency. Yet, when it comes to hyperlinks it seems everyone wants to go their own way. Blue text and then show underline on hover seems to be the favoured convention now. Do you need to hover to find out its a link (show underline)? Doesnt help people with visual impairments as often the colour/contrast between the blue and text colour is small. There are so many blues to choose from It must be possible to find one that is compatible with the rest of your colour scheme.
#28: Red hyperlinks, not always underlined. Why red? The sites log is red. Ironically the preceding article on this page advises to include patterns into graphs so that discrimination of data series isnt by colour alone.
#29: The orange hyperlinks fail the standard for colour contrast. A classic example of branding trumping accessibility, orange is a brand colour. This is on a website that serves the visually impaired.
#30: CCS Disability Actions brand colours are black, green and white. The text hyperlinks are blue underlined. Visited links are purple.
#31: Longer (within reason) hyperlinks benefit screen reader users (listening to links more meaningful), benefit agility impaired (bigger area to click into) and better SEO.
#32: Before the advent of modern content management systems and text editors with the paste from Word facility it was easier to publish a Word document as a PDF than as HTML. This has changed so that the generation of a PDF isnt a big time saver anymore.
#33: Incidentally, a good summary of the accessibility of a range of social media platforms.
#35: Zoom to 100% - but then you get horizontal scrolling.
#36: Take the View | Zoom | Reflow menu option and the PDF reflows into a single stream.
#37: Zoom to 400% - text magnified without horizontal scrolling required.
#38: Your website users dont want nasty surprises when they select a link. If the link is to a document, include the type and size inside the link. Screen reader users who listen to links then get the benefit of this information not just users in a visual browser.
#40: This change is so simple to make but really helps keyboard-only users. You dont need to use border, background colour works well too. If you use border set it for unfocused link with neutral background colour (e.g. white) or else page will jiggle when links get tabbed to (get focus).
#41: Ensure you have adequate contrast between text and its background colour. Avoid patterned backgrounds. Grey text may look sexy, but can it be read?
#42: How do we know if our web pages are OK for screen readers? You could download a screen reader and install and learn how to use it (not quick or easy) or get a very useful picture by using Fangs, an add-on for Firefox 3. You can read: The page output, the text The headings list the shape of the page and the in-page navigation tool for a screen reader user The links list all the links on the page
#43: The headings. Do they follow a proper hierarchy? Have headings been used for structure not for formatting? Can the user infer what the key sections and sub-sections of the page are?
#44: Links is each link meaningful? Can the user properly assess where each link will lead to? Are there ambiguous links like; click here, more , read more etc?
#46: Another analyser easy to use paste in the URL of the page to be assessed. The Gunning Fog index, Flesch Reading Ease and Flesch-Kincaid use different algorithms analysing length of sentence, length of words etc to provide ease/complexity scores.