21 dépôts
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 21 awesome GitHub repositories matching user interface & experience · Screen Reader Accessibility. Refine with filters or upvote what's useful.
This project is a jQuery plugin and client-side form validator used to verify web form inputs before they are submitted to a server. It employs a rule-based validation engine to check user input against predefined or custom rules to ensure data integrity in the browser. The tool is designed as an ARIA-compliant validation system, using accessibility attributes to link error messages to input fields. This ensures that screen reader users are notified when a field contains an invalid value during the form submission process. The system supports remote server validation via asynchronous HTTP re
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 est un framework d'interface utilisateur natif pour le langage de programmation Rust. Il propose un arbre de vues réactif qui lie l'état de l'application à l'interface pour automatiser les mises à jour lors des changements de données. Le framework intègre un moteur graphique 2D accéléré par GPU et un moteur de rendu de texte dédié pour gérer la typographie complexe et le rendu visuel haute performance. Il est conçu comme un framework UI accessible, avec une prise en charge intégrée des services d'accessibilité système et des lecteurs d'écran. Le système utilise une architecture en mode conservé (retained-mode) avec un pipeline graphique qui traduit les commandes de dessin en shaders et buffers accélérés par le matériel. Il gère le rendu natif multiplateforme et la réconciliation de l'état de l'arbre de vues pour maintenir la structure de l'interface.
Maps internal UI components to native OS accessibility APIs for screen reader and assistive tool compatibility.
Pluto.jl est un environnement de calcul réactif pour Julia qui fonctionne comme un format de document programmable. Il sert d'IDE de science des données interactif et de notebook computationnel polyglotte qui stocke le code Julia et les dépendances d'environnement sous forme de fichiers source versionnables. Le système se distingue par son modèle d'exécution réactif, qui utilise un graphe acyclique dirigé pour suivre les dépendances des variables et réévaluer automatiquement les cellules en aval affectées lorsqu'une valeur change. Il assure la reproductibilité en intégrant des environnements de paquets isolés directement dans le fichier notebook et en persistant le contenu sous forme de fichiers source exécutables purs. La plateforme couvre un large éventail de capacités, incluant la visualisation de données interactive, la création de devoirs éducatifs guidés et la génération de sites web de documentation statique. Elle supporte divers modes de sortie comme des présentations de diapositives et des applications web, et fournit des outils pour exporter les notebooks vers HTML, PDF et des scripts axés sur la reproductibilité. L'environnement peut être lancé via une interface web sur localhost ou accédé via des serveurs distants et de l'hébergement cloud.
Uses semantic HTML and ARIA labels to provide programmatic accessibility for screen readers.
BulletinBoard est une bibliothèque de composants SwiftUI et un framework d'interface pour iOS. Il fournit un ensemble d'éléments réutilisables conçus pour rendre des cartes d'information interactives et accessibles au bas de l'écran pour guider les utilisateurs à travers les tâches d'onboarding et de configuration. Le framework fonctionne comme un kit UI d'onboarding, offrant des templates de cartes prédéfinis et la capacité de créer des structures de mise en page personnalisées. Ces composants sont construits avec un support d'accessibilité intégré pour s'assurer que les mises à jour de l'interface et les états d'interaction sont annoncés aux lecteurs d'écran et aux contrôleurs d'assistance. La bibliothèque couvre des capacités de haut niveau incluant le design UI contextuel et l'intégration de l'accessibilité iOS, permettant le développement de vues de cartes spécialisées qui maintiennent une navigation inclusive.
Provides tools to ensure interface updates are programmatically accessible to iOS screen readers.
Lettering.js est une bibliothèque de typographie JavaScript qui divise les chaînes de texte en éléments HTML granulaires. Elle enveloppe les caractères, mots et lignes individuels dans des balises pour permettre un contrôle CSS précis et un stylage visuel avancé. La bibliothèque inclut un système de wrapper de texte accessible qui maintient la compatibilité avec les lecteurs d'écran. Elle gère l'accessibilité du texte en reflétant le contenu original dans des labels ARIA sur les conteneurs et en cachant les éléments fragmentés aux technologies d'assistance. L'outil fournit des capacités pour la manipulation granulaire du texte et la décomposition basée sur le DOM. Ces mécanismes facilitent le stylage de la typographie web et la création d'animations de texte dynamiques via des transitions séquencées et des effets de mouvement.
Manages screen reader accessibility by hiding fragmented elements and using ARIA labels on containers.
Cerberus est un framework de template d'email HTML fournissant une collection de motifs de balisage testés et de kits architecturaux. Il est conçu pour créer des newsletters par email responsives qui s'affichent de manière cohérente sur divers clients logiciels. Le projet présente un système de mise en page d'email responsive utilisant des structures fluides et hybrides basées sur des tableaux, aux côtés d'un kit CSS inter-client qui emploie un balisage conditionnel pour maintenir la cohérence visuelle dans les clients hérités. Il inclut des méthodologies spécifiques pour implémenter le mode sombre en ajustant les couleurs et images selon les préférences de thème du système d'exploitation. Le framework couvre un large éventail de capacités incluant l'intégration de l'accessibilité pour les lecteurs d'écran, la génération d'alternatives en texte brut et la conception de composants UI fiables tels que des boutons d'action et des images fluides. Il fournit également des stratégies pour le stylage typographique, l'optimisation d'image et la compatibilité inter-client.
Applies semantic tags and descriptive text to ensure email content is navigable and readable by screen readers.
North est une méthodologie de conception web responsive et un framework d'architecture CSS basé sur Sass. Il fournit un système pour construire des interfaces utilisateur mobile-first utilisant des grilles fluides et des techniques d'amélioration progressive pour assurer une expérience cohérente à travers différentes capacités de navigateur et tailles d'écran. Le projet dispose d'un système de nommage CSS standardisé qui utilise des mixins Sass pour générer par programmation des noms de classes, distinguant les composants, les mises en page et les états. Il fonctionne également comme un outil de scaffolding de projet frontend, fournissant un générateur pour amorcer de nouveaux environnements avec des feuilles de style et des task runners préconfigurés. Au-delà du style, le framework couvre une large surface des standards de développement web, y compris l'implémentation HTML sémantique avec des métadonnées RDFa et l'audit d'accessibilité web. Il intègre une stratégie de conception axée sur le contenu et un flux de travail frontend agile pour coordonner la transition de l'architecture de l'information et des personas d'utilisateurs vers des composants prêts pour la production. Le système inclut des outils pour automatiser le nommage CSS et le scaffolding de modèles de projet afin d'accélérer la configuration initiale.
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.
Ce projet est un guide complet de développement front-end et une feuille de route conçue pour aider les ingénieurs à maîtriser les compétences et les normes professionnelles requises pour le développement web moderne. Il sert de référence technique pour maîtriser HTML, CSS et JavaScript, offrant des parcours d'apprentissage structurés et une carte des compétences professionnelles nécessaires pour passer de débutant à ingénieur web professionnel. La ressource fonctionne comme un répertoire catégorisé et un aperçu de l'écosystème JavaScript. Elle répertorie les frameworks, bibliothèques et utilitaires standards de l'industrie, offrant des recommandations spécifiques pour la gestion d'état, les frameworks CSS et les générateurs de sites statiques. Le guide couvre un large spectre de capacités d'ingénierie, incluant l'architecture UI, l'optimisation des performances web et l'audit d'accessibilité. Il fournit également des conseils sur l'automatisation des builds, les stratégies de déploiement et la sélection d'outils de développement pour les flux de travail professionnels.
Guides the use of programmatic labels and ARIA updates to ensure interfaces are accessible to screen readers.
Ce projet est un slider de contenu jQuery utilisé pour créer des galeries d'images responsives et des carrousels tactiles. Il fonctionne comme un composant d'interface utilisateur accessible qui affiche des images, des vidéos ou du contenu HTML en utilisant des animations accélérées par le matériel. Le slider inclut une prise en charge intégrée des gestes de balayage et de la navigation au doigt pour les appareils tactiles. Il intègre des attributs ARIA, tels que Aria Live et Aria Hidden, pour garantir la compatibilité avec les lecteurs d'écran et l'accessibilité pour les utilisateurs de technologies d'assistance. Le système offre des capacités complètes de mise en page et de navigation, incluant des animations de transition configurables, la navigation au clavier et des paginations. Il prend en charge la rotation automatique du contenu avec des transitions basées sur une minuterie et offre un contrôle programmatique via une API publique et des rappels d'événements de cycle de vie.
Implements ARIA attributes to ensure the slider interface is fully accessible to screen reader users.
Ce projet est un framework de mise en page CSS à largeur fixe conçu pour organiser le contenu web dans une grille standardisée de colonnes et de gouttières. Il fournit un ensemble de règles CSS et de dimensions qui garantissent un alignement et un espacement cohérents des pages sur une grille de conception frontend. Le système synchronise les maquettes de conception visuelle avec les implémentations techniques en utilisant une largeur de 960 pixels. Il inclut des feuilles de style spécialisées qui reflètent l'alignement de la grille pour prendre en charge les directions de langue de droite à gauche. Le framework couvre la gestion de la grille via l'implémentation de colonnes et le contrôle de l'espacement de la mise en page. Il fournit en outre une intégration de conception pour la synchronisation des maquettes et des outils de positionnement d'éléments qui découplent le placement visuel de l'ordre source pour prendre en charge l'accessibilité et l'optimisation pour les moteurs de recherche.
Positions elements visually while maintaining a different source order to optimize for screen readers and search engines.
Ce projet est un guide de référence complet pour écrire un balisage HTML propre, sémantique et maintenable basé sur les standards web modernes. Il fournit un ensemble de règles pour implémenter les standards HTML sémantiques, en utilisant des éléments structurels significatifs au lieu de conteneurs génériques pour améliorer la hiérarchie des documents et la lisibilité par la machine. Le guide établit des conventions spécifiques pour le formatage HTML, couvrant l'indentation, la casse des balises et l'organisation du code source pour améliorer la maintenabilité de la base de code. Il sert également de référence pour l'accessibilité web, détaillant l'implémentation des rôles ARIA, du texte alternatif et des contrôles de formulaire accessibles pour prendre en charge les lecteurs d'écran et autres technologies d'assistance. Le projet couvre plusieurs domaines de capacités fondamentaux, incluant la configuration des métadonnées de document et l'encodage des caractères pour la compatibilité avec les navigateurs, la gestion des ressources web via la résolution de chemin absolu, et l'optimisation des formulaires web via des attributs d'étiquetage et de validation appropriés. Il inclut également des standards pour gérer le contenu multimédia avec des mécanismes de secours appropriés.
Details the implementation of ARIA attributes and alternative text specifically for screen reader support.
Il s'agit d'une bibliothèque JavaScript de navigation réactive utilisée pour créer des menus adaptés aux mobiles avec détection de la taille de l'écran et prise en charge tactile. Elle fonctionne comme un menu de navigation accessible et un commutateur de mise en page côté client qui effectue la transition entre les vues mobile et bureau sans dépendances externes. Le projet sert d'outil d'animation de menu qui permet des transitions CSS fluides et des animations basées sur la hauteur lors de l'activation des superpositions de navigation. Il utilise des API de navigateur natives pour gérer les états de l'interface et garantir que la navigation reste fonctionnelle pour les lecteurs d'écran et les utilisateurs sans JavaScript. La bibliothèque couvre des capacités pour détecter les points de rupture d'écran, gérer la visibilité de la navigation activée et implémenter des transitions de mise en page pour les interfaces tactiles.
Ensures the navigation menu remains functional for screen readers through programmatic labels.
This project provides a comprehensive library and framework for automated web accessibility auditing. It enables developers to verify that web content adheres to accessibility standards by executing a suite of programmatic rules against the document object model to identify potential barriers for users of assistive technologies. The tool distinguishes itself through its modular rule-based engine, which performs deep analysis of semantic structures, including the validation of roles, states, and properties. It implements standard algorithms to compute accessible names and performs computed sty
Calculates accessible names for elements to ensure screen readers interpret content as intended.