├── w3c.json ├── LICENSE.md ├── comments ├── 2.1.1.md ├── 1.4.10.md ├── 3.2.1.md ├── 3.2.2.md ├── 1.4.4.md ├── 2.4.2.md ├── 2.4.3.md ├── 2.4.1.md ├── 2.4.5.md ├── 2.4.7.md ├── 2.1.2.md ├── 3.1.1.md ├── 4.1.2.md ├── 1.4.3.md ├── 3.1.2.md ├── 1.4.11.md ├── 2.5.7.md ├── 2.5.8.md ├── 1.3.1.md ├── 1.3.5.md ├── 3.2.3.md ├── 3.3.2.md ├── 1.4.13.md ├── 3.2.4.md ├── 2.5.3.md ├── 1.4.5.md ├── 3.3.7.md ├── 2.5.4.md ├── 3.3.3.md ├── 3.3.1.md ├── 1.4.1.md ├── 1.3.2.md ├── 1.1.1.md ├── 1.2.1.md ├── 1.3.4.md ├── 4.1.1.md ├── 2.4.4.md ├── 2.4.6.md ├── 1.2.5.md ├── 1.3.3.md ├── 1.2.3.md ├── 2.1.4.md ├── 1.2.4.md ├── 1.2.2.md ├── 1.4.2.md ├── 2.4.11.md ├── 2.3.1.md ├── 4.1.3.md ├── 3.3.4.md ├── 2.5.1.md ├── 3.2.6.md ├── 2.2.1.md ├── 1.4.12.md ├── 3.3.8.md ├── 2.5.2.md └── 2.2.2.md ├── CODE_OF_CONDUCT.md ├── sections ├── acknowledgements.md ├── abstract.md ├── overview.md ├── comments.md ├── funders.md ├── status.md ├── scope.md ├── contributors.md ├── conventions.md ├── guidance.md ├── background.md ├── keyterms.md └── comparison.md ├── wcag2mobile.js ├── package.json ├── .gitignore ├── .github └── workflows │ ├── pr-validate.yml │ └── deploy.yml ├── matf.css ├── CONTRIBUTING.md ├── plugins ├── note.js ├── example.js ├── github.js ├── admonition.js ├── plugin.js └── wcag.js ├── index.ejs ├── README.md ├── respec-config.js └── matf.js /w3c.json: -------------------------------------------------------------------------------- 1 | { 2 | "group": [35422] 3 | , "contacts": ["ruoxiran","iadawn"] 4 | , "repo-type": "note" 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # License 2 | 3 | All documents in this Repository are licensed by contributors under the [W3C Document License](https://www.w3.org/Consortium/Legal/copyright-documents). 4 | -------------------------------------------------------------------------------- /comments/2.1.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.1.1 Keyboard 2 | 3 | (Level A) 4 | 5 | [wcag:keyboard] 6 | [wcag2ict:applying-sc-2-1-1-keyboard-to-non-web-software] 7 | 8 | Placeholder 9 | 10 | [issue:12] 11 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | All documentation, code and communication under this repository are covered by the [W3C Code of Ethics and Professional Conduct](https://www.w3.org/policies/code-of-conduct/). 4 | -------------------------------------------------------------------------------- /comments/1.4.10.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.10 Reflow 2 | 3 | (Level AA) 4 | 5 | [wcag:reflow] 6 | [wcag2ict:applying-sc-1-4-10-reflow-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:4] 11 | -------------------------------------------------------------------------------- /comments/3.2.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.2.1 On Focus 2 | 3 | (Level A) 4 | 5 | [wcag:on-focus] 6 | [wcag2ict:applying-sc-3-2-1-on-focus-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:41] 11 | -------------------------------------------------------------------------------- /comments/3.2.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.2.2 On Input 2 | 3 | (Level A) 4 | 5 | [wcag:on-input] 6 | [wcag2ict:applying-sc-3-2-2-on-input-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:42] 11 | -------------------------------------------------------------------------------- /comments/1.4.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.4 Resize Text 2 | 3 | (Level AA) 4 | 5 | [wcag:resize-text] 6 | [wcag2ict:applying-sc-1-4-4-resize-text-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:3] 11 | -------------------------------------------------------------------------------- /comments/2.4.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.2 Page Titled 2 | 3 | (Level A) 4 | 5 | [wcag:page-titled] 6 | [wcag2ict:applying-sc-2-4-2-page-titled-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:9] 11 | -------------------------------------------------------------------------------- /comments/2.4.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.3 Focus Order 2 | 3 | (Level A) 4 | 5 | [wcag:focus-order] 6 | [wcag2ict:applying-sc-2-4-3-focus-order-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:35] 11 | -------------------------------------------------------------------------------- /comments/2.4.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.1 Bypass Blocks 2 | 3 | (Level A) 4 | 5 | [wcag:bypass-blocks] 6 | [wcag2ict:applying-sc-2-4-1-bypass-blocks-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:8] 11 | -------------------------------------------------------------------------------- /comments/2.4.5.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.5 Multiple Ways 2 | 3 | (Level AA) 4 | 5 | [wcag:multiple-ways] 6 | [wcag2ict:applying-sc-2-4-5-multiple-ways-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:13] 11 | -------------------------------------------------------------------------------- /comments/2.4.7.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.7 Focus Visible 2 | 3 | (Level AA) 4 | 5 | [wcag:focus-visible] 6 | [wcag2ict:applying-sc-2-4-7-focus-visible-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:51] 11 | -------------------------------------------------------------------------------- /sections/acknowledgements.md: -------------------------------------------------------------------------------- 1 | ## Acknowledgements 2 | 3 | Additional information about participation in the Mobile Accessibility Task Force (MATF) can be found on the [MATF home page](https://www.w3.org/groups/tf/mobile-a11y-tf/participants/). 4 | -------------------------------------------------------------------------------- /comments/2.1.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.1.2 No Keyboard Trap 2 | 3 | (Level A) 4 | 5 | [wcag:no-keyboard-trap] 6 | [wcag2ict:applying-sc-2-1-2-no-keyboard-trap-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:30] 11 | -------------------------------------------------------------------------------- /comments/3.1.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.1.1 Language of Page 2 | 3 | (Level A) 4 | 5 | [wcag:language-of-page] 6 | [wcag2ict:applying-sc-3-1-1-language-of-page-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:14] 11 | -------------------------------------------------------------------------------- /comments/4.1.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 4.1.2 Name, Role, Value 2 | 3 | (Level A) 4 | 5 | [wcag:name-role-value] 6 | [wcag2ict:applying-sc-4-1-2-name-role-value-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:48] 11 | -------------------------------------------------------------------------------- /comments/1.4.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.3 Contrast (Minimum) 2 | 3 | (Level AA) 4 | 5 | [wcag:contrast-minimum] 6 | [wcag2ict:applying-sc-1-4-3-contrast-minimum-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:28] 11 | -------------------------------------------------------------------------------- /comments/3.1.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.1.2 Language of Parts 2 | 3 | (Level AA) 4 | 5 | [wcag:language-of-parts] 6 | [wcag2ict:applying-sc-3-1-2-language-of-parts-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:15] 11 | -------------------------------------------------------------------------------- /comments/1.4.11.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.11 Non-text Contrast 2 | 3 | (Level AA) 4 | 5 | [wcag:non-text-contrast] 6 | [wcag2ict:applying-sc-1-4-11-non-text-contrast-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:49] 11 | -------------------------------------------------------------------------------- /comments/2.5.7.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.5.7 Dragging Movements 2 | 3 | (Level AA) 4 | 5 | [wcag:dragging-movements] 6 | [wcag2ict:applying-sc-2-5-7-dragging-movements-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:53] 11 | -------------------------------------------------------------------------------- /comments/2.5.8.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.5.8 Target Size (Minimum) 2 | 3 | (Level AA) 4 | 5 | [wcag:target-size-minimum] 6 | [wcag2ict:applying-sc-2-5-8-target-size-minimum-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:10] 11 | -------------------------------------------------------------------------------- /comments/1.3.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.3.1 Info and Relationships 2 | 3 | (Level A) 4 | 5 | [wcag:info-and-relationships] 6 | [wcag2ict:applying-sc-1-3-1-info-and-relationships-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:1] 11 | -------------------------------------------------------------------------------- /comments/1.3.5.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.3.5 Identify Input Purpose 2 | 3 | (Level AA) 4 | 5 | [wcag:identify-input-purpose] 6 | [wcag2ict:applying-sc-1-3-5-identify-input-purpose-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:2] 11 | -------------------------------------------------------------------------------- /comments/3.2.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.2.3 Consistent Navigation 2 | 3 | (Level AA) 4 | 5 | [wcag:consistent-navigation] 6 | [wcag2ict:applying-sc-3-2-3-consistent-navigation-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:54] 11 | -------------------------------------------------------------------------------- /comments/3.3.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.3.2 Labels or Instructions 2 | 3 | (Level A) 4 | 5 | [wcag:labels-or-instructions] 6 | [wcag2ict:applying-sc-3-3-2-labels-or-instructions-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:45] 11 | -------------------------------------------------------------------------------- /comments/1.4.13.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.13 Content on Hover or Focus 2 | 3 | (Level AA) 4 | 5 | [wcag:content-on-hover-or-focus] 6 | [wcag2ict:applying-sc-1-4-13-content-on-hover-or-focus-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:6] 11 | -------------------------------------------------------------------------------- /comments/3.2.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.2.4 Consistent Identification 2 | 3 | (Level AA) 4 | 5 | [wcag:consistent-identification] 6 | [wcag2ict:applying-sc-3-2-4-consistent-identification-to-non-web-documents-and-software] 7 | 8 | Placeholder 9 | 10 | [issue:55] 11 | -------------------------------------------------------------------------------- /comments/2.5.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.5.3 Label in Name 2 | 3 | (Level A) 4 | 5 | [wcag:label-in-name] 6 | [wcag2ict:applying-sc-2-5-3-label-in-name-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 2.5.3](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name#intent). 9 | -------------------------------------------------------------------------------- /comments/1.4.5.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.5 Images of Text 2 | 3 | (Level AA) 4 | 5 | [wcag:images-of-text] 6 | [wcag2ict:applying-sc-1-4-5-images-of-text-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.4.5](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text#intent). 9 | -------------------------------------------------------------------------------- /comments/3.3.7.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.3.7 Redundant Entry 2 | 3 | (Level A) 4 | 5 | [wcag:redundant-entry] 6 | [wcag2ict:applying-sc-3-3-7-redundant-entry-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 3.3.7](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry#intent). 9 | -------------------------------------------------------------------------------- /comments/2.5.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.5.4 Motion Actuation 2 | 3 | (Level A) 4 | 5 | [wcag:motion-actuation] 6 | [wcag2ict:applying-sc-2-5-4-motion-actuation-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 2.5.4](https://www.w3.org/WAI/WCAG22/Understanding/motion-actuation#intent). 9 | -------------------------------------------------------------------------------- /comments/3.3.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.3.3 Error Suggestion 2 | 3 | (Level AA) 4 | 5 | [wcag:error-suggestion] 6 | [wcag2ict:applying-sc-3-3-3-error-suggestion-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 3.3.3](https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion#intent). 9 | -------------------------------------------------------------------------------- /sections/abstract.md: -------------------------------------------------------------------------------- 1 | This document describes how Web Content Accessibility Guidelines (WCAG) 2.2 [[WCAG22]] principles, guidelines, and success criteria can be applied to mobile applications, including native mobile apps, mobile web apps and hybrid apps using web components inside native mobile apps. It provides informative guidance (guidance that is not normative and does not set requirements). -------------------------------------------------------------------------------- /comments/3.3.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.3.1 Error Identification 2 | 3 | (Level A) 4 | 5 | [wcag:error-identification] 6 | [wcag2ict:applying-sc-3-3-1-error-identification-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 3.3.1](https://www.w3.org/WAI/WCAG22/Understanding/error-identification#intent). 9 | -------------------------------------------------------------------------------- /sections/overview.md: -------------------------------------------------------------------------------- 1 | ### Document overview 2 | 3 | This document includes text quoted from the WCAG 2.2 principles, guidelines, success criteria, and glossary definitions without any changes. This document also includes text quoted from the WCAG2ICT document. The guidance provided by this document for each principle, guideline, success criterion, and definition is preceded by a heading beginning with “Applying…”. 4 | -------------------------------------------------------------------------------- /wcag2mobile.js: -------------------------------------------------------------------------------- 1 | function removeSectionNumbering() { 2 | var tocEl = document.querySelector(".tocline > a[href=\"#comments\"]").parentNode.querySelector("ol"); 3 | tocEl.querySelectorAll("bdi.secno").forEach(function(node){node.remove();}); 4 | 5 | document.querySelectorAll("section#comments > section bdi.secno").forEach(function(node){node.remove();}); 6 | } 7 | 8 | // scripts after Respec has run 9 | function postRespec() { 10 | removeSectionNumbering(); 11 | } -------------------------------------------------------------------------------- /comments/1.4.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.1 Use of Color 2 | 3 | (Level A) 4 | 5 | [wcag:use-of-color] 6 | [wcag2ict:applying-sc-1-4-1-use-of-color-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.4.1](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color). 9 | 10 | [note:If a mobile platform’s built-in distinction relies only on color, additional visual means must convey the information.] 11 | -------------------------------------------------------------------------------- /comments/1.3.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.3.2 Meaningful Sequence 2 | 3 | (Level A) 4 | 5 | [wcag:meaningful-sequence] 6 | [wcag2ict:applying-sc-1-3-2-meaningful-sequence-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.3.4](https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence). 9 | 10 | [note:Grouping related elements using semantic containers helps ensure a meaningful reading sequence.] 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "matf", 3 | "version": "0.1.0", 4 | "type": "module", 5 | "description": "Guidance from the Mobile Accessibility Task Force (MATF)", 6 | "main": "matf.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "W3C", 11 | "license": "W3C", 12 | "dependencies": { 13 | "cheerio": "^1.0.0", 14 | "ejs": "^3.1.10", 15 | "markdown-it": "^14.1.0", 16 | "open": "^10.1.0", 17 | "puppeteer": "^23.9.0", 18 | "semver": "^7.6.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node.js dependencies 2 | node_modules/ 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | 9 | # Environment variables 10 | .env 11 | .env.local 12 | .env.development.local 13 | .env.test.local 14 | .env.production.local 15 | 16 | # Build output 17 | dist/ 18 | build/ 19 | out/ 20 | 21 | # Temporary files 22 | *.tmp 23 | *.temp 24 | 25 | # OS generated files 26 | .DS_Store 27 | Thumbs.db 28 | 29 | # Coverage directory 30 | coverage/ 31 | 32 | # IDE or Editor files 33 | .vscode/ 34 | .idea/ 35 | *.swp 36 | *.swo 37 | *.sublime-workspace 38 | *.sublime-project -------------------------------------------------------------------------------- /comments/1.1.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.1.1 Non-text Content 2 | 3 | (Level A) 4 | 5 | [wcag:non-text-content] 6 | [wcag2ict:applying-sc-1-1-1-non-text-content-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.1.1](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content). 9 | 10 | [note:Not all mobile platforms provide a way to programmatically associate a [label](https://www.w3.org/TR/WCAG22/#dfn-labels) with [non-text content](https://www.w3.org/TR/WCAG22/#dfn-non-text-content).] 11 | -------------------------------------------------------------------------------- /sections/comments.md: -------------------------------------------------------------------------------- 1 | ## Comments by Principle, Guideline and Success Criterion 2 | 3 | The sections that follow are organized according to the principles, guidelines and success criteria from WCAG 2.2. The text of each principle, guideline and success criterion from WCAG 2.2 is provided as quoted text. Following that, the WCAG2ICT guidance is provided as quoted text. Next, the WCAG2Mobile guidance itself is provided. 4 | 5 | [note:**Work in Progress**. The document currently only includes guidance for success criteria. The guidance for principles and guidelines will be added at a later stage.] 6 | -------------------------------------------------------------------------------- /comments/1.2.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded) 2 | 3 | (Level A) 4 | 5 | [wcag:audio-only-and-video-only-prerecorded] 6 | [wcag2ict:applying-sc-1-2-1-audio-only-and-video-only-prerecorded-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.2.1](https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded#intent). 9 | 10 | [note:The alternative can be provided directly on the **[page](#page)** – or provided in an alternate version that meets the success criteria.] 11 | -------------------------------------------------------------------------------- /.github/workflows/pr-validate.yml: -------------------------------------------------------------------------------- 1 | name: PR Validation 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - name: Checkout repository 11 | uses: actions/checkout@v4 12 | 13 | - name: Set up Node 14 | uses: actions/setup-node@v4 15 | with: 16 | node-version: 20 17 | 18 | - name: Install Node dependencies and run script 19 | run: | 20 | npm install 21 | 22 | - name: Run Node script 23 | run: | 24 | node matf.js 25 | 26 | - name: Run spec-prod 27 | uses: w3c/spec-prod@v2 28 | -------------------------------------------------------------------------------- /sections/funders.md: -------------------------------------------------------------------------------- 1 | ### Enabling funders 2 | 3 | This publication has been funded in part with U.S. Federal funds from the Health and Human Services, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067, then under contract number HHSP23301500054C, and now under HHS75P00120P00168. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Health and Human Services or the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government. 4 | -------------------------------------------------------------------------------- /matf.css: -------------------------------------------------------------------------------- 1 | details.wcag { 2 | border: 0.1em solid var(--text); 3 | padding: 0.5em 0.5em 0; 4 | margin: 0.5em 0; 5 | } 6 | 7 | details.wcag summary { 8 | cursor: pointer; 9 | font-weight: bold; 10 | margin: -0.5em -0.5em 0; 11 | padding: 0.5em; 12 | } 13 | details.wcag blockquote > div { 14 | margin-top: -0.5em; 15 | } 16 | details.wcag footer { 17 | border-top: 1px solid var(--text); 18 | padding: 0.5em; 19 | margin: 0 -0.5em -0.5em -0.5em; 20 | } 21 | 22 | details.wcag[open] { 23 | padding: 0.5em; 24 | } 25 | 26 | details.wcag[open] summary { 27 | border-bottom: 0.1em solid var(--text); 28 | margin-bottom: 0.5em; 29 | } 30 | -------------------------------------------------------------------------------- /comments/1.3.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.3.4 Orientation 2 | 3 | (Level AA) 4 | 5 | [wcag:orientation] 6 | [wcag2ict:applying-sc-1-3-4-orientation-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.3.4](https://www.w3.org/WAI/WCAG22/Understanding/orientation). 9 | 10 | [note:Content that supports orientation changes must continue to meet all applicable success criteria in each supported orientation.] 11 | 12 | [note:It is considered a best practice to support all available orientations, such as as portrait, portrait (reversed), landscape, and landscape (reversed).] 13 | -------------------------------------------------------------------------------- /comments/4.1.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 4.1.1 Parsing 2 | 3 | (Level A) 4 | 5 | [wcag:parsing] 6 | [wcag2ict:applying-sc-4-1-1-parsing-obsolete-and-removed-wcag-2-2-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 4.1.1](https://www.w3.org/WAI/WCAG22/Understanding/parsing), meaning that it has been marked as **obsolete and removed**. 9 | 10 | (Obsolete and removed) 11 | 12 | [note:WCAG 2.2 has made this success criterion obsolete and removed it as a requirement in the standard. Therefore, the interpretation of this success criterion for mobile applications has been removed.] 13 | -------------------------------------------------------------------------------- /comments/2.4.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.4 Link Purpose (In Context) 2 | 3 | (Level A) 4 | 5 | [wcag:link-purpose-in-context] 6 | [wcag2ict:applying-sc-2-4-4-link-purpose-in-context-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 2.4.4](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context#intent). 9 | 10 | [note:Examples of links in mobile applications include, but are not limited to: menu items, submenu lists, navigation bar items, tab bar items and text hyperlinks.] 11 | 12 | [note:It is considered a best practice to ensure the purpose of all controls can be determined.] 13 | -------------------------------------------------------------------------------- /comments/2.4.6.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.6 Headings and Labels 2 | 3 | (Level AA) 4 | 5 | [wcag:headings-and-labels] 6 | [wcag2ict:applying-sc-2-4-6-headings-and-labels-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 2.4.6](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels#intent). 9 | 10 | [note:Examples of headings in mobile applications include, but are not limited to: screen titles, dialog titles and section headers.] 11 | 12 | [note:Examples of labels in mobile applications include, but are not limited to: button text, tab bar items, toggle labels and input field labels.] 13 | -------------------------------------------------------------------------------- /comments/1.2.5.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.2.5 Audio Description (Prerecorded) 2 | 3 | (Level AA) 4 | 5 | [wcag:audio-description-prerecorded] 6 | [wcag2ict:applying-sc-1-2-5-audio-description-prerecorded-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.2.5](https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded#intent). 9 | 10 | [note:The WCAG 2 definition of “[audio description](https://www.w3.org/TR/WCAG22/#dfn-audio-descriptions)” says that audio description is “also called ‘video description’ and ‘descriptive narration’”.] 11 | 12 | [note:Secondary or alternate audio tracks are commonly used for this purpose.] 13 | -------------------------------------------------------------------------------- /comments/1.3.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.3.3 Sensory Characteristics 2 | 3 | (Level A) 4 | 5 | [wcag:sensory-characteristics] 6 | [wcag2ict:applying-sc-1-3-3-sensory-characteristics-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.3.3](https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics#intent), with the addition of “haptics” to the list of sensory characteristics. 9 | 10 | With these substitutions, it would read: 11 | 12 | **1.3.3 Sensory Characteristics:** Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, sound, or **haptics**. 13 | -------------------------------------------------------------------------------- /comments/1.2.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded) 2 | 3 | (Level A) 4 | 5 | [wcag:audio-description-or-media-alternative-prerecorded] 6 | [wcag2ict:applying-sc-1-2-3-audio-description-or-media-alternative-prerecorded-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.2.3](https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded#intent). 9 | 10 | [note:The WCAG 2 definition of “[audio description](https://www.w3.org/TR/WCAG22/#dfn-audio-descriptions)” says that “audio description” is “also called ‘video description’ and ‘descriptive narration’”.] 11 | 12 | [note:Secondary or alternate audio tracks are commonly used for this purpose.] 13 | -------------------------------------------------------------------------------- /comments/2.1.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.1.4 Character Key Shortcuts 2 | 3 | (Level A) 4 | 5 | [wcag:character-key-shortcuts] 6 | [wcag2ict:applying-sc-2-1-4-character-key-shortcuts-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 2.1.4](https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts). 9 | 10 | [note:The WCAG2ICT interpretation is that a long press of a key (2 seconds or more) and other accessibility features provided by the platform do not meet the WCAG definition of a keyboard shortcut. See the [keyboard shortcut](https://www.w3.org/TR/wcag2ict-22/#dfn-keyboard-shortcuts) definition for more details.] 11 | 12 | [note:The WCAG2Mobile interpretation aligns with WCAG2ICT, emphasizing that long presses and other accessibility features are not addressed by this success criterion.] 13 | -------------------------------------------------------------------------------- /comments/1.2.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.2.4 Captions (Live) 2 | 3 | (Level AA) 4 | 5 | [wcag:captions-live] 6 | [wcag2ict:applying-sc-1-2-4-captions-live-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.2.4](https://www.w3.org/WAI/WCAG22/Understanding/captions-live#intent). 9 | 10 | [note:The WCAG 2 definition of “[captions](https://www.w3.org/TR/WCAG22/#dfn-captions)” notes that “In some countries, captions are called subtitles”. They are also sometimes referred to as “subtitles for the hearing impaired.” Per the definition in WCAG 2, to meet this success criterion, whether called captions or subtitles, they would have to provide “synchronized visual and / or text alternative for both speech and non-speech audio information needed to understand the media content” where non-speech information includes “sound effects, music, laughter, speaker identification and location”.] 11 | -------------------------------------------------------------------------------- /sections/status.md: -------------------------------------------------------------------------------- 1 | This is a W3C Group Note on "Guidance on Applying WCAG 2.2 to Mobile Applications (WCAG2Mobile)". The purpose of this work is to build upon "Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile" [mobile-accessibility-mapping], but also to have a stronger focus on mobile applications and include changes made in WCAG 2.1 and 2.2. 2 | 3 | To comment, [file an issue in the W3C MATF GitHub repository](https://github.com/w3c/matf/issues/new). The Mobile Accessibility Task Force (MATF) requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, email [public-agwg-comments@w3.org](mailto:public-agwg-comments@w3.org?subject=WCAG2Mobile%20public%20comment) ([comment archive](https://lists.w3.org/Archives/Public/public-agwg-comments/)). 4 | 5 | To view in-progress updates to the guidelines, see [public editors’ draft](https://w3c.github.io/matf/). -------------------------------------------------------------------------------- /comments/1.2.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.2.2 Captions (Prerecorded) 2 | 3 | (Level A) 4 | 5 | [wcag:captions-prerecorded] 6 | [wcag2ict:applying-sc-1-2-2-captions-prerecorded-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.2.2](https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded#intent). 9 | 10 | [note:The WCAG 2 definition of “[captions](https://www.w3.org/TR/WCAG22/#dfn-captions)” notes that “in some countries, captions are called subtitles”. They are also sometimes referred to as “subtitles for the hearing impaired.” Per the definition in WCAG 2, to meet this success criterion, whether called captions or subtitles, they would have to provide “synchronized visual and / or text alternative for both speech and non-speech audio information needed to understand the media content” where non-speech information includes “sound effects, music, laughter, speaker identification and location”.] 11 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions to this repository are intended to become part of Recommendation-track documents governed by the [W3C Patent Policy](https://www.w3.org/Consortium/Patent-Policy-20040205/) and [Document License](https://www.w3.org/Consortium/Legal/copyright-documents). To make substantive contributions to specifications, you must either participate in the relevant W3C Working Group or make a non-member patent licensing commitment. 4 | 5 | If you are not the sole contributor to a contribution (pull request), please identify all contributors in the pull request comment. 6 | 7 | To add a contributor (other than yourself, that's automatic), mark them one per line as follows: 8 | 9 | ``` 10 | +@github_username 11 | ``` 12 | 13 | If you added a contributor by mistake, you can remove them in a comment with: 14 | 15 | ``` 16 | -@github_username 17 | ``` 18 | 19 | If you are making a pull request on behalf of someone else but you had no part in designing the feature, you can remove yourself with the above syntax. 20 | -------------------------------------------------------------------------------- /comments/1.4.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.2 Audio Control 2 | 3 | (Level A) 4 | 5 | [wcag:audio-control] 6 | [wcag2ict:applying-sc-1-4-2-audio-control-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.4.2](https://www.w3.org/WAI/WCAG22/Understanding/audio-control#intent), replacing “Web page” with “page” and removing “See Conformance Requirement 5: Non-Interference”. 9 | 10 | With these substitutions, it would read: 11 | 12 | **1.4.2 Audio Control:** If any audio on a **[page](#page)** plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a [mechanism](https://www.w3.org/TR/WCAG22/#dfn-mechanism) is available to control audio volume independently from the overall system volume level. 13 | 14 | [note:Since any content that does not meet this success criterion can interfere with a user's ability to use the whole **[page](#page)**, all content on the **[page](#page)** (whether it is used to meet other success criteria or not) must meet this success criterion.] 15 | -------------------------------------------------------------------------------- /plugins/note.js: -------------------------------------------------------------------------------- 1 | import { AdmonitionPlugin } from './admonition.js'; 2 | 3 | /** 4 | * The Note plugin adds a new markdown tag to render a Note. 5 | * 6 | * For example, the `[note:markdown]` markdown will render a Note containing the given `markdown`. 7 | */ 8 | export class NotePlugin extends AdmonitionPlugin { 9 | constructor() { 10 | super('note'); 11 | } 12 | 13 | /** 14 | * Initializes the NotePlugin without any additional setup. 15 | * @returns {Promise<{function}>} - An initialized `NotePlugin` function. 16 | */ 17 | static async init() { 18 | return new NotePlugin().plugin(); 19 | } 20 | 21 | /** 22 | * Renders the content for the Note admonition. 23 | * @param {string} html - The pre-rendered HTML string. 24 | * @param {number|null} number - An optional number specifying the index. 25 | * @returns {string} - The rendered content, embedded the HTML string. 26 | */ 27 | content(html, number) { 28 | // TODO: Show number in title of note 29 | return ` 30 |
31 | ${html} 32 |
33 | `; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /comments/2.4.11.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.4.11 Focus Not Obscured (Minimum) 2 | 3 | (Level AA) 4 | 5 | [wcag:focus-not-obscured-minimum] 6 | [wcag2ict:applying-sc-2-4-11-focus-not-obscured-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 2.4.11](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html#intent). 9 | 10 | **2.4.11 Focus Not Obscured (Minimum):** When a [user interface component](https://www.w3.org/TR/WCAG22/#dfn-user-interface-components) receives keyboard focus, the component is not entirely hidden due to author-created content. 11 | 12 | [note:Where content in a configurable interface can be repositioned by the user, then only the initial positions of user-movable content are considered for testing and conformance of this success criterion.] 13 | 14 | [note:Content opened by the *user* may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered visually hidden due to author-created content.] 15 | -------------------------------------------------------------------------------- /comments/2.3.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.3.1 Three Flashes or Below Threshold 2 | 3 | (Level A) 4 | 5 | [wcag:three-flashes-or-below-threshold] 6 | [wcag2ict:applying-sc-2-3-1-three-flashes-or-below-threshold-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 2.3.1](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold#intent), replacing “Web pages” with “pages” and “Web page” with “page”; and removing “See Conformance Requirement 5: Non-Interference”. 9 | 10 | With these substitutions, it would read: 11 | 12 | **2.3.1 Three Flashes or Below Threshold:** **[Pages](#page)** do not contain anything that flashes more than three times in any one second period, or the [flash](https://www.w3.org/TR/WCAG22/#dfn-flashes) is below the [general flash and red flash thresholds](https://www.w3.org/TR/wcag2ict-22/#dfn-general-flash-and-red-flash-thresholds). 13 | 14 | [note:Since any content that does not meet this success criterion can interfere with a user's ability to use the whole **[page](#page)**, all content on the [page](#page) (whether it is used to meet other success criteria or not) must meet this success criterion.] 15 | -------------------------------------------------------------------------------- /plugins/example.js: -------------------------------------------------------------------------------- 1 | import { AdmonitionPlugin } from './admonition.js'; 2 | 3 | /** 4 | * The Example plugin adds a new markdown tag to render an Example. 5 | * 6 | * For example, the `[example:markdown]` markdown will render an Example containing the given `markdown`. 7 | */ 8 | export class ExamplePlugin extends AdmonitionPlugin { 9 | constructor() { 10 | super('example'); 11 | } 12 | 13 | /** 14 | * Initializes the ExamplePlugin without any additional setup. 15 | * @returns {Promise<{function}>} - An initialized `ExamplePlugin` function. 16 | */ 17 | static async init() { 18 | return new ExamplePlugin().plugin(); 19 | } 20 | 21 | /** 22 | * Renders the content for the Example admonition. 23 | * @param {string} html - The pre-rendered HTML string. 24 | * @param {number|null} number - An optional number specifying the index. 25 | * @returns {string} - The rendered content, embedded the HTML string. 26 | */ 27 | content(html, number) { 28 | const title = number !== null ? `Example ${number}` : 'Example'; 29 | return ` 30 |
31 |
${title}
32 | ${html} 33 |
34 | `; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /comments/4.1.3.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 4.1.3 Status Messages 2 | 3 | (Level AA) 4 | 5 | [wcag:status-messages] 6 | [wcag2ict:applying-sc-4-1-3-status-messages-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 4.1.3](https://www.w3.org/WAI/WCAG22/Understanding/status-messages), removing “implemented using markup languages”. 9 | 10 | With these substitutions, it would read: 11 | 12 | **4.1.3 Status Messages:** In [content](#content), [status messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages#dfn-status-message) can be [programmatically determined](https://www.w3.org/WAI/WCAG22/Understanding/status-messages#dfn-programmatically-determined) through [role](https://www.w3.org/WAI/WCAG22/Understanding/status-messages#dfn-role) or properties such that they can be presented to the user by [assistive technologies](https://www.w3.org/WAI/WCAG22/Understanding/status-messages#dfn-assistive-technology) without receiving focus. 13 | 14 | [note:This is typically enabled through the use of accessibility services of the [user agent](https://www.w3.org/TR/wcag2ict-22/#user-agent) or [platform software](https://www.w3.org/TR/wcag2ict-22/#platform-software).] 15 | -------------------------------------------------------------------------------- /sections/scope.md: -------------------------------------------------------------------------------- 1 | ### Excluded from scope 2 | 3 | The following are out of scope for this document: 4 | 5 | - This document provides guidance specifically for mobile applications on phones and tablets; it does not include guidance for other types of mobile devices such as wearables and laptops. 6 | - This document does not propose changes to WCAG 2 or its supporting documents; it does not include interpretations for implementing WCAG 2 in web technologies. 7 | - This document is not sufficient by itself to ensure accessibility in mobile applications — as a web standard, WCAG does not fully cover all accessibility requirements for non-user interface aspects of platforms, user-interface components as individual items, or closed product software (where there is no assistive technology to communicate programmatic information). 8 | - This document does not comment on hardware aspects of products, because the basic constructs on which WCAG 2 is built do not apply to these. 9 | - This document does not comment on WCAG Level AAA success criteria. 10 | - This document does not provide supporting techniques for implementing WCAG 2 in mobile applications. 11 | - This document is purely an informative note about mobile applications, not a standard, so it does not describe how mobile applications should conform to it. 12 | -------------------------------------------------------------------------------- /comments/3.3.4.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.3.4 Error Prevention (Legal, Financial, Data) 2 | 3 | (Level AA) 4 | 5 | [wcag:error-prevention-legal-financial-data] 6 | [wcag2ict:applying-sc-3-3-4-error-prevention-legal-financial-data-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 3.3.4](https://www.w3.org/WAI/WCAG22/Understanding/error-prevention-legal-financial-data) replacing “web pages” with “pages”. 9 | 10 | With this substitution, it would read: 11 | 12 | 3.3.4 Error Prevention (Legal, Financial, Data): For **[pages](#page)** that cause [legal commitments](https://www.w3.org/TR/WCAG22/#dfn-legal-commitments) or financial transactions for the user to occur, that modify or delete [user-controllable](https://www.w3.org/TR/WCAG22/#dfn-user-controllable) data in data storage systems, or that submit user test responses, at least one of the following is true: 13 | 14 | 1. Reversible: Submissions are reversible. 15 | 2. Checked: Data entered by the user is checked for [input errors](https://www.w3.org/TR/wcag2ict-22/#dfn-input-error) and the user is provided an opportunity to correct them. 16 | 3. Confirmed: A [mechanism](https://www.w3.org/TR/WCAG22/#dfn-mechanism) is available for reviewing, confirming, and correcting information before finalizing the submission. 17 | -------------------------------------------------------------------------------- /comments/2.5.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.5.1 Pointer Gestures 2 | 3 | (Level A) 4 | 5 | [wcag:pointer-gestures] 6 | [wcag2ict:applying-sc-2-5-1-pointer-gestures-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in Intent from [Understanding Success Criterion 2.5.1](https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures#intent). 9 | 10 | **2.5.1 Pointer Gestures:** All [functionality](https://www.w3.org/TR/WCAG22/#dfn-functionality) that uses multipoint or path-based gestures for operation can be operated with a [single pointer](https://www.w3.org/TR/WCAG22/#dfn-single-pointer) without a path-based gesture, unless a multipoint or path-based gesture is [essential](https://www.w3.org/TR/WCAG22/#dfn-essential). 11 | 12 | [note:This requirement applies to mobile applications that interpret pointer actions (i.e., this does not apply to actions that are required to operate the platform software, operating system, or assistive technology). Each layer is responsible for its own pointer actions only, not for those in an underlying layer.] 13 | 14 | [example1:Examples of multipoint gestures include pinch-to-zoom, two-finger scrolling, split-tap (where one finger rests on screen while another taps), and multi-finger swipes.] 15 | 16 | [example2:Examples of path-based gestures include swipe gestures requiring specific directional input such as carousels and sliders, custom drawing gestures, and pull-to-refresh actions.] 17 | -------------------------------------------------------------------------------- /sections/contributors.md: -------------------------------------------------------------------------------- 1 | ### Contributors to the development of this document 2 | 3 | - Aashutosh Kulkarni (Invited Expert) 4 | - Alain Vagner (Invited Expert) 5 | - Alastair Campbell (Nomensa) 6 | - Audrey Maniez (Invited Expert) 7 | - Bram Janssens (Invited Expert) 8 | - Carolina Crespo (TPGi) 9 | - Charles Adams (Oracle Corporation) 10 | - Detlev Fischer (Invited Expert) 11 | - Devanshu Chandra (Deque Systems, Inc.) 12 | - Gert-Jan Vercauteren (Invited Expert) 13 | - Gleidson Ramos (Invited Expert) 14 | - Hidde de Vries (Logius) 15 | - Illai Zeevi (Evinced Inc.) 16 | - Jamie Herrera (Invited Expert) 17 | - Jan Jaap de Groot (Abra) 18 | - Jeanne Erickson Cooley (TPGi) 19 | - Jeroen Hulscher (Logius) 20 | - Joe Humbert (Invited Expert) 21 | - Jon Gibbins (Invited Expert) 22 | - Julian Kittelson-Aldred (Invited Expert) 23 | - Karen Herr (Salesforce) 24 | - Karla Rubiano (Invited Expert) 25 | - Kevin White (W3C) 26 | - Kimberly Patch (Invited Expert) 27 | - Megan Pletzer (Deque Systems, Inc.) 28 | - Michael (Mick) Keane (UnitedHealth Group) 29 | - Patrick Lauke (TetraLogical Services Ltd) 30 | - Paul J. Adam (CVS Pharmacy, Inc.) 31 | - Quintin Balsdon (Evinced Inc.) 32 | - Rachael Bradley Montgomery (Library of Congress) 33 | - Rachele DiTullio (Invited Expert) 34 | - Rob Whitaker (Invited Expert) 35 | - Steve Faulkner (TetraLogical Services Ltd) 36 | - Steven Hoober (Invited Expert) 37 | - Tanya van Workum (Abra) 38 | - Tim Gravemaker (Invited Expert) 39 | - Victoria (Tori) Clark (Invited Expert) 40 | -------------------------------------------------------------------------------- /sections/conventions.md: -------------------------------------------------------------------------------- 1 | ### Document conventions 2 | 3 | The following stylistic conventions are used in this document: 4 | 5 | - Quotes from WCAG 2.2 are in `
` elements and visually styled with a border, and immediately follow the heading for the principle, guideline, or success criterion. 6 | - Quotes from WCAG2ICT 2.2 are in `
` elements and visually styled with a border, and immediately follow the WCAG quote. 7 | - Additional guidance provided by this document begins with the phrase “Applying” and has no special visual styling. 8 | - In headings the term “Success Criterion” has been shortened to “SC” for brevity. 9 | - Replacement text that is presented to show how an SC would read as modified by the advice in this document are in `` elements that are visually styled as bold green text with a dotted underline. 10 | - Notes are slightly inset and begin with the phrase “NOTE”; each note is in its own inset box styled in pale green with a darker green line on the left side of the box. 11 | - References to glossary items from WCAG 2 are presented in `` elements that are visually styled as ordinary text with a dotted underline, and contain title attributes noting these are WCAG definitions — when mouse or keyboard focus is placed over them, they turn blue with a yellow background. 12 | - References to glossary items in this document are presented in `` elements that are visually styled as ordinary text with a dark gray underline. 13 | - Hereafter, the short title “WCAG2Mobile” is used to reference this document. 14 | -------------------------------------------------------------------------------- /comments/3.2.6.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.2.6 Consistent Help 2 | 3 | (Level A) 4 | 5 | [wcag:consistent-help] 6 | [wcag2ict:applying-sc-3-2-6-consistent-help-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 3.2.6](https://www.w3.org/WAI/WCAG22/Understanding/consistent-help), replacing "web page(s)" with "page(s)" and "CSS break-point" with "break-point". 9 | 10 | With these substitutions, it would read: 11 | 12 | **3.2.6 Consistent Help:** If a **[page](#page)** contains any of the following help mechanisms, and those mechanisms are repeated on multiple **[pages](#page)** within a set of **[pages](#page)**, they occur in the same order relative to other **[page](#page)** content, unless a change is initiated by the user: 13 | 14 | - Human contact details; 15 | - Human contact mechanism; 16 | - Self-help option; 17 | - A fully automated contact mechanism. 18 | 19 | [note:Help mechanisms may be provided directly on the [page](#page), or may be provided via a direct link to a different [page](#page) containing the information.] 20 | 21 | [note:For this success criterion, "the same order relative to other [page](#page) content" can be thought of as how the content is ordered when the [page](#page) is serialized. The visual position of a help mechanism is likely to be consistent across [pages](#page) for the same*[page](#page) variation (e.g., **break-point**). The user can initiate a change, such as changing the [page](#page)'s zoom or orientation, which may trigger a different [page](#page) variation. This criterion is concerned with relative order across [pages](#page) displayed in the same [page](#page) variation (e.g., same zoom level and orientation).] 22 | -------------------------------------------------------------------------------- /index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Guidance on Applying WCAG 2.2 to Mobile Applications (WCAG2Mobile) 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | <%- sections.abstract %> 18 |
19 | 20 |
21 | <%- sections.status %> 22 |
23 | 24 |
25 | <%- sections.introduction %> 26 | <%- sections.background %> 27 | <%- sections.guidance %> 28 | <%- sections.scope %> 29 | <%- sections.overview %> 30 | <%- sections.conventions %> 31 | <%- sections.comparison %> 32 |
33 | 34 |
35 | <%- sections.keyterms %> 36 |
37 | 38 |
39 | <%- sections.comments %> 40 | 41 | <% comments.forEach(comment => { %> 42 |
43 | <%- comment %> 44 |
45 | <% }); %> 46 |
47 | 48 |
49 | <%- sections.acknowledgements %> 50 | <%- sections.contributors %> 51 | <%- sections.funders %> 52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /comments/2.2.1.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.2.1 Timing Adjustable 2 | 3 | (Level A) 4 | 5 | [wcag:timing-adjustable] 6 | [wcag2ict:applying-sc-2-2-1-timing-adjustable-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 2.2.1](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable#intent). 9 | 10 | With this substitution, it would read: 11 | 12 | **2.2.1 Timing Adjustable:** For each time limit that is set by the [content](#content), at least one of the following is true: 13 | 14 | - Turn off: The user is allowed to turn off the time limit before encountering it; or 15 | - Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or 16 | - Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, “press the space bar”), and the user is allowed to extend the time limit at least ten times; or 17 | - Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or 18 | - Essential Exception: The time limit is [essential](https://www.w3.org/TR/WCAG22/#dfn-essential) and extending it would invalidate the activity; or 19 | - 20 Hour Exception: The time limit is longer than 20 hours. 20 | 21 | [note:This success criterion helps ensure that users can complete tasks without unexpected changes in content or context that are a result of a time limit. This success criterion should be considered in conjunction with [Success Criterion 3.2.1](https://www.w3.org/TR/WCAG22/#on-focus), which puts limits on changes of content or context as a result of user action.] 22 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Generate, Upload, Deploy 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | workflow_dispatch: 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | 13 | permissions: 14 | contents: write 15 | 16 | steps: 17 | # Checkout repository 18 | - name: Checkout repository 19 | uses: actions/checkout@v4 20 | 21 | # Set up Node environment 22 | - name: Set up Node 23 | uses: actions/setup-node@v4 24 | with: 25 | node-version: 20 26 | 27 | # Install Node dependencies 28 | - name: Install Node dependencies 29 | run: | 30 | npm install 31 | 32 | # Run Node script 33 | - name: Run Node script 34 | run: | 35 | node matf.js 36 | 37 | # Commit changes 38 | - name: Commit changes 39 | uses: stefanzweifel/git-auto-commit-action@v5 40 | with: 41 | commit_message: Add generated index.html 42 | 43 | - name: Run spec-prod 44 | uses: w3c/spec-prod@v2 45 | 46 | upload: 47 | runs-on: ubuntu-latest 48 | needs: build 49 | 50 | steps: 51 | - name: Download spec-prod artifact 52 | uses: actions/download-artifact@v4 53 | with: 54 | name: spec-prod-result 55 | path: _site 56 | 57 | - name: Upload Pages artifact 58 | uses: actions/upload-pages-artifact@v3 59 | 60 | deploy: 61 | runs-on: ubuntu-latest 62 | needs: upload 63 | 64 | permissions: 65 | pages: write 66 | id-token: write 67 | 68 | environment: 69 | name: github-pages 70 | url: ${{ steps.deployment.outputs.page_url }} 71 | 72 | steps: 73 | - name: Deploy to GitHub Pages 74 | uses: actions/deploy-pages@v4 75 | -------------------------------------------------------------------------------- /plugins/github.js: -------------------------------------------------------------------------------- 1 | import { Plugin } from './plugin.js'; 2 | 3 | /** 4 | * The GitHubPlugin adds a new markdown tag to render GitHub issues. 5 | * For example, the `[issue:71]` markdown will render issue #71 as a note with a link. 6 | */ 7 | export class GitHubPlugin extends Plugin { 8 | constructor(url) { 9 | super('issue'); 10 | this.url = url; 11 | } 12 | 13 | /** 14 | * Initializes the plugin with the specified GitHub repository URL. 15 | * @param {string} url - The GitHub repository URL (e.g., `https://github.com/w3c/matf`). 16 | * @returns {Promise<{function}>} - An initialized `GitHubPlugin` function. 17 | */ 18 | static async init(url) { 19 | return new GitHubPlugin(url).plugin(); 20 | } 21 | 22 | /** 23 | * Defines the regex for matching `[issue:]`. 24 | * @returns {RegExp} - The regex for matching the issue syntax. 25 | */ 26 | regex() { 27 | return /^\[issue:(\d+)\]/; 28 | } 29 | 30 | /** 31 | * Populates the token with issue number and link. 32 | * @param {Array} match - The regex match result. 33 | * @param {object} token - The token to populate. 34 | */ 35 | process(match, token) { 36 | const number = match[1]; 37 | 38 | token.number = number; 39 | token.link = `${this.url}/issues/${number}`; 40 | } 41 | 42 | /** 43 | * Renders the token as a Note with a link to the issue on GitHub. 44 | * @param {object} token - The token to render. 45 | * @returns {string} - The rendered HTML string. 46 | */ 47 | render(token) { 48 | return ` 49 |
50 |

51 | 52 | Read issue #${token.number} on GitHub 53 | 54 |

55 |
56 | `; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /comments/1.4.12.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 1.4.12 Text Spacing 2 | 3 | (Level AA) 4 | 5 | [wcag:text-spacing] 6 | [wcag2ict:applying-sc-1-4-12-text-spacing-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 1.4.12](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing), replacing "content implemented using markup languages" with "content". 9 | 10 | With these substitutions, it would read: 11 | 12 | **1.4.12 Text Spacing:** In **[content](#content)** that support the following text style properties, no loss of [content](#content) or functionality occurs by setting all of the following and by changing no other style property: 13 | 14 | - Line height (line spacing) to at least 1.5 times the font size; 15 | - Spacing following paragraphs to at least 2 times the font size; 16 | - Letter spacing (tracking) to at least 0.12 times the font size; 17 | - Word spacing to at least 0.16 times the font size. 18 | 19 | Exception: [Human languages](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing#dfn-human-language) and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script. 20 | 21 | [note:Content is not required to use these text spacing values. The requirement is to ensure that when a user overrides the authored text spacing, content or functionality is not lost.] 22 | 23 | [note:Writing systems for some languages use different text spacing settings, such as paragraph start indent. Authors are encouraged to follow locally available guidance for improving readability and legibility of text in their writing system.] 24 | 25 | [note:If a mobile platform does not include a way for users to override text style properties, this success criterion is not applicable.] 26 | -------------------------------------------------------------------------------- /sections/guidance.md: -------------------------------------------------------------------------------- 1 | ### Guidance in this document 2 | 3 | This document provides informative guidance (guidance that is not [normative](https://www.w3.org/TR/WCAG22/#dfn-normative) and that does not set requirements) with regard to the interpretation and application of Web Content Accessibility Guidelines (WCAG) to mobile applications. Specifically, this document provides informative guidance on applying WCAG 2.2 Level A and AA success criteria to mobile applications, including native mobile apps, mobile web apps and hybrid apps using web components inside native mobile apps. 4 | 5 | #### Interpretation of Web Terminology in a Mobile Context 6 | 7 | When certain Web-specific terms or phrases like “web page(s)” were used in success criteria, those were replaced with mobile terms or phrases like “screen(s)” or “view(s)”. Additional notes were also provided to explain the terminology replacements. 8 | 9 | A small number of success criteria are written to apply to “a set of web pages” or “multiple web pages” and depend upon all pages in the set to share some characteristic or behavior. Since the unit of conformance in WCAG 2 is a single web page, the task force agreed that the equivalent unit of conformance for mobile applications is a single screen within the application. It follows that an equivalent unit of evaluation for a “set of web pages” would be a “set of screens”, not — as previously interpreted in WCAG2ICT — as a “set of software”. These terms are defined in the [Key Terms](#key-terms) section of this document. See “set of screens” to determine when a group of screens in a mobile application are considered a set. 10 | 11 | The glossary terms were also reviewed and most of them applied to mobile applications, as written. Some applied with additional notes or edits (largely related to phrases like “Web page(s)”), and a small number of terms were only used in Level AAA success criteria, which are not addressed by the WCAG2Mobile Note at this time. -------------------------------------------------------------------------------- /plugins/admonition.js: -------------------------------------------------------------------------------- 1 | import { Plugin } from './plugin.js'; 2 | import markdownit from 'markdown-it'; 3 | 4 | /** 5 | * The AdmonitionPlugin plugin adds a new markdown tag to render an Admonition. 6 | * 7 | * For example: 8 | * - `[tag:markdown]` renders an Admonition for the given markdown 9 | * - `[tag1:markdown]` renders an Admonition with the number 1 for the given markdown 10 | */ 11 | export class AdmonitionPlugin extends Plugin { 12 | constructor(tag) { 13 | super(tag); 14 | this.md = markdownit({ 15 | html: true 16 | }) 17 | } 18 | 19 | /** 20 | * Defines the regex for matching `[tag:]`. 21 | * @returns {RegExp} - The regex for matching the admonition syntax. 22 | */ 23 | regex() { 24 | return new RegExp(`\\[${this.tag}(\\d*):(.*)\\]`); 25 | } 26 | 27 | /** 28 | * Processes the matched content and populates the token with raw markdown. 29 | * @param {Array} match - The regex match result. 30 | * @param {object} token - The token to populate. 31 | */ 32 | process(match, token) { 33 | // Extract the number, if available 34 | token.number = match[1] ? parseInt(match[1], 10) : null; 35 | // Extract the markdown content 36 | token.content = match[2].trim(); 37 | } 38 | 39 | /** 40 | * Renders the token into HTML by converting markdown to HTML for the content. 41 | * @param {object} token - The token to render. 42 | * @returns {string} - The rendered HTML string. 43 | */ 44 | render(token) { 45 | // Use markdown-it to render the content into HTML 46 | const html = this.md.render(token.content); 47 | return this.content(html, token.number); 48 | } 49 | 50 | /** 51 | * Renders the content for the type of admonition. 52 | * @param {string} html - The pre-rendered HTML string. 53 | * @param {number|null} number - An optional number specifying the index. 54 | * @returns {string} - The rendered content, embedded the HTML string. 55 | */ 56 | content(html, number) { 57 | throw new Error(`Subclass ${this.name} must implement 'content()'`); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mobile Accessibility Task Force (MATF) 2 | 3 | This repository is used to work on guidance for mobile accessibility. 4 | 5 | - Our most recent [Editor's draft](https://www.w3.org/standards/types/#ED) is published at: [w3c.github.io/matf](https://w3c.github.io/matf/) 6 | - Discussions are tracked in [MATF issues](https://github.com/w3c/matf/issues) 7 | - Planning is handled in the [MATF project](https://github.com/orgs/w3c/projects/147) 8 | - Find more information in the [MATF wiki](https://github.com/w3c/matf/wiki) 9 | - Read more about the MATF on the [W3C website](https://www.w3.org/WAI/about/groups/task-forces/matf/) 10 | 11 | ## Setup 12 | 13 | - The [comments folder](/comments) contains Markdown files with our comments on each success criterion (and principle, guidelines in the future). 14 | - The [sections folder](/sections) contains Markdown files for each section, such as abstract, introduction, etc. 15 | - The [plugins folder](/plugins) contains Javascript files with Markdown extensions 16 | - [`ExamplePlugin`](/plugins/example.js): adds the `[example:]` tag to render an `Example` containing the given ``. 17 | - [`GitHubPlugin`](/plugins/github.js): adds the `[issue:]` tag to render a `Note` linking to the given GitHub ``. 18 | - [`NotePlugin`](/plugins/note.js): adds the `[note:]` tag to render a `Note` containing the given ``. 19 | - [`WcagPlugin`](/plugins/wcag.js): adds the `[wcag|wcag2ict:]` tag to render a `
` component containing the WCAG or WCAG2ICT section identified by the given ``. 20 | 21 | Upon push to the `main` branch, the [`index.html`](index.html) file gets generated based on the [comments](/comments) and [sections](/sections) folders. Next, the `index.html` file gets commited, and then deployed to GitHub Pages. 22 | 23 | ![Generate, Update, Deploy workflow](https://github.com/w3c/matf/actions/workflows/deploy.yml/badge.svg) 24 | 25 | For local development: 26 | 27 | - Open this repository in a terminal 28 | - Run `npm install` to install dependencies 29 | - Run `node matf.js` to generate `index.html` 30 | - Open `index.html` in your browser of choice 31 | -------------------------------------------------------------------------------- /comments/3.3.8.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 3.3.8 Accessible Authentication (Minimum) 2 | 3 | (Level AA) 4 | 5 | [wcag:accessible-authentication-minimum] 6 | [wcag2ict:applying-sc-3-3-8-accessible-authentication-minimum-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 3.3.8](https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum), replacing “Web site” with “application”. 9 | 10 | A [cognitive function test](https://www.w3.org/TR/wcag2ict-22/#dfn-cognitive-function-test) (such as remembering a password or solving a puzzle) is not required for any step in an authentication [process](https://www.w3.org/TR/WCAG22/#dfn-processes) unless that step provides at least one of the following: 11 | 12 | **Alternative** 13 | Another authentication method that does not rely on a cognitive function test. 14 | 15 | **Mechanism** 16 | A [mechanism](https://www.w3.org/TR/WCAG22/#dfn-mechanism) is available to assist the user in completing the cognitive function test. 17 | 18 | **Object Recognition** 19 | The cognitive function test is to recognize objects. 20 | 21 | **Personal Content** 22 | The cognitive function test is to identify [non-text content](https://www.w3.org/TR/WCAG22/#dfn-non-text-content) the user provided to the **application**. 23 | 24 | [note:“Object recognition” and “Personal content” may be represented by images, video, or audio.] 25 | 26 | [note:Examples of mechanisms that satisfy this criterion include: support for password entry by password managers to reduce memory need, and copy and paste to reduce the cognitive burden of re-typing.] 27 | 28 | [note:Any passwords used to unlock underlying [platform software](https://www.w3.org/TR/wcag2ict-22/#platform-software) (running below the non-web software) are out of scope for this requirement since these are not under control of the non-web software’s author.] 29 | 30 | [note:There are cases where non-web software has an authentication process and no alternative or assistance mechanism is feasible, for example when entering a password when starting, powering on / turning on an ICT (device or otherwise). In such situations, it may not be possible for the non-web software to satisfy this success criterion.] 31 | -------------------------------------------------------------------------------- /sections/background.md: -------------------------------------------------------------------------------- 1 | ### Background 2 | 3 | This document is an iteration on Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile [[mobile-accessibility-mapping]], published in February 2015. The document was intended to become a [Group Note](https://www.w3.org/standards/types/#x2-5-2-group-note) but it did not move to the next maturity stage. The most recent publication was an [Editor's Draft](https://w3c.github.io/Mobile-A11y-TF-Note/) in December 2018. 4 | 5 | After 2018, the Mobile Accessibility Task Force (MATF) ensured that mobile considerations were included in WCAG 2.1 and WCAG 2.2, such as: 6 | 7 | - 1.3.4 Orientation (AA), to support multiple display orientations; 8 | - 1.4.10 Reflow (AA), to improve presentation on small screens; 9 | - 2.5.1 Pointer Gestures (A), to provide single-pointer alternatives for touch gestures; 10 | - 2.5.4 Motion Actuation (A), to provide alternatives for device motion; 11 | - 2.5.7 Dragging Movements (AA), to provide single-pointer alternatives for dragging; 12 | - 2.5.8 Target Size (Minimum) (AA), to providing minimum touch target sizes; 13 | - 3.3.7 Redundant Entry (A), to reduce the amount of repetitive typing. 14 | 15 | In January 2024, MATF regrouped and welcomed new participants to work on updated guidance for applying WCAG 2.2 to mobile applications. 16 | 17 | This current document, “Guidance on Applying WCAG 2.2 to Mobile Applications (WCAG2Mobile)” maps directly to the W3C supporting document, Guidance on Applying WCAG 2 to Non-Web Information and Communications Technologies (WCAG2ICT) [[wcag2ict-22]], which was published as a Group Note in October 2024, describing how WCAG 2.2 could be applied to non-web documents and software. 18 | 19 | The intention of MATF is to publish WCAG2Mobile as a [Group Note](https://www.w3.org/standards/types/#x2-5-2-group-note), just like WCAG2ICT. 20 | 21 | WCAG2ICT is organized to mirror the principle, guideline and success criterion structure of WCAG; this model is also used in WCAG2Mobile. WCAG2ICT clarifies when and how WCAG Level A and Level AA success criteria could be applied to non-web documents and software; WCAG2Mobile narrows the scope of this work to mobile applications. 22 | 23 | For information on related work, see [Mobile Accessibility at W3C](https://www.w3.org/WAI/standards-guidelines/mobile/). -------------------------------------------------------------------------------- /comments/2.5.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.5.2 Pointer Cancellation 2 | 3 | (Level A) 4 | 5 | [wcag:pointer-cancellation] 6 | [wcag2ict:applying-sc-2-5-2-pointer-cancellation-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 2.5.2](https://www.w3.org/WAI/WCAG22/Understanding/pointer-cancellation#intent). 9 | 10 | **2.5.2 Pointer Cancellation:** For functionality that can be operated using a single pointer, at least one of the following is true: 11 | 12 |
13 |
No Down-Event
14 |
15 | The down-event of the pointer is not used to execute any part of the function; 16 |
17 |
Abort or Undo
18 |
19 | Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion; 20 |
21 |
Up Reversal
22 |
23 | The up-event reverses any outcome of the preceding down-event; 24 |
25 |
Essential
26 |
27 | Completing the function on the down-event is essential. 28 |
29 |
30 | 31 | [note:This requirement applies to mobile applications that interpret pointer actions (i.e., this does not apply to actions that are required to operate the platform software, operating system, or assistive technology). Each layer is responsible for its own pointer actions only, not for those in an underlying layer.] 32 | 33 | [note:Functions that emulate a keyboard or numeric keypad key press are considered essential.] 34 | 35 | [note:The determination of "essential" should focus on whether the function itself requires down-event activation, rather than solely on technological constraints. However, limitations of the underlying technology platform may also constitute valid exceptions where developers cannot provide alternative implementations.] 36 | 37 |
38 | Example: 39 |
40 | Examples of essential functionality in mobile applications include: 41 |
    42 |
  • Drawing and sketching functionality where continuous pressure-sensitive input begins on the down-event.
    • 43 |
  • Keyboard emulation functionality where keys activate on down-event to match expected physical keyboard behavior.
    • 44 |
  • Musical instrument functionality where the down-event timing is essential to produce the intended sound at the correct moment.
    • 45 |
  • Gaming functionality requiring precise down-event timing such as rhythm games, sports simulations and action games. 46 |
    • 47 |
48 |
49 | -------------------------------------------------------------------------------- /plugins/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Plugin: A base class with shared logic for custom markdown-it plugins. 3 | */ 4 | export class Plugin { 5 | constructor(tag) { 6 | this.tag = tag; 7 | } 8 | 9 | /** 10 | * Initializes the plugin with any required setup. 11 | * Subclasses should override this method to return a fully initialized plugin. 12 | * @param {...*} args - Arguments required to initialize the plugin. 13 | * @returns {Promise} - A promise resolving to an initialized plugin instance. 14 | */ 15 | static async init(...args) { 16 | throw new Error(`Subclass ${this.name} must implement 'async static init(... args)'`); 17 | } 18 | 19 | /** 20 | * Returns the markdown-it plugin function. 21 | * @returns {function} - A markdown-it plugin function. 22 | */ 23 | plugin() { 24 | return (md) => { 25 | // Register the parsing rule for the tag 26 | md.inline.ruler.before('emphasis', this.tag, (state, silent) => { 27 | const regex = this.regex(); 28 | const match = state.src.slice(state.pos, state.posMax).match(regex); 29 | 30 | if (!match) return false; // No match found 31 | if (silent) return true; // Validate without modifying state 32 | 33 | const token = state.push(`${this.tag}_details`, '', 0); 34 | this.process(match, token); 35 | 36 | state.pos += match[0].length; // Move the parser position forward 37 | return true; 38 | }); 39 | 40 | // Register the rendering rule for the tag 41 | md.renderer.rules[`${this.tag}_details`] = (tokens, idx) => { 42 | const token = tokens[idx]; 43 | return this.render(token); 44 | }; 45 | }; 46 | } 47 | 48 | /** 49 | * Returns the regex for matching the tag. 50 | * Subclasses should override this method. 51 | * @returns {RegExp} - The regex for matching the tag. 52 | */ 53 | regex() { 54 | throw new Error(`Subclass ${this.name} must implement 'regex()'`); 55 | } 56 | 57 | /** 58 | * Processes the regex match and populates the token with data. 59 | * Subclasses should override this method. 60 | * @param {Array} match - The regex match result. 61 | * @param {object} token - The token to populate. 62 | */ 63 | process(match, token) { 64 | throw new Error(`Subclass ${this.name} must implement 'process(match, token)'`); 65 | } 66 | 67 | /** 68 | * Renders the token to HTML. 69 | * Subclasses should override this method. 70 | * @param {object} token - The token to render. 71 | * @returns {string} - The rendered HTML string. 72 | */ 73 | render(token) { 74 | throw new Error(`Subclass ${this.name} must implement 'render(token)'`); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /comments/2.2.2.md: -------------------------------------------------------------------------------- 1 | ## Success Criterion 2.2.2 Pause, Stop, Hide 2 | 3 | (Level A) 4 | 5 | [wcag:pause-stop-hide] 6 | [wcag2ict:applying-sc-2-2-2-pause-stop-hide-to-non-web-documents-and-software] 7 | 8 | This applies directly as written, and as described in [Intent from Understanding Success Criterion 2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide#intent), replacing “Web page” with “page” and removing “See Conformance Requirement 5: Non-Interference” in Note 2 of the success criterion. 9 | 10 | With these substitutions, it would read: 11 | 12 | **2.2.2 Pause, Stop, Hide:** For moving, [blinking](https://www.w3.org/TR/WCAG22/#dfn-blinking), scrolling, or auto-updating information, all of the following are true: 13 | 14 | **Moving, blinking, scrolling** 15 | 16 | For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to [pause](https://www.w3.org/TR/WCAG22/#dfn-pause), stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is [essential](https://www.w3.org/TR/WCAG22/#dfn-essential); and 17 | 18 | **Auto-updating** 19 | 20 | For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential. 21 | 22 | [note:For requirements related to flickering or flashing content, refer to [Guideline 2.3](https://www.w3.org/TR/WCAG22/#seizures-and-physical-reactions).] 23 | 24 | [note:Since any content that does not meet this success criterion can interfere with a user's ability to use the whole **[page](#page)**, all content on the [page](#page) (whether it is used to meet other success criteria or not) must meet this success criterion.] 25 | 26 | [note:Content that is updated periodically by software or that is streamed to the user agent is not required to preserve or present information that is generated or received between the initiation of the pause and resuming presentation, as this may not be technically possible, and in many situations could be misleading to do so.] 27 | 28 | [note:An animation that occurs as part of a preload phase or similar situation can be considered essential if interaction cannot occur during that phase for all users and if not indicating progress could confuse users or cause them to think that content was frozen or broken.] 29 | 30 | [note:While the success criterion uses the term “information”, the WCAG 2 Intent section makes it clear that this is to be applied to all content. Any content, whether informative or decorative, that is updated automatically, blinks, or moves may create an accessibility barrier.] 31 | -------------------------------------------------------------------------------- /respec-config.js: -------------------------------------------------------------------------------- 1 | var respecConfig = { 2 | // embed RDFa data in the output 3 | trace: true, 4 | doRDFa: '1.1', 5 | includePermalinks: true, 6 | permalinkEdge: true, 7 | permalinkHide: false, 8 | noRecTrack: true, 9 | 10 | // specification status (e.g., WD, LC, NOTE, etc.). If in doubt use ED. 11 | specStatus: "ED", 12 | //crEnd: "2012-04-30", 13 | //perEnd: "2013-07-23", 14 | //publishDate: "2025-05-06", 15 | 16 | // the specifications short name, as in https://www.w3.org/TR/short-name/ 17 | shortName: "wcag2mobile-22", 18 | 19 | // if you wish the publication date to be other than today, set this 20 | // publishDate: "2009-08-06", 21 | copyrightStart: "2022", 22 | license: "document", 23 | 24 | // if there a publicly available Editors Draft, this is the link 25 | edDraftURI: "https://w3c.github.io/matf/", 26 | 27 | // if this is a LCWD, uncomment and set the end of its review period 28 | // lcEnd: "2012-02-21", 29 | 30 | // editors, add as many as you like 31 | // only "name" is required 32 | editors: [ 33 | { 34 | name: "Jan Jaap de Groot", 35 | mailto: "janjaap@abra.ai", 36 | company: "Abra", 37 | companyURI: "https://abra.ai", 38 | w3cid: 137024 39 | }, 40 | { 41 | name: "Jamie Herrera", 42 | company: "Invited Expert", 43 | w3cid: 106410 44 | }, 45 | { 46 | name: "Joe Humbert", 47 | company: "Invited Expert", 48 | w3cid: 128124 49 | }, 50 | { 51 | name: "Julian Kittelson-Aldred", 52 | company: "Invited Expert", 53 | w3cid: 152973 54 | }, 55 | { 56 | name: "Jon Gibbins", 57 | company: "Invited Expert", 58 | w3cid: 56789 59 | } 60 | ], 61 | 62 | formerEditors: [ 63 | { 64 | name: "Kim Patch", 65 | company: "Redstart Systems", 66 | }, 67 | { 68 | name: "Jeanne Spellman", 69 | company: "W3C", 70 | }, 71 | { 72 | name: "Kathy Wahlbin", 73 | company: "Interactive Accessibility", 74 | }, 75 | ], 76 | 77 | // authors, add as many as you like. 78 | // This is optional, uncomment if you have authors as well as editors. 79 | // only "name" is required. Same format as editors. 80 | 81 | //authors: [ 82 | // { name: "Your Name", url: "http://example.org/", 83 | // company: "Your Company", companyURI: "http://example.com/" }, 84 | //], 85 | 86 | /* 87 | alternateFormats: [ 88 | { uri: 'aria-diff.html', label: "Diff from Previous Recommendation" } , 89 | { uri: 'aria.ps', label: "PostScript version" }, 90 | { uri: 'aria.pdf', label: "PDF version" } 91 | ], 92 | */ 93 | 94 | // errata: 'https://www.w3.org/2010/02/rdfa/errata.html', 95 | 96 | group: "ag", 97 | github: "w3c/matf", 98 | 99 | // name (without the @w3.org) of the public mailing to which comments are due 100 | wgPublicList: "public-mobile-a11y-tf", 101 | 102 | maxTocLevel: 3, 103 | 104 | postProcess: [postRespec], 105 | }; 106 | -------------------------------------------------------------------------------- /sections/keyterms.md: -------------------------------------------------------------------------------- 1 | ## Key Terms 2 | 3 | WCAG2Mobile defines key glossary terms to refine the broader scope of WCAG2ICT for mobile applications. It introduces terms that do not exist in WCAG2ICT or WCAG but are important to define for a mobile application context. 4 | 5 | “Content” and “user agent” are glossary terms from WCAG2ICT that need to be interpreted significantly differently when applied to mobile applications. 6 | 7 | The glossary terms “document” and “software” in WCAG2ICT are replaced with the defined terms “screen” and “view”. The glossary terms “set of web pages”, “set of documents” and “set of software programs” are replaced with the defined term “set of screens”. 8 | 9 | The term “accessibility services of platform software”, introduced by WCAG2ICT, has been modified to reflect its different use in mobile applications. Additionally, “closed functionality” has a different meaning in the context of mobile applications. 10 | 11 | The remaining glossary terms from WCAG2ICT and WCAG 2 are addressed in [WCAG2ICT: Comments on Definitions in WCAG 2 Glossary](https://www.w3.org/TR/wcag2ict-22/#comments-on-definitions-in-wcag-2-glossary). 12 | 13 | Terms defined and used in WCAG2Mobile are applicable only to the interpretation of the guidance in this document. The particular definitions should not be interpreted as having applicability to situations beyond the scope of WCAG2Mobile. Further information on usage of these terms follows. 14 | 15 | [note:**Work in Progress**. See [Issues labeled as 'definition' on GitHub](https://github.com/w3c/matf/issues?q=is%3Aissue%20state%3Aopen%20label%3Adefinition).] 16 | 17 | ### Content 18 | 19 | The term **content**, as used in WCAG2Mobile, has the meaning below: 20 | 21 |
22 |
content
23 |
24 | (work in progress) 25 | 26 |
27 |
28 | 29 | ### Page 30 | 31 | The term **page**, as used in WCAG2Mobile, has the meaning below: 32 | 33 |
34 |
page
35 |
36 | A page is a distinct part of a mobile application that presents specific content or functionality and is rendered together with its associated resources. Users navigate between pages to complete actions or access different features. 37 |
38 |
39 | 40 | [note:Interface elements that rely on the underlying page for context (such as dialogs, modals, navigation menus, and similar components) are typically considered part of that page rather than standalone pages. However, interface elements that significantly change the majority of screen content or function as independent navigational destinations may be considered separate pages.] 41 | 42 | [example1:A native banking app's account overview screen that displays account balances, recent transactions and interactive charts. The screen includes native components for all interface elements, all rendered together as a single interface.] 43 | 44 | [example2:A mobile web banking app's account overview page that displays account balances, recent transactions and interactive charts. The page includes web components for all interface elements, all rendered together in the mobile browser.] 45 | 46 | [example3:A hybrid banking app's account overview screen that displays account balances, recent transactions and interactive charts. The screen includes native components for account balances and recent transactions, plus web components for interactive charts, all rendered together as a unified interface.] 47 | -------------------------------------------------------------------------------- /matf.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs/promises'; 2 | import path from 'path'; 3 | import semver from 'semver'; 4 | import markdownit from 'markdown-it'; 5 | import ejs from 'ejs'; 6 | import open from 'open'; 7 | 8 | import { ExamplePlugin } from './plugins/example.js'; 9 | import { GitHubPlugin } from './plugins/github.js'; 10 | import { NotePlugin } from './plugins/note.js'; 11 | import { WcagPlugin } from './plugins/wcag.js'; 12 | 13 | const root = process.cwd(); 14 | 15 | // Initialize `markdownit` with custom plugins 16 | const initMarkdown = async () => { 17 | console.log(`Initializing markdownit and custom plugins...`); 18 | 19 | return markdownit({ html: true }) 20 | .use(await ExamplePlugin.init()) 21 | .use(await GitHubPlugin.init('https://github.com/w3c/matf')) 22 | .use(await NotePlugin.init()) 23 | .use(await WcagPlugin.init('wcag', 'https://www.w3.org/TR/WCAG22/')) 24 | .use(await WcagPlugin.init('wcag2ict', 'https://www.w3.org/TR/wcag2ict-22/')); 25 | }; 26 | 27 | // Read files with given extension from given folder 28 | const readFiles = async (folder, extension) => { 29 | const directory = path.join(root, folder); 30 | const files = await fs.readdir(directory); 31 | 32 | return new Map( 33 | await Promise.all( 34 | files.map(async (file) => { 35 | if (path.extname(file) === extension) { 36 | return [ 37 | path.basename(file, extension), 38 | await fs.readFile(path.join(directory, file), 'utf8'), 39 | ]; 40 | } 41 | return undefined; // Skip files with a different extension 42 | }).filter(Boolean) // Remove undefined values 43 | ) 44 | ); 45 | }; 46 | 47 | // Render markdown files in the given folder 48 | const renderFiles = async (folder, md) => { 49 | console.log(`Rendering markdown files in '${folder}'...`); 50 | 51 | const files = await readFiles(folder, '.md'); 52 | console.log(`Rendering HTML for ${files.size} files...`); 53 | 54 | const result = {}; 55 | for (const [key, content] of files.entries()) { 56 | console.log(`Rendering HTML for ${key}...`); 57 | result[key] = md.render(content); 58 | } 59 | 60 | console.log(`Successfully rendered ${Object.keys(result).length} files to HTML`); 61 | return result; 62 | }; 63 | 64 | // Render files in `comments` and `sections` folders 65 | const renderFolders = async (md) => { 66 | // Render comments, sorted by semantic version (e.g. 1.4.10 after 1.4.9) 67 | const files = await renderFiles('comments', md); 68 | const comments = Object.keys(files).sort(semver.compare).map((key) => files[key]); 69 | 70 | // Render sections 71 | const sections = await renderFiles('sections', md); 72 | 73 | return { comments, sections }; 74 | }; 75 | 76 | // Render `index.ejs` template with data 77 | const renderTemplate = async (comments, sections) => { 78 | const templateFile = path.join(root, 'index.ejs'); 79 | console.log(`Rendering template ${templateFile}...`); 80 | const template = await fs.readFile(templateFile, 'utf8'); 81 | return ejs.render(template, { comments, sections }); 82 | }; 83 | 84 | // Write content to the given file 85 | const writeFile = async (name, content) => { 86 | const file = path.join(root, name); 87 | console.log(`Writing ${content.length} characters to ${file}`); 88 | await fs.writeFile(file, content, 'utf8'); 89 | return file; 90 | }; 91 | 92 | // Execute function 93 | const execute = async () => { 94 | try { 95 | // 1. Init markdown renderer 96 | const md = await initMarkdown(); 97 | // 2. Render comments and sections folders 98 | const { comments, sections } = await renderFolders(md); 99 | // 3. Render HTML from template 100 | const html = await renderTemplate(comments, sections); 101 | // 4. Write index.html file 102 | const indexFile = await writeFile('index.html', html); 103 | // 5. Open file in browser 104 | await open(indexFile, { wait: false }); 105 | 106 | console.log('Script completed successfully!'); 107 | } catch (error) { 108 | console.error(`Script encountered error: ${error}`); 109 | throw error; 110 | } 111 | }; 112 | execute(); 113 | -------------------------------------------------------------------------------- /sections/comparison.md: -------------------------------------------------------------------------------- 1 | ### Comparison with the 2015 Mobile Accessibility Working Draft Note 2 | 3 | In this Draft Note, most of the existing sections have undergone significant review and updates. The current Draft has been restructured to align with WCAG2ICT rather than continue with the structure and format of the 2015 Mobile Accessibility Mapping document. 4 | 5 | With this perspective in mind, the following list highlights where this current document differs from the 2015 Mobile Accessibility Mapping document to apply all success criteria of WCAG 2.0, WCAG 2.1, WCAG 2.2, and acknowledge the change to 4.1.1 Parsing to mobile applications: 6 | 7 | - New Background section to explain the changes in scope for the current document 8 | - Modifications to key terms introduced by WCAG2ICT: 9 | - closed functionality 10 | - menu-driven interface 11 | - platform software 12 | - virtual keyboard 13 | - New key terms introduced by WCAG2Mobile: 14 | - [note:Work In Progress. See [Key Terms](#key-terms) section.] 15 | - Inclusion of all WCAG 2.2 Level A and AA success criteria and not just those specifically affected by mobile phone usage. 16 | 17 | The prior 2015 Mobile Working Draft Note included specific guidance on the following WCAG 2.0 success criteria for mobile, primarily for a mobile web context: 18 | 19 | - Success Criterion 1.4.3 Contrast (Minimum) (Level AA) 20 | - Success Criterion 1.4.4 Resize Text (Level AA) 21 | - Success Criterion 1.4.6 Contrast (Enhanced) (Level AAA) 22 | - Success Criterion 2.1.1 Keyboard (Level A) 23 | - Success Criterion 2.1.2 No Keyboard Trap (Level A) 24 | - Success Criterion 2.4.3 Focus Order (Level A) 25 | - Success Criterion 2.4.4 Link Purpose (In Context) (Level A) 26 | - Success Criterion 2.4.7 Focus Visible (Level AA) 27 | - Success Criterion 2.4.9 Link Purpose (Link Only) (Level AA) 28 | - Success Criterion 3.2.3 Consistent Navigation (Level AA) 29 | - Success Criterion 3.2.4 Consistent Identification (Level AA) 30 | - Success Criterion 3.3.2 Labels or Instructions (Level A) 31 | - Success Criterion 3.3.5 Help (Level AAA) 32 | 33 | Supporting documentation in the Mobile Mapping Appendix included [WCAG 2.0 Techniques that Apply to Mobile](https://www.w3.org/WAI/GL/mobile-a11y-tf/MobileTechniques/) to address mobile web use cases for the rest of the WCAG 2.0 success criteria at Level A, Level AA, and Level AAA, as they were available in 2015 when the webpage was published. However, most listed techniques have limited application to native mobile applications and cross-platform frameworks like Flutter and React Native. 34 | 35 | This document includes all the relevant WCAG 2.1 Level A and AA success criteria and guidelines: 36 | 37 | - Success Criterion 1.3.4 Orientation 38 | - Success Criterion 1.3.5 Identify Input Purpose 39 | - Success Criterion 1.4.10 Reflow 40 | - Success Criterion 1.4.11 Non-text Contrast 41 | - Success Criterion 1.4.12 Text Spacing 42 | - Success Criterion 1.4.13 Content on Hover or Focus 43 | - Success Criterion 2.1.4 Character Key Shortcuts 44 | - Success Criterion 2.5.1 Pointer Gestures 45 | - Success Criterion 2.5.2 Pointer Cancellation 46 | - Success Criterion 2.5.3 Label in Name 47 | - Success Criterion 2.5.4 Motion Actuation 48 | - Success Criterion 4.1.3 Status Messages 49 | 50 | This document includes all the relevant WCAG 2.2 Level A and AA success criteria: 51 | 52 | - Success Criterion 2.4.11 Focus Not Obscured (Minimum) 53 | - Success Criterion 2.5.7 Dragging Movements 54 | - Success Criterion 2.5.8 Target Size (Minimum) 55 | - Success Criterion 3.2.6 Consistent Help 56 | - Success Criterion 3.3.7 Redundant Entry 57 | - Success Criterion 3.3.8 Accessible Authentication (Minimum) 58 | - Obsolete and Removed WCAG 2.2 success criteria that have errata for WCAG 2.0 and 2.1 — e.g., Success Criterion 4.1.1 Parsing 59 | 60 | New terms: 61 | 62 | - Added to Glossary from WCAG 2.1 and 2.2 (**Note:** Glossary items used only in AAA Success Criteria have not been included in this current edition): 63 | - dragging movements 64 | - encloses 65 | - focus indicator 66 | - minimum bounding box 67 | - pointer input 68 | - process 69 | - single pointer 70 | - state 71 | - status message 72 | - Added to Glossary from WCAG2ICT for any context: 73 | - cognitive function test 74 | - css pixel 75 | - down event 76 | - keyboard shortcut 77 | - style property 78 | - target 79 | - up event 80 | - Added to Glossary from WCAG2ICT for mobile context: 81 | - change of context 82 | - dragging movements 83 | - keyboard interface 84 | - large scale 85 | - set of web pages 86 | - set of non-web documents 87 | - set of software programs 88 | - set of web pages 89 | - user agent 90 | - user interface component 91 | - Added to Glossary specifically for WCAG2Mobile: 92 | - navigational mechanisms 93 | -------------------------------------------------------------------------------- /plugins/wcag.js: -------------------------------------------------------------------------------- 1 | import { Plugin } from './plugin.js'; 2 | import * as cheerio from 'cheerio'; 3 | import * as puppeteer from 'puppeteer'; 4 | 5 | /** 6 | * The WCAG plugin adds a new markdown tag which can render sections of WCAG. 7 | * For example, the `[wcag:status-messages]` markdown will render the `status-messages` section. 8 | */ 9 | export class WcagPlugin extends Plugin { 10 | constructor(tag, url, html) { 11 | super(tag); 12 | this.url = url; 13 | this.html = html; 14 | this.$ = cheerio.load(html); 15 | } 16 | 17 | /** 18 | * Initializes the WcagPlugin by fetching and preparing the HTML content from the provided URL. 19 | * @param {string} tag - The tag used in markdown (e.g., `wcag` or `wcag2ict`). 20 | * @param {string} url - The URL to fetch content from (e.g., `https://www.w3.org/TR/WCAG22/`). 21 | * @returns {Promise<{function}>} - An initialized `WcagPlugin` function. 22 | */ 23 | static async init(tag, url) { 24 | const html = await WcagPlugin.fetchHTML(url); 25 | return new WcagPlugin(tag, url, html).plugin(); 26 | } 27 | 28 | /** 29 | * Fetches the rendered HTML from the given URL using Puppeteer. 30 | * @param {string} url - The URL to fetch. 31 | * @returns {Promise} - The rendered HTML content. 32 | */ 33 | static async fetchHTML(url) { 34 | console.log(`Fetching rendered HTML for: ${url}`); 35 | const browser = await puppeteer.launch({ 36 | headless: true, 37 | args: ['--no-sandbox', '--disable-setuid-sandbox'] 38 | }); 39 | const page = await browser.newPage(); 40 | 41 | try { 42 | await page.goto(url, { waitUntil: ['load', 'networkidle0'] }); 43 | const html = await page.content(); 44 | await browser.close(); 45 | return html; 46 | } catch (error) { 47 | console.error(`Error fetching ${url}:`, error); 48 | await browser.close(); 49 | throw new Error(`rror loading content from ${url}: ${error}`); 50 | } 51 | } 52 | 53 | /** 54 | * Defines the regex for matching `[:]`. 55 | * @returns {RegExp} - The regex for matching the note syntax. 56 | */ 57 | regex() { 58 | return new RegExp(`\\[${this.tag}:([a-zA-Z0-9-_\\.]+)\\]`); 59 | } 60 | 61 | /** 62 | * Processes the matched content and populates the token with id, link, header and content. 63 | * @param {Array} match - The regex match result. 64 | * @param {object} token - The token to populate. 65 | */ 66 | process(match, token) { 67 | const id = match[1]; 68 | const section = this.extract(id); 69 | 70 | token.id = id; 71 | token.link = `${this.url}#${id}`; 72 | token.header = section.header; 73 | token.content = section.content; 74 | } 75 | 76 | /** 77 | * Renders the token into HTML with an expand/collapse component. 78 | * @param {object} token - The token to render. 79 | * @returns {string} - The rendered HTML string. 80 | */ 81 | render(token) { 82 | // Add the tag as a prefix to avoid id conflicts 83 | const $content = cheerio.load(token.content, null, false); 84 | $content('[id]').each((_, element) => { 85 | const currentId = $content(element).attr('id'); 86 | $content(element).attr('id', `${this.tag}-${currentId}`); 87 | }); 88 | token.content = $content.html(); 89 | 90 | return ` 91 |
92 | 93 | ${this.tag.toUpperCase()}: ${token.header} 94 | 95 |
96 |
${token.content}
97 |
98 | 103 |
104 | `; 105 | } 106 | 107 | /** 108 | * Renders the token into HTML by converting markdown to HTML for the content. 109 | * @param {string} id - The identifier for the section. 110 | * @returns {object} - An object containing the `header` and `content` of the section. 111 | */ 112 | extract(id) { 113 | const $section = this.$(`#${id}`); 114 | if (!$section.length) { 115 | throw new Error(`Section not found: ${id}`); 116 | } 117 | 118 | const header = $section.find('h1, h2, h3, h4, h5, h6').first().text(); 119 | $section.find('.header-wrapper, .doclinks, .conformance-level').remove(); 120 | $section.find('a').each((_, anchor) => { 121 | const href = this.$(anchor).attr('href'); 122 | if (href) { 123 | this.$(anchor).attr('target', '_blank'); 124 | if (!/^[\w]+:\/\//.test(href)) { 125 | const fullUrl = new URL(href, this.url).href; 126 | this.$(anchor).attr('href', fullUrl); 127 | } 128 | } 129 | }); 130 | 131 | return { 132 | header, 133 | content: $section.html(), 134 | }; 135 | } 136 | } 137 | --------------------------------------------------------------------------------