"inseguiamo framework, aggiornamenti, poche righe di codice per fare grandi cose per l'umanità, dimenticandoci dell'umanità, dei disturbi visivi, delle differenti connessioni in giro per il mondo, di come le persone interagiscono con le nostre interfacce, è tempo di ricordarcelo"

1. TAKE
CARE
OF YOUR
PIXEL @j8matteo
@MakhBeth

2. THIS
IS
US

4. LESSON
LEARNED

5. REAL
LESSON
LEARNED

7. TYPES OF
DISABILITIES

8. DISABILITY ON THE INTERNET INCLUDES THINGS LIKE:
● Problems with sight
● Problems using a mouse or keyboard
● Problems with hearing
● Reading and understanding
● Cognitive, learning, and neurological

9. BUT WEB ACCESSIBILITY ALSO HELPS PEOPLE WHO:
● Have a slow internet connection
● Have a small screen or unusual device
● Can’t listen to sound at work
● Use an old web browser or operating system
● Screen readers

12. Mark Zuckerberg
Bill Clinton
Prince William

14. SIGHT/VISUAL
DISABILITIES

15. ● 25,000 children in the UK are blind or
partially sighted.
● Someone in the world goes blind every 5
seconds
● 50% of sight loss cases cannot be avoided.

16. ● 15 million blind people in India
● 30,000 new cases of blindness every year
● 4.5 million people with glaucoma

23. HEAR/AUDIO
DISABILITIES

24. ● 466 million people suffer hearing loss
● 45% of US feels they have difficulties
● 1/3 of 65+ people live with hearing loss

26. WHICH KIND OF
DEVS HUMANS
WE WANT TO BE?

27. TO DO LIST

28. MARKUP
● Semantic
● Decoration
should be in
CSS, so use
:before and
:after for that!

29. ARIA
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
Remember to use
Aria Attributes,
especially for that
containers that
seems buttons,
act like buttons
but are… DIVS!

30. CONTRAST
https://webaim.org/resources/contrastchecker/
Have you ever
thought that you
could even
provide an
enhanced
contrast CSS if
you need to

31. A11Y
https://a11yproject.com
The Accessibility Project is
a community-driven
project created to
facilitate web accessibility.
On their site, you can find
a lot of exciting things,
with lots of checklists for
web accessibility.

32. AVOID LIST

33. AUDIO &
VIDEO
● Never use
autoplay
● Don’t use video
as background
● Remember to
provide
subtitles

34. ICONS
● Never use
icon-font
● Never use
ONLY icons to
tell something,
even with aria
and title
attributes

35. COLORS

37. LAYOUT

38. FONTS

39. TOOLS

40. ACCESSIBILITY
AUDIT
https://developers.google.com/web/tools/lighthouse/audits/button-name

41. COLOR
CONTRASThttps://developers.google.com/web/tools/chrome-devtools/accessibility/reference#contrast

42. FIREFOX ACCESSIBILITY TREE
https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector

43. INFRASTRUCTURE
DISABILITIES

45. In 2016, India introduced 106 million people
to the Internet, for the first time.
290,000 people, every day.

47. RETAINING USERS
● The BBC found they lost an additional 10%
of users for every additional second their
site took to load.
● Pinterest increased search engine traffic
and sign-ups by 15% when they reduced
perceived wait times by 40%.

48. https://www.thinkwithgoogle.com/feature/testmysite

49. https://www.thinkwithgoogle.com/feature/testmysite

50. IMPROVE CONVERSION
● Publishers on DoubleClick whose sites
loaded within five seconds, earned up to
twice as much ad revenue than sites
loading within 19 seconds.
● AutoAnything reduced page load time by
half, they saw a boost of 12-13% in sales

51. https://www.webpagetest.org/

52. THE BIG WINS

53. GZIP / BROTLI

54. HTTP2

55. CDN
https://it.wikipedia.org/wiki/Content_Delivery_Network

56. THE THINGS
THAT YOU
HAVE TO DO!
(but you will probably forget to)

57. USELESS CSS
● Purgecss,
UnCSS,
Helium
● Trovare il
CSS…
MORTO!

60. CRITICAL CSS / ABOVE THE FOLD
https://www.smashingmagazine.com/2015/08/understanding-critical-css/

61. USE ONLY
THE FONTS
YOU NEED
● Caricate solo i pesi
usati
● Cercate di usare i
variable font
● Limitate il character
set
fonts.googleapis.com/c
ss?family=Open+Sans&te
xt=CssDay
● Caricate il font in
modo lazy

62. NICE GOALS
AND TIPS

64. USE CODE SPLITTING
Webpack or similar
maybe web components?

65. <link rel="stylesheet" href="all.css" media="all" />
<link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
<link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
<link rel="stylesheet" href="print.css" media="print" />
SPLIT YOUR MEDIA TYPES

66. AVOID LIST

67. AVOID NESTED @import

68. MANIACAL
STUFF

69. Avoid float

70. Avoid demoniac selectors
body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

71. AVOID
HEAVY
PROPERTIES
● border-radius
● box-shadow
● opacity
● transform
● filter
● position: fixed

72. GRADIENT PLACEHOLDER!

73. Cache CRITICAL CSS

74. Cut the class names and use scope isolation

75. Don’t place <link rel="stylesheet" />
before async snippets

76. Place <link rel="stylesheet" /> in <body>
before the element to render

77. Your page will only
render as quickly
as your slowest
stylesheet.

78. CHECKOUT

80. cheers!

81. Bibliography
Accessibility Basics: Testing Your Page For Color Blindness
Improving The Color Accessibility For Color-Blind Users
Accessibility in government
Accessibility Testing for Offline First Applications
Designing For Accessibility And Inclusion
Easy Design & Front-End Practices for Improving Accessibility
Going Colorblind: An Experiment in Empathy and Accessibility
Front-End Performance Checklist
CSS and Network Performance
20 Tips for Optimizing CSS Performance
Why Performance Matters
Sottotitolare i porno
INDIA INSTAGRAM STORY!!!