|
| 1 | +--- |
| 2 | +description: How to make your use of Blockly meet accessibility standards. . |
| 3 | +title: Accessibility compliance |
| 4 | +image: images/blockly_banner.png |
| 5 | +--- |
| 6 | + |
| 7 | +# Accessibility Compliance |
| 8 | + |
| 9 | +The [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) |
| 10 | +are international standards for the development of accessible web content. |
| 11 | +Blockly targets WCAG 2.2 Level AA compliance. |
| 12 | + |
| 13 | +## Web Content or Authoring Tool? |
| 14 | + |
| 15 | +As a library for creating block-based programming environments, Blockly sits |
| 16 | +in two categories for WCAG compliance. |
| 17 | + |
| 18 | +Blockly is "web content" because it provides a default set of content (blocks |
| 19 | +and fields) that can be used without customization. When assessed as web |
| 20 | +content, we assume that a Blockly workspace containing only library blocks and |
| 21 | +fields is instantiated on a page with no other contents. |
| 22 | + |
| 23 | +Blockly is also an "[authoring tool](https://www.w3.org/TR/ATAG20/#def-Authoring-Tool)" |
| 24 | +by WCAG standards. When assessed as an authoring tool, we assume that a Blockly |
| 25 | +workspace containing developer-defined blocks and fields (as well as library |
| 26 | +blocks and fields) is instantiated on a web page with other contents. |
| 27 | + |
| 28 | +## Creating an ACR |
| 29 | + |
| 30 | +Blockly provides an accessibility compliance report (ACR) in the VPAT format, |
| 31 | +which you can use to write an ACR for your full application. No part of |
| 32 | +Blockly's ACR provides information about page contents outside of the Blockly |
| 33 | +region. The ACR covers use as both web content and authoring tool. |
| 34 | + |
| 35 | +If a Blockly integration exists as a standalone portion of a larger web page |
| 36 | +we recommend creating one ACR for only the Blockly portions of the page, then |
| 37 | +integrating that into a larger ACR assessing the full page. For instance, a |
| 38 | +page with a Blockly-based editor and a simulated output window should assess the |
| 39 | +accessibility of the two regions separately. |
| 40 | + |
| 41 | +Developers building with Blockly can assess the accessibility of their Blockly |
| 42 | +integration by checking customizations against the criteria marked “Developer |
| 43 | +Responsibility” in the Conformance section of the Blockly ACR. The Remarks and |
| 44 | +Explanations column describes which customizations the developer must check. |
| 45 | + |
| 46 | +## Screen reader support |
| 47 | + |
| 48 | +Blockly provides extensive support for screen reader usage through its keyboard |
| 49 | +navigation system. As of Blockly v13 (released in June 2026) the core library |
| 50 | +meets standards for keyboard controls. v13 also includes APIs to support |
| 51 | +developers in creating accessible custom fields and blocks. |
| 52 | + |
| 53 | +Blockly computes text descriptions of blocks and fields for use by screen |
| 54 | +readers and other assistive technology. By default, descriptions are computed |
| 55 | +based on block definitions. Developers are encouraged to further customize their |
| 56 | +labels with language that is appropriate for their audiences. Screen reader |
| 57 | +label generation can take advantage of Blockly's |
| 58 | +[localization system](/guides/configure/web/translations). |
| 59 | + |
| 60 | +### Standard interfaces |
| 61 | + |
| 62 | +Blockly's screen reader and keyboard navigation systems are based on extensive |
| 63 | +user research with sighted and visually impaired children. The keyboard |
| 64 | +shortcuts and vocabulary were selected to balance the needs of novice and |
| 65 | +advanced users. We recommend that developers use the default key mappings and |
| 66 | +terms unless they conflict with pre-existing portions of your application. |
| 67 | +Doing so will allow users to transfer experience between block-based programming |
| 68 | +environments. Please speak to the Blockly team about your options before |
| 69 | +diverging from the standard interface. |
| 70 | + |
| 71 | +## Custom fields |
| 72 | + |
| 73 | +Blockly allows developers to create |
| 74 | +[custom fields](/guides/create-custom-blocks/fields/customizing-fields/creating) |
| 75 | +with arbitrarily complex editors. Developers are responsible for the WCAG |
| 76 | +compliance of their editors, while Blockly is responsible for supporting |
| 77 | +navigation to the custom fields. |
0 commit comments