TIL where no one has gone before

A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann

TIL where no man has gone before

TIL where no one has gone before

responsive design accessibility inclusive design

responsive design accessibility inclusive design

Gunnar Bittersmann
@gunnarbittersmann

1 / 14

Transformation:

strukturierte Daten: JSON-LD & Schema.org
Transformation in HTML & RDFa
Cool URLs mit Rewrite

Accessibility am praktischen Beispiel:

Tastaturbedienung:
- Markierung des Tastaturfokus mit :focus-visible
- skip link
Alternativtexte, ARIA:
- aria-hidden
- aria-current (Verlinke nicht die aktuelle Seite)
- aria-label, aria-labelledby, aria-describedby
Nutzereinstellungen beachten:
- Animationen unterdrücken mit prefers-reduced-motion
- dark mode mit prefers-color-scheme

Resources

The following resources were mentioned during the presentation or are useful additional information.

index data as JSON-LD
index rendered as HTML with RDFa
series episode list as JSON-LD (eg. Short Treks)
series episode list rendered as HTML with RDFa (eg. Short Treks)
transformation template
style sheet
nuqjatlh wejDIch (Aller guten Dinge … sind 3)

Tech Talk zum Semantic Web: RDF, JSON-LD, RDFa; Dublin Core, Schema.org, …
Skipper ahoj!

SELFHTML-Blogpost über Skip-Links
The Ten Most Violated Homepage Design Guidelines

by Jakob Nielsen, 2003
Die zehn meist-missachteten Homepage-Design-Richtlinien

by Jakob Nielsen, 2003 (deutsche Übersetzung)
Using the aria-current attribute

by Léonie Watson
How to Disable Links

by Gerard Cohen on CSS-Tricks
Language annotation

Schema.org Q&A
Github repository

Code

The following code examples from the presentation can be tried out live.

https://codepen.io/gunnarbittersmann/pen/QWqVYYK?editors=1000

Star Trek: Short Treks episode list

transformation JSON-LD to HTML with Pug (JavaScript)