Save 37% off PRO during our Black Friday Sale! »

Toegankelijk bouwen

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.

Ead3b438cfc0b1066b3330834a6b8a97?s=128

Hidde de Vries

September 21, 2017
Tweet

Transcript

  1. Toegankelijk bouwen Hidde de Vries / @hdv / Soda, Amsterdam

    / 21-09-2017
  2. None
  3. None
  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

  9. None
  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
  15. None
  16. None
  17. None
  18. Tekst kan ook automatisch worden aangepast voor meer toegankelijkheid

  19. Tekst braille gesproken tekst Google Translate zoekmachinebot

  20. None
  21. None
  22. None
  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

  25. None
  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

  29. None
  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

  87. None
  88. None
  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.