19 Repos
Tools and techniques for providing descriptive, programmatic labels and live updates for non-textual visual content.
Distinct from Live Diagram Editors: The candidates focus on diagram editing and text-to-diagram generation, whereas this feature specifically concerns ARIA-based accessibility for screen readers.
Explore 19 awesome GitHub repositories matching user interface & experience · Screen Reader Accessibility. Refine with filters or upvote what's useful.
Dieses Projekt ist ein jQuery-Plugin und clientseitiger Formular-Validator, der verwendet wird, um Webformular-Eingaben zu verifizieren, bevor sie an einen Server gesendet werden. Es verwendet eine regelbasierte Validierungs-Engine, um Benutzereingaben gegen vordefinierte oder benutzerdefinierte Regeln zu prüfen, um die Datenintegrität im Browser sicherzustellen. Das Tool ist als ARIA-konformes Validierungssystem konzipiert und verwendet Accessibility-Attribute, um Fehlermeldungen mit Eingabefeldern zu verknüpfen. Dies stellt sicher, dass Screenreader-Benutzer benachrichtigt werden, wenn ein Feld während des Formularübermittlungsprozesses einen ungültigen Wert enthält. Das System unterstützt Remote-Server-Validierung via asynchroner HTTP-Anfragen und erlaubt die dynamische Regel-Injektion, um benutzerdefinierte Validierungslogik hinzuzufügen. Es verwaltet das User-Interface durch DOM-verknüpftes Fehler-Rendering und nutzt ereignisgesteuertes Triggern, um Prüfungen während Focus-, Blur- oder Submit-Events auszuführen.
Connects error messages to input fields using ARIA attributes to notify screen reader users.
GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts, organizational charts, and network diagrams. It functions as a data-driven framework that binds JavaScript data models to visual elements, enabling bidirectional synchronization between the underlying data and the graphical representation. The library features a comprehensive graph layout engine capable of automatically arranging nodes into trees, grids, circles, or force-directed layouts. It distinguishes itself through a template-based system for generating visual parts and a
GoJS provides the ability to update live HTML elements to provide descriptive screen reader feedback regarding diagram structures.
iframe-resizer is a JavaScript tool that automatically adjusts the dimensions of an iframe to match the size of its internal content. It functions as a cross-domain communication bridge, allowing the exchange of data and the triggering of actions between a parent window and an embedded iframe across different origins. The project includes a nested iframe coordinator to synchronize dimensions between parent pages and inner frames, preventing scrollbars in complex nested structures. It also provides an accessibility utility to manage iframe titles and attributes, ensuring embedded content is co
Improves screen reader support by dynamically managing iframe titles and accessibility attributes.
Processing is a creative coding environment and Java graphics library designed for writing visual sketches that produce interactive 2D and 3D graphics and animations. It runs on the Java Virtual Machine, using an OpenGL-based hardware-accelerated rendering pipeline, and operates on a sketch-based execution model where programs run as continuous loops of setup and draw functions with event-driven input handling for keyboard, mouse, and window interactions. The environment distinguishes itself as a cross-platform sketch tool that runs visual programs unchanged on desktop, web, Android, and Rasp
Generates text descriptions of canvas content for screen reader accessibility.
This project is a rich text editor component for React applications that provides a visual interface for composing and formatting content. It functions as a DraftJS-based WYSIWYG editor, allowing users to create structured documents with inline styles and block types. The editor features a customizable toolbar interface for managing text alignment, lists, and media embeds. It includes a specialized input system for inserting emojis, hashtags, and user mentions as single deletable units. The project provides capabilities for transforming internal editor state into HTML, JSON, or Markdown form
Integrates ARIA attributes to provide screen reader accessibility for the editor interface.
React Autosuggest is a fully controlled React component that provides an autocomplete input with a dropdown of suggestions as the user types. It delegates all state management to the parent component through callbacks, making it compatible with state management patterns like Flux or Redux. The component implements WAI-ARIA accessibility patterns, including keyboard navigation with arrow keys, Enter, and Escape, along with live region integration for screen reader announcements. The component offers extensive customization through render-prop functions, allowing developers to replace the defau
Announces each suggestion to screen readers with full keyboard navigation for selection.
This is the official documentation repository for Raspberry Pi hardware and software. It covers the complete range of Raspberry Pi single-board computers, the RP-series microcontrollers, and the Raspberry Pi operating system. The documentation provides reference material for setting up devices, configuring hardware, and using the system for tasks including AI inference, camera and video capture, embedded development, and remote access. The documentation covers the full boot chain from the GPU firmware and EEPROM bootloader through to kernel loading, with detailed guidance on boot configuratio
Supports screen readers that navigate the desktop interface through spoken feedback.
Xilem ist ein natives UI-Framework für die Programmiersprache Rust. Es bietet einen reaktiven View-Tree, der den Anwendungszustand mit der Benutzeroberfläche verknüpft, um Updates bei Datenänderungen zu automatisieren. Das Framework enthält eine GPU-beschleunigte 2D-Grafik-Engine und eine dedizierte Text-Layout-Engine für komplexe Typografie und performantes Rendering. Es wurde als barrierefreies UI-Framework konzipiert, mit integrierter Unterstützung für System-Accessibility-Dienste und Screenreader. Das System nutzt eine Retained-Mode-Architektur mit einer Grafik-Pipeline, die Zeichenbefehle in hardwarebeschleunigte Shader und Buffer übersetzt. Es verwaltet plattformübergreifendes natives Rendering und die Synchronisation des View-Tree-Zustands, um die Struktur der Benutzeroberfläche konsistent zu halten.
Maps internal UI components to native OS accessibility APIs for screen reader and assistive tool compatibility.
Pluto.jl ist eine reaktive Computing-Umgebung für Julia, die als programmierbares Dokumentenformat fungiert. Sie dient als interaktive Data-Science-IDE und polyglottes Computational Notebook, das Julia-Code und Umgebungsabhängigkeiten als versionierbare Quelldateien speichert. Das System zeichnet sich durch sein reaktives Ausführungsmodell aus, das einen gerichteten azyklischen Graphen verwendet, um Variablenabhängigkeiten zu verfolgen und betroffene nachgelagerte Zellen automatisch neu zu berechnen, wenn sich ein Wert ändert. Es stellt Reproduzierbarkeit sicher, indem isolierte Paketumgebungen direkt in die Notebook-Datei integriert werden und Inhalte als reine ausführbare Quelldateien gespeichert werden. Die Plattform deckt ein breites Spektrum an Funktionen ab, einschließlich interaktiver Datenvisualisierung, der Erstellung geführter Bildungsaufgaben und der Generierung statischer Dokumentations-Websites. Sie unterstützt diverse Ausgabemodi wie Slideshow-Präsentationen und Webanwendungen und bietet Tools zum Exportieren von Notebooks in HTML, PDF und reproduzierbarkeitsfokussierte Skripte. Die Umgebung kann über ein Web-Interface auf localhost gestartet oder über Remote-Server und Cloud-Compute-Hosting aufgerufen werden.
Uses semantic HTML and ARIA labels to provide programmatic accessibility for screen readers.
BulletinBoard ist eine SwiftUI-Komponentenbibliothek und ein Interface-Framework für iOS. Es bietet eine Reihe wiederverwendbarer Elemente, die darauf ausgelegt sind, interaktive, barrierefreie Informationskarten am unteren Bildschirmrand zu rendern, um Benutzer durch Onboarding- und Konfigurationsaufgaben zu führen. Das Framework fungiert als Onboarding-UI-Kit und bietet vordefinierte Kartenvorlagen sowie die Möglichkeit, benutzerdefinierte Layout-Strukturen zu erstellen. Diese Komponenten sind mit integrierter Unterstützung für Barrierefreiheit gebaut, um sicherzustellen, dass Interface-Updates und Interaktionszustände an Screenreader und assistive Controller kommuniziert werden. Die Bibliothek deckt High-Level-Funktionen ab, einschließlich kontextbezogenem UI-Design und iOS-Barrierefreiheitsintegration, was die Entwicklung spezialisierter Kartenansichten ermöglicht, die eine inklusive Navigation beibehalten.
Provides tools to ensure interface updates are programmatically accessible to iOS screen readers.
Lettering.js ist eine JavaScript-Typografie-Bibliothek, die Text-Strings in granulare HTML-Elemente unterteilt. Sie umschließt einzelne Zeichen, Wörter und Zeilen in Tags, um präzise CSS-Steuerung und fortgeschrittenes visuelles Styling zu ermöglichen. Die Bibliothek enthält ein barrierefreies Text-Wrapper-System, das die Kompatibilität mit Screenreadern beibehält. Sie verwaltet die Text-Barrierefreiheit, indem sie den ursprünglichen Inhalt in ARIA-Labels auf Containern spiegelt und fragmentierte Elemente vor assistiven Technologien verbirgt. Das Tool bietet Funktionen für granulare Textmanipulation und DOM-basierte Dekomposition. Diese Mechanismen erleichtern das Web-Typografie-Styling und die Erstellung dynamischer Textanimationen durch sequenzierte Übergänge und Bewegungseffekte.
Manages screen reader accessibility by hiding fragmented elements and using ARIA labels on containers.
Cerberus ist ein HTML-E-Mail-Template-Framework, das eine Sammlung getesteter Markup-Muster und Architektur-Kits bereitstellt. Es ist darauf ausgelegt, responsive E-Mail-Newsletter zu erstellen, die über diverse Software-Clients hinweg konsistent gerendert werden. Das Projekt verfügt über ein responsives E-Mail-Layout-System unter Verwendung fluider und hybrider tabellenbasierter Strukturen, neben einem Cross-Client-CSS-Kit, das bedingtes Markup verwendet, um visuelle Konsistenz in älteren Clients aufrechtzuerhalten. Es enthält spezifische Methoden zur Implementierung des Dark Mode durch Anpassung von Farben und Bildern basierend auf den Theme-Präferenzen des Betriebssystems. Das Framework deckt ein breites Spektrum an Fähigkeiten ab, einschließlich Accessibility-Integration für Screenreader, die Generierung von Plain-Text-Alternativen und das Design zuverlässiger UI-Komponenten wie Action-Buttons und fluider Bilder. Es bietet zudem Strategien für Typografie-Styling, Bildoptimierung und Cross-Client-Kompatibilität.
Applies semantic tags and descriptive text to ensure email content is navigable and readable by screen readers.
North ist eine Methodik für responsives Webdesign und eine Sass-basierte CSS-Architektur. Es bietet ein System für den Aufbau von Mobile-First-Benutzeroberflächen unter Verwendung von fluiden Grids und Progressive-Enhancement-Techniken, um eine konsistente Erfahrung über verschiedene Browser-Fähigkeiten und Bildschirmgrößen hinweg zu gewährleisten. Das Projekt bietet ein standardisiertes CSS-Namenssystem, das Sass-Mixins verwendet, um Klassennamen programmatisch zu generieren und zwischen Komponenten, Layouts und Zuständen zu unterscheiden. Es fungiert zudem als Frontend-Projekt-Scaffolding-Tool und bietet einen Generator, um neue Umgebungen mit vorkonfigurierten Stylesheets und Task-Runnern aufzusetzen. Über das Styling hinaus deckt das Framework ein breites Spektrum an Webentwicklungsstandards ab, einschließlich semantischer HTML-Implementierung mit RDFa-Metadaten und Auditing für Web-Barrierefreiheit. Es integriert eine Content-First-Designstrategie und einen agilen Frontend-Workflow, um den Übergang von Informationsarchitektur und User Personas zu produktionsreifen Komponenten zu koordinieren. Das System enthält Tools zur Automatisierung der CSS-Benennung und zum Scaffolding von Projekt-Templates, um das initiale Setup zu beschleunigen.
Provides guidelines and methods for auditing content source order and usability via screen readers.
ChatUI is a React conversational UI library and framework designed for building messaging interfaces. It provides a set of components for creating conversation flows, including message bubbles, input areas, and structured message hierarchies. The library distinguishes itself through specialized AI agent interface features, such as the visualization of an agent's reasoning process and simulated typing animations that render text character-by-character. It also includes a system of pre-designed conversational card templates for rendering banners, selection lists, and questionnaires within a cha
Implements semantic HTML and contrast standards to ensure the chat interface is compatible with screen readers.
Dieses Projekt ist ein umfassender Leitfaden und eine Roadmap für die Frontend-Entwicklung, die Ingenieuren dabei helfen soll, die Fähigkeiten und professionellen Standards für die moderne Webentwicklung zu meistern. Es dient als technische Referenz für die Beherrschung von HTML, CSS und JavaScript und bietet strukturierte Lernpfade sowie eine Übersicht der beruflichen Kompetenzen, die für den Übergang vom Anfänger zum professionellen Web-Engineer erforderlich sind. Die Ressource fungiert als kategorisiertes Verzeichnis und Ökosystem-Übersicht der JavaScript-Landschaft. Sie katalogisiert branchenübliche Frameworks, Bibliotheken und Dienstprogramme und bietet spezifische Empfehlungen für State Management, CSS-Frameworks und Static Site Generators. Der Leitfaden deckt ein breites Spektrum an technischen Fähigkeiten ab, einschließlich UI-Architektur, Web-Performance-Optimierung und Accessibility-Auditing. Zudem bietet er Orientierungshilfen für Build-Automatisierung, Deployment-Strategien und die Auswahl von Entwickler-Tools für professionelle Workflows.
Guides the use of programmatic labels and ARIA updates to ensure interfaces are accessible to screen readers.
Dieses Projekt ist ein jQuery-Content-Slider zur Erstellung responsiver Bildergalerien und touch-fähiger Karussells. Es fungiert als barrierefreie UI-Komponente, die Bilder, Videos oder HTML-Inhalte mittels hardwarebeschleunigter Animationen anzeigt. Der Slider beinhaltet integrierte Unterstützung für Swipe-Gesten und Finger-Tracking für Touch-Geräte. Er integriert ARIA-Attribute wie Aria Live und Aria Hidden, um die Kompatibilität mit Screenreadern und die Barrierefreiheit für Nutzer assistiver Technologien zu gewährleisten. Das System bietet umfassende Layout- und Navigationsfunktionen, einschließlich konfigurierbarer Übergangsanimationen, Tastaturnavigation und Paginierung. Es unterstützt automatisierte Inhaltsrotation mit timer-basierten Übergängen und bietet programmatische Kontrolle über eine öffentliche API und Lifecycle-Event-Callbacks.
Implements ARIA attributes to ensure the slider interface is fully accessible to screen reader users.
This project is a fixed-width CSS layout framework designed to organize web content into a standardized grid of columns and gutters. It provides a set of CSS rules and dimensions that ensure consistent page alignment and spacing across a frontend design grid. The system synchronizes visual design mockups with technical implementations using a 960 pixel width. It includes specialized style sheets that mirror grid alignment to support right-to-left language directions. The framework covers grid management through column implementation and layout spacing control. It further provides design inte
Positions elements visually while maintaining a different source order to optimize for screen readers and search engines.
Dieses Projekt ist ein umfassender Referenzleitfaden für das Schreiben von sauberem, semantischem und wartbarem HTML-Markup basierend auf modernen Webstandards. Es bietet einen Regelsatz für die Implementierung semantischer HTML-Standards unter Verwendung aussagekräftiger struktureller Elemente anstelle generischer Container, um die Dokumenthierarchie und die Maschinenlesbarkeit zu verbessern. Der Leitfaden etabliert spezifische Konventionen für die HTML-Formatierung, die Einrückung, Tag-Schreibweise und Quellcode-Organisation abdecken, um die Wartbarkeit der Codebasis zu verbessern. Er dient zudem als Referenz für Web-Barrierefreiheit und erläutert die Implementierung von ARIA-Rollen, Alternativtexten und zugänglichen Formularsteuerelementen zur Unterstützung von Screenreadern und anderen assistiven Technologien. Das Projekt deckt mehrere Kernfunktionsbereiche ab, einschließlich der Konfiguration von Dokumentmetadaten und Zeichenkodierung für Browserkompatibilität, der Verwaltung von Web-Assets durch absolute Pfadauflösung und der Optimierung von Webformularen durch korrekte Beschriftungs- und Validierungsattribute. Es enthält zudem Standards für den Umgang mit Multimedia-Inhalten mit entsprechenden Fallback-Mechanismen.
Details the implementation of ARIA attributes and alternative text specifically for screen reader support.
Dies ist eine responsive Navigations-JavaScript-Bibliothek, die verwendet wird, um mobilfreundliche Menüs mit Bildschirmgrößenerkennung und Touch-Unterstützung zu erstellen. Sie fungiert als barrierefreies Navigationsmenü und clientseitiger Layout-Switcher, der ohne externe Abhängigkeiten zwischen Mobil- und Desktop-Ansichten wechselt. Das Projekt dient als Menü-Animationstool, das flüssige CSS-Übergänge und höhenbasierte Animationen beim Umschalten von Navigations-Overlays ermöglicht. Es nutzt native Browser-APIs, um Interface-Zustände zu verwalten und sicherzustellen, dass die Navigation für Screenreader und Benutzer ohne JavaScript funktionsfähig bleibt. Die Bibliothek deckt Funktionen zur Erkennung von Screen-Breakpoints, zur Verwaltung der Sichtbarkeit der umgeschalteten Navigation und zur Implementierung von Layout-Übergängen für Touch-Interfaces ab.
Ensures the navigation menu remains functional for screen readers through programmatic labels.