Web accessibility with Ametys CMS


Published on

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

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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