Toegankelijk bouwen

The very basics of building accessible websites. In 6 tips based on stuff that is available from open web standards, I showed how to make use of the idea that the web is accessible by default.

Transcript

1. Toegankelijk bouwen Hidde de Vries / @hdv / Soda, Amsterdam / 21-09-2017
4. Toegankelijk bouwen
5. Achtergrond
6. HTML CSS JavaScript
7. HTML 
 beschrijft wat dingen zijn
 CSS
 beschrijft hoe dingen eruit zien
 
 JavaScript
 kan dingen veranderen
8. https://www.youtube.com/watch?v=Ug6XAw6hzaw
10. “This is for everyone” zit ingebouwd in webstandaarden
11. Toegankelijkheid zit ingebouwd in webstandaarden
12. De praktijk
13. Het web is voor een heel groot deel tekst
14. Tekst is: selecteerbaar kopieerbaar vergrootbaar in ander font te zetten bruikbaar in Reader
18. Tekst kan ook automatisch worden aangepast voor meer toegankelijkheid
19. Tekst braille gesproken tekst Google Translate zoekmachinebot
23. And yet, could you stuff my pipe? No, it's just a representation, is it not? So if I had written on my picture ‘This is a pipe’, I'd have been lying! René Magritte “
24. Photo: Christies
26. Ceci n’est pas un texte
27. Het web is voor een heel groot deel tekst
28. Het web is voor een heel groot deel gestructureerde tekst
30. Langs het water en in het park: uitzinnig Utrecht onthaalt Oranje
 Binnenland
 De kleur oranje verdwijnt langzaam weer uit Park Lepelenburg in Utrecht. Duizenden mensen huldigden daar de Oranjevrouwen. Het grasveld was afgeladen vol met opvallend veel families met jonge kinderen. Een gebrul steeg op toen de spelers het publiek bedankte voor al hun steun. De huldiging was voor het Nederlands elftal de kers op de taart na het EK damesvoetbal. De ploeg startte met een rondvaart door de Singel in Utrecht waar ruim 10.000 mensen langs de kant stonden. Rond half acht werd er voor alle dames stuk voor stuk gejuicht door een bomvol park met nog eens ruim 12.000 fans.
31. Langs het water en in het park: uitzinnig Utrecht onthaalt Oranje
 Binnenland
 De kleur oranje verdwijnt langzaam weer uit Park Lepelenburg in Utrecht. Duizenden mensen huldigden daar de Oranjevrouwen. Het grasveld was afgeladen vol met opvallend veel families met jonge kinderen. Een gebrul steeg op toen de spelers het publiek bedankte voor al hun steun. De huldiging was voor het Nederlands elftal de kers op de taart na het EK damesvoetbal. De ploeg startte met een rondvaart door de Singel in Utrecht waar ruim 10.000 mensen langs de kant stonden. Rond half acht werd er voor alle dames stuk voor stuk gejuicht door een bomvol park met nog eens ruim 12.000 fans. heading link paragraaf paragraaf
32. Langs het water en in het park: uitzinnig Utrecht onthaalt Oranje
 Binnenland
 De kleur oranje verdwijnt langzaam weer uit Park Lepelenburg in Utrecht. Duizenden mensen huldigden daar de Oranjevrouwen. Het grasveld was afgeladen vol met opvallend veel families met jonge kinderen. Een gebrul steeg op toen de spelers het publiek bedankte voor al hun steun. De huldiging was voor het Nederlands elftal de kers op de taart na het EK damesvoetbal. De ploeg startte met een rondvaart door de Singel in Utrecht waar ruim 10.000 mensen langs de kant stonden. Rond half acht werd er voor alle dames stuk voor stuk gejuicht door een bomvol park met nog eens ruim 12.000 fans. heading link paragraaf paragraaf link
33. Met HTML kun je zeggen wat wat is
34. heading paragraaf lijst quote link code tabel formulierveld video definitielijst afkorting
35. Let op de structuur
 van je document 1
