RIAN – Responsive to individual accessibility needs

Vortrag über RIAN im Rahmen der fireshonks (27.12.2023)

Welche Ein­stel­lung­en nutzt Dein Browser?

Auf dieser Seite kannst Du erfahren, welche Einstellungsmöglichkeiten Du in deinem Browser und in Deinem Betriebssystem vornehmen kannst, um Webseiten besser auf Deine Bedürfnisse anzupassen.

Einstellungen im Browser

Je nach Gerät und Browser können unterschiedliche Einstellungen vorgenommen werden:

Schriftgröße

Auf mobilen Geräten kannst Du die Schriftgröße im Browser leider nicht zentral einstellen.

Die Browser von Laptops bieten in den Einstellungen die Möglichkeit, eine bevorzugte Schriftgröße festzulegen.

Du kannst unten sehen, welche Schriftgröße Dein Gerät anzeigt. Wenn das "-" hinter der Einheitsangabe "1rem" auf der gleichen Höhe ist wie das "-" vor der Einheitsangabe in px dann ist das die Größe, die in Deinem Browser voreingestellt ist!

1rem  – – 9px sehr klein

1rem  – – 12px klein

1rem  – – 16px mittel (Standard)

1rem  – – 20px groß

1rem  – – 24px sehr groß

1rem  – – 36px

1rem  – – 48px

1rem  – – 72px

Einstellungen im Betriebssystem

Reduzierte Bewegungen

In den Einstellungen Deines Betriebssystems kannst Du angeben, dass Bewegungen reduziert werden sollen.

In Deinem Betriebssystem oder Deinem Browser ist eingestellt …

… dass Bewegungen nicht reduziert werden sollen.

@media (prefers-reduced-motion: no-preference) {…}

… dass Du reduzierte Bewegungen bevorzugst.

@media (prefers-reduced-motion: reduce) {…}

Reduzierte Transparenz

In den Einstellungen Deines Betriebssystems kannst Du angeben, dass Transparenzen reduziert werden sollen.

In Deinem Betriebssystem oder Deinem Browser ist eingestellt …

… dass Bewegungen nicht reduziert werden sollen.

@media (prefers-reduced-transparency: no-preference) {…}

… dass Du reduzierte Bewegungen bevorzugst.

@media (prefers-reduced-transparency: reduce) {…}

Bevorzugter Kontrast

In den Einstellungen Deines Betriebssystems kannst Du angeben, ob Du mehr oder weniger Kontrast bevorzugst.

In Deinem Betriebssystem oder Deinem Browser ist eingestellt …

… dass Du keine Kontrast-Änderung wünschst.

@media (prefers-contrast: no-preference) {…}

… dass Du weniger Kontrast bevorzugst.

@media (prefers-contrast: less) {…}

… dass Du mehr Kontrast bevorzugst.

@media (prefers-contrast: more) {…}

Bevorzugtes Farbschema: Hell oder Dunkel?

Es kann sein, dass Du den Tag- und Nachtmodus abhängig von der Tageszeit eingestellt hast und hier die Werte davon abhängig sind.

In Deinem Betriebssystem oder Deinem Browser ist eingestellt …

… dass Du den Tag-Modus präferierst!

@media (prefers-color-scheme: light) {…}

… dass Du den Nacht-Modus präferierst!

@media (prefers-color-scheme: dark) {…}

Invertierte Farben: Invertiert oder nicht?

Auf Geräten von Apple kann eingestellt werden, ob die Farben invertiert, also umgekehrt dargestellt werden sollen. Dann wird aus weiß schwarz und aus schwarz wird weiß.

In Deinem Betriebssystem oder Deinem Browser ist eingestellt …

… dass die Farben umgekehrt werden sollen!

@media (inverted-colors: inverted) {…}

… dass die Farben nicht umgekehrt werden sollen!

@media (inverted-colors: none) {…}

… ups! Dein Browser unterstützt dieses Feature leider nicht!

Erzwungene Farben: An oder aus?

Farben können im Betriebssystem auf ein festes Schema gestellt werden.

In Deinem Betriebssystem oder Deinem Browser ist eingestellt …

… dass kein bestimmtes Farbschema erzwungen werden soll!

@media (forced-colors: none) {…}

… dass ein bestimmtes Farbschema erzwungen werden soll.

@media (forced-colors: active) {…}

… dass ein bestimmtes, eigenes Farbschema erzwungen werden soll.

@media (forced-colors: custom) {…}

… ups! Dein Browser unterstützt dieses Feature leider nicht!

Hardware Parameter

Deine Hardware hat unterschiedliche Parameter. Webseiten können Information über die Hardware, die Du nutzt, um auf diese Webseite zuzugreifen abfragen und darauf reagieren.

Fenster-Breite

