What's New in WCAG 2.2? - AbilityNet webinar
•Als PPTX, PDF herunterladen•
0 gefällt mir•33 views
The Web Content Accessibility Guidelines (WCAG) 2.2 have been released. But what does that mean for you and your organisation? What’s changed and how can you make sure you’re meeting the new requirements? Delve into the core changes and discover how to meet the new requirements with our expert accessibility and usability consultants, Alice Taylor and Claire Poste. In this webinar, Alice and Claire will take you through the new criteria, share helpful tips on understanding them, as well as illustrating how WCAG 2.2 impacts you and your customers.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie What's New in WCAG 2.2? - AbilityNet webinar
Ähnlich wie What's New in WCAG 2.2? - AbilityNet webinar (20)
Mehr von AbilityNet
Mehr von AbilityNet (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
What's New in WCAG 2.2? - AbilityNet webinar
- 1. What’s new in WCAG 2.2? | January 2024 Outline • The Web Content Accessibility Guidelines (WCAG) • New WCAG 2.2 Success Criteria (A/AA) • Beyond WCAG 2.2 • Q&A 1
- 2. What’s new in WCAG 2.2? | January 2024 WCAG in a nutshell WCAG is the Web Content Accessibility Guidelines. It is a W3C Recommendation. It has three levels - A, AA, and AAA. 2 AAA AA A
- 3. What’s new in WCAG 2.2? | January 2024 History of WCAG – 1.0 to 2.2 WCAG 1.0 May 1999 HTML only Focused on physical disabilities WCAG 2.0 December 2008 All digital content Big increase in the number and type of disabilities covered WCAG 2.1 June 2018 New criteria for low vision, cognitive impairments and mobile users WCAG 2.2 October 2023 Improvements for cognitive impairments, low vision and mobility disabilities 3 WCAG 3.0 2028+ A new structure and conformance model for WCAG
- 4. What’s new in WCAG 2.2? | January 2024 What’s new in WCAG 2.2? A AA AAA 3.2.6 – Consistent Help 2.4.11 – Focus Not Obscured (Minimum) 2.4.12 – Focus Not Obscured (Enhanced) 3.3.7 – Redundant Entry 3.3.8 – Accessible Authentication (Minimum) 3.3.9 – Accessible Authentication (Enhanced) 2.5.7 – Dragging Movements 2.4.13 Focus Appearance 2.5.8 – Target Size (Minimum) 4
- 5. What’s new in WCAG 2.2? | January 2024 One Success Criteria Removed 5 4.1.1 Parsing (A) removed in WCAG 2.2 • No longer required due to advances in standards and technology • Failures would fail under other success criteria • WCAG 2.1 still requires 4.1.1 Parsing (A)
- 6. What’s new in WCAG 2.2? | January 2024 2.4.11 – Focus Not Obscured (Minimum) (AA) “When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.” Helps people who use only a keyboard or assistive technologies via the keyboard interface to see where they are on the page at all times. 6
- 7. What’s new in WCAG 2.2? | January 2024 2.4.11 – Focus Not Obscured (Minimum) (AA) Example 7
- 8. What’s new in WCAG 2.2? | January 2024 2.5.7 – Dragging Movements (AA) “All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging.” Helps people who are unable to perform dragging movements, for example, because they use a head pointer and need a single pointer alternative. 8
- 9. What’s new in WCAG 2.2? | January 2024 2.5.7 – Dragging Movements (AA) Example 9
- 10. What’s new in WCAG 2.2? | January 2024 2.5.7 – Dragging Movements (AA) Example (2) 10
- 11. What’s new in WCAG 2.2? | January 2024 2.5.8 – Target Size (Minimum) (AA) “The size of the target for pointer inputs is at least 24 by 24 CSS pixels.” Helps people using mobile devices, those with tremors and other physical impairments, as well as people in shaky environments, such as on a train. 11
- 12. What’s new in WCAG 2.2? | January 2024 2.5.8 – Target Size (Minimum) (AA) Examples 12
- 13. What’s new in WCAG 2.2? | January 2024 3.2.6 – Consistent Help (A) “If a web page contains… help mechanisms, and those mechanisms are repeated on multiple web pages within a set of web pages, they occur in the same relative order to other page content, unless a change is initiated by the user.” Helps everyone, but particularly people with cognitive and learning disabilities who are more likely to require help to complete a process. 13
- 14. What’s new in WCAG 2.2? | January 2024 3.2.6 – Consistent Help (A) Example 14
- 15. What’s new in WCAG 2.2? | January 2024 3.3.7 – Redundant Entry (A) “Information previously entered by or provided to the user that is required to be entered again in the same process is either auto-populated or available for the user to select.” Helps people with cognitive disabilities, particularly those with memory impairments. People with mobility impairments benefit from not having to enter as much data. 15
- 16. What’s new in WCAG 2.2? | January 2024 3.3.8 – Accessible Authentication (Minimum) (AA) A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following: • Alternative • Mechanism • Object Recognition • Personal Content Helps people with cognitive disabilities, particularly related to memory, reading, numbers or perception-processing to authenticate, log in, etc. 16
- 17. What’s new in WCAG 2.2? | January 2024 Example Conformance for 3.3.8 17
- 18. What’s new in WCAG 2.2? | January 2024 Example Failures for 3.3.8 • Requiring users to enter a password or code in a different format from the original, for example, by requesting a user enter the “1st, 2nd and 6th characters” of a password. • Password input that requires a user to select each character of a fixed-length password from individual dropdown fields. • Blocking users from being able to paste a password into the password field. • Blocking the use of integrated third-party password managers in input fields. • Having to manually transcribe a passcode from a secondary device such as a card reader. 18
- 19. What’s new in WCAG 2.2? | January 2024 WCAG 3.0: W3C Accessibility Guidelines • Easier to understand, more user needs and different types of content, technology, tools and organisations. • New structure, conformance modal and a broader scope. • New conformance levels: Bronze, Silver and Gold. 19
- 20. What’s new in WCAG 2.2? | January 2024 User Research and Best Practice • Deeper understanding from a user’s perspective • Practical insight into a site’s usability • A more comprehensive accessibility evaluation 20
Hinweis der Redaktion
- Web Content Accessibility Guidelines (WCAG) Created by the World Wide Web Consortium (W3C), like HTML and CSS standards – it is a W3C recommendation. Internationally recognised and considered Gold Standard for web accessibility. Used as the accessibility standard for some legislation, e.g. the UK Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations (2018), The European Accessibility Act (2025). Compliance levels – A, AA, AAA Usual target is AA, which includes all the A success criteria, this is considered an achievable level of compliance. AAA can be more subjective and difficult to achieve/less feasible. Four principles, which split into 13 guidelines and then 86 success criteria
- WCAG 1.0 – released May 1999. Had A, AA, AAA. Focused on HTML. Very focused on “physical” disabilities. WCAG 2.0 – Released Dec 2008. Came about as there were big changes in tech, reflected in guidelines. Applied to all digital content, not just HTML. Big increase in the number of disabilities/impairments which it covered. WCAG 2.1 – June 2018. Built upon 2.0. If you comply with 2.1, you’ll comply with 2.0. More advancements in tech – new criteria focused on improvements for low vision, cognitive and mobile users. WCAG 2.2 – October 2023. Latest release. Again, built upon 2.1. Backwards compatible, except for 4.1.1 Parsing, which is made obsolete. Improvements for people with cognitive impairments, low vision and mobility disabilities. WCAG 3.0 – Coming towards the end of the decade. Will involve a new conformance model, new structure and expanding scope beyond just web content. More on that later…
- Four new SC focused on cognitive and learning disabilities/neurodivergence. Three new SC focused on low vision Two SC to enhance accessibility for those with mobility disabilities Today we’ll be talking about the A/AA criteria
- Parsing removed as advances in standards and technology, including HTML, browsers and assistive technologies, mean that any issues that would fail 4.1.1 would fail other criteria, such as 1.3.1 Info and Relationships (A) or 4.1.2 Name, Role, Value (A).
- When something receives focus, it is at least partially visible, as people who can’t use a mouse need to see what has keyboard focus. There is an AAA criterion which requires that there is no overlap at all, the focused item must be fully visible – 2.4.12 Focus Not Obscured (Enhanced) (AAA) Desktop only If component receives focus, it or its must not be completely hidden by author created content – e.g. cookie banner. Common components that may cause this – sticky footers, sticky headers, non-modal dialogs. If the component can be moved around, then only the initial position of the component is relevant.
- BBC – Cookie banner passes on most of the in focus apart from the link right at the bottom of the page “Read more about our approach to external linking. Note: This video has no audio.
- For any action that involves dragging, a single pointer alternative is provided, as some people can’t use a mouse or finger to drag items. Applies to things like drag and drop, sorting Dragging movements covered in this Success Criterion are pointer interactions where only the start and endpoints matter. With drag and drop, you grab an element at one location (Point A) and then drop it somewhere else (Point B), but the path your pointer takes to get from A to B is not significant. Desktop and mobile. If dragging something is possible, an alternative must be provided (for example using a button to move the item from one place to another). This could also be in the form of a dropdown, with options. Or an input field where you can enter a value (colour wheel) Doesn’t apply if the dragging is essential (page scrolling) or for system level gestures (browser gestures) Different to Keyboard – Keyboard requires it can be operated with a keyboard. Dragging movements requires the drag can be achieved with a single pointer – applies to touch screen.
- Good example: https://www.mapquest.com/search/London - can drag map around. There are also buttons to complete the same functionality Bad example: https://www.google.com/maps/ - can drag map around. There is no single pointer option for this functionality
- Ensure targets meet a minimum size or have sufficient spacing around them, as some people cannot click/tap small buttons that are close together. Large number of exemptions for when the target is not 24px x 24px (it is undersized): Spacing – If there is sufficient spacing around the target Equivalent – Where an alternative target which meets the SC achieves the same functionality. Inline – Where the line-height of surrounding non-target text restricts the size of the targets. User agent control – The target size is determined by the user agent, not the author. Essential – The way the target is presented is essential or legally required. Desktop and mobile.
- Homebase – Social media links, 44x47px – meets the SC. Brighton Centre – Email/social media links, 18x18px with 8px margin on either side = 26x18px – meaning that there is no overlap horizontally and there are no other targets nearby vertically. Meets the SC by virtue of the spacing exemption.
- Put help in the same place when it is on multiple pages, so that when people who need help are trying to find it, they can find it more easily if it is in the same place. Desktop and mobile. Help mechanisms, which can be on the page or via link to a different page, are: Human contact details – Email address, phone number, etc. Human contact mechanism – Live chat with a person Self-help option – FAQ page, “How do I” page, etc. A fully automated contact mechanism – Automated chatbot. Help can be on the page, or a direct link. If its human and only available at set times, user should be made aware of this. Doesn’t require help mechanisms are provided, but that when they are, they are located in the “same relative order” across a set of pages. Few terms to clarify: “same relative order” – should be in the same place programmatically – in the markup. For example, if it is programmatically in the footer on one page, it programmatically cant be in the header on another. “same relative order” is also restricted to the zoom level, viewport, orientation, etc, e.g. if it changes when viewed on a mobile device, rather than a desktop site, this is considered a change initiated by the user and is out of scope. Also only applies to ”multiple web pages within a set of web pages” – user journeys. Eg if youre on a news story and then directed to jobs site, then this is two separate journeys. Again it doesn’t require help is provided, just that when it is, it can be found in the same place.
- Examples: https://www.gov.uk/ - help in the footer. https://www.currys.co.uk/ - live chat in bottom right – sticky. https://www.ikea.com/gb/en/ - FAQ link in footer – when going to login, not there. Different journey. https://www.sainsburys.co.uk/ and https://www.sainsburys.co.uk/shop/gb/groceries – WOULD THIS PASS? Help centre different locations visually and programmatically
- Don’t ask for the same information twice in the same session/prcess Some people with cognitive disabilities have difficulty remembering what they have entered before. Those using assistive technologies such as switch devices, speech input or other AT for people with mobility impairments appreciate the reduced input required. By making these processes easier via redundant entry, conversion rates for sign-ups, e-commerce and other transactions are likely to increase. Desktop and mobile. NB – the information doesn’t need to be stored. If the user closes the process and returns later, they can be asked to re-enter their information again. Example methods for conformance: Autocomplete (browser autocomplete doesn’t count) Select from a dropdown (select a home/business address) Copy and paste Checkbox to populate previously entered data (billing address same as billing address) There are exemptions: When re-entry is essential (e.g. a memory game) The information is required to ensure the security of the content (e.g. **** for passcodes and not letting them be copied) The previously entered info is no longer valid. Example: “Use my shipping address” (Apple)
- Don’t make people solve, recall, or transcribe something to authorise a log in, payment, etc., as some people with cognitive disabilities may struggle to solve puzzles, memorise login details or retype one-time passcodes. Lets break this down to understand it better. Firstly: Definition of a Cognitive Function Test: A task that requires the user to remember, manipulate, or transcribe information. Examples include, but are not limited to: memorization, such as remembering a username, password, set of characters, images, or patterns. transcription, such as typing in characters; use of correct spelling; performance of calculations; solving of puzzles. What is an authentication process? - Confirming identity – logging into an account (shopping, online banking), logging into device (PIN entry), verifying id (making a payment), recovering email/password (forgotten password) Alternative: Another authentication method that does not rely on a cognitive function test. QR code. Mechanism: A mechanism is available to assist the user in completing the cognitive function test. Support for password entry by password entry, ability to copy and paste, biometrics Object Recognition: The cognitive function test is to recognize objects. Select images that have certain objects Personal Content: The cognitive function test is to identify non-text content the user provided to the Web site. For example they’ve been asked to identify an image they’ve uploaded It isn’t necessary to provide ALL these options, the SC only requires that at least one of these be made available. Wherever a cognitive function test is required there must be at least one of these. This is for every step of the authentication process. There is an AAA criterion which doesn’t allow object recognition or personal content to be used – 3.3.9 Accessible Authentication (Enhanced) (AAA)
- First example, link via email instead of having to enter password. Provides an alternative method. Second example, Biometric option, instead of having to enter PIN. Again, provides an alternative. Third example - CAPTCHA passes if it relies on recognising objects/content from user. Doesn’t pass if required to transcribe a word/number, or do a test. Object recognition/user provided content (e.g. using CAPTCHA) – this is at AA. At AAA this is not allowed. Fourth example, an OTP code has been sent to a phone. If using multi-factor authentication, every stage must pass. So if receiving an OTP, it must be possible to copy and paste it from the secondary device to the input field or, for example, an email to then send to the primary device for copy and pasting into the input field. Ensuring the input field accepts copy and paste isn’t enough – it also needs to be possible to copy the code on the primary device. How this happens is out the SC scope, it only requires that the passcode be copiable. Think about device – sent to phone (on desktop). Give the user choice in how they receive information – email/text/phone call. Note that there is an alternative login through sign in another way so even if the code cannot be copied, this could potentially pass as there is an alternative method. However one of the other methods to sign in must pass the criteria. It is not sufficient to just provide an alternative, the alternative needs to pass. Note that this criterion applies to every stage in an authentication process. OTP, PIN entry, email/password recovery. Caveat for banks – it is difficult to meet accessible authentication AND the legal requirements for banks. These examples only cover the accessibility side, we can’t advise on the financial legalities.
- WCAG must be regularly revaluated to ensure it stays up to date with accessibility and technology advancements. WCAG 3.0 has the same aims as 2.2 but will meet them in a different way. Easier to understand, meet more user’s needs and address more types of content – web, apps, tools, organisations Guidelines and outcomes will be more granular (more focused on desired results than the technical means to achieve them). Conformance methods: Bronze: Minimum conformance level for WCAG 3.0 Silver: Incentivises organisations to go further to improve accessibility Gold: For organisations that stand out as exemplary role models in accessibility New: Assertions: a formal claim of fact from a person or organisation that can be used to support conformance, for example the implementation of a procedure such as training, usability testing or assistive technology testing. Most recent draft was released on 24th July 2023, it is not expected to become a standard for several more years. Updated drafts will be released every 3-6 months.
- WCAG has some restrictions due to its highly technical, pass/fail nature. WCAG is only the beginning. Many solutions that meet WCAG compliance do not necessarily represent best practice for accessibility for all users. Testing with disabled users with a wide range or disabilities or impairments at every round of testing offers: Deeper understanding of accessibility issues from a user’s perspective. Practical insight into a site’s usability for people with disabilities. Complements a WCAG audit to give you a more comprehensive accessibility evaluation. Example of best practice: the requirement for targets to be at least 24x24 CSS pixels passes WCAG 2.2, but the best practice would be at least 44x44 CSS pixels for maximum usability and accessibility.