feat: Neurodiversity Design System (Guidelines)

[mtwente]

www.stadtgeschichtebasel.ch was (self-)evaluated against the guidelines and standards of the Neurodiversity Design System (NDS). All evaluation results are listed below.

Several action items result from the evaluation. Most of them are being discarded in light of other design decisions related to accessibility (see the table below).

The following tasks result from the NDS evaluation:

• follow persistent naming conventions
• provide a dark mode setting (work in progress elsewhere)

Numbers

guideline	status	comment	tasks	notes
split long numbers into sequences	N/A	–	–	–
provide visual representations of times and dates	OK	–	–	not applied to text body from hypotheses

Font

guideline	status	comment	tasks	notes
use sans-serif humanist font	meh	sans-serif geometric	–	–
use non-mirroring letter shapes (b, d, ...)	fail	–	–	–
have sufficient letter spacing	OK	–	–	–
use double-storey letters (g, j, ...)	OK	–	–	–

Typography

guideline	status	comment	tasks	notes
make heading 20% larger than body	OK	–	–	–
use heavier or bold style for heading	OK	–	–	–
use line spacing of 150% to 170%	OK	–	–	–
use font-size 16–20px, base value 16	OK	–	–	–
increase letter spacing by ca. +1/3 for smaller captions	OK	–	–	–

• additionally: current use of quotation marks is inconsistent

Colour

guideline	status	comment	tasks	notes
meet contrast ratio 4.5 AA	OK	–	–	irrelevant for images
meet contrast ratio 7+ AAA	OK	fails on surface + error for smaller text	–	irrelevant for images
use colour to show hierarchy	OK	–	–	blog h1 not in #000000?
use colour to show connectedness of items	meh	filled buttons vs. ringed badges	maybe	–
distinguish active, hover, focus	OK	–	–	focus by browser?
do not use #000000 or #ffffff	fail	–	ignored	–
provide dark mode	OK	–	in progress	–
provide coloured mode	fail	–	ignored	–

Buttons/Links

guideline	status	comment	tasks	notes
style buttons so they look clickable	fail	marked either by underline or by imperative language	maybe	–
make inputs, text areas and multi-selects appear clickable	N/A	–	–	–
use different colours for hyperlinks	fail	–	maybe	use hover:decoration?
ensure clickable areas are large enough	OK	–	–	–
add icons to action items (do not overuse)	OK	–	maybe	Blog: Breadcrumbs?

Interface

guideline	status	comment	tasks	notes
separate sections w/background colours	OK	–	–	–
de-clutter layout, conceal optional features	OK	–	–	landing page content could use a clean-up, and the event table should be implemented otherwise
use conventional positionings (menu, footer, header)	OK	–	–	–
do not let navigation, contact info, fixed notices, ... compete for attention	OK	–	–	–

Communications

guideline	status	comment	tasks	notes
style alerts and messages consistently	N/A	–	–	see PR #74
follow persistent naming conventions	fail	WP: Startseite: "Wir schreiben...", / Bände: "Bände" / Agenda: "Hier finden Sie..."	yes	Agenda: mehr Infos → zum Veranstalter?
use subtle animation for transition when state of item changes (e.g. dropdown)	fail	see Agenda	maybe	–
use animation to reinforce hierarchy	N/A	–	–	–
use animation to indicate progress/waiting times	N/A	–	–	–
let user trigger movement, no auto-play	N/A	–	–	–
provide option to turn off animations	N/A	–	–	–