Jeder Bildschirm hat eine feste Anzahl an Pixeln in der Breite und Höhe. Wie viele davon auf einem Inch oder Centimeter passen, wird als "Auflösung" (Englisch "resolution") bezeichnet. Im Browser werden jedoch nicht die absoluten Pixelzahlen genutzt, sondern die "Viewport-Pixel" verwendet. Diese Größe rechnet die unterschiedlichen Auflösungen der Bildschirme wieder raus, damit Webseiten davon unabhängig optimiert werden können.

Diese Seite zeigt nur an, in welchem Größenbereich sich Dein Gerät bzw. das aktuelle Browserfenster befindet. Genauer kannst Du Die Angaben erruieren, wenn Du die Seite whatismyviewport.com aufrufst.

Dein Browserfenster hat aktuell eine Breite von …

… weniger als 20rem (320px).

@media (max-width: 20rem) {…}

… exakt 20rem (320px).

@media (width: 20rem) {…}

… exakt 22.5rem (360px).

@media (width: 22.5rem) {…}

… exakt 23.4375rem (375px).

@media (width: 23.4375rem) {…}

… exakt 25rem (400px).

@media (width: 25rem) {…}

… exakt 30rem (480px).

@media (width: 30rem) {…}

… mehr als 20rem (320px), aber weniger als 30rem (640px).

@media (min-width: 20rem) and (max-width: 30rem) {…}

… mehr als 30rem (640px), aber weniger als 40rem (640px).

@media (min-width: 30rem) and (max-width: 40rem) {…}

… exakt 40rem (640px).

@media (width: 40rem) {…}

… mehr als 40rem (640px), aber weniger als 50rem (800px).

@media (min-width: 40rem) and (max-width: 50rem) {…}

… mehr als 50rem (800px), aber weniger als 60rem (960px).

@media (min-width: 50rem) and (max-width: 60rem) {…}

… mehr als 60rem (960px), aber weniger als 70rem (1120px).

@media (min-width: 60rem) and (max-width: 70rem) {…}

… mehr als 70rem (1120px), aber weniger als 80rem (1280px).

@media (min-width: 70rem) and (max-width: 80rem) {…}

… mehr als 80rem (1280px), aber weniger als 90rem (1440px).

@media (min-width: 80rem) and (max-width: 90rem) {…}

… mehr als 90rem (1440px), aber weniger als 100rem (1600px).

@media (min-width: 90rem) and (max-width: 100rem) {…}

… mehr als 100rem (1600px), aber weniger als 125rem (2000px).

@media (min-width: 100rem) and (max-width: 125rem) {…}

… mehr als 125rem (2000px), aber weniger als 150rem (2400px).

@media (min-width: 125rem) and (max-width: 150rem) {…}

… mehr als 150rem (2400px), aber weniger als 175rem (2800px).

@media (min-width: 150rem) and (max-width: 175rem) {…}

… mehr als 175rem (2800px), aber weniger als 200rem (3200px).

@media (min-width: 175rem) and (max-width: 200rem) {…}

… mehr als 200rem (3200px), aber weniger als 250rem (4000px).

@media (min-width: 200rem) and (max-width: 250rem) {…}

… mehr als 250rem (4000px), aber weniger als 300rem (4800px).

@media (min-width: 250rem) and (max-width: 300rem) {…}

… mehr als 300rem (4800px), aber weniger als 350rem (5600px).

@media (min-width: 300rem) and (max-width: 350rem) {…}

… mehr als 350rem (5600px), aber weniger als 400rem (6400px).

@media (min-width: 350rem) and (max-width: 400rem) {…}

… mehr als 400rem (6400px).

@media (min-width: 400rem) {…}

Fenster-Höhe

Auch die Höhe eines Browserfensters kann Einfluss auf die Darstellung haben.

Auch die genaue Höhe kann von whatismyviewport.com angegeben werden.

Dein Browserfenster hat aktuell eine Höhe von …

… weniger als 20rem (320px).

@media (max-height: 20rem) {…}

… mehr als 20rem (320px), aber weniger als 25rem (400px).

@media (min-height: 20rem) and (max-height: 25rem) {…}

… mehr als 25rem (400px), aber weniger als 30rem (480px).

@media (min-height: 25rem) and (max-height: 30rem) {…}

… mehr als 30rem (480px), aber weniger als 35rem (560px).

@media (min-height: 30rem) and (max-height: 35rem) {…}

… mehr als 35rem (560px), aber weniger als 40rem (640px).

@media (min-height: 35rem) and (max-height: 40rem) {…}

… mehr als 40rem (640px), aber weniger als 45rem (720px).

@media (min-height: 40rem) and (max-height: 45rem) {…}

… mehr als 45rem (720px), aber weniger als 50rem (800px).

@media (min-height: 45rem) and (max-height: 50rem) {…}

… mehr als 50rem (800px), aber weniger als 60rem (960px).

@media (min-height: 50rem) and (max-height: 60rem) {…}

… mehr als 60rem (960px), aber weniger als 70rem (1120px).

@media (min-height: 60rem) and (max-height: 70rem) {…}

… mehr als 70rem (1120px), aber weniger als 80rem (1280px).

