O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Be Green, Be Accessible 
Green Code Lab Challenge - 2014 
Olivier Nourry - @OlivierNourry
WHO’S THAT GUY? 
2
Accessibilista 
• Active in Web Accessibility since 2006 
• Full time job since 2008 
• Currently Head of Accessibility at...
WEB ACCESSIBILITY – 
WHAT IS IT? 
4
Web Accessibility (#a11y) in short 
The art of making Web content Perceivable, 
Operable, Understandable to all users, 
in...
A minor issue? 
15 to 20% of people have 1 or more disabilities 
that affect their daily lives. 
This rate should increase...
Disabilities? 
Situations where the user: 
• does not see, or not well enough 
• does not hear, or not well enough 
• does...
DISABILITY SITUATIONS 
They happen more 
often than you would 
think 
8
Mobile users 
@OlivierNourry – Head of Accessibility at @VTechFr 9
Senior users 
@OlivierNourry – Head of Accessibility at @VTechFr 10
Noobs 
@OlivierNourry – Head of Accessibility at @VTechFr 11
Edge cases 
@OlivierNourry – Head of Accessibility at @VTechFr 12
THE WEB’S IMPACTS ON 
ENVIRONMENT 
Quick reminders 
13
Each time you open a web page… 
…you start a chain of energy consumption. 
Local 
network 
Your 
device 
ISP 
DNS 
Data 
c...
Rules of thumb 
• More data  more energy. 
• More files  more energy. 
• More time spent by user  more energy. 
It has ...
ACCESSIBILITY TO THE 
RESCUE 
3 accessibility best 
practices that can 
reduce your carbon 
footprint. 
16
#1: Separate content and 
presentation 
= content in HTML only, style in CSS only. 
= = 
@OlivierNourry – Head of Accessib...
Why? 
Users should be able to customize presentation 
@OlivierNourry – Head of Accessibility at @VTechFr
Green benefits? 
• Lighter HTML files 
 less data transferred 
• CSS files can be cached (browser, server) 
 fewer serve...
Win + Win + Win 
User 
 
Site Owner 
 
Planet 
 
•Customizable 
•Faster 
•More 
maintainable 
•Fewer 
resources 
•Small...
#2: Help users avoid and 
correct mistakes 
= When you design forms: 
• Clarify the purpose and function of the form 
• Pr...
Why? 
• Non-visual navigation requires correctly labeled 
elements and clear interactions 
• Cognitive disorders like dysl...
Green benefits? 
• Fewer errors 
 fewer server requests. 
• Better guidance and assistance 
 less time lost on the user’...
Win + Win + Win 
User 
 
Site Owner 
 
Planet 
 
•Better UX 
•More 
productivity 
•Better 
engagement 
•Fewer 
resource...
#3: Provide transcripts of 
video and audio content 
Transcript = text describing visible and audible 
information contain...
Why? 
• Make information available to users 
who cannot see or hear content 
• Make information available to users 
who ca...
Green benefits? 
• Same information, for only a fraction of the size 
 (far) less data transferred. 
• Reading can be fas...
Win + Win + Win 
User 
 
Site Owner 
 
Planet 
 
•More options 
•Can translate 
•Can reuse 
•Content 
enhancement 
•SEO...
ADVERSE EFFECTS? 
29
A few best practices incur 
more data 
• Subtitles 
• Audio-descriptions 
• Sign language videos 
But it’s a small price t...
Thank you! 
31
Próximos SlideShares
Carregando em…5
×

Be green, be accessible

1.168 visualizações

Publicada em

Surprisingly, some of the signature a11y best practices happen to have a positive impact on the carbon/resources footprint of a Website. How can it be? This presentation explores this question, showcasing 3 emblematic accessibility recommendations that will make your Website more environment-friendly.

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Be green, be accessible

  1. 1. Be Green, Be Accessible Green Code Lab Challenge - 2014 Olivier Nourry - @OlivierNourry
  2. 2. WHO’S THAT GUY? 2
  3. 3. Accessibilista • Active in Web Accessibility since 2006 • Full time job since 2008 • Currently Head of Accessibility at V-Technologies (@VTechFr) • Blogger, Tweeter and Speaker @OlivierNourry – Head of Accessibility at @VTechFr 3
  4. 4. WEB ACCESSIBILITY – WHAT IS IT? 4
  5. 5. Web Accessibility (#a11y) in short The art of making Web content Perceivable, Operable, Understandable to all users, including those with disabilities. @OlivierNourry – Head of Accessibility at @VTechFr 5
  6. 6. A minor issue? 15 to 20% of people have 1 or more disabilities that affect their daily lives. This rate should increase over time. @OlivierNourry – Head of Accessibility at @VTechFr 6
  7. 7. Disabilities? Situations where the user: • does not see, or not well enough • does not hear, or not well enough • does not use a mouse, or a keyboard, or both • does not understand, memorize, or focus well enough @OlivierNourry – Head of Accessibility at @VTechFr 7
  8. 8. DISABILITY SITUATIONS They happen more often than you would think 8
  9. 9. Mobile users @OlivierNourry – Head of Accessibility at @VTechFr 9
  10. 10. Senior users @OlivierNourry – Head of Accessibility at @VTechFr 10
  11. 11. Noobs @OlivierNourry – Head of Accessibility at @VTechFr 11
  12. 12. Edge cases @OlivierNourry – Head of Accessibility at @VTechFr 12
  13. 13. THE WEB’S IMPACTS ON ENVIRONMENT Quick reminders 13
  14. 14. Each time you open a web page… …you start a chain of energy consumption. Local network Your device ISP DNS Data centers Infrastructure @OlivierNourry – Head of Accessibility at @VTechFr 14
  15. 15. Rules of thumb • More data  more energy. • More files  more energy. • More time spent by user  more energy. It has been estimated that Web design is responsible for 40% of the Web’s carbon footprint. @OlivierNourry – Head of Accessibility at @VTechFr
  16. 16. ACCESSIBILITY TO THE RESCUE 3 accessibility best practices that can reduce your carbon footprint. 16
  17. 17. #1: Separate content and presentation = content in HTML only, style in CSS only. = = @OlivierNourry – Head of Accessibility at @VTechFr
  18. 18. Why? Users should be able to customize presentation @OlivierNourry – Head of Accessibility at @VTechFr
  19. 19. Green benefits? • Lighter HTML files  less data transferred • CSS files can be cached (browser, server)  fewer server requests • Pages displayed faster  less time lost on the user’s end @OlivierNourry – Head of Accessibility at @VTechFr
  20. 20. Win + Win + Win User  Site Owner  Planet  •Customizable •Faster •More maintainable •Fewer resources •Smaller carbon footprint @OlivierNourry – Head of Accessibility at @VTechFr
  21. 21. #2: Help users avoid and correct mistakes = When you design forms: • Clarify the purpose and function of the form • Provide clear labels for fields, field sets and buttons • Provide useful instructions before submission • Provide clear error messages and ease the correction process • Leave enough time for the user to fulfill the task @OlivierNourry – Head of Accessibility at @VTechFr
  22. 22. Why? • Non-visual navigation requires correctly labeled elements and clear interactions • Cognitive disorders like dyslexia, short-term memory loss, attention deficit disorders, etc. are relieved by clear instructions • Newcomers, senior users, need to be reassured and guided • Users with vision or motor impairments may need more time to fill forms @OlivierNourry – Head of Accessibility at @VTechFr
  23. 23. Green benefits? • Fewer errors  fewer server requests. • Better guidance and assistance  less time lost on the user’s end. @OlivierNourry – Head of Accessibility at @VTechFr
  24. 24. Win + Win + Win User  Site Owner  Planet  •Better UX •More productivity •Better engagement •Fewer resources •Smaller carbon footprint @OlivierNourry – Head of Accessibility at @VTechFr
  25. 25. #3: Provide transcripts of video and audio content Transcript = text describing visible and audible information contained in a video or audio. @OlivierNourry – Head of Accessibility at @VTechFr
  26. 26. Why? • Make information available to users who cannot see or hear content • Make information available to users who cannot play the video • For some types of content, text is more usable (and useful) than video @OlivierNourry – Head of Accessibility at @VTechFr
  27. 27. Green benefits? • Same information, for only a fraction of the size  (far) less data transferred. • Reading can be faster and more efficient than watching o less time lost on the user’s end. • Text can be read on any device o Less demanding from a technological point of view. @OlivierNourry – Head of Accessibility at @VTechFr
  28. 28. Win + Win + Win User  Site Owner  Planet  •More options •Can translate •Can reuse •Content enhancement •SEO •Smaller carbon footprint @OlivierNourry – Head of Accessibility at @VTechFr
  29. 29. ADVERSE EFFECTS? 29
  30. 30. A few best practices incur more data • Subtitles • Audio-descriptions • Sign language videos But it’s a small price to pay for digital inclusion. @OlivierNourry – Head of Accessibility at @VTechFr
  31. 31. Thank you! 31

×