Web Accessibility                    Definition & Best PracticesJOIN US ON   www.ametys.org   @AmetysCMS   AmetysCMS   Ame...
Questions   What’s ACCESSIBILITY ?     How to make your website      MORE ACCESSIBLE ?How a CMS helps you to make    websi...
Definition Making the web and its services available toall individuals, irrespective of their hardwareor software, network...
Statistics20% of all U.S. citizens have some kind of   disability.    1 in 2 Americans 65 and older has a    disability   ...
DisabilitiesDisabilities include the following areas :   •   Low or Limited Vision   •   No Vision   •   Color Blind   •  ...
Web Accessibility : International StandardsAccessibility policies vary from country to country, but most countries, includ...
Web Accessibility : U.S Legal Issues• All U.S. federal agencies were mandated under Section 508 of the U.S. Rehabilitation...
Accessibility for whom ?Web Accessibility isabout more than just  blindness ….
Accessibility for whom ?Accessibility is also people   who don’t have      FLASH !
Web Accessibility,Accessibility is also people   who don’t have    JAVASCRIPT     enabled !
Accessibility for whom ?Accessibility is also people who are not deafbut have the sound     muted !
Accessibility for whom ?Accessibility is also people who surf on their    mobile !
Common beliefsI will make a website dedicated to Deaf people »
Common beliefsI will make a website dedicated to Deaf people »  • And if people don’t   have FLASH ?  • Why deaf people an...
Accessible websites don’t need to           be ugly !
Common beliefsWeb Accessibility isimportant for SEO »
Common beliefs                   Web Accessibility is important for SEOSearch engine spiders are deaf and blind.Like those...
Web Accessibility & SEO    Content is kingin both accessibility and SEO
Web Accessibility & SEO    SEO    #Accessibility
Web Accessibility & SEO                                    SEO                                    +                       ...
Focus on imagesAlternative text for images should    present CONTENT and          FUNCTION    Very rarely a description
Focus on imagesalt = « image of Pr. Jean Charles Pomerol »
Focus on imagesalt = « Pr. Jean Charles Pomerol »
Focus on imagesEmpty alternative text
Focus on imagesBest Practices•   Focus on content and functionality•   Saving considerable time•   Empty alternative text ...
Focus on imagesHow a CMS helps you to make theRIGHT CHOICES ?
Focus on imagesAccessibility in Drupal 7  No empty alternative text by default  Online Help incomplete
Focus on images     Web Accessibility & images with Ametys• Emptyalternative textby default• Complete andaccurate help
Web Accessibility       andContent structure ?
Content Structure• Creating Semantic Structure• Using Headings for content structure • Pages should be structured in a hie...
Common use case:                      copy/paste from external website• Source HTML page • No semantic tags in HTML code •...
Common use case:                            copy/paste from external websitein Joomla! 1.6     Retains many of the existin...
Common use case:                                   copy/paste from external websitein AmetysKeep content but cleans stylin...
Common use case:                                copy/paste from external websitein AmetysContributor is suggested to chang...
Website Accessibility over time • Accessibility audits are costly when conducted  on the whole website by an external audi...
CONTACT                 SITE40 RUE DU VILLAGE       MAILD’ENTREPRISES           TWITTER31670 LABÈGE            FACEBOOK+33...
Upcoming SlideShare
Loading in...5
×

Web accessibility with Ametys CMS

825

Published on

