├── .github ├── pull_request_template.md └── workflows │ ├── build.yml │ └── deploy.yml ├── .gitignore ├── .ruby-version ├── .template_version ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── config.rb ├── config └── tech-docs.yml └── source ├── accessibility.html.md.erb ├── all.html.md.erb ├── checklist.html.md.erb ├── code.html.md.erb ├── community.html.md.erb ├── content.html.md.erb ├── design.html.md.erb ├── index.html.md.erb ├── javascripts ├── application.js └── govuk_frontend.js ├── layouts └── custom.erb ├── partials └── _internal-banner.html.erb ├── prototype.html.md.erb ├── sc ├── 1.1.1.html.md.erb ├── 1.2.1.html.md.erb ├── 1.2.2.html.md.erb ├── 1.2.3.html.md.erb ├── 1.2.4.html.md.erb ├── 1.2.5.html.md.erb ├── 1.3.1.html.md.erb ├── 1.3.2.html.md.erb ├── 1.3.3.html.md.erb ├── 1.3.4.html.md.erb ├── 1.3.5.html.md.erb ├── 1.4.1.html.md.erb ├── 1.4.10.html.md.erb ├── 1.4.11.html.md.erb ├── 1.4.12.html.md.erb ├── 1.4.13.html.md.erb ├── 1.4.2.html.md.erb ├── 1.4.3.html.md.erb ├── 1.4.4.html.md.erb ├── 1.4.5.html.md.erb ├── 2.1.1.html.md.erb ├── 2.1.2.html.md.erb ├── 2.1.4.html.md.erb ├── 2.2.1.html.md.erb ├── 2.2.2.html.md.erb ├── 2.3.1.html.md.erb ├── 2.4.1.html.md.erb ├── 2.4.2.html.md.erb ├── 2.4.3.html.md.erb ├── 2.4.4.html.md.erb ├── 2.4.5.html.md.erb ├── 2.4.6.html.md.erb ├── 2.4.7.html.md.erb ├── 2.5.1.html.md.erb ├── 2.5.2.html.md.erb ├── 2.5.3.html.md.erb ├── 2.5.4.html.md.erb ├── 3.1.1.html.md.erb ├── 3.1.2.html.md.erb ├── 3.2.1.html.md.erb ├── 3.2.2.html.md.erb ├── 3.2.3.html.md.erb ├── 3.2.4.html.md.erb ├── 3.3.1.html.md.erb ├── 3.3.2.html.md.erb ├── 3.3.3.html.md.erb ├── 3.3.4.html.md.erb ├── 4.1.1.html.md.erb ├── 4.1.2.html.md.erb └── 4.1.3.html.md.erb └── stylesheets ├── print.css.scss ├── screen-old-ie.css.scss └── screen.css.scss /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build the WCAG Primer 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - main 7 | - master 8 | 9 | jobs: 10 | # A really basic check to see if this builds okay. 11 | only-build: 12 | runs-on: ubuntu-latest 13 | permissions: 14 | contents: write 15 | steps: 16 | - uses: actions/checkout@v2 17 | - uses: ruby/setup-ruby@v1 18 | with: 19 | bundler-cache: true 20 | - run: bundle exec middleman build --clean 21 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and deploy the WCAG Primer 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - master 8 | 9 | jobs: 10 | build-and-deploy: 11 | runs-on: ubuntu-latest 12 | permissions: 13 | contents: write 14 | steps: 15 | - uses: actions/checkout@v2 16 | with: 17 | fetch-depth: 0 18 | - uses: ruby/setup-ruby@v1 19 | with: 20 | bundler-cache: true 21 | - run: bundle exec middleman build --clean 22 | - name: Deploy to GitHub pages 23 | uses: peaceiris/actions-gh-pages@v3 24 | with: 25 | commit_message: "Site updated to" # GITHUB_SHA will be appended to the 26 | # end of this message. 27 | github_token: ${{ secrets.GITHUB_TOKEN }} 28 | publish_dir: ./build 29 | user_email: github-actions[bot]@users.noreply.github.com 30 | user_name: github-actions[bot] 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore cache 14 | /.sass-cache 15 | /.cache 16 | 17 | # Ignore .DS_store file 18 | .DS_Store 19 | 20 | # Ignore JetBrains .idea folder 21 | .idea/ 22 | 23 | Staticfile.auth 24 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 3.2.2 2 | -------------------------------------------------------------------------------- /.template_version: -------------------------------------------------------------------------------- 1 | --- 2 | :remote: https://github.com/alphagov/tech-docs-template.git 3 | :revision: cd45626149de7b9ee8f72d2f14e82b381b7df1d5 4 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # If you do not have OpenSSL installed, change 2 | # the following line to use 'http://' 3 | source 'https://rubygems.org' 4 | 5 | # For faster file watcher updates on Windows: 6 | gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw] 7 | 8 | # Windows does not come with time zone data 9 | gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby] 10 | 11 | # Include the tech docs gem 12 | gem 'govuk_tech_docs' 13 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (7.0.8.7) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (>= 1.6, < 2) 7 | minitest (>= 5.1) 8 | tzinfo (~> 2.0) 9 | addressable (2.8.7) 10 | public_suffix (>= 2.0.2, < 7.0) 11 | autoprefixer-rails (10.4.19.0) 12 | execjs (~> 2) 13 | backports (3.25.0) 14 | base64 (0.2.0) 15 | bigdecimal (3.1.8) 16 | chronic (0.10.2) 17 | chunky_png (1.4.0) 18 | coffee-script (2.4.1) 19 | coffee-script-source 20 | execjs 21 | coffee-script-source (1.12.2) 22 | commonmarker (0.23.11) 23 | compass (1.0.3) 24 | chunky_png (~> 1.2) 25 | compass-core (~> 1.0.2) 26 | compass-import-once (~> 1.0.5) 27 | rb-fsevent (>= 0.9.3) 28 | rb-inotify (>= 0.9) 29 | sass (>= 3.3.13, < 3.5) 30 | compass-core (1.0.3) 31 | multi_json (~> 1.0) 32 | sass (>= 3.3.0, < 3.5) 33 | compass-import-once (1.0.5) 34 | sass (>= 3.2, < 3.5) 35 | concurrent-ruby (1.3.4) 36 | contracts (0.16.1) 37 | csv (3.3.1) 38 | dotenv (3.1.6) 39 | em-websocket (0.5.3) 40 | eventmachine (>= 0.12.9) 41 | http_parser.rb (~> 0) 42 | erubis (2.7.0) 43 | eventmachine (1.2.7) 44 | execjs (2.10.0) 45 | fast_blank (1.0.1) 46 | fastimage (2.3.1) 47 | ffi (1.17.0) 48 | google-protobuf (4.29.1) 49 | bigdecimal 50 | rake (>= 13) 51 | govuk_tech_docs (4.1.1) 52 | autoprefixer-rails (~> 10.2) 53 | base64 54 | bigdecimal 55 | chronic (~> 0.10.2) 56 | csv 57 | haml (~> 6.0) 58 | middleman (~> 4.0) 59 | middleman-autoprefixer (~> 2.10) 60 | middleman-compass (~> 4.0) 61 | middleman-livereload 62 | middleman-search-gds 63 | middleman-sprockets (~> 4.0.0) 64 | middleman-syntax (~> 3.4) 65 | mutex_m 66 | nokogiri 67 | openapi3_parser (~> 0.9.0) 68 | redcarpet (~> 3.6) 69 | sassc-embedded (~> 1.78.0) 70 | terser (~> 1.2.3) 71 | haml (6.3.0) 72 | temple (>= 0.8.2) 73 | thor 74 | tilt 75 | hamster (3.0.0) 76 | concurrent-ruby (~> 1.0) 77 | hashie (3.6.0) 78 | http_parser.rb (0.8.0) 79 | i18n (1.6.0) 80 | concurrent-ruby (~> 1.0) 81 | kramdown (2.5.1) 82 | rexml (>= 3.3.9) 83 | listen (3.9.0) 84 | rb-fsevent (~> 0.10, >= 0.10.3) 85 | rb-inotify (~> 0.9, >= 0.9.10) 86 | memoist (0.16.2) 87 | middleman (4.5.1) 88 | coffee-script (~> 2.2) 89 | haml (>= 4.0.5) 90 | kramdown (>= 2.3.0) 91 | middleman-cli (= 4.5.1) 92 | middleman-core (= 4.5.1) 93 | middleman-autoprefixer (2.10.0) 94 | autoprefixer-rails (>= 9.1.4) 95 | middleman-core (>= 3.3.3) 96 | middleman-cli (4.5.1) 97 | thor (>= 0.17.0, < 1.3.0) 98 | middleman-compass (4.0.1) 99 | compass (>= 1.0.0, < 2.0.0) 100 | middleman-core (>= 4.0.0) 101 | middleman-core (4.5.1) 102 | activesupport (>= 6.1, < 7.1) 103 | addressable (~> 2.4) 104 | backports (~> 3.6) 105 | bundler (~> 2.0) 106 | contracts (~> 0.13, < 0.17) 107 | dotenv 108 | erubis 109 | execjs (~> 2.0) 110 | fast_blank 111 | fastimage (~> 2.0) 112 | hamster (~> 3.0) 113 | hashie (~> 3.4) 114 | i18n (~> 1.6.0) 115 | listen (~> 3.0) 116 | memoist (~> 0.14) 117 | padrino-helpers (~> 0.15.0) 118 | parallel 119 | rack (>= 1.4.5, < 3) 120 | sassc (~> 2.0) 121 | servolux 122 | tilt (~> 2.0.9) 123 | toml 124 | uglifier (~> 3.0) 125 | webrick 126 | middleman-livereload (3.4.7) 127 | em-websocket (~> 0.5.1) 128 | middleman-core (>= 3.3) 129 | rack-livereload (~> 0.3.15) 130 | middleman-search-gds (0.11.2) 131 | execjs (~> 2.6) 132 | middleman-core (>= 3.2) 133 | nokogiri (~> 1.6) 134 | middleman-sprockets (4.0.0) 135 | middleman-core (~> 4.0) 136 | sprockets (>= 3.0) 137 | middleman-syntax (3.4.0) 138 | middleman-core (>= 3.2) 139 | rouge (~> 3.2) 140 | mini_portile2 (2.8.8) 141 | minitest (5.25.4) 142 | multi_json (1.15.0) 143 | mutex_m (0.3.0) 144 | nokogiri (1.18.8) 145 | mini_portile2 (~> 2.8.2) 146 | racc (~> 1.4) 147 | openapi3_parser (0.9.2) 148 | commonmarker (~> 0.17) 149 | padrino-helpers (0.15.3) 150 | i18n (>= 0.6.7, < 2) 151 | padrino-support (= 0.15.3) 152 | tilt (>= 1.4.1, < 3) 153 | padrino-support (0.15.3) 154 | parallel (1.26.3) 155 | parslet (2.0.0) 156 | public_suffix (6.0.1) 157 | racc (1.8.1) 158 | rack (2.2.14) 159 | rack-livereload (0.3.17) 160 | rack 161 | rake (13.2.1) 162 | rb-fsevent (0.11.2) 163 | rb-inotify (0.11.1) 164 | ffi (~> 1.0) 165 | redcarpet (3.6.0) 166 | rexml (3.4.0) 167 | rouge (3.30.0) 168 | sass (3.4.25) 169 | sass-embedded (1.83.0) 170 | google-protobuf (~> 4.28) 171 | rake (>= 13) 172 | sassc (2.4.0) 173 | ffi (~> 1.9) 174 | sassc-embedded (1.78.0) 175 | sass-embedded (~> 1.78) 176 | servolux (0.13.0) 177 | sprockets (4.2.1) 178 | concurrent-ruby (~> 1.0) 179 | rack (>= 2.2.4, < 4) 180 | temple (0.10.3) 181 | terser (1.2.4) 182 | execjs (>= 0.3.0, < 3) 183 | thor (1.2.2) 184 | tilt (2.0.11) 185 | toml (0.3.0) 186 | parslet (>= 1.8.0, < 3.0.0) 187 | tzinfo (2.0.6) 188 | concurrent-ruby (~> 1.0) 189 | uglifier (3.2.0) 190 | execjs (>= 0.3.0, < 3) 191 | webrick (1.9.1) 192 | 193 | PLATFORMS 194 | ruby 195 | 196 | DEPENDENCIES 197 | govuk_tech_docs 198 | tzinfo-data 199 | wdm (~> 0.1.0) 200 | 201 | BUNDLED WITH 202 | 2.4.19 203 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (C) 2024 Crown Copyright (Government Digital Service) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 9 | of the Software, and to permit persons to whom the Software is furnished to do 10 | so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WCAG Primer 2 | 3 | A primer to help people get up to speed quickly with the Web Content Accessibility Guidelines. 4 | 5 | Contains: 6 | * an overview of WCAG. 7 | * information for each success crteria - including an understandable explanation, details of what is required, example of common issues and links to further content 8 | * the most relevant success criteria for content, design and code 9 | * some questions to help you evaluate if a digital product meets WCAG 10 | 11 | https://alphagov.github.io/wcag-primer/ 12 | 13 | # Contributing 14 | 15 | This WCAG Primer is for everyone. You can help make sure it stays up to date by: 16 | 17 | 1. Making changes to the [WCAG primer on Github](https://github.com/alphagov/wcag-primer). 18 | 19 | To contribute to this repository, you first need to [fork it](https://help.github.com/en/articles/fork-a-repo)* You can raise PRs from your forked copy. 20 | 21 | 2. Emailing the Accessibility Capability team at with suggestions 22 | 23 | This repo uses Middleman. To test changes locally, run: 24 | 25 | ```bundle exec middleman server``` 26 | 27 | The text lives in the `source/sc` folder, and is in markdown format. 28 | 29 | ## Deploying changes 30 | 31 | This project is continuously deployed - merging a pull request into main will 32 | cause the site to be built and any changes added to the `gh-pages` branch. 33 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | require 'govuk_tech_docs' 2 | 3 | GovukTechDocs.configure(self) 4 | 5 | # use custom layout file 6 | set :layout, 'custom' 7 | 8 | # use relative paths for links and sources 9 | activate :relative_assets 10 | set :relative_links, true 11 | -------------------------------------------------------------------------------- /config/tech-docs.yml: -------------------------------------------------------------------------------- 1 | # Host to use for canonical URL generation (without trailing slash) 2 | host: 3 | 4 | # Header-related options 5 | show_govuk_logo: false 6 | service_name: WCAG 2.1 Primer 7 | service_link: /index.html 8 | phase: Alpha 9 | 10 | # Links to show on right-hand-side of header 11 | header_links: 12 | Overview: /index.html 13 | All requirements: /all.html 14 | Content: /content.html 15 | Design: /design.html 16 | Code: /code.html 17 | Checklist: /checklist.html 18 | Community: /community.html 19 | footer_links: 20 | Accessibility: /accessibility.html 21 | 22 | # Enables search functionality. This indexes pages only and is not recommended for single-page sites. 23 | enable_search: false 24 | 25 | # Tracking ID from Google Analytics (e.g. UA-XXXX-Y) 26 | ga_tracking_id: 27 | 28 | # Enable multipage navigation in the sidebar 29 | multipage_nav: false 30 | 31 | # Enable collapsible navigation in the sidebar 32 | collapsible_nav: false 33 | 34 | # Table of contents depth – how many levels to include in the table of contents. 35 | # If your ToC is too long, reduce this number and we'll only show higher-level 36 | # headings. 37 | max_toc_heading_level: 4 38 | 39 | # Prevent robots from indexing (e.g. whilst in development) 40 | prevent_indexing: true 41 | 42 | # Show GitHub source/issue/repo links at the bottom of each page 43 | show_contribution_banner: true 44 | github_repo: alphagov/wcag-primer 45 | -------------------------------------------------------------------------------- /source/accessibility.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Accessibility statement for the WCAG 2.1 Primer 3 | last_reviewed_on: 2020-09-04 4 | review_in: 6 months 5 | hide_in_navigation: true 6 | --- 7 | 8 | # <%= current_page.data.title %> 9 | 10 | This accessibility statement applies to the WCAG 2.1 Primer at [https://alphagov.github.io/wcag-primer/](https://alphagov.github.io/wcag-primer/). 11 | 12 | This website is run by the Accessibility team at the Government Digital Service (GDS). We want as many people as possible to be able to use this website. For example, that means you should be able to: 13 | 14 | + change colours, contrast levels and fonts 15 | + zoom in up to 300% without problems 16 | + navigate most of the website using just a keyboard 17 | + navigate most of the website using speech recognition software 18 | + listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver) 19 | 20 | We’ve also made the website text as simple as possible to understand. 21 | 22 | AbilityNet has advice on [making your device easier to use](https://mcmw.abilitynet.org.uk/) if you have a disability. 23 | 24 | ## How accessible this website is 25 | 26 | We know some parts of this website are not fully accessible. 27 | 28 | There are issues caused by our Technical Documentation Template. 29 | 30 | ## Feedback and contact information 31 | 32 | If you need any part of this service in a different format like large print, audio recording or braille, email [accessibility@digital.cabinet-office.gov.uk](mailto:accessibility@digital.cabinet-office.gov.uk). 33 | 34 | We’ll aim to get back to you within 3 working days. 35 | 36 | ## Reporting accessibility problems with this website 37 | 38 | We’re always looking to improve the accessibility of this website. If you find any problems not listed on this page or think we’re not meeting accessibility requirements, email [accessibility@digital.cabinet-office.gov.uk](mailto:accessibility@digital.cabinet-office.gov.uk). 39 | 40 | ## Enforcement procedure 41 | 42 | The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 43 | (the ‘accessibility regulations’). If you’re not happy with how we respond to your complaint, [contact the Equality Advisory and Support Service (EASS)](https://www.equalityadvisoryservice.com/). 44 | 45 | ## Technical information about this website’s accessibility 46 | 47 | GDS is committed to making its website accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. 48 | 49 | ## Compliance status 50 | 51 | This website is partially compliant with the [Web Content Accessibility Guidelines version 2.1](https://www.w3.org/TR/WCAG21/) AA standard, due to the non-compliances listed below. 52 | 53 | ### Non-accessible content 54 | 55 | The content listed below is non-accessible for the following reasons. 56 | 57 | #### Non-compliance with the accessibility regulations 58 | 59 | Some parts of this website are not fully accessible because of [issues caused by our Technical Documentation Template](https://tdt-documentation.london.cloudapps.digital/accessibility/#using-the-technical-documentation-template-for-your-own-documentation). 60 | 61 | ## How we tested this website 62 | 63 | We last tested this website for accessibility issues in September 2020. 64 | 65 | We used manual and automated tests to look for issues such as: 66 | 67 | - lack of keyboard accessibility 68 | - link text that’s not descriptive 69 | - non-unique or non-hierarchical headings 70 | - italics, bold and block capital formatting 71 | - inaccessible formatting in general 72 | - inaccessible language 73 | - inaccessible diagrams or images 74 | - lack of colour contrast for text, important graphics and controls 75 | - images not having meaningful alt text 76 | - problems when using assistive technologies such as screen readers and screen magnifiers 77 | 78 | ## What we’re doing to improve accessibility 79 | 80 | We plan to fix the accessibility issues with the Technical Documentation Template by the end of March 2021. 81 | 82 | ## Preparation of this accessibility statement 83 | 84 | This statement was prepared on 10 September 2020. It was last reviewed on 31 December 2020. 85 | 86 | This website was last tested in September 2020. The test was carried out by the technical writing team at GDS. We used the [WAVE Web Accessibility Evaluation Tool](https://wave.webaim.org/) and a checklist we created with the help of the GDS accessibility team. We tested a selection of the website's pages. 87 | -------------------------------------------------------------------------------- /source/all.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: All WCAG 2.1 A and AA Success Criteria 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | Here are the details of all 50 success criteria. 8 | 30 are level A and 20 are level AA. 9 | 10 | ## Perceivable 11 | 12 | ### 1.1 Text Alternatives 13 | 14 | * <%= link_to "1.1.1 Non-text Content (A)", "/sc/1.1.1.html" %> 15 | 16 | ### 1.2 Time-based Media 17 | 18 | * <%= link_to "1.2.1 Audio-only and Video-only (A)", "/sc/1.2.1.html" %> 19 | * <%= link_to "1.2.2 Captions (Prerecorded) (A)", "/sc/1.2.2.html" %> 20 | * <%= link_to "1.2.3 Audio Description or Media Alternative (A)", "/sc/1.2.3.html" %> 21 | * <%= link_to "1.2.4 Captions (Live) (AA)", "/sc/1.2.4.html" %> 22 | * <%= link_to "1.2.5 Audio Description (Prerecorded) (AA)", "/sc/1.2.5.html" %> 23 | 24 | ### 1.3 Adaptable 25 | 26 | * <%= link_to "1.3.1 Info and Relationships (A)", "/sc/1.3.1.html" %> 27 | * <%= link_to "1.3.2 Meaningful Sequence (A)", "/sc/1.3.2.html" %> 28 | * <%= link_to "1.3.3 Sensory Characteristics (A)", "/sc/1.3.3.html" %> 29 | * <%= link_to "1.3.4 Orientation (A)", "/sc/1.3.4.html" %> 30 | * <%= link_to "1.3.5 Identify Input Purpose (AA)", "/sc/1.3.5.html" %> 31 | 32 | ### 1.4 Distinguishable 33 | 34 | * <%= link_to "1.4.1 Use of Colour (A)", "/sc/1.4.1.html" %> 35 | * <%= link_to "1.4.2 Audio Control (A)", "/sc/1.4.2.html" %> 36 | * <%= link_to "1.4.3 Contrast (Minimum) (AA)", "/sc/1.4.3.html" %> 37 | * <%= link_to "1.4.4 Resize Text (AA)", "/sc/1.4.4.html" %> 38 | * <%= link_to "1.4.5 Images of Text (AA)", "/sc/1.4.5.html" %> 39 | * <%= link_to "1.4.10 Reflow (AA)", "/sc/1.4.10.html" %> 40 | * <%= link_to "1.4.11 Non-text Contrast (AA)", "/sc/1.4.11.html" %> 41 | * <%= link_to "1.4.12 Text Spacing (AA)", "/sc/1.4.12.html" %> 42 | * <%= link_to "1.4.13 Content on Hover or Focus (AA)", "/sc/1.4.13.html" %> 43 | 44 | ## Operable 45 | 46 | ### 2.1 Keyboard Accessible 47 | 48 | * <%= link_to "2.1.1 Keyboard (A)", "/sc/2.1.1.html" %> 49 | * <%= link_to "2.1.2 No Keyboard Trap (A)", "/sc/2.1.2.html" %> 50 | * <%= link_to "2.1.4 Character Key Shortcuts (A)", "/sc/2.1.4.html" %> 51 | 52 | ### 2.2 Enough Time 53 | 54 | * <%= link_to "2.2.1 Timing Adjustable (A)", "/sc/2.2.1.html" %> 55 | * <%= link_to "2.2.2 Pause, Stop, Hide (A)", "/sc/2.2.2.html" %> 56 | 57 | ### 2.3 Seizures 58 | 59 | * <%= link_to "2.3.1 Three Flashes or Below Threshold (A)", "/sc/2.3.1.html" %> 60 | 61 | ### 2.4 Navigable 62 | 63 | * <%= link_to "2.4.1 Bypass Blocks (A)", "/sc/2.4.1.html" %> 64 | * <%= link_to "2.4.2 Page Titled (A)", "/sc/2.4.2.html" %> 65 | * <%= link_to "2.4.3 Focus Order (A)", "/sc/2.4.3.html" %> 66 | * <%= link_to "2.4.4 Link Purpose (In Context) (A)", "/sc/2.4.4.html" %> 67 | * <%= link_to "2.4.5 Multiple Ways (AA)", "/sc/2.4.5.html" %> 68 | * <%= link_to "2.4.6 Headings and Labels (AA)", "/sc/2.4.6.html" %> 69 | * <%= link_to "2.4.7 Focus Visible (AA)", "/sc/2.4.7.html" %> 70 | 71 | ### 2.5 Input Modalities 72 | 73 | * <%= link_to "2.5.1 Pointer Gestures (A)", "/sc/2.5.1.html" %> 74 | * <%= link_to "2.5.2 Pointer Cancellation (A)", "/sc/2.5.2.html" %> 75 | * <%= link_to "2.5.3 Label in Name (A)", "/sc/2.5.3.html" %> 76 | * <%= link_to "2.5.4 Motion Actuation (A)", "/sc/2.5.4.html" %> 77 | 78 | ## Understandable 79 | 80 | ### 3.1 Readable 81 | 82 | * <%= link_to "3.1.1 Language of Page (A)", "/sc/3.1.1.html" %> 83 | * <%= link_to "3.1.2 Language of Parts (AA)", "/sc/3.1.2.html" %> 84 | 85 | ### 3.2 Predictable 86 | 87 | * <%= link_to "3.2.1 On Focus (A)", "/sc/3.2.1.html" %> 88 | * <%= link_to "3.2.2 On Input (A)", "/sc/3.2.2.html" %> 89 | * <%= link_to "3.2.3 Consistent Navigation (AA)", "/sc/3.2.3.html" %> 90 | * <%= link_to "3.2.4 Consistent Identification (AA)", "/sc/3.2.4.html" %> 91 | 92 | ### 3.3 Input Assistance 93 | 94 | * <%= link_to "3.3.1 Error Identification (A)", "/sc/3.3.1.html" %> 95 | * <%= link_to "3.3.2 Labels or Instructions (A)", "/sc/3.3.2.html" %> 96 | * <%= link_to "3.3.3 Error Suggestion (AA)", "/sc/3.3.3.html" %> 97 | * <%= link_to "3.3.4 Error Prevention (Legal, Financial, Data) (AA)", "/sc/3.3.4.html" %> 98 | 99 | ## Robust 100 | 101 | ### 4.1 Compatible 102 | 103 | * <%= link_to "4.1.1 Parsing (A)", "/sc/4.1.1.html" %> 104 | * <%= link_to "4.1.2 Name, Role, Value (A)", "/sc/4.1.2.html" %> 105 | * <%= link_to "4.1.3 Status Messages (AA)", "/sc/4.1.3.html" %> 106 | -------------------------------------------------------------------------------- /source/checklist.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Checklist 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | To meet WCAG 2.1 to level AA you must be able to answer YES or Not Applicable to all of the following questions. 8 | 9 | Answering NO means that you are not meeting WCAG and your content will have barriers that will prevent some users, especially disabled users and older people from accessing it. 10 | 11 | ## Perceivable 12 | * Do all images have an appropriate text equivalent? Is essential visual information also available as text? 13 | * Do all audio files have a transcript? Is essential audio information available as text? 14 | * Do all videos have captions that are synchronised with the audio? 15 | * Does video that includes important visual information have an audio description? 16 | * Is all content structure that is communicated visually available to assistive technologies? 17 | * If styling is removed is the content in a logical order? 18 | * Have you avoided using visual characteristics to communicate information? 19 | * Have you avoided using colour as the only way to convey some information? 20 | * Can users stop audio that auto plays? 21 | * Does all text have sufficient contrast against the background colour? 22 | * Is the content fully usable when text is enlarged up to 200%? 23 | * Have you avoided using images of text? 24 | * Can users flip the content horizontally and vertically? 25 | * Have you added HTML autocomplete tokens to any forms collecting information about the user? 26 | * Does the page content resize to a single column with no horizontal and vertical scrolling? 27 | * Do all important graphical objects, interface components, and states have a colour contrast of 3:1? 28 | * Can line height, spacing between paragraphs and letter and word spacing be changed without breaking anything? 29 | * Where extra content is shown or hidden on focus, can it be dismissed, interacted with (and not disappear when the user moves to it) and will stay visible until dismissed by the user? 30 | 31 | ## Operable 32 | * Can all menus, links, buttons, and other controls be operated by keyboard? 33 | * Do pages that have time limits include mechanisms for adjusting those limits? 34 | * Can any content that moves or auto updates be stopped? 35 | * Have you avoided using content that flashes or flickers? 36 | * Can blocks of links and other interactive elements be bypassed by keyboard users? 37 | * Does each page have a unique title that indicates its purpose and context? 38 | * When using a keyboard to move through a page does the order make sense? 39 | * Is the purpose of every link clear from its link text? 40 | * Does the website have two or more ways of finding content, such as a navigation menu, search feature, or site map? 41 | * Are headings and labels clear and descriptive? 42 | * When using a keyboard to move through a page can you tell where you are? 43 | * Do you have shortcuts triggered by only one letter or character? If so can they be turned off or remapped by the user? 44 | * Does some of your site functionality need several fingers or complex gestures to operate it? If so, can the same functionality be used with just one finger, single taps or clicks? 45 | * Does some of your site functionality work using a single point (e.g fingertip)? If so, have you ensured it does not get triggered the moment it is touched? 46 | * On forms and other components is the accessible name or label the same as any on-screen text? 47 | * Does your site respond to motion or movement? If so, can responding to motion or movement be disabled, and your site still be fully usable? 48 | 49 | ## Understandable 50 | * Has the language of the web page or document (or individual parts of a multilingual document) been defined? 51 | * Have you avoided links, controls, or form fields that automatically trigger a change in context? 52 | * Does the website include consistent navigation? 53 | * Are features with the same functionality labelled consistently? 54 | * Do forms provide helpful, understandable error and verification messages? 55 | 56 | ## Robust 57 | * Is the web page coded using valid HTML? 58 | * Do all interactive components have an accessible name and role, and when required state? Has the correct ARIA markup been used and does it validate? 59 | * Are status messages and updates given appropriate roles that can be understood by AT, without receiving focus? 60 | 61 | -------------------------------------------------------------------------------- /source/code.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Code related WCAG 2.1 A and AA Success Criteria 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | Here are the details of the success criteria that are related to code. 8 | 9 | ## Perceivable 10 | 11 | ### 1.1 Text Alternatives 12 | 13 | * <%= link_to "1.1.1 Non-text Content (A)", "/sc/1.1.1.html" %> 14 | 15 | ### 1.3 Adaptable 16 | 17 | * <%= link_to "1.3.1 Info and Relationships (A)", "/sc/1.3.1.html" %> 18 | * <%= link_to "1.3.2 Meaningful Sequence (A)", "/sc/1.3.2.html" %> 19 | * <%= link_to "1.3.4 Orientation (A)", "/sc/1.3.4.html" %> 20 | * <%= link_to "1.3.5 Identify Input Purpose (AA)", "/sc/1.3.5.html" %> 21 | 22 | ### 1.4 Distinguishable 23 | 24 | * <%= link_to "1.4.4 Resize Text (AA)", "/sc/1.4.4.html" %> 25 | * <%= link_to "1.4.5 Images of Text (AA)", "/sc/1.4.5.html" %> 26 | * <%= link_to "1.4.10 Reflow (AA)", "/sc/1.4.10.html" %> 27 | * <%= link_to "1.4.11 Non-text Contrast (AA)", "/sc/1.4.11.html" %> 28 | * <%= link_to "1.4.12 Text Spacing (AA)", "/sc/1.4.12.html" %> 29 | * <%= link_to "1.4.13 Content on Hover or Focus (AA)", "/sc/1.4.13.html" %> 30 | 31 | ## Operable 32 | 33 | ### 2.1 Keyboard Accessible 34 | 35 | * <%= link_to "2.1.1 Keyboard (A)", "/sc/2.1.1.html" %> 36 | * <%= link_to "2.1.2 No Keyboard Trap (A)", "/sc/2.1.2.html" %> 37 | * <%= link_to "2.1.4 Character Key Shortcuts (A)", "/sc/2.1.4.html" %> 38 | 39 | ### 2.2 Enough Time 40 | 41 | * <%= link_to "2.2.1 Timing Adjustable (A)", "/sc/2.2.1.html" %> 42 | * <%= link_to "2.2.2 Pause, Stop, Hide (A)", "/sc/2.2.2.html" %> 43 | 44 | ### 2.4 Navigable 45 | 46 | * <%= link_to "2.4.1 Bypass Blocks (A)", "/sc/2.4.1.html" %> 47 | * <%= link_to "2.4.2 Page Titled (A)", "/sc/2.4.2.html" %> 48 | * <%= link_to "2.4.3 Focus Order (A)", "/sc/2.4.3.html" %> 49 | * <%= link_to "2.4.4 Link Purpose (In Context) (A)", "/sc/2.4.4.html" %> 50 | * <%= link_to "2.4.7 Focus Visible (AA)", "/sc/2.4.7.html" %> 51 | 52 | ### 2.5 Input Modalities 53 | 54 | * <%= link_to "2.5.1 Pointer Gestures (A)", "/sc/2.5.1.html" %> 55 | * <%= link_to "2.5.2 Pointer Cancellation (A)", "/sc/2.5.2.html" %> 56 | * <%= link_to "2.5.3 Label in Name (A)", "/sc/2.5.3.html" %> 57 | * <%= link_to "2.5.4 Motion Actuation (A)", "/sc/2.5.4.html" %> 58 | 59 | ## Understandable 60 | 61 | ### 3.1 Readable 62 | 63 | * <%= link_to "3.1.1 Language of Page (A)", "/sc/3.1.1.html" %> 64 | * <%= link_to "3.1.2 Language of Parts (AA)", "/sc/3.1.2.html" %> 65 | 66 | ### 3.2 Predictable 67 | 68 | * <%= link_to "3.2.1 On Focus (A)", "/sc/3.2.1.html" %> 69 | * <%= link_to "3.2.2 On Input (A)", "/sc/3.2.2.html" %> 70 | * <%= link_to "3.2.4 Consistent Identification (AA)", "/sc/3.2.4.html" %> 71 | 72 | ### 3.3 Input Assistance 73 | 74 | * <%= link_to "3.3.1 Error Identification (A)", "/sc/3.3.1.html" %> 75 | * <%= link_to "3.3.2 Labels or Instructions (A)", "/sc/3.3.2.html" %> 76 | * <%= link_to "3.3.3 Error Suggestion (AA)", "/sc/3.3.3.html" %> 77 | * <%= link_to "3.3.4 Error Prevention (Legal, Financial, Data) (AA)", "/sc/3.3.4.html" %> 78 | 79 | ## Robust 80 | 81 | ### 4.1 Compatible 82 | 83 | * <%= link_to "4.1.1 Parsing (A)", "/sc/4.1.1.html" %> 84 | * <%= link_to "4.1.2 Name, Role, Value (A)", "/sc/4.1.2.html" %> 85 | * <%= link_to "4.1.3 Status Messages (AA)", "/sc/4.1.3.html" %> 86 | -------------------------------------------------------------------------------- /source/community.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Community 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | This WCAG Primer is for everyone. 8 | 9 | ## Contributing 10 | 11 | You can help make sure it stays up to date by: 12 | 13 | 1. Making changes to the [WCAG primer on Github](https://github.com/alphagov/wcag-primer). 14 | 15 | 2. Emailing the Accessibility Capability team at with suggestions 16 | -------------------------------------------------------------------------------- /source/content.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Content related WCAG 2.1 A and AA Success Criteria 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | Here are the details of the success criteria that are related to content. 8 | 9 | ## Perceivable 10 | 11 | ### 1.1 Text Alternatives 12 | 13 | * <%= link_to "1.1.1 Non-text Content (A)", "/sc/1.1.1.html" %> 14 | 15 | ### 1.2 Time-based Media 16 | 17 | * <%= link_to "1.2.1 Audio-only and Video-only (A)", "/sc/1.2.1.html" %> 18 | * <%= link_to "1.2.2 Captions (Prerecorded) (A)", "/sc/1.2.2.html" %> 19 | * <%= link_to "1.2.3 Audio Description or Media Alternative (A)", "/sc/1.2.3.html" %> 20 | * <%= link_to "1.2.4 Captions (Live) (AA)", "/sc/1.2.4.html" %> 21 | * <%= link_to "1.2.5 Audio Description (Prerecorded) (AA)", "/sc/1.2.5.html" %> 22 | 23 | ### 1.3 Adaptable 24 | 25 | * <%= link_to "1.3.1 Info and Relationships (A)", "/sc/1.3.1.html" %> 26 | * <%= link_to "1.3.3 Sensory Characteristics (A)", "/sc/1.3.3.html" %> 27 | 28 | ## Operable 29 | 30 | ### 2.4 Navigable 31 | 32 | * <%= link_to "2.4.2 Page Titled (A)", "/sc/2.4.2.html" %> 33 | * <%= link_to "2.4.4 Link Purpose (In Context) (A)", "/sc/2.4.4.html" %> 34 | * <%= link_to "2.4.6 Headings and Labels (AA)", "/sc/2.4.6.html" %> 35 | 36 | ### 2.5 Input Modalities 37 | 38 | * <%= link_to "2.5.3 Label in Name (A)", "/sc/2.5.3.html" %> 39 | 40 | ## Understandable 41 | 42 | ### 3.1 Readable 43 | 44 | * <%= link_to "3.1.1 Language of Page (A)", "/sc/3.1.1.html" %> 45 | * <%= link_to "3.1.2 Language of Parts (AA)", "/sc/3.1.2.html" %> 46 | 47 | ### 3.2 Predictable 48 | 49 | * <%= link_to "3.2.4 Consistent Identification (AA)", "/sc/3.2.4.html" %> 50 | 51 | ### 3.3 Input Assistance 52 | 53 | * <%= link_to "3.3.1 Error Identification (A)", "/sc/3.3.1.html" %> 54 | * <%= link_to "3.3.2 Labels or Instructions (A)", "/sc/3.3.2.html" %> 55 | * <%= link_to "3.3.3 Error Suggestion (AA)", "/sc/3.3.3.html" %> 56 | * <%= link_to "3.3.4 Error Prevention (Legal, Financial, Data) (AA)", "/sc/3.3.4.html" %> 57 | 58 | ## Robust 59 | 60 | ### 4.1.3 Status Messages 61 | 62 | * <%= link_to "4.1.3 Status Messages (AA)", "/sc/4.1.3.html" %> 63 | -------------------------------------------------------------------------------- /source/design.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Design related WCAG 2.1 A and AA Success Criteria 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | Here are the details of the success criteria that are related to design. 8 | 9 | ## Perceivable 10 | 11 | ### 1.3 Adaptable 12 | 13 | * <%= link_to "1.3.4 Orientation (A)", "/sc/1.3.4.html" %> 14 | 15 | ### 1.4 Distinguishable 16 | 17 | * <%= link_to "1.4.1 Use of Colour (A)", "/sc/1.4.1.html" %> 18 | * <%= link_to "1.4.2 Audio Control (A)", "/sc/1.4.2.html" %> 19 | * <%= link_to "1.4.3 Contrast (Minimum) (AA)", "/sc/1.4.3.html" %> 20 | * <%= link_to "1.4.4 Resize Text (AA)", "/sc/1.4.4.html" %> 21 | * <%= link_to "1.4.5 Images of Text (AA)", "/sc/1.4.5.html" %> 22 | * <%= link_to "1.4.10 Reflow (AA)", "/sc/1.4.10.html" %> 23 | * <%= link_to "1.4.11 Non-text Contrast (AA)", "/sc/1.4.11.html" %> 24 | * <%= link_to "1.4.12 Text Spacing (AA)", "/sc/1.4.12.html" %> 25 | * <%= link_to "1.4.13 Content on Hover or Focus (AA)", "/sc/1.4.13.html" %> 26 | 27 | ## Operable 28 | 29 | ### 2.1 Keyboard Accessible 30 | 31 | * <%= link_to "2.1.1 Keyboard (A)", "/sc/2.1.1.html" %> 32 | * <%= link_to "2.1.2 No Keyboard Trap (A)", "/sc/2.1.2.html" %> 33 | * <%= link_to "2.1.4 Character Key Shortcuts (A)", "/sc/2.1.4.html" %> 34 | 35 | ### 2.2 Enough Time 36 | 37 | * <%= link_to "2.2.1 Timing Adjustable (A)", "/sc/2.2.1.html" %> 38 | * <%= link_to "2.2.2 Pause, Stop, Hide (A)", "/sc/2.2.2.html" %> 39 | 40 | ### 2.3 Seizures 41 | 42 | * <%= link_to "2.3.1 Three Flashes or Below Threshold (A)", "/sc/2.3.1.html" %> 43 | 44 | ### 2.4 Navigable 45 | 46 | * <%= link_to "2.4.1 Bypass Blocks (A)", "/sc/2.4.1.html" %> 47 | * <%= link_to "2.4.3 Focus Order (A)", "/sc/2.4.3.html" %> 48 | * <%= link_to "2.4.4 Link Purpose (In Context) (A)", "/sc/2.4.4.html" %> 49 | * <%= link_to "2.4.5 Multiple Ways (AA)", "/sc/2.4.5.html" %> 50 | * <%= link_to "2.4.6 Headings and Labels (AA)", "/sc/2.4.6.html" %> 51 | * <%= link_to "2.4.7 Focus Visible (AA)", "/sc/2.4.7.html" %> 52 | 53 | ### 2.5 Input Modalities 54 | 55 | * <%= link_to "2.5.1 Pointer Gestures (A)", "/sc/2.5.1.html" %> 56 | * <%= link_to "2.5.2 Pointer Cancellation (A)", "/sc/2.5.2.html" %> 57 | * <%= link_to "2.5.3 Label in Name (A)", "/sc/2.5.3.html" %> 58 | * <%= link_to "2.5.4 Motion Actuation (A)", "/sc/2.5.4.html" %> 59 | 60 | ## Understandable 61 | 62 | ### 3.2 Predictable 63 | 64 | * <%= link_to "3.2.1 On Focus (A)", "/sc/3.2.1.html" %> 65 | * <%= link_to "3.2.2 On Input (A)", "/sc/3.2.2.html" %> 66 | * <%= link_to "3.2.3 Consistent Navigation (AA)", "/sc/3.2.3.html" %> 67 | * <%= link_to "3.2.4 Consistent Identification (AA)", "/sc/3.2.4.html" %> 68 | 69 | ### 3.3 Input Assistance 70 | 71 | * <%= link_to "3.3.1 Error Identification (A)", "/sc/3.3.1.html" %> 72 | * <%= link_to "3.3.2 Labels or Instructions (A)", "/sc/3.3.2.html" %> 73 | * <%= link_to "3.3.3 Error Suggestion (AA)", "/sc/3.3.3.html" %> 74 | * <%= link_to "3.3.4 Error Prevention (Legal, Financial, Data) (AA)", "/sc/3.3.4.html" %> 75 | 76 | ## Robust 77 | 78 | ### 4.1 Compatible 79 | 80 | * <%= link_to "4.1.3 Status Messages (AA)", "/sc/4.1.3.html" %> 81 | -------------------------------------------------------------------------------- /source/index.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home 3 | --- 4 | 5 | # WCAG 2.1 Getting started 6 | 7 | This document will help you get up to speed with WCAG 2.1 quickly and avoid common mistakes people make when creating or updating web content. You will find this really helpful if you design, build or create web content. 8 | 9 | WCAG 2.1 is the standard used by the UK public sector, and you need to pass these success criteria to comply with the UK Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018. 10 | 11 | See Gov.uk for more on how to [Make your public sector website or app accessible](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps) 12 | 13 | ## What is WCAG 2.1? 14 | 15 | The [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) explain how to make websites accessible for disabled and older people. The guidelines are written by accessibility specialists, volunteers and disabled people at the World Wide Web Consortium [W3C](https://w3.org/). 16 | 17 | Due to the rapidly changing technology landscape WCAG 2.1 was designed to better meet the needs of three major groups: mobile users, users with low vision, and users with cognitive or learning disabilities. 18 | 19 | WCAG 2.1 helps make websites, documents and mobile apps accessible to people with: 20 | 21 | * Visual impairments, including people who are blind, partially sighted, and people with conditions like being colour blind 22 | * Hearing impairments, including Deaf people who use sign language, and people who are hard of hearing 23 | * Mobility impairments, including people with restricted movement that stops them using a mouse or keyboard, and people who find it difficult to control a mouse 24 | * Cognitive impairments, including people who are Dyslexic, on the Autistic Spectrum, and people who have learning difficulties 25 | 26 | WCAG 2.1 also helps us think about the different ways people use the web: 27 | 28 | * By changing the way a website looks in their browser 29 | * By using a keyboard instead of a mouse 30 | * By using a screen reader to navigate and present the website content as speech or on an electronic Braille display 31 | * By using a screen magnifier to increase the size of everything on-screen 32 | * By using speech recognition to use the web with voice commands and dictation 33 | 34 | ## How does it relate to WCAG 2.0? 35 | WCAG 2.1 is built on 2.0. So content that passes WCAG 2.1 will also pass WCAG 2.0. 36 | 37 | 38 | ## New things in WCAG 2.1: 39 | WCAG 2.1 extends WCAG 2.0 by adding new success criteria, definitions, and guidelines to organise the additions. There are some additions to the conformance section. 40 | 41 | ### New Success Criteria 42 | 43 | The following Success Criteria are new in WCAG 2.1: 44 | 45 | * 1.3.4 Orientation (AA) 46 | * 1.3.5 Identify Input Purpose (AA) 47 | * 1.3.6 Identify Purpose (AAA) 48 | * 1.4.10 Reflow (AA) 49 | * 1.4.11 Non-text Contrast (AA) 50 | * 1.4.12 Text Spacing (AA) 51 | * 1.4.13 Content on Hover or Focus (AA) 52 | * 2.1.4 Character Key Shortcuts (A) 53 | * 2.2.6 Timeouts (AAA) 54 | * 2.3.3 Animation from Interactions (AAA) 55 | * 2.5.1 Pointer Gestures (A) 56 | * 2.5.2 Pointer Cancellation (A) 57 | * 2.5.3 Label in Name (A) 58 | * 2.5.4 Motion Actuation (A) 59 | * 2.5.5 Target Size (AAA) 60 | * 2.5.6 Concurrent Input Mechanisms (AAA) 61 | * 4.1.3 Status Messages (AA) 62 | 63 | This primer only focuses on the level A and AA success criteria. [All AAA criteria can be viewed on the W3C website](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2¤tsidebar=%23col_customize&levels=a%2Caa). They are not included in this primer because the Public Sector Bodies Accessibility Regulations do not require AAA compliance. 64 | 65 | #### Numbering changes in WCAG 2.1 66 | 67 | In order to avoid confusion and mixing up any old and new success criteria in WCAG 2.1, or changing existing numbering in 2.0 which people may have gotten used to - any new ones in 2.1 have just been added to the end of the set of success criteria within their guideline. 68 | 69 | Also remember that this having them at the end does not relate to its level at all. That is shown clearly on the success criterion itself as either A/AA/AAA. 70 | 71 | #### Conforming or passing WCAG 2.1 72 | 73 | WCAG 2.1 uses the same conformance or passing model as WCAG 2.0 with some minor changes. 2.1 is designed to be compatible with the earlier version, so sites that conform/pass WCAG 2.1 also conform to WCAG 2.0. 74 | 75 | #### Conformance/Passing addition and changes 76 | There are some minor conformance or passing additions to note, firstly about ‘page variations’, relating to responsive page design which will be relevant if you have a responsive site. 77 | 78 | ##### Page variations 79 | 80 | In a responsive website, a full ‘page’ includes each variation of the page that is automatically presented for different screen sizes. 81 | 82 | Each of these responsive page ‘versions’ needs to pass (or have an alternative) in order for the entire page to pass. 83 | 84 | ## WCAG 2.1 architecture 85 | 86 | WCAG 2.1 has twelve guidelines, grouped into four principles. The principles are that content must be: 87 | 88 | * Perceivable 89 | * Operable 90 | * Understandable 91 | * Robust 92 | 93 | These principles inform the following twelve guidelines. They cover areas like alternative formats, keyboard accessibility, content readability, and functionality across different devices. 94 | 95 | Each guideline has a number of Success Criteria (SC). Each SC has a conformance level: A, AA or AAA. These levels can be thought of to match some of the critical areas that need to be firstly addressed (at level A initially) and beyond to reduce barriers for the broadest range of users. 96 | 97 | ## Meeting accessibility regulations 98 | 99 | Public sector websites, documents and mobile apps that meet WCAG 2.1 Level A and AA Success Criteria and publish an accessibility statement will comply with the [new accessibility regulations for public sector websites and apps](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps). 100 | 101 | ## WCAG 2.1 overview 102 | 103 | Here is a short description of the principles, guidelines and success criteria you must meet. 104 | 105 | ### Principle 1: Perceivable 106 | 107 | Your service must present information in ways people can recognise and use, no matter how they consume content (by touch, sound or sight for example) 108 | 109 | #### Guideline 1.1: Provide text alternatives 110 | * 1.1.1 Provide a text description for images, and make sure the description serves the same purpose as the image. [More about 1.1.1](/sc/1.1.1.html) 111 | 112 | #### Guideline 1.2: Provide alternatives for time-based media 113 | * 1.2.1 Provide a text description for video content that has no audio, or a transcript for audio content that has no video, and make sure the description and transcript serve the same purpose as the original content. [More about 1.2.1](/sc/1.2.1.html) 114 | * 1.2.2 Provide real-time captions for video content that has audio, and make sure the captions include all dialogue and important sound-effects. [More about 1.2.2](/sc/1.2.2.html) 115 | * 1.2.3 Provide a text description or a transcript for video content that has audio, and make sure the description or transcript serves the same purpose as the original content. [More about 1.2.3](/sc/1.2.3.html) 116 | * 1.2.4 Provide real-time captions for live video content that has audio, and make sure the captions include all dialogue and important sound-effects. [More about 1.2.4](/sc/1.2.4.html) 117 | * 1.2.5 Provide audio description for video content, and make sure the description includes all important activity that takes place on-screen. [More about 1.2.5](/sc/1.2.5.html) 118 | 119 | #### Guideline 1.3: Create content that can be presented in different ways 120 | * 1.3.1 Use elements like headings, lists and tables to properly convey the structure of content. [More about 1.3.1](/sc/1.3.1.html) 121 | * 1.3.2 Make sure content can always be read in a logical order even when stylesheets are disabled. [More about 1.3.2](/sc/1.3.2.html) 122 | * 1.3.3 Do not use colour, size, shape, sound or location as the only way to convey instructions. [More about 1.3.3](/sc/1.3.3.html) 123 | * 1.3.4 [New] Make sure a page view is not locked to either horizontal or vertical views only, unless this is essential. [More about 1.3.4](/sc/1.3.4.html) 124 | * 1.3.5 [New] In forms that collect information about the user add HTML autocomplete attributes to identify the purpose of the input. [More about 1.3.5](/sc/1.3.5.html) 125 | 126 | #### Guideline 1.4: Make content easy for people to see and hear 127 | * 1.4.1 Do not use colour as the only way to convey information of any kind. [More about 1.4.1](/sc/1.4.1.html) 128 | * 1.4.2 Give people a way to stop audio content if it plays automatically and lasts longer than three seconds, or give them a way to change the volume without changing their system settings. [More about 1.4.2](/sc/1.4.2.html) 129 | * 1.4.3 Make sure that the colour of text contrasts clearly against its background colour. [More about 1.4.3](/sc/1.4.3.html) 130 | * 1.4.4 Make sure it is possible to complete all tasks when text is resized up to 200% in the browser. [More about 1.4.4](/sc/1.4.4.html) 131 | * 1.4.5 Do not use images that contain text. [More about 1.4.5](/sc/1.4.5.html) 132 | * 1.4.10 [New] Make sure content will reflow to a single column when zoomed and not produce scrolling in both directions. [More about 1.4.10](/sc/1.4.10.html) 133 | * 1.4.11 [New] Make sure sight impaired users can see important controls and understand graphics. [More about 1.4.11](/sc/1.4.11.html) 134 | * 1.4.12 [New] Make sure users can modify text line height, letter or word spacing. [More about 1.4.12](/sc/1.4.12.html) 135 | * 1.4.13 [New] Provide a way to control how people can interact with or dismiss any ‘extra’ content that becomes visible. [More about 1.4.13](/sc/1.4.13.html) 136 | 137 | ### Principle 2: Operable 138 | 139 | Your service must be navigable and usable no matter how someone uses it (without a mouse, with voice commands, or with a screen magnifier for example). 140 | 141 | #### Guideline 2.1: Make functionality work with a keyboard 142 | * 2.1.1 Make sure every task can be completed using just a keyboard. [More about 2.1.1](/sc/2.1.1.html) 143 | * 2.1.2 Make sure that keyboard users do not get stuck when navigating through content. [More about 2.1.2](/sc/2.1.2.html) 144 | * 2.1.4 [New] Provide a way to switch off or remap keyboard shortcuts. [More about 2.1.4](/sc/2.1.4.html) 145 | 146 | #### Guideline 2.2: Give people enough time to read and use content 147 | * 2.2.1 Give people a way to turn off or extend time limits. [More about 2.2.1](/sc/2.2.1.html) 148 | * 2.2.2 Give people a way to stop content that updates frequently, blinks or scrolls automatically. [More about 2.2.2](/sc/2.2.2.html) 149 | 150 | #### Guideline 2.3: Do not cause seizures 151 | * 2.3.1 Do not use content that flashes more than three times a second. [More about 2.3.1](/sc/2.3.1.html) 152 | 153 | #### Guideline 2.4: Provide ways to help people navigate and find content 154 | * 2.4.1 Give people who do not use a mouse a way to move to the start of the main content. [More about 2.4.1](/sc/2.4.1.html) 155 | * 2.4.2 Give every page a unique and helpful title that indicates the purpose of the page. [More about 2.4.2](/sc/2.4.2.html) 156 | * 2.4.3 Make sure that things receive focus in an order that makes sense. [More about 2.4.3](/sc/2.4.3.html) 157 | * 2.4.4 Make sure the purpose of a link is obvious from its link text, or its link text in association with nearby content. [More about 2.4.4](/sc/2.4.4.html) 158 | * 2.4.5 Unless a page is a step in a process, give people different ways of finding content (like searching or browsing links). [More about 2.4.5](/sc/2.4.5.html) 159 | * 2.4.6 Provide headings and form labels that will help people find content and complete tasks. [More about 2.4.6](/sc/2.4.6.html) 160 | * 2.4.7 Make sure that people using a keyboard to navigate can always see where they are on a page. [More about 2.4.7](/sc/2.4.7.html) 161 | 162 | #### Guideline 2.5: Make functionality easy to use through various inputs beyond keyboard 163 | * 2.5.1 [New] Do not require complex gestures to do things. [More about 2.5.1](/sc/2.5.1.html) 164 | * 2.5.2 [New] Do not have controls or user interface components that fire as soon as they are touched. [More about 2.5.2](/sc/2.5.2.html) 165 | * 2.5.3 [New] Make sure that for user interface components with a visible label the accessible name matches. [More about 2.5.3](/sc/2.5.3.html) 166 | * 2.5.4 [New] Make sure functionality can not only be activated by shaking or tilting the device. [More about 2.5.4](/sc/2.5.4.html) 167 | 168 | ### Principle 3: Understandable 169 | 170 | Your service must make information understandable, and make it easy for people to understand how to complete tasks. 171 | 172 | #### Guideline 3.1: Make text readable and understandable 173 | * 3.1.1 Identify the language that the content is written in. [More about 3.1.1](/sc/3.1.1.html) 174 | * 3.1.2 Identify any changes in the default written language of the content. [More about 3.1.2](/sc/3.1.2.html) 175 | 176 | #### Guideline 3.2: Make things appear and behave in consistent ways 177 | * 3.2.1 Do not cause surprising things to happen (like opening a new page), when someone focuses on something. [More about 3.2.1](/sc/3.2.1.html) 178 | * 3.2.2 Do not cause surprising things to happen when someone interacts with content (like scrolling through a set of options). [More about 3.2.2](/sc/3.2.2.html) 179 | * 3.2.3 Make sure that ways to find and navigate content (like search) look and behave the same way when they are used in multiple places. [More about 3.2.3](/sc/3.2.3.html) 180 | * 3.2.4 Make sure that features look and behave the same way when they are used in multiple places. [More about 3.2.4](/sc/3.2.4.html) 181 | 182 | #### Guideline 3.3: Help people avoid and correct mistakes 183 | * 3.3.1 When someone makes a mistake, provide an error message and make it obvious where the mistake was made. [More about 3.3.1](/sc/3.3.1.html) 184 | * 3.3.2 Provide form labels to make it clear what information is expected, and optionally provide extra hints to help people avoid mistakes. [More about 3.3.2](/sc/3.3.2.html) 185 | * 3.3.3 When someone makes a mistake give them suggestions on how to correct it, but do not offer suggestions that will have a negative impact on security. [More about 3.3.3](/sc/3.3.3.html) 186 | * 3.3.4 Give people a way to review and check the information they have entered, and to correct any mistakes they have made. [More about 3.3.4](/sc/3.3.4.html) 187 | 188 | ### Principle 4: Robust 189 | 190 | Your service must work with different browsers and assistive technologies in use now, and use technologies in ways that will make your service usable with the browsers and assistive technologies of the future. 191 | 192 | #### Guideline 4.1: Make content compatible with different browsers and assistive technologies 193 | * 4.1.1 Make sure the code of each page does not contain errors that will have a negative impact on the way browsers and assistive technologies work together. [More about 4.1.1](/sc/4.1.1.html) 194 | * 4.1.2 Make sure the code of each page enables assistive technologies to discover the purpose of every feature, the way that feature is identified, and the state it is currently in. [More about 4.1.2](/sc/4.1.2.html) 195 | * 4.1.3 [New] Make sure status messages are shown in a way that assistive technologies understand without receiving focus. [More about 4.1.3](/sc/4.1.3.html) 196 | 197 | ## How to meet the WCAG 2.1 198 | 199 | Use our primer to find out more about the success criteria to understand how to meet WCAG 2.1. 200 | 201 | View [all success criteria](/all.html), or view those that are related to [content](/content.html), [design](/design.html) or [code](/code.html). 202 | 203 | -------------------------------------------------------------------------------- /source/javascripts/application.js: -------------------------------------------------------------------------------- 1 | //= require govuk_tech_docs 2 | -------------------------------------------------------------------------------- /source/javascripts/govuk_frontend.js: -------------------------------------------------------------------------------- 1 | //= require govuk_frontend_all -------------------------------------------------------------------------------- /source/layouts/custom.erb: -------------------------------------------------------------------------------- 1 | <% wrap_layout :layout do %> 2 | <%= partial 'partials/internal-banner' %> 3 | 4 | <%= yield %> 5 | <% end %> -------------------------------------------------------------------------------- /source/partials/_internal-banner.html.erb: -------------------------------------------------------------------------------- 1 |
2 |

The WCAG Primer is intended for use by the UK cross government accessibility community.

3 |
-------------------------------------------------------------------------------- /source/prototype.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: PROTOTYPE - 1.1.1 Non-text Content (A) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | <%= warning_text('- This is a temporary prototype that is intended to show how the content for the WCAG Primer and the Test Guide might work together when merged.') %> 8 | 9 | Current pages for comparison: [WCAG Primer: 1.1.1](sc/1.1.1) and [Test Guide: 1.1.1](https://github.com/alphagov/wcag-primer/wiki/1.1.1) 10 | 11 | ## WCAG says: 12 | 13 | [W3C's 'Understanding 1.1.1 Non-text Content (level A)'](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) 14 | 15 | > All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. 16 | > 17 | > * **Controls, Input:** If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to [Success Criterion 4.1.2](sc/4.1.2) for additional requirements for controls and content that accepts user input.) 18 | > 19 | > * **Time-Based Media:** If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.) 20 | > 21 | > * **Test:** If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content. 22 | > 23 | > * **Sensory:** If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content. 24 | > 25 | > * **CAPTCHA:** If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities. 26 | > 27 | > * **Decoration, Formatting, Invisible:** If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology. 28 | 29 | ## What this means: 30 | 31 | All non-text content like images, charts, icons and infographics, must have an appropriate text equivalent. This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users. 32 | 33 | ## How to test 34 | 35 | ### When this is applicable 36 | 37 | This applies if the page includes: 38 | 39 | * images or symbols in any form, including SVGs, background images or icon fonts 40 | * video, audio or multimedia objects 41 | * animation 42 | * CAPTCHAs 43 | 44 | ### Check images 45 | 46 | Use the browser's inspector or a screen reader to check all types of images. 47 | 48 | Check: 49 | 50 | * images have alternative text 51 | * alternative text is appropriate - if an image is meaningful the alt text should describe its purpose, otherwise it should be marked up as decorative 52 | 53 | Alternative text can be the in following forms: 54 | 55 | * close to the image 56 | * as alternative text (for example with an `alt` attribute or `aria-label`) 57 | * as a long description (for example, using `longdesc` or linking to more details) 58 | 59 | #### elements 60 | 61 | To check `alt` text on `img` images, use the [Web Developer extension](https://chrispederick.com/work/web-developer/) and go to 'Images \> Display Alt Attributes'. `img` elements must always have an `alt` attribute whether it is adding the alternative text or it is empty. 62 | 63 | #### Background images 64 | 65 | A background image is an image that is not in the content (HTML) but the CSS. 66 | 67 | #### Font icons 68 | 69 | Some fonts contain icons such as symbols and glyphs. These can be added directly into HTML or inserted using CSS. Some screen readers will ignore them and some will read them out as something unrelated. As such, check the character for the icon is hidden from screen readers. 70 | 71 | #### Emojis and symbols 72 | 73 | Emojis and symbols already have inherent alternative text. But that might not be what is the most appropriate. 74 | 75 | #### elements 76 | 77 | SVGs should either have: 78 | 79 | * alternative text in `title` or `desc` element or in `aria-label` - if the `title` element is used, the `svg` element has an `aria-labelledby` referencing the title 80 | * `aria-hidden="true"` if it's decorative 81 | 82 | ### What the alternatives should be 83 | 84 | Generally, if the image has meaning, describe its purpose. If it's not meaningful, make sure it's marked up as decorative. 85 | 86 | For interactive images or images as controls: 87 | 88 | * alternative text of an image in a link should describe the target 89 | * alternative text of an image in a button should describe the action 90 | * alternative text of image maps should describe the target or action 91 | * if both the contents of the image and the target or action are equally important, the alternative text should describe both 92 | 93 | For images containing text, check: 94 | 95 | * the alternative text includes the same text as the text on the image 96 | * symbols are not described but replaced with their meaning 97 | * CAPTCHAs describe the purpose and point to an alternative way to solve it using different senses 98 | 99 | For decorative images: 100 | 101 | * `img` images must still have an `alt` attribute and it must be empty (`alt=""`) 102 | * you can use `aria-hidden="true"` for any other type of image 103 | 104 | You should also check objects that have been inserted or embedded on a page. This might include video-only or audio-only content, animations, graphs or diagrams. This type of content should have a fallback text that identifies what it is and describes it. That alternative text ultimately needs to be in text form. For example, when a video doesn't load, you could have a fallback image that has alternative text. Although diagrams and graphs are excluded from [1.4.5 Images of Text](sc/1.4.5), they still need an alternative under 1.1.1. 105 | 106 | If multiple images have been grouped to compose a larger image, it's fine to have just one alternative text describing the larger image and the other `alt` parameters can be empty. 107 | 108 | ### Exceptions 109 | 110 | * if non-text content is part of a test or exercise and alternative text would render the test irrelevant, unless it's a CAPTCHA 111 | * if words cannot describe a sensory experience, non-text content should be identified and have a brief description 112 | 113 | ### Best practice 114 | 115 | * Alternative texts should be clear and short 116 | * If an image within a link or button is unclear to everyone, it's bad usability 117 | * If any alternative text is visible, there should be no hidden alternative text that duplicates it 118 | * If image and text are in the same link or button, do not duplicate the link or button text in the image alt text - use an empty alt (or equivalent) or describe the image if it's important 119 | * If image and text are adjacent but link to the same target (for example a thumbnail image and article title which both link to the same place), hide the image and its link for screen readers and remove the link from the tabbing order 120 | * Images in links or buttons should have descriptive text within the same link or button 121 | * If the alternative text is long, it shouldn't be added using attributes - for example, complex diagrams should not be described in the `alt` text but somewhere else on the page (the alt text should say what and where it is described, using words or programmatically) 122 | 123 | ### Other ways to test 124 | 125 | * Check if there are any background images by changing colours in Firefox (background images will disappear) 126 | * Check alt text by looking at the HTML source code and searching for: ` Hide Images' to reveal what other types of "images" there are - for example, it will leave background images or font icons or objects (be aware that results can be inconsistent as it also removes some background images) 128 | 129 | ### Mobile app testing 130 | 131 | Use a screen reader to check text alternatives for images and other non-text content. 132 | 133 | ## Common mistakes 134 | 135 | * The image communicates information but does not have a text description 136 | * The text description does not communicate the same information as the image 137 | * The image has a text description but, like a placeholder or file name, it does not communicate the information in the image 138 | * The image has a text description that is an exact duplication of content elsewhere on the page 139 | 140 | ## Useful links 141 | 142 | * [W3C Requirements for providing text to act as an alternative for images](https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text) 143 | * [W3C Alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) 144 | * Anika Henke's talk: [Alternative text: there's more to it than meets the eye](https://www.youtube.com/watch?v=-UsI3Ev7MlI&list=PL5tovFCB3CsDAfBhyDTem0u6Loae61fMG&index=2) 145 | -------------------------------------------------------------------------------- /source/sc/1.1.1.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1.1.1 Non-text Content (A) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | [Understanding <%= current_page.data.title %>](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) 8 | 9 | All non-text content like images, charts, icons and infographics, must have an appropriate text equivalent. This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users. 10 | 11 | ## Requirements / What to do? 12 | 13 | * Images (like logos and icons) that communicate information have short text descriptions; 14 | * Editorial images that support the text around them have short descriptions; 15 | * Images (like infographics, charts and diagrams) that communicate complex information also have longer text descriptions within the same page; 16 | * Decorative images have empty text descriptions. 17 | 18 | ## Common mistakes 19 | 20 | * The image communicates information but does not have a text description; 21 | * The text description does not communicate the same information as the image; 22 | * The image has a text description but, like a placeholder or file name, it does not communicate the information in the image; 23 | * The image has a text description that is an exact duplication of content elsewhere on the page. 24 | 25 | ## Useful resources 26 | 27 | * [W3C Requirements for providing text to act as an alternative for images](https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text) 28 | * [W3C Alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) 29 | -------------------------------------------------------------------------------- /source/sc/1.2.1.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1.2.1 Audio-only and Video-only (A) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | [Understanding <%= current_page.data.title %>](https://www.w3.org/WAI/WCAG21/Understanding/audio-only-and-video-only-prerecorded.html) 8 | 9 | All content that is audio-only like a podcast, or video-only like a silent movie, must have a text description or an audio description. This ensures that information communicated for sight and sound is available to people who cannot see or hear. 10 | 11 | ## Requirements / What to do? 12 | 13 | * Audio only content that communicates information (like a podcast) has a text transcript; 14 | * Video-only content that communicates information (like a silent movie) has a text transcript that describes the video or a audio description. 15 | 16 | ## Common mistakes 17 | 18 | * Audio-only content that communicates information does not have a text transcript; 19 | * Video-only content that communicates information does not have a text transcript or an audio description; 20 | * The text transcript for audio-only content does not include all spoken dialogue and sound effects; 21 | * The text transcript for video-only content does not include descriptions of all important visual information; 22 | * The text transcript for audio-only or video-only content is not clearly labelled as such. 23 | * The audio description for video-only content does not include descriptions of all important visual information; 24 | 25 | ## Useful resources 26 | 27 | * [What are transcripts?](https://www.nomensa.com/blog/2010/what-are-transcripts/) 28 | -------------------------------------------------------------------------------- /source/sc/1.2.2.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1.2.2 Captions (Prerecorded) (A) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | [Understanding <%= current_page.data.title %>](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html) 8 | 9 | Video content like instructional videos, promotions and interviews, must have captions that are synchronised with the audio content of the video. This ensures that the information communicated by the audio part of the video is available to people who cannot hear it. 10 | 11 | ## Requirements / What to do? 12 | 13 | * All video content has captions that are synchronised with the audio content of the video; 14 | * Captions include all the spoken dialogue and important sound effects from the audio part of the video. 15 | 16 | ## Common mistakes 17 | 18 | * The video does not have synchronised captions; 19 | * The video has captions but they do not include all the spoken dialogue and important sound effects from the audio content of the video; 20 | * The video has captions but they are not synchronised with the audio content of the video. 21 | 22 | ## Useful resources 23 | 24 | * [What are captions?](https://www.nomensa.com/blog/2010/what-are-captions) 25 | * [Sounding out the web: accessibility for Deaf and hard of hearing people (Part 2](https://www.paciellogroup.com/blog/2017/03/sounding-out-the-web-accessibility-for-deaf-and-hard-of-hearing-people-part-2/) 26 | 27 | -------------------------------------------------------------------------------- /source/sc/1.2.3.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1.2.3 Audio Description or Media Alternative (A) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | [Understanding <%= current_page.data.title %>](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded.html) 8 | 9 | Video content like instructional videos must have audio description, unless it already has a text alternative. This ensures that information communicated visually in the video is available to people who cannot see it. 10 | 11 | ## Requirements / What to do? 12 | 13 | * Video content is audio described, or has a text alternative that describes the visual content of the video. 14 | 15 | ## Common mistakes 16 | 17 | * The video does not have audio description or a text alternative; 18 | * The audio description does not describe important information communicated visually in the video; 19 | * The text alternative does not describe important information communicated visually in the video; 20 | * The audio description is not synchronised to complement the audio content of the video. 21 | 22 | ## Useful resources 23 | 24 | * [What is audio description?](https://www.nomensa.com/blog/2010/what-is-audio-description) 25 | -------------------------------------------------------------------------------- /source/sc/1.2.4.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1.2.4 Captions (Live) (AA) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | [Understanding <%= current_page.data.title %>](https://www.w3.org/WAI/WCAG21/Understanding/captions-live.html) 8 | 9 | Live broadcast video must have captions that are synchronised with the audio content of the video. This ensures that the information communicated by the audio part of the video is available to people who cannot hear it. 10 | 11 | ## Requirements / What to do? 12 | 13 | * All live video content has captions that are synchronised with the audio content of the video. 14 | 15 | ## Common mistakes 16 | 17 | * The live video does not have synchronised captions; 18 | * The live video has captions but they are not synchronised with the audio content of the video. 19 | 20 | ## Useful resources 21 | 22 | * [What are captions?](https://www.nomensa.com/blog/2010/what-are-captions) 23 | * [Sounding out the web: accessibility for Deaf and hard of hearing people (Part 2](https://www.paciellogroup.com/blog/2017/03/sounding-out-the-web-accessibility-for-deaf-and-hard-of-hearing-people-part-2/) 24 | -------------------------------------------------------------------------------- /source/sc/1.2.5.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1.2.5 Audio Description (Prerecorded) (AA) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | [Understanding <%= current_page.data.title %>](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-prerecorded.html) 8 | 9 | Video content like instructional videos must have audio description. This ensures that information communicated visually in the video is available to people who cannot see it. 10 | 11 | ## Requirements / What to do? 12 | 13 | * Video that includes important visual information has audio description; 14 | 15 | ## Common mistakes 16 | 17 | * A video includes important visual information but does not have audio description; 18 | * The audio description does not describe important information communicated visually in the video; 19 | * The audio description is not synchronised to complement the audio content of the video. 20 | 21 | ## Useful resources 22 | 23 | * [What is audio description?](https://www.nomensa.com/blog/2010/what-is-audio-description) 24 | -------------------------------------------------------------------------------- /source/sc/1.3.1.html.md.erb: -------------------------------------------------------------------------------- 1 | --- 2 | title: 1.3.1 Info and Relationships (A) 3 | --- 4 | 5 | # <%= current_page.data.title %> 6 | 7 | [Understanding <%= current_page.data.title %>](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) 8 | 9 | When content structures like tables, lists and headings are communicated visually, they must also be communicated in ways that assistive technologies can understand. This ensures that content structures are available to screen reader, screen magnifier and speech recognition tool users. 10 | 11 | ## Requirements / What to do? 12 | 13 | * Tabular data is presented using proper HTML markup (``, ``, `
`, and `` elements); 14 | * Lists of items are presented using proper HTML markup (`