@media (min-height: 70rem) and (max-height: 80rem) {…}

… mehr als 80rem (1280px), aber weniger als 90rem (1440px).

@media (min-height: 80rem) and (max-height: 90rem) {…}

… mehr als 90rem (1440px), aber weniger als 100rem (1600px).

@media (min-height: 90rem) and (max-height: 100rem) {…}

… mehr als 100rem (1600px), aber weniger als 125rem (2000px).

@media (min-height: 100rem) and (max-height: 125rem) {…}

… mehr als 125rem (2000px), aber weniger als 150rem (2400px).

@media (min-height: 125rem) and (max-height: 150rem) {…}

… mehr als 150rem (2400px), aber weniger als 175rem (2800px).

@media (min-height: 150rem) and (max-height: 175rem) {…}

… mehr als 175rem (2800px), aber weniger als 200rem (3200px).

@media (min-height: 175rem) and (max-height: 200rem) {…}

… mehr als 200rem (3200px).

@media (min-height: 200rem) {…}

Seitenverhältnis

Dein Gerät oder Browserfenster hat ein Seitenverhältnis von …

… mindestens 1:3 und maximal 1:2 (Hochformat).

@media (min-aspect-ratio: 1/3) and (min-aspect-ratio: 1/3) {…}

… mindestens 1:3 – Hochformat.

@media (min-aspect-ratio: 1/3) {…}

… mindestens 1:2 – Hochformat.

@media (min-aspect-ratio: 1/2) {…}

… mindestens 1:2 – Hochformat.

@media (min-aspect-ratio: 1/2) {…}

… exakt 1:1 – quadratisch.

@media (aspect-ratio: 1/1) {…}

… mindestens 4:3 – Querformat.

@media (min-aspect-ratio: 4/3) {…}

Bildschirm-Ausrichtung

Sensoren ermöglichen es, dass

Dein Gerät oder Browserfenster befindet sich aktuell im …

… Hochformat.

@media (orientation: portrait) {…}

… Querformat.

@media (orientation: landscape) {…}

Bildschirm-Auflösung

Die Auflösung kann mit unterschiedlichen Einheiten bemessen werden:

Dein Browserfenster hat aktuell eine Auflösung von …

dppx (Werte identisch mit dpr)

… mindestens 0.5dppx, maximal 0.66dppx.

@media (min-resolution: 0.5dppx) and (max-resolution: 0.66dppx) {…}

… mindestens 0.67dppx, maximal 0.99dppx.

@media (min-resolution: 0.67dppx) and (max-resolution: 0.99dppx) {…}

… mindestens 1dppx, maximal 1.99dppx.

@media (min-resolution: 1dppx) and (max-resolution: 1.99dppx) {…}

… mindestens 2dppx, maximal 2.99dppx.

@media (min-resolution: 2dppx) and (max-resolution: 2.99dppx) {…}

… mindestens 3dppx, maximal 3.99dppx.

@media (min-resolution: 3dppx) and (max-resolution: 3.99dppx) {…}

… mindestens 4dppx, maximal 4.99dppx.

@media (min-resolution: 4dppx) and (max-resolution: 4.99dppx) {…}

… mindestens 5dppx, maximal 5.99dppx.

@media (min-resolution: 5dppx) and (max-resolution: 5.99dppx) {…}

… mindestens 6dppx, maximal 6.99dppx.

@media (min-resolution: 6dppx) and (max-resolution: 6.99dppx) {…}

… mindestens 7dppx, maximal 7.99dppx.

@media (min-resolution: 7dppx) and (max-resolution: 7.99dppx) {…}

… mindestens 8dppx, maximal 8.99dppx.

@media (min-resolution: 8dppx) and (max-resolution: 8.99dppx) {…}

… mindestens 10dppx.

@media (min-resolution: 10dppx) {…}
dpi

… mindestens 72dpi, maximal 144dpi.

@media (min-resolution: 72dpi) and (max-resolution: 144dpi) {…}

… mindestens 144dpi, maximal 288dpi.

@media (min-resolution: 144dpi) and (max-resolution: 288dpi) {…}

… mindestens 288dpi, maximal 300dpi.

@media (min-resolution: 288dpi) and (max-resolution: 300dpi) {…}

Eingabe-Genauigkeit mit Interaction Media Features

Sensoren ermöglichen es, dass

Dein Gerät nutzt überwiegend …

… eine feine Eingabemethode, z.B. einen Stylus oder eine Maus.

@media (pointer: fine) {…}

… eine grobe Eingabemethode, z.B. deinen Finger auf einem Touch-Display.

@media (pointer: coarse) {…}

… eine feine Eingabemethode, z.B. einen Stylus oder eine Maus.

@media (any-pointer: fine) {…}

… eine grobe Eingabemethode, z.B. deinen Finger auf einem Touch-Display.

@media (any-pointer: coarse) {…}

@media (pointer) im RIAN-Konzept einsetzen