Inventarisatie toegankelijkheidsrapporten

[Robbert]

Voor websites van gemeente Utrecht zijn diverse toegankelijkheidsrapporten gemaakt. We willen het design system controleren dat de "fouten" in het design system zijn opgelost in de CSS componenten, en het design system aanvullen waar nodig. Daarom willen we een rapportje samenstellen met per "bevinding" uit een rapport van Utrecht informatie over de status in het design system

Te beginnen met de sites:

• erfgoed.utrecht.nl
• naardebasisschool.utrecht.nl
• utrecht.nl

[scar055]

onderzoek www.utrecht.nl

1. video met alle uitleg van mijn parkeer actie de test ging over hoe de video was gemaakt. wcag 1.1.1 tot en met 1.2.5

2. Ondernemen pagina zit onderaan een uitgelicht list waar een div staat. in die div zit een class waar alleen clear:both aan staat en als je die css uit zet, dan veranderd er niets aan de styling. wcag 1.3

3. Het Stappenplan van de film commision, is er een formulier dat met textboxes en text area werkt. De test heeft problemen met de autocomplete van de textboxes, maar in onze storybook is de textbox zodanig goed gemaakt dat het "out the box" werkt. wcag 1.3.5

4. contrast was volgens de tester niet goed maar volgens siegemedia, tanguru contrast finder en myndex was alle contrast goed. Savi had gevonden dat als je de css uitzet er een menu in een h2 komt die wit met lichtgrijze achtergrond heeft bij de navigation menu. wcag 1.4.3

5. blokken omzeilen hebben we gezien voor de ipad pro en de nesthub max op 200% zit het niet responsive wordt. ook hebben we gevonden als je inzoomed op de website, de icon van de search aan de linker kant recht naar beneden voor een klein gedeelte wordt afgesneden. Er is geen als je boven de 150% zoomed design skip link. wcag 2.4.1

6. tab focus was volgens de tester een verkeerde volgorde, maar we hebben geprobeerd de zelfde fout van de tab focus te krijgen. We hebben daar voor geen resultaten gekregen die fout zijn ook hadden we niet het switchen naar engels knop. wcag 2.4.3

7. focus zichtbaar. Hebben we gevonden dat de focus ring bij utrecht.nl niet goed is want het is alleen zwarte stippen en bij de search field en button is het blauw ook is er bij kan ik helpen(assist widget) de focus ring ook blauw en het focused op de vraag teken icon die slecht te zien is. We hebben in het storybook al een focus ring. wcag 2.4.7

8. de mvi aanpak pagina had volgens de tester op de infograpic geen tab focus maar wij hebben er wel een. wel hebben we gevonden dat eigen organisatie geen goede styling als button heeft. Ook heeft Savi gevonden dat als je er op inzoomed dat je niet naar links of rechts kan scrollen. wcag 2.4.7

   

9. taal van onderdelen we hebben gezien dat voor de pagina dat het wordt voor gelezen in het oekraiens maar er word aangeraden dat er ook een lang="uk" word toegevoegd voor screenreader gemakt. In het story book waar het beter in een voorbeeld wordt gebruikt. wcag 3.1.2

10. Er is op utrecht.nl een chat functie die met divs is gemaakt die niet semantisch is. In het storybook is er ook een button component. wcag 4.1.1

11. de paginering waar de tester het over heeft waar de 2 pagina's het zelfde lijken kan ik niet vinden. wcag 4.1.2

[savitris]

Onderzoek erfgoed.utrecht.nl

1. De informatie over het boek op de pagina van Erfgoed Utrecht presenteert de informatie over het boek met paragrafen in div's. Deze informatie zou best gerepresenteerd kunnen worden via het gebruik van een description list. De Storybook van Utrecht biedt voorbeelden van description lists binnen de Data List component. wcag 1.3.1

2. De contrast tussen de placeholder background color en de tekst binnen de card, blijk nu goeie contrast te hebben in Firefox (we hebben ook Chrome gecheckt). We hebben de volgende Contrast checkers gebruikt: Tanaguru Contrast Ratio
   APCA Contrast Calculator wcag 1.4.3

3. De "Lees voor" link is niet responsive geschreven. De link wordt in elkaar geschoven met de logo van Utrecht als de grote van het scherm over 400% is. Dit zou kunnen gefixed worden door de flex settings van deze items te modificeren. wcag 1.4.10

