Your SlideShare is downloading. ×
  • Like
Extend your reach - making your website accessible to everyone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Extend your reach - making your website accessible to everyone

  • 1,214 views
Published

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 …

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.

Published in Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
1,214
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
1
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • How to get your website reaching out to the full audience, including the 20% of the population that has some form of disability.
  • 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.
  • Creating an accessible website first begins with having the right mindset.
  • At AccEase we take a Universal Design approach to delivering accessible communications.
  • 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
  • These principles, generally applied to the built environment are equally applicable when delivering information.
  • Multiplicity from the built environment is transferred to rich information – delivery in a wide range of media and formats.
  • 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.
  • 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. It’s about getting the ends (maximum communication) and far less about the means.
  • “ Equitable use” not equitable unuse.
  • Why isn’t 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.
  • 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.
  • Centre your website around your customers and what they want to do. Don’t just focus on a single impairment type e.g. make the site accessible just for screen reader users.
  • Make the site accessible from the outset, do the easy things first. It’s not hard if you do it upfront. Select your content management system carefully – you can’t change that easily.
  • An example – clear open layout, images, simple left hand navigation. Prominent 0800 number – can’t get the information from the website – call us.
  • 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 don’t 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 don’t 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.
  • Now – some practical things you can do to reduce the barriers in your website.
  • 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 it’s a link (show underline)? Doesn’t 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.
  • Red hyperlinks, not always underlined. Why red? The site’s log is red. Ironically the preceding article on this page advises to include patterns into graphs so that discrimination of data series isn’t by colour alone.
  • 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.
  • CCS Disability Action’s brand colours are black, green and white. The text hyperlinks are blue underlined. Visited links are purple.
  • Longer (within reason) hyperlinks benefit screen reader users (listening to links – more meaningful), benefit agility impaired (bigger area to click into) and better SEO.
  • 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 isn’t a big time saver anymore.
  • Incidentally, a good summary of the accessibility of a range of social media platforms.
  • View whole page at 53%.
  • Zoom to 100% - but then you get horizontal scrolling.
  • Take the View | Zoom | Reflow menu option and the PDF “reflows” into a single stream.
  • Zoom to 400% - text magnified without horizontal scrolling required.
  • Your website users don’t 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.
  • This change is so simple to make – but really helps keyboard-only users. You don’t 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).
  • Ensure you have adequate contrast between text and its background colour. Avoid patterned backgrounds. Grey text may look sexy, but can it be read?
  • 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
  • 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?
  • 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?
  • Plain English is accessible.
  • 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.

Transcript

  • 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. What’s the problem2. Get the mindset right3. Some simple things that make a big difference ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 3. What’s the problem? ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 4. What’s 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 aWCAG 2.0 AAAcompliant websiteafter thiswebinar? ©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 ableto remove a numberof 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 DesignA universal approachto improving accessibility. ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 10. Multiplicity ©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 RecognitionEasy 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 Reading4 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 can’t add it in later • Accessible design is about everyone • 80% get it for free • Go for the low-hanging fruit – start easy • we’ll pick some today • Pick your experts carefully • they really need to know the area • Accessible communication is as much about attitude as expertise • It’s 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• It’s 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. Accessibilitydoes not mean makingyour website equallyunusable 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 – It’s all about us• Narrow focus – make the site accessible for screen readers Customers don’t 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 it’s 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
  • 22. ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 23. ©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 you’re designing and building it ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 26. HyperlinksWhat 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
  • 27. ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 28. ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 29. ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 30. Size does matter• Make your hypertext links longer. – Better meaning & larger target sizeFind 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• Don’t put text in images – Don’t 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 exampleSOCIAL MEDIA FOR PEOPLE WITH A DISABILITYhttp://www.mediaaccess.org.au /online-media/social-mediahttp://www.mediaaccess.org.au/sites/default/fil es/files/MAA2657-%20Report- OnlineVersion.pdf ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 33. ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 34. Horizontal scrolling©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 35. ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 36. ©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.• Don’t 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 it’s 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 Australiawww.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 herehttp://www.usingenglish.com/resources/text-statistics.php ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 45. Plain English• Or herehttp://juicystudio.com/services/readability.php#readingresults ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com
  • 46. Questions - DiscussionMike Osborne AccEase LtdPh: 64 4 974 5235 Web: www.AccEase.comMob: 64 21 675 010 Blog: www.LowVisionary.com ©Copyright AccEase Ltd. 2011 All Rights Reserved www.AccEase.com