What's web accessibility? Web accessibility & CMS ?
Discover Ametys CMS Expert Advice !

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
825
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web accessibility with Ametys CMS"

  1. 1. Web Accessibility Definition & Best PracticesJOIN US ON www.ametys.org @AmetysCMS AmetysCMS AmetysWebCMS
  2. 2. Questions What’s ACCESSIBILITY ? How to make your website MORE ACCESSIBLE ?How a CMS helps you to make website more accessible ?
  3. 3. Definition Making the web and its services available toall individuals, irrespective of their hardwareor software, network infrastructure, nativelanguage, culture, geographical location orphysical or mental aptitude » Tim Berners-Lee, Director and inventor of the World Wide Web
  4. 4. Statistics20% of all U.S. citizens have some kind of disability. 1 in 2 Americans 65 and older has a disability Nearly 30% of all families in the U.S. are affected by a member who has a disability Source : CDC Centers for Disease Control and Prevention (data for the US)
  5. 5. DisabilitiesDisabilities include the following areas : • Low or Limited Vision • No Vision • Color Blind • Deaf or hearing impaired • Physical and motor impairments • Cognitive or Neurological
  6. 6. Web Accessibility : International StandardsAccessibility policies vary from country to country, but most countries, including those in the European Union, have adopted standards based on the Web Content Accessibility Guidelines (WCAG) of the World Wide Web Consortium (W3C)
  7. 7. Web Accessibility : U.S Legal Issues• All U.S. federal agencies were mandated under Section 508 of the U.S. Rehabilitation Act to make their websites accessible by June 21, 2001.• Section 508 requires that Federal agencies electronic and information technology is accessible to people with disabilities, including employees and members of the public.
  8. 8. Accessibility for whom ?Web Accessibility isabout more than just blindness ….
  9. 9. Accessibility for whom ?Accessibility is also people who don’t have FLASH !
  10. 10. Web Accessibility,Accessibility is also people who don’t have JAVASCRIPT enabled !
  11. 11. Accessibility for whom ?Accessibility is also people who are not deafbut have the sound muted !
  12. 12. Accessibility for whom ?Accessibility is also people who surf on their mobile !
  13. 13. Common beliefsI will make a website dedicated to Deaf people »
  14. 14. Common beliefsI will make a website dedicated to Deaf people » • And if people don’t have FLASH ? • Why deaf people and not blind people ? • Its expensive to develop ... and its very expensive to maintain! • There are, however, deaf people who don’t use sign language !
  15. 15. Accessible websites don’t need to be ugly !
  16. 16. Common beliefsWeb Accessibility isimportant for SEO »
  17. 17. Common beliefs Web Accessibility is important for SEOSearch engine spiders are deaf and blind.Like those with visual and hearing disabilities, spidersrely on text just as screen readers. Text only browsersand Braille displays rely on text to convey informationto users with visual disability.
  18. 18. Web Accessibility & SEO Content is kingin both accessibility and SEO
  19. 19. Web Accessibility & SEO SEO #Accessibility
  20. 20. Web Accessibility & SEO SEO + = WIN AccessibilityGood accessibility and good search engine optimization is a great combination for content authors and end users.
  21. 21. Focus on imagesAlternative text for images should present CONTENT and FUNCTION Very rarely a description
  22. 22. Focus on imagesalt = « image of Pr. Jean Charles Pomerol »
  23. 23. Focus on imagesalt = « Pr. Jean Charles Pomerol »
  24. 24. Focus on imagesEmpty alternative text
  25. 25. Focus on imagesBest Practices• Focus on content and functionality• Saving considerable time• Empty alternative text for decorative images• If an image contains text, replicate the text in full• For charts and graphs, try to summarise the trend
  26. 26. Focus on imagesHow a CMS helps you to make theRIGHT CHOICES ?
  27. 27. Focus on imagesAccessibility in Drupal 7 No empty alternative text by default Online Help incomplete
  28. 28. Focus on images Web Accessibility & images with Ametys• Emptyalternative textby default• Complete andaccurate help
  29. 29. Web Accessibility andContent structure ?
  30. 30. Content Structure• Creating Semantic Structure• Using Headings for content structure • Pages should be structured in a hierarchical manner, with 1st degree headings (<h1>) being the most important (usually page titles or heading), then 2nd degree headings (<h2> - usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on• Using Headings Correctly • Don’t use text formatting, such as font size or bold to give the visual appearance of headings • Use actual heading (<h1> - <h6>) for all content headings
  31. 31. Common use case: copy/paste from external website• Source HTML page • No semantic tags in HTML code • Semantic information brought by style (colors, font size…) <p style=‘color:orange; font-size:13px’>Titre A</p> <p style=‘color:black; font-size:16px;text- decoration:underline’>Titre B</p>
  32. 32. Common use case: copy/paste from external websitein Joomla! 1.6 Retains many of the existing content appearance and code when copy /paste Misleading appearance
  33. 33. Common use case: copy/paste from external websitein AmetysKeep content but cleans styling tags when copy/paste Contributor can add semantic information
  34. 34. Common use case: copy/paste from external websitein AmetysContributor is suggested to change title hierarchy and add semanticinformation to the content
  35. 35. Website Accessibility over time • Accessibility audits are costly when conducted on the whole website by an external auditor • Rely on Ametys wizards, helps and tooltips to maintain accessibility on the long runaccessibility Website powered with Ametys Other CMS time
  36. 36. CONTACT SITE40 RUE DU VILLAGE MAILD’ENTREPRISES TWITTER31670 LABÈGE FACEBOOK+33 (0) 5 62 19 19 00 YOUTUBE

×