4. De adressen bij het kaart zijn niet te selecteren met een toetsenbord. De Map control buttons van de Storybook worden nog niet gebruikt in deze pagina. Er is ook niet mogelijk te doortabben door de Lijst van adressen. wcag 2.1.1

5. blokken omzeilen hebben we gezien voor de ipad pro en de nesthub max op 200% zit het niet responsive wordt. ook hebben we gevonden als je inzoomed op de website, de icon van de search aan de linker kant recht naar beneden voor een klein gedeelte wordt afgesneden. Er is geen als je boven de 150% zoomed design skip link. Als de CSS wordt uigesteld, dan blijven de Skip Links zichtbaar zelfs bij een zoom van 400% wcag 2.4.1

6. De focus volgorde van de activiteiten-kaartjes is niet wat logisch is (het gaat van boven naar beneden). Deze Issue zou kunnen gefixed worden door de focus index van de items van dit groep te modificeren. Op dit moment is geen Card bij de Storybook. Dit vaak gebruikte component zou een goeie toevoeging zijn aan onze Storybook. wcag 2.4.3

7. Op de desktop view van de pagina als man doortab in de suggestiebox en een valide woord typt in de zoekbalk, krijg man een suggestie lijst. Als man verder tabbed en buiten de suggestiebox is, blijft de suggestiebox open, waardoor de zichtbaarheid van de tekst van de pagina niet meer leesbaar is. wcag 2.4.11

8. Op de Mobile menu view van de pagina als man buiten de opties van dit menu tabbed, blijft dit Mobile menu open. Man kan niet door Esc te drukken, dit menu dichtmaken, en moet terug tabben naar de kruis van dit menu op het te kunnen sluiten. Een focus trap zou een oplossing zijn om niet buiten de opties van de Mobile menu te kunnen gaan. wcag 2.4.11

9. Op de Mobile menu view van de pagina als man doortab in de suggestie-box en een valide woord typt in de zoekbalk, krijg man een suggestie lijst. Als man verder tabbed en buiten de suggestie-box is, blijft de suggestie-box open/menu, waardoor de zichtbaarheid van de tekst van de pagina niet meer leesbaar is. Een focus trap zou een oplossing zijn om niet buiten de opties van de Mobile menu te kunnen gaan. wcag 2.4.11

10. De kaart (iframe) heeft nu wel een title. Dus de Issue over de feit dat de iframe geen naam had is niet meer geldig. wcag 2.5.3

11. De opties "Verfijn" en "Lijst" en "terug knop" van de kaart blijven naamlos voor toegankelijkheid software. wcag 2.1.1

12. Als man op de zoekveld van de pagina typt, man kan nog niet informatie krijgen over de status of de suggestielijst is uitgeklapt of niet. wcag 4.1.3

[savitris]

Onderzoek naardebasisschool.utrecht.nl

1. De kaart (iframe) heeft nu wel een title. Dus de Issue over de feit dat de iframe geen naam had is niet meer geldig. wcag 2.5.3

2. Op de pagina is de hoofdmenu en de zoekveld zichtbaar, wat je niet bij andere paginas die met de naardebasischool website hebben te doen. Het zou best deze componenten te verbergen om de hele site consistent te hebben. wcag 3.2.3

3. Praten met Ali over de bugs in de huidige zoekveld. Krijg de nieuwe zoekveld "geen resultaten" als een optie wanneer iemand iets typt of dat er geen resultaten komen.

4. De adressen lijst en pinnetjes bij het iframe kaart is niet te door tabben. De Map control buttons van de Storybook worden nog niet gebruikt in deze pagina. wcag 2.1.1

5. blokken omzeilen hebben we gezien voor de ipad pro en de nesthub max op 200% zit het niet responsive wordt. ook hebben we gevonden als je inzoomed op de website, de icon van de search aan de linker kant recht naar beneden voor een klein gedeelte wordt afgesneden. Er is geen als je boven de 200% zoomed design skip link. Als de CSS wordt uigesteld, dan blijven de Skip Links zichtbaar zelfs bij een zoom van 400% wcag 2.4.1

6. Op de pagina is de hoofdmenu en de zoekveld zichtbaar, wat je niet bij andere paginas die met de naardebasischool website hebben te doen. Het zou best deze componenten te verbergen om de hele site consistent te hebben. wcag 3.2.3

