====== Accessibilité — µcBlockly ====== µcBlockly est un **outil auteur** Blockly pour Arduino. L’accessibilité repose sur trois couches : la **coque HTML** (barre d’outils, panneaux), les **champs personnalisés** (couleur, variables typées), et le **moteur Blockly 13** (navigation clavier, ''FocusManager'', annonces lecteur d’écran). **Niveau visé :** alignement progressif sur [[https://www.w3.org/TR/WCAG22/|WCAG 2.2 niveau AA]] et les [[https://docs.blockly.com/guides/app-integration/accessibility/best-practices/|bonnes pratiques Blockly]], en complément des [[https://docs.blockly.com/guides/app-integration/accessibility/compliance/|Accessibility Conformance Reports (ACR)]] de Google Blockly. **Contact :** [[https://www.linkedin.com/in/sebcanet/|Sébastien Canet (LinkedIn)]] — dépôt [[https://github.com/A-S-T-U-C-E/ucBlockly|A-S-T-U-C-E/ucBlockly]]. --- ===== État des priorités ===== ^ Lot ^ Contenu ^ État ^ | P0 — Champs custom | ''getAriaValue()'' sur sélecteurs couleur, éditeurs iro accessibles | Fait | | P0 — Blockly v13 | Navigation clavier cœur, ''FocusManager'', hints, mode lecteur d’écran | Fait (Blockly **13.2.x**) | | P1 — Coque UI | Skip link, landmarks, boutons sémantiques, menu zones Ctrl+B, raccourcis fichier | Fait | | P1 — Doc | Cette page, raccourcis, conformité | Fait | | P1 — Intégration coque ↔ Blockly | Menu zones et skip link via ''FocusManager'' (raccourcis **W** / **T**) | Fait | | P1 — Traductions Blockly v13 | Clés ''SHORTCUTS_*'', ''KEYBOARD_NAV_*'', ''SCREENREADER_*'' en fr/es/ar | Fait | | P2 — Thèmes | Sync coque + Monaco, contraste, persistance thème | Fait | | P2 — Aide raccourcis | Modale coque + Blockly (''F1'', ''?'', bouton barre d'outils) | Fait | | P2 — Navigation avancée | ''registerNavigationShortcuts()'' (Home, Page Up/Down, etc.) | Fait | | P2 — Mode lecteur d'écran | Persistance ''localStorage'' (''ucbScreenreaderMode'') | Fait | | P2 — Tutoriel clavier | Modale pas-à-pas au premier chargement (bouton barre d'outils) | Fait | --- ===== Coque HTML ===== === Lien d’évitement === Au premier **Tab** après chargement, le lien **« Aller au workspace Blockly »** (''A11Y_SKIP_TO_WORKSPACE'') délègue au ''FocusManager'' Blockly (équivalent **W**). Si le workspace n’est pas encore injecté, repli sur ''
''. === Repères (landmarks) === ^ Zone ^ Repère ^ | Barre supérieure | ''role="banner"'' (''#app_topbar'') | | Workspace | ''
'' | | Code généré | ''role="region"'' sur ''#div_content_code'' | | Console | ''role="log"'' + ''aria-live="polite"'' sur ''#content_console'' | | Séparateurs flex | ''role="separator"'' avec ''aria-orientation'' | Implémentation : ''src/shell_a11y.ts'', ''src/blockly_shell_focus.ts'', ''src/a11y_labels.ts'', ''src/index.ts'' (''applyA11yAttributes'', ''registerShellBlocklyWorkspace''). === Menu de zones (Ctrl+B / Cmd+B) === - **Ctrl+B** (Windows/Linux) ou **Cmd+B** (macOS) — ouvre le menu. - Message annoncé via ''#shortcuts'' (''aria-live="polite"''). - Touches **1** à **5** : * **1** — barre d’outils * **2** — boîte à outils Blockly (''FocusManager'', équivalent **T**) * **3** — workspace (''FocusManager'', équivalent **W**) * **4** — panneau code * **5** — console - **Échap** — annule. Les intégrateurs embarqués doivent appeler ''registerShellBlocklyWorkspace(() => workspace)'' après l’inject Blockly pour activer les zones **2** et **3** et le skip link. === Barre d’outils === Enregistrer, Charger, Annuler et Rétablir sont des ''