Successfully reported this slideshow.

Web accessibility with Ametys CMS

2

Share

Loading in …3
×
1 of 36
1 of 36

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Web accessibility with Ametys CMS

  1. 1. Web Accessibility Definition & Best Practices JOIN 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 to all individuals, irrespective of their hardware or software, network infrastructure, native language, culture, geographical location or physical or mental aptitude » Tim Berners-Lee, Director and inventor of the World Wide Web
  4. 4. Statistics 20% 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. Disabilities Disabilities 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 Standards Accessibility 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 is about 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 deaf but have the sound muted !
  12. 12. Accessibility for whom ? Accessibility is also people who surf on their mobile !
  13. 13. Common beliefs I will make a website dedicated to Deaf people »
  14. 14. Common beliefs I will make a website dedicated to Deaf people » • And if people don’t have FLASH ? • Why deaf people and not blind people ? • It's expensive to develop ... and it's 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 beliefs Web Accessibility is important for SEO »
  17. 17. Common beliefs Web Accessibility is important for SEO Search engine spiders are deaf and blind. Like those with visual and hearing disabilities, spiders rely on text just as screen readers. Text only browsers and Braille displays rely on text to convey information to users with visual disability.
  18. 18. Web Accessibility & SEO Content is king in both accessibility and SEO
  19. 19. Web Accessibility & SEO SEO # Accessibility
  20. 20. Web Accessibility & SEO SEO + = WIN Accessibility Good accessibility and good search engine optimization is a great combination for content authors and end users.
  21. 21. Focus on images Alternative text for images should present CONTENT and FUNCTION Very rarely a description
  22. 22. Focus on images alt = « image of Pr. Jean Charles Pomerol »
  23. 23. Focus on images alt = « Pr. Jean Charles Pomerol »
  24. 24. Focus on images Empty alternative text
  25. 25. Focus on images Best 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 images How a CMS helps you to make the RIGHT CHOICES ?
  27. 27. Focus on images Accessibility in Drupal 7 No empty alternative text by default Online Help incomplete
  28. 28. Focus on images Web Accessibility & images with Ametys • Empty alternative text by default • Complete and accurate help
  29. 29. Web Accessibility and Content 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 website in 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 website in Ametys Keep content but cleans styling tags when copy/paste Contributor can add semantic information
  34. 34. Common use case: copy/paste from external website in Ametys Contributor is suggested to change title hierarchy and add semantic information 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 run accessibility Website powered with Ametys Other CMS time
  36. 36. CONTACT SITE 40 RUE DU VILLAGE MAIL D’ENTREPRISES TWITTER 31670 LABÈGE FACEBOOK +33 (0) 5 62 19 19 00 YOUTUBE

×