Be green, be accessible
-
Upload
olivier-nourry -
Category
Internet
-
view
453 -
download
1
Transcript of Be green, be accessible
![Page 1: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/1.jpg)
Green Code Lab Challenge - 2014Olivier Nourry - @OlivierNourry
Be Green, Be Accessible
![Page 2: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/2.jpg)
WHO’S THAT GUY?
2
![Page 3: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/3.jpg)
Accessibilista
• Active in Web Accessibility since 2006
• Full time job since 2008
• Currently Head of Accessibility atV-Technologies (@VTechFr)
• Blogger, Tweeter and Speaker
3@OlivierNourry – Head of Accessibility at @VTechFr
![Page 4: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/4.jpg)
WEB ACCESSIBILITY –WHAT IS IT?
4
![Page 5: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/5.jpg)
Web Accessibility (#a11y) in short
The art of making Web content Perceivable, Operable, Understandable to all users, including those with disabilities.
5@OlivierNourry – Head of Accessibility at @VTechFr
![Page 6: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/6.jpg)
A minor issue?
15 to 20% of people have 1 or more disabilities that affect their daily lives.
This rate should increase over time.
6@OlivierNourry – Head of Accessibility at @VTechFr
![Page 7: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/7.jpg)
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
7@OlivierNourry – Head of Accessibility at @VTechFr
![Page 8: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/8.jpg)
DISABILITY SITUATIONS
They happen more often than you would think
8
![Page 9: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/9.jpg)
Mobile users
9@OlivierNourry – Head of Accessibility at @VTechFr
![Page 10: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/10.jpg)
Senior users
10@OlivierNourry – Head of Accessibility at @VTechFr
![Page 11: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/11.jpg)
Noobs
11@OlivierNourry – Head of Accessibility at @VTechFr
![Page 12: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/12.jpg)
Edge cases
12@OlivierNourry – Head of Accessibility at @VTechFr
![Page 13: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/13.jpg)
THE WEB’S IMPACTS ON ENVIRONMENT
Quick reminders
13
![Page 14: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/14.jpg)
Each time you open a web page…
14@OlivierNourry – Head of Accessibility at @VTechFr
…you start a chain of energy consumption.
Yourdevice
Localnetwork
ISP
DNS
Datacenters
Infrastructure
![Page 15: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/15.jpg)
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
![Page 16: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/16.jpg)
ACCESSIBILITY TO THE RESCUE
3 accessibility best practices that can reduce your carbon footprint.
16
![Page 17: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/17.jpg)
#1: Separate content and presentation
= content in HTML only, style in CSS only.
= =
@OlivierNourry – Head of Accessibility at @VTechFr
![Page 18: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/18.jpg)
Why?
Users should be able to customize presentation
@OlivierNourry – Head of Accessibility at @VTechFr
![Page 19: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/19.jpg)
Green benefits?
@OlivierNourry – Head of Accessibility at @VTechFr
• 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
![Page 20: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/20.jpg)
Win + Win + Win
User
Site Owner
Planet
•Customizable•Faster
•More maintainable•Fewerresources
•Smaller carbon footprint
@OlivierNourry – Head of Accessibility at @VTechFr
![Page 21: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/21.jpg)
#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
![Page 22: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/22.jpg)
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
![Page 23: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/23.jpg)
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
![Page 24: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/24.jpg)
Win + Win + Win
User
Site Owner
Planet
•Better UX•More productivity
•Better engagement•Fewerresources
•Smaller carbon footprint
@OlivierNourry – Head of Accessibility at @VTechFr
![Page 25: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/25.jpg)
#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
![Page 26: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/26.jpg)
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
![Page 27: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/27.jpg)
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
![Page 28: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/28.jpg)
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
![Page 29: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/29.jpg)
ADVERSE EFFECTS?
29
![Page 30: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/30.jpg)
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
![Page 31: Be green, be accessible](https://reader033.fdocuments.net/reader033/viewer/2022060205/55a141631a28ab00288b4816/html5/thumbnails/31.jpg)
Thank you!
31