36. Geef je HTML een logische structuur
37. Bekijk je pagina eens zonder CSS
38. Sla geen heading levels over h1 h2 h3 h4 h5
39. Headings are much more than a big bold title, they provide a solid structure to the webpage. Think of headings as an outline of your webpage. https://www.nomensa.com/blog/2017/how-structure-headings- web-accessibility “
40. Misschien consumeren mensen je content anders
 dan je van tevoren denkt
41. Bron: https://gdsdata.blog.gov.uk/2015/03/17/accessibility-of-the-new-services-page/
42. Gebruik HTML tags zoals ze zijn bedoeld 2
43. Kijk verder dan
 <div>s en <span>s
44. Opslaan <div>Opslaan</div> FQGFKVPKGV
45. Opslaan <span>Opslaan</span> FQGFKVPKGV
46. <a> vs <button>
47. gaat ergens naartoe voert een actie uit <a> vs <button>
48. Opslaan <a href="#">Opslaan</a> FQGFKVPKGV
49. Als je href leeg is, is <a> waarschijnlijk niet het juiste element
50. Opslaan <button>Opslaan</button>
51. Opslaan <button>Opslaan</button> Gratis inbegrepen: * kun je naartoe tabben * werkt met toetsenbord (ENTER) * wordt voorgelezen als ‘button’ * krijgt de juiste cursor
52. <caption> vs <legend>
53. titel van een tabel titel van een groep formuliervelden <caption> vs <legend>
54. <table> <caption>Financiële resultaten 2017</caption> <tbody>…</tbody> </table> Financiële resultaten 2017 Fixed assets Current Assets Creditors Capital and reserves 210,000 4,532 23,003 50,500
55. <form> <fieldset> <legend>Persoonlijke gegevens</legend> (…) </fieldset> </form> Persoonlijke gegevens Naam: Adres: Woonplaats:
56. <i>
57. afwisseling in 
 tone of voice, <i> technische termen PKGVXQQTKEQPU UQTT[$QQVUVTCR
58. Alex en Martina vertrokken naar Zuid-Frankrijk om een <i>chambre d'hôtes</i> te openen. Alex en Martina vertrokken naar Zuid-Frankrijk om een chambre d'hôtes te openen.
59. Multilul, creative advertising media and communication consultant agency, hierna te noemen: <i>De Opdrachtnemer</i> Multilul, creative advertising media and communication consultant agency, hierna te noemen: “De Opdrachtnemer”
60. #hoedan Check 
 de spec: developers.whatwg.org
61. #hoedan Check 
 de spec: developers.whatwg.org
62. Als er geen geschikt HTML element is: gebruik <div> of <span>
63. Specificeer welke talen je gebruikt 3
64. <html lang="nl">
65. <div lang="zh-TW">
66. Alex en Martina vertrokken naar Zuid-Frankrijk om een <i lang="fr">chambre d'hôtes</i> te openen. Alex en Martina vertrokken naar Zuid-Frankrijk om een chambre d'hôtes te openen.
67. Let op als je content verbergt 4
68. visueel verbergen vs helemaal verbergen
69. visueel ✔ Zichtbaar voor AT, dus
 kan bijvoorbeeld 
 worden voorgelezen ✘ Onzichtbaar op scherm
70. visueel ✔ Zichtbaar voor AT, dus
 kan bijvoorbeeld 
 worden voorgelezen ✘ Onzichtbaar op scherm
71. visueel ✔ Zichtbaar voor AT, dus
 kan bijvoorbeeld 
 worden voorgelezen ✘ Onzichtbaar op scherm
72. visueel ✔ Zichtbaar voor AT, dus
 kan bijvoorbeeld 
 worden voorgelezen ✘ Onzichtbaar op scherm Accepteer ajb ons cookiebeleid OK ×
73. visueel ✔ Zichtbaar voor AT, dus
 kan bijvoorbeeld 
 worden voorgelezen ✘ Onzichtbaar op scherm Accepteer ajb ons cookiebeleid OK ×
74. helemaal ✘ Onzichtbaar voor AT, 
 kan niet worden
 voorgelezen
 
 ✘ Onzichtbaar op scherm
75. helemaal ✘ Onzichtbaar voor AT, 
 kan niet worden
 voorgelezen
 
 ✘ Onzichtbaar op scherm
76. helemaal ✘ Onzichtbaar voor AT, 
 kan niet worden
 voorgelezen
 
 ✘ Onzichtbaar op scherm Vul uw IBAN-nummer in ?
77. helemaal ✘ Onzichtbaar voor AT, 
 kan niet worden
 voorgelezen
 
 ✘ Onzichtbaar op scherm Vul uw IBAN-nummer in ? Uw IBAN-nummer telt 34 karakters, vraag uw bank als u het niet zeker weet.
78. helemaal ✘ Onzichtbaar voor AT, 
 kan niet worden
 voorgelezen
 
 ✘ Onzichtbaar op scherm Vul uw IBAN-nummer in ?
79. visueel helemaal position: absolute; left: -9999em; display: none; hidden attribuut CSS HTML CSS
80. Hidden UX
81. webaim.org
82. Voeg waar mogelijk tekstalternatieven toe 5
83. alt-attributen bij images
84. transcripts bij audio en video ondertitels bij video’s (met <track>)
85. transcripts bij audio en video ondertitels bij video’s (met <track>)
86. Let op je focus 6
89. document.activeElement
90. Focus verplaatsen met JavaScript
91. element.focus()
92. Dit werkt alleen op interactieve elementen
93. Focus binnen één element houden met JavaScript
94. Langs het water en in het park: uitzinnig Utrecht onthaalt Oranje
 Binnenland
 De kleur oranje verdwijnt langzaam weer uit Park Lepelenburg in Utrecht. Duizenden mensen huldigden daar de Oranjevrouwen. Het grasveld was afgeladen vol met opvallend veel families met jonge kinderen. Een gebrul steeg op toen de spelers het publiek bedankte voor al hun steun. De huldiging was voor het Nederlands elftal de kers op de taart na het EK damesvoetbal. De ploeg startte met een rondvaart door de Singel in Utrecht waar ruim 10.000 mensen langs de kant stonden. Rond half acht werd er voor alle dames stuk voor stuk gejuicht door een bomvol park met nog eens ruim 12.000 fans. Langs het water en in het park: uitzinnig Utrecht onthaalt Oranje
 Binnenland
 De kleur oranje verdwijnt langzaam weer uit Park Lepelenburg in Utrecht. Duizenden mensen huldigden daar de Oranjevrouwen. Het grasveld was afgeladen vol met opvallend veel families met jonge kinderen. Een gebrul steeg op toen de spelers het publiek bedankte voor al hun steun. De huldiging was voor het Nederlands elftal de kers op de taart na het EK damesvoetbal. De ploeg startte met een rondvaart door de Singel in Utrecht waar Login om verder te gaan Gebruikersnaam: Wachtwoord: Log in
95. Let op als je iets uit de pagina haalt dat focus had
96. Naam: Adres: Woonplaats:
97. 1. Persoonlijke gegevens 
 
 
 
 
 2. Uw aanvraag 3. Ondertekening 4. Samenvatting △ ▽ ▽ ▽ Naam: Adres: Woonplaats:
98. inclusive- components.
 design
99. https://www.w3.org/ TR/wai-aria-practices/ WAI ARIA Authoring Practices
100. HTML CSS JavaScript
101. Structuur 1 2 3 4 5 6 De juiste elementen lang Let op bij verbergen Alternatieve tekst Focus
102. Het web is voor iedereen. Gebruik webstandaarden goed.