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

1. Web Accessibility
Definition & Best Practices
JOIN US ON www.ametys.org @AmetysCMS AmetysCMS AmetysWebCMS

2. Questions
What’s ACCESSIBILITY ?
How to make your website
MORE ACCESSIBLE ?
How a CMS helps you to make
website more accessible ?

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. 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. 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. 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. 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. Accessibility for whom ?
Web Accessibility is
about more than just
blindness ….

9. Accessibility for whom ?
Accessibility is also people
who don’t have
FLASH !

10. Web Accessibility,
Accessibility is also people
who don’t have
JAVASCRIPT
enabled !

11. Accessibility for whom ?
Accessibility is also people
who are not deaf
but have the sound
muted !

12. Accessibility for whom ?
Accessibility is also people
who surf on their
mobile !

13. Common beliefs
I will make a website dedicated to Deaf people »

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. Accessible websites don’t need to
be ugly !

16. Common beliefs
Web Accessibility is
important for SEO »

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. Web Accessibility & SEO
Content is king
in both accessibility and SEO

19. Web Accessibility & SEO
SEO
#
Accessibility

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. Focus on images
Alternative text for images should
present CONTENT and
FUNCTION
Very rarely a description

22. Focus on images
alt = « image of Pr. Jean Charles Pomerol »

23. Focus on images
alt = « Pr. Jean Charles Pomerol »

24. Focus on images
Empty alternative text

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. Focus on images
How a CMS helps you to make the
RIGHT CHOICES ?

27. Focus on images
Accessibility in Drupal 7
No empty alternative text by default
Online Help incomplete

28. Focus on images
Web Accessibility & images with Ametys
• Empty
alternative text
by default
• Complete and
accurate help

29. Web Accessibility
and
Content structure ?

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. 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. 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. 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. 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. 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. CONTACT SITE
40 RUE DU VILLAGE MAIL
D’ENTREPRISES TWITTER
31670 LABÈGE FACEBOOK
+33 (0) 5 62 19 19 00 YOUTUBE