際際滷

際際滷Share a Scribd company logo
Extend your reach
                         Mike Osborne - AccEase Ltd
                             www.AccEase.com




     息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
Whats the problem?



     息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
Will you have a
WCAG 2.0 AAA
compliant website
after this
webinar?

       息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
No.


  息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
But, you will be able
to remove a number
of common barriers.




         息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
Get the right mindset



      息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
Universal Design

A universal approach
to improving accessibility.




           息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
Multiplicity




 息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
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
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
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
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
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
Accessibility
does not mean making
your website equally
unusable for everyone.

       息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
What gets in the way?
 Lack of knowledge
 Lack of will



        息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
What gets in the way?
 Branding & Visual Designers




              息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
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
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
Make a difference



    息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
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
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
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
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
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
Horizontal scrolling




息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
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
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
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
Screen Readers - Fangs




       息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
Screen Readers - Fangs




       息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
Screen Readers - Fangs




       息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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
Plain English
 Or here
http://juicystudio.com/services/readability.php#readingresults




                    息Copyright AccEase Ltd. 2011 All Rights Reserved   www.AccEase.com
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

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
  • 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 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
  • 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 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
  • 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 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
  • 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. 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.
  • #18: Equitable use not equitable unuse.
  • #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.
  • #34: View whole page at 53%.
  • #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?
  • #45: Plain English is accessible.
  • #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.