Web Accessibility Definition & Best PracticesJOIN US ON www.ametys.org @AmetysCMS AmetysCMS AmetysWebCMS
Questions What’s ACCESSIBILITY ? How to make your website MORE ACCESSIBLE ?How a CMS helps you to make website more accessible ?
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
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)
DisabilitiesDisabilities include the following areas : • Low or Limited Vision • No Vision • Color Blind • Deaf or hearing impaired • Physical and motor impairments • Cognitive or Neurological
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)
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.
Accessibility for whom ?Web Accessibility isabout more than just blindness ….
Accessibility for whom ?Accessibility is also people who don’t have FLASH !
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 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 !
Common beliefsWeb Accessibility isimportant for SEO »
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.
Web Accessibility & SEO Content is kingin both accessibility and SEO
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
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
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
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>
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
Common use case: copy/paste from external websitein AmetysKeep content but cleans styling tags when copy/paste Contributor can add semantic information
Common use case: copy/paste from external websitein AmetysContributor is suggested to change title hierarchy and add semanticinformation to the content
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
CONTACT SITE40 RUE DU VILLAGE MAILD’ENTREPRISES TWITTER31670 LABÈGE FACEBOOK+33 (0) 5 62 19 19 00 YOUTUBE