7. Op de pagina is de focus van de skip link tijdelijke kwijt. Dit component zou kunnen weggehald worden. wcag 2.4.7 wcag 1.3.1

8. Op de Mobile menu view van de pagina als man buiten de opties van dit menu tabbed, blijft dit Mobile menu open. Man kan niet door Esc te drukken, dit menu dichtmaken, en moet terug tabben naar de kruis van dit menu op het te kunnen sluiten. Een focus trap zou een oplossing zijn om niet buiten de opties van de Mobile menu te kunnen gaan. wcag 2.4.11

9. Op de Mobile menu view van de pagina als man een adres in de searchbox typt en door al de gevonden matches door tabbed, blijft de resultaten menu open. Man kan niet door Esc te drukken, dit menu dichtmaken, en moet terug tabben naar de kruis van dit menu op het te kunnen sluiten. Een focus trap zou een oplossing zijn om niet buiten de opties van de menu te kunnen gaan.

10. Op de pagina staan uitklaapbare elementen. De focusringstijlprobleem schijnt al opgelost te zijn.

[scar055]

iframe kaart is al gemaakt door iemand dus we kunnen aan hem vragen of hij wat components dat ze hebben gebruikt met nl design system kan veranderen.

componenten die gebruikt worden:

• button voor de verfijn, lijst, plus en min.
• drawer als je op verfijn en lijst klikt opent de drawer.
• Accordion als je in de drawer lijst kijkt zijn er arccordions in een lijst.
• in de accordion zitten er checkboxen in.
• achter de checkboxes staan de labels

op de woorden die linkjes staan links naar het storybook toe van componenten die al gemaakt zijn met nl design system

voor de search component heb je hier een voorbeeld

[Robbert]

Op pagina "Stap 4: inschrijven" van naardebasisschool is er nog een probleem met de uitklapper: hij doet 't niet met Space. Dat zou wel moeten. In de componenten moeten we daar documentatie voor hebben en een test voor hebben — misschien hebben we dat al, maar dat zou ik even willen checken.

[Robbert]

• [ ] Documentatie over captioning van informatie die zichtbaar is in de video, of toevoegen in alternatieve content. Zoek artikel waar we naar kunnen linken, dat handig is voor de redactie van Utrecht. Dat artikel kunnen we dan voorlopig linken vanuit het CMS in de Video component description, later kan het NL Design System kernteam een Nederlandse versie van die informatie aanbieden.
• [ ] Aan het design system een

  voorbeeld toevoegen met een

[Robbert]

Ondernemen pagina zit onderaan een uitgelicht list waar een div staat.

Hiervoor kunnen we de card list component toevoegen aan het design system. De appearance hoeft niet per se een card te zijn met een background-color, maar de structuur moet zoiets zijn:

expliciet list role doen voor VoiceOver, we renderen list-item: none
<h2>Card list heading</h2>
<ul role="list">
  <li>
    <h3>
      <a href="">Card heading</a>
    </h3>
    <p>Card content</p>
  </li>
  <li>
    <article>
      <h3>
        <a href="">Card heading</a>
      </h3>
      <p>Misschien wel met een article eromheen in sommige gevallen</p>
    </article>
  </li>
  <li>
    <article>
      <hgroup>
        <h3>
          <a href="">Card heading</a>
        </h3>
        <p class="pre-heading">misschien wel met een pre-headin</p>
      </hgroup>
      <p>Misschien wel met een article eromheen in sommige gevallen</p>
    </article>
  </li>
</ul>

[scar055]

Documentatie over captioning van informatie die zichtbaar is in de video, of toevoegen in alternatieve content. Zoek artikel waar we naar kunnen linken, dat handig is voor de redactie van Utrecht. Dat artikel kunnen we dan voorlopig linken vanuit het CMS in de Video component description, later kan het NL Design System kernteam een Nederlandse versie van die informatie aanbieden.

w3.org media is een gedeelte met veel informatie over captions en transcripts

[scar055]

Op pagina "Stap 4: inschrijven" van naardebasisschool is er nog een probleem met de uitklapper: hij doet 't niet met Space. Dat zou wel moeten. In de componenten moeten we daar documentatie voor hebben en een test voor hebben — misschien hebben we dat al, maar dat zou ik even willen checken.

de accordion werkt wel met het uit klappen met spatie balk