JavaScript Accessibility: Wie man Tastatur-Navigation für deine Webseite implementiert

preview_player
Показать описание
Du brauchst einen Hoster?

Im heutigen Tutorial beschäftigen wir uns damit wie man in JavaScript & CSS wirkliche Tastaturbedinbarkeit im Zusammenhang mit Grid & CSS umsetzten kann damit Barrierefreiheit und Experten Nutzer wirklich mit eurer Software arbeiten können. Dieses Thema ist sehr wichtig für Enterprise & Barreirefreheit.

Fragen oder Probleme? Werde Teil der Community! (Kostenlos)

Unterstütze den Channel:

Kapitel:
00:00 Demo
00:37 Warum brauche ich das?
01:56 Setup
02:20 HTML
03:10 Styling
06:25 Unser Plan
07:55 Col & Row
bestimmen
13:45 Events
20:24 Verbessern

Links aus dem Video:

#tutorial #javascript #webdevelopment

Meine Social Media Seiten:

Copyright by Johannes Schiel / Unleashed Design
  1. Unleashed Design
  2. JavaScript lernen
  3. einfach Programmieren lernen
  4. css lernen
  5. Keyboard Support JavaScript
  6. Tastatur JavaScript
Рекомендации по теме
JavaScript Accessibility: Wie 0:23:28

JavaScript Accessibility: Wie man Tastatur-Navigation für deine Webseite implementiert

Ein Schritt-für-Schritt-Tutorial für 0:11:43

Ein Schritt-für-Schritt-Tutorial für das Reduzieren der Ladezeit mit JavaScript

Barrierefreie Navigation für 0:15:53

Barrierefreie Navigation für eine Webseite erstellen - Anleitung

Einstieg in Web 0:42:24

Einstieg in Web Accessibility - Wie man barrierefreie HTML-Formulare baut

ARIA HTML Tutorial 0:13:54

ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!

Senior Programmers vs 0:00:34

Senior Programmers vs Junior Developers #shorts

Tastatur-Bedienbarkeit von Webseiten 0:09:56

Tastatur-Bedienbarkeit von Webseiten prüfen und optimieren

barrierefreie Navigation mit 0:18:55

barrierefreie Navigation mit Untermenü im Test - Das Code-Test-Experiment - accessibility submenue

Actually Useful MacBook 0:00:28

Actually Useful MacBook Hacks!

So you use 0:00:19

So you use Safari on your Mac...

WS20/21 - MTD114 1:32:06

WS20/21 - MTD114 Hypermedia 1 - Teil 6: Web Accessibility

An accessible accordion 0:49:46

An accessible accordion component

Can chatGPT Program 0:00:57

Can chatGPT Program an ESP32?

How to show/reveal/unhide 0:00:37

How to show/reveal/unhide Developer Options on Fire TV Stick, 4K, Max, Cube, Smart TV, Firestick

WS19/20 - MTD114 1:18:19

WS19/20 - MTD114 Hypermedia 1 - Teil 6: Web Accessibility

Rory Preddy - 0:49:17

Rory Preddy - Programming for Accessibility @ DevConf Johannesburg 2019

Kiosk mode Bruteforce 0:00:40

Kiosk mode Bruteforce Evasion with Flipper Zero

Remove Focus Outline 0:13:14

Remove Focus Outline from Elementor Popup Menu | Keyboard Accessible

In SCSS eine 0:16:33

In SCSS eine Animation bauen wie ein Profi! [DE/Tutorial]

So baust du 0:10:08

So baust du Micro Animations im EASY MODE [DE/Tutorial]

45 Simple Mac 0:21:25

45 Simple Mac Keyboard Shortcuts You Need To Know

WS23/24 - HYP1VO 1:30:25

WS23/24 - HYP1VO Hypermedia 1 - Teil 1-6: Web Accessibility

WS22/23 - HYP1VO 1:23:20

WS22/23 - HYP1VO Hypermedia 1 - Teil 1-6: Web Accessibility

Navigation und Bot-Bewegungen 0:06:29

Navigation und Bot-Bewegungen in Spielen mit dem A* Algorithmus

Комментарии
Автор

Könntest Du nicht bitte die Hintergrundmusik leiser machen, wenn sie schon diese Hektik vermittelt.
Ich habe oft Schwierigkeiten Dich gut zu verstehen, weil Deine Stimme in oder gar hinter der Musik "verschwindet".
Danke Dir.

Finde ich klasse, die gezeigte Funktionalität, danke.
LG :)

frankiberlin
Автор

ah, das war mal sehr hilfreich - danke !
kleiner tipp: weder im Deutschen noch Englischen gibt es bei ganzen woertern (keine abkuerzungen) einen plural mit apostroph. also einfach "Grids".

olafkliemt
Автор

Das Tutorial sieht super aus, aber ich sehe noch nicht so ganz, wo ich das wirklich sinnvoll einsetzen könnte. Bei welcher Anwendung habe ich denn nur Buttons bzw. Links? Oder ist dies rein für "spezifische Webanwendungen" gedacht? Vielleicht kannst du mal ein echtes Beispiel benennen. Vielen Dank im Voraus.

PicSta
Автор

Geht, ja.
Aber mobil Nutzer gucken leider in die Roehre..

(So ein JS AdobeAudition Clone wär schon cool)

repeekyraidcero
Автор

ist nicht responsive oder? jedenfalls nicht im codepen?

espiat
Автор

Man hatte die vier ifs noch durch ein switch case vereinfachen können..

markusbraun
Автор

Auch wenn ich deine Videos sonst top finde, schießt du hier glaube ich am Ziel vorbei. Gerade im Zusammenhang mit Acessibility keine ARIA Attribute zu verwenden finde ich falsch. Für das was du machst gibt es das ARIA tabindex Attribut.

corE