Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Voeg richtlijn “Foutmeldingen” toe #538

Merged
merged 6 commits into from
Jan 26, 2024
Merged

Voeg richtlijn “Foutmeldingen” toe #538

merged 6 commits into from
Jan 26, 2024

Conversation

hidde
Copy link
Member

@hidde hidde commented Jan 18, 2024 •
edited

Draft; to do:

(aangepast, ivm andere oplossing zie comment)

@vercel Vercel
Copy link

vercel bot commented Jan 18, 2024 •
edited

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
documentatie ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 26, 2024 11:41am

@hidde hidde marked this pull request as draft January 18, 2024 16:49
@hidde hidde force-pushed the add-foutmeldingen-guidelines branch 2 times, most recently from 81a314a to d6af500 Compare January 18, 2024 20:43
@hidde
Copy link
Member Author

hidde commented Jan 18, 2024

@Robbert er staan hier voorbeelden van foutmeldingen, wat zou een handige manier zijn om die er in de gerenderde HTML eruit te laten zien als bv Utrecht foutmeldingen, zonder dat classnames daarvoor in in de codevoorbeelden komen? Of misschien inline style die we er dan in de formatted versie weer uit slopen?

@hidde hidde changed the title [draft] Voeg richtlijn “Foutmeldingen” toe Voeg richtlijn “Foutmeldingen” toe Jan 18, 2024
@hidde hidde force-pushed the add-foutmeldingen-guidelines branch from d6af500 to a1bfad0 Compare January 18, 2024 21:28
@hidde hidde mentioned this pull request Jan 18, 2024
Merged
2 tasks
Robbert
Robbert reviewed Jan 21, 2024
View reviewed changes
docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-timing.md Outdated Show resolved Hide resolved
docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-timing.md Outdated Show resolved Hide resolved
docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-timing.md Outdated Show resolved Hide resolved
docs/richtlijnen/formulieren/00-alle-richtlijnen/errors.mdx Outdated Show resolved Hide resolved
docs/richtlijnen/formulieren/00-alle-richtlijnen/errors.mdx Outdated Show resolved Hide resolved
docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-feedback.md Outdated Show resolved Hide resolved
docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-feedback.md Outdated

Voor toetsenbord- en screenreadergebruikers is het van belang dat na een submit, de toetsenbordfocus op een logische plek komt.

Aanbevolen werkwijze bij foutmeldingen: Na het verzenden van het formulier verplaatst de zichtbare- en toetsenbordfocus naar de titel van de samenvatting boven het formulier. Bijkomend voordeel is dat de titel dan meteen ook wordt uitgesproken door een screenreader.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zelfde verhaal als elders: ik zou nog even willen wachten met de focus, en de focus is door role="alert" niet nodig voor de screenreader.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Zin aanbevolen werkwijze weg, todat we een aantal goed uitgewerkte voorbeelden hebben.
Focusmanagement foutmeldingen apart testen en bediscusseren.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ook nog nodig voor een toegankelijke implementatie: nl-design-system/utrecht#2126

docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-feedback.md Outdated

Als de gebruiker verder tabt, komt de focus op de eerste foutmelding, die foutmelding is ook een link naar het bijbehorende invoerveld.

Wordt het formulier dynamisch verzonden, zonder page reload, kan er extra screenreaderfeedback nodig zijn via `role="alert"` of `aria-live="assertive"`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"kan er extra feedback nodig zijn". Dit is zó vrijblijvend, dat ik denk dat het op deze manier geen nut heeft voor de lezers. Ik denk dat we de feedback voor validatie-meldingen wel hebben gecovered, maar dat we misschien nog expliciet moeten zijn over feedback bij success en feedback wanneer er een technische storing is.

docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-feedback.md Outdated
Als de gebruiker verder tabt, komt de focus op de eerste foutmelding, die foutmelding is ook een link naar het bijbehorende invoerveld.

Wordt het formulier dynamisch verzonden, zonder page reload, kan er extra screenreaderfeedback nodig zijn via `role="alert"` of `aria-live="assertive"`
Laat niet met ARIA de hele samenvatting voorlezen, alleen de titel van de samenvatting zelf.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Laten we hier ook een ticket voor aanmaken op de backlog, om te onderzoeken wanneer een alert echt te lang is. Tot die tijd zou ik het willen houden bij een advies om de alert tekst kort en bondig te houden.

docs/richtlijnen/formulieren/00-alle-richtlijnen/_errors-feedback.md Outdated Show resolved Hide resolved
@rianrietveld
Copy link
Contributor

@Robbert @hidde
Ik heb alle wijzigingen gemaakt en denk dat deze pagina nu online kan.
Graag jullie review en eventueel merge.

@rianrietveld rianrietveld marked this pull request as ready for review January 25, 2024 05:22
@rianrietveld
Copy link
Contributor

@Robbert Nog een laaste todo voor deze PR:
#538 (comment)
Ik assign de PR verder aan jouw

@jeffreylauwers
Copy link
Contributor

Mooi geworden zo! Echt een plek om mensen heen te linken! 3 dingen die mij nog opvielen.

  • Moet een datum in de toekomst zijn of liggen ik weet het niet maar op een of andere manier voelt 'liggen' iets beter aan.
  • Er staat 'In guidelines: voorbeelden van de goede en foute plek van een foutmelding.' Dat lijkt een Note to self :)
  • Er staat 'Doen: voorbeeld van hoe het moet, voor zover dat kan in een guideline Niet doen: samenvatting binnen het formulier zetten Niet doen: alles "Labelnaam - Dit veld is verplicht" noemen.' ook dat lijkt een Note to self :)

Verder hoop ik ook dar de foutmelding via CSS gestyled kan worden. Omdat deze nu gelijkwaardig lijkt aan de description. Maar dat komt vast fout... uhh goed.

@hidde
Copy link
Member Author

hidde commented Jan 26, 2024

Styling nu met rode rand, en ook toevoeging: “Invoerfout: ” voor foutmelding om niet alleen op kleur te vertrouwen. Later kunnen we daar met bv utrecht-form-field-error-message web component en tokens uitgebreidere styles voor maken.

@hidde hidde force-pushed the add-foutmeldingen-guidelines branch from 92274dd to 3b64458 Compare January 26, 2024 10:50
@rianrietveld rianrietveld self-requested a review January 26, 2024 11:30
@hidde hidde assigned rianrietveld and unassigned Robbert Jan 26, 2024
@rianrietveld
Copy link
Contributor

@hidde Kun je de comments van Jefffrey nog verwerken?
#538 (comment)

@hidde
Copy link
Member Author

hidde commented Jan 26, 2024

Jeffrey's comments nu ook verwerkt (in bc22b9e), muv styles, die pakken we later op en hebben we nu tekstueel gedaan.

rianrietveld
rianrietveld approved these changes Jan 26, 2024
View reviewed changes
Copy link
Contributor

@rianrietveld rianrietveld left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hidde looks good to me

@hidde hidde merged commit a1e7f3b into main Jan 26, 2024
7 checks passed
@hidde hidde deleted the add-foutmeldingen-guidelines branch January 26, 2024 12:01
This was referenced Jan 26, 2024
Closed
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Robbert Robbert Robbert left review comments

@rianrietveld rianrietveld rianrietveld approved these changes

Assignees

@rianrietveld rianrietveld

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@hidde @rianrietveld @jeffreylauwers @Robbert