Beginning Your Own Accessibility Testing Journey

Exploring how to start accessibility testing, understanding common issues, identifying problems, using tools, and scoping for testing. Includes information on standards like WCAG 2.1/2.2 and the EU regulations. The session also covers confidence levels in assessing website accessibility.

• Accessibility Testing
• WCAG 2.1
• Website Accessibility
• Testing Standards
• EU Regulations

carys Follow

Uploaded on Apr 03, 2024 | 1 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

Presentation Transcript

1. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 How to Begin Your Own Accessibility Testing Jessica Cahill November 2023

2. How to Begin Your Own Accessibility Testing National Disability Authority National Monitoring Body S.I. 358/2020 EU Web Accessibility Directive Simplified (automated) In-depth (manual + auto) Why: Understand issue and fixes Check progress Confirm results

3. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Welcome! The session is being recorded. Live captions during the training Please use the Q&A window to ask questions Please use the chat window for general conversation Slides, a transcript and recording will be made available via email in the coming days You will see a feedback form on leaving which includes the option to ask follow up questions or suggest future training topics

4. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 About AbilityNet

5. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 In this session Understand common accessibility issues and how they can be identified Learn simple techniques for identifying accessibility problems Explore free tools that can help you with basic accessibility testing Understand how to approach scoping for accessibility testing

6. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Poll 1 @Mark How confident are you in understanding the accessibility of your website(s)? Not at all confident Somewhat confident Moderately confident Very confident

7. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 What standard are we testing against? WCAG 2.1 / 2.2 Level AA 50 success criteria testable pass/fail statements. The European Union (Accessibility of Websites and Mobile Applications of Public Sector Bodies) Regulations 2020 EN 301 549

8. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 What s new in WCAG 2.2? A 3.2.6 Consistent Help AA 2.4.11 Focus Not Obscured (Minimum) 2.5.7 Dragging Movements 2.5.8 Target Size (Minimum) 3.3.8 Accessible Authentication (Minimum) AAA 3.3.9 Accessible Authentication (Enhanced) 2.4.12 Focus Not Obscured (Enhanced) 2.4.13 Focus Appearance 3.3.7 Redundant Entry 4.1.1 Parsing (A) removed and obsolete for WCAG 2.2. 8

9. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Poll 2 @Mark Do we need to check every WCAG criterion on every page on a website? Yes No Not sure

10. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Use a representative sample 100 pages = 5,000 checks 150+ hours Some content appears on all pages Can select a representative sample of pages

11. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 WCAG Evaluation Methodology 1. Define the scope of the evaluation = define the website extent, goal of evaluation 2. Explore the website to identify key web pages, functionality, design templates, possibly key journeys. 3. Select a representative sample of webpages 4. Evaluate the sample of webpages 5. Report the evaluation findings

12. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 WCAG-EM selecting pages example If testing entire website, all areas are in scope Includes third party and embedded content such as maps, payment forms, and discussion boards. If testing a specific area, eg "Courseware Application", all parts of this area are in scope All depicted courses and any pages common to all areas of the university

13. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 How can you check accessibility? Site scanners Manual checks Automated checkers Accessibility inspectors and testing tools{

14. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Poll 3 @Mark Can an automatic checker identify all WCAG issues? All of them Most of them Some of them Only a small number

15. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Limitations of automatic checkers Automated tools can assist with finding some accessibility issues Gov.uk review of tools found up to 40% of issues Issue reports can be more difficult to understand because: Multiple issues reporting the same problem e.g. alt text Multiple tests for a single success criteria Issues that need further, human review

16. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Most common accessibility issues Incorrect and/or lack of heading structure Insufficient colour contrast or use of colour for meaning Missing alternative descriptions on images Lack of keyboard access Missing focus indicator Inaccessible form field error messages No captions, transcripts or audio descriptions on videos

17. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 What issues can be found with tools? Impacts Common Issue Found by documents, files, web pages and apps Incorrect / lack of heading structure Automatic documents, files, web pages and apps Correct heading structure Manual documents, files, web pages and apps Insufficient colour contrast Automatic documents, files, web pages and apps Use of colour for meaning Manual documents, files, web pages and apps Missing alternative descriptions on images Automatic documents, files, web pages and apps Relevant alternative descriptions on images Manual

18. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 What issues can be found with tools? (2) Impacts Common Issue Found by web pages and apps Lack of keyboard only access Manual web pages and apps Missing focus indicator Manual web pages and apps Form field labels Automatic Labels correct Manual web pages and apps Accessible form field error messages Manual multimedia No captions, transcripts or audio descriptions on videos Manual

19. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Accessibility Quick Checks Benefits Issues Can be completed without extensive accessibility or assistive technology experience To indicate likelihood of accessibility issues existing on a website Identify areas of accessibility risk Assist with developing accessibility roadmap before undertaking full audit Do not cover all requirements Less accurate results than full audit Not sufficient to determine full compliance with the Web Content Accessibility Guidelines

20. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 16 checks: 30 success criteria Skip links Alternative navigation Focus visible Keyboard operable Page structure Reflow and magnification Page titles Consistent navigation WCAG2.1 2.4.1 WCAG2.1 2.4.5 WCAG2.1 2.4.7 WCAG2.1 2.1.1, 2.1.2, 2.4.3 WCAG2.1 1.3.1, 1.3.2, 2.4.6 WCAG2.1 1.3.2, 1.4.4, 1.4.5, 1.4.10 WCAG2.1 2.4.2 WCAG2.1 3.2.3

21. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 16 checks: 30 success criteria (2) Consistent icons and labelling Image alternatives Link text Colour contrast and meaning Form field labels Error messages Alternative media Pause or stop motion WCAG2.1 1.3.1, 3.2.4, 4.1.2 WCAG2.1 1.1.1 WCAG2.1 2.4.4 WCAG2.1 1.4.1, 1.4.3, 1.4.11 WCAG2.1 1.3.1, 3.3.2 WCAG2.1 3.3.1, 3.3.2 WCAG2.1 1.2.2, 1.2.3, 1.2.5 WCAG2.1 2.2.2

22. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Which pages to test? Minimum required for a templated website: Landing page Content page (2-3 pages) Page containing a form preferably with different types of fields and validation Multimedia page

23. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Tools ANDI accessibility bookmarklet axe WAVE Headings Map extension for Chrome or Firefox Accessibility Insights (includes axe) Text resize (eg in Chrome/Firefox) Paciello Group Colour Contrast Analyser Paul J Adam accessibility bookmarklets

24. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Landing page checks (1) Skip links: can you use the Tab key to access a link to skip over repeated content eg menus? Refresh the page and start tabbing. Does the link appear visually? Does the link work, ie move you to the beginning of the main content on the page? Alternative navigation: There is more than one way of getting to any web page. This could be a site map, menus, search box etc.

25. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Landing page checks (2) Keyboard access: Can you move through and activate all interactive components eg menus, buttons, dropdowns without a mouse? Can you reach everything (including drop-down options etc) using Tab and up/down arrows instead of a mouse? Can you activate buttons, links or controls with Space and/or Enter? Can you enter and exit all components via the keyboard (no keyboard trap)? Is the focus order logical? Could keyboard access be more efficient? Are users forced to tab through components like social media feeds or news feeds?

26. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Landing page checks (3) Visible focus: When using Tab to move through interactive items, can you always see which item has focus? The focus indicator should either have sufficient contrast that it is clearly visible or it should be the browser default focus indicator.

27. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Exercise: keyboard testing Keyboard-only Move through interactive elements: Tab key shift +Tab to move back Activate button: Space OR Enter key Activate link: Enter key Move through radio buttons: up/down arrows Move through selection lists and menus: up/down arrows or Tab Zoom Ctrl + Ctrl -

28. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Content page checks (1) Heading structure: using a tool, is the heading structure logical and effective? eg <h1> is present, headings are not used for styling. The heading structure creates logical and effective navigation. Some disabled people rely on heading structure to navigate long pages using assistive technologies. Headings Map for Chrome, Headings Map for Firefox, Paul J Adams bookmarklet, ANDI Do headings describe the content they head? Reflow & magnification: using browser zoom, does the page work at 200% and 400%, retaining all content and functionality, and reflow up to 400% (no horizontal scrolling)? Can text be resized to 200%?

29. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Content page checks (2) Page titles: is the title in the browser tab clear? Pages have titles that describe their purpose and ideally are unique. Titles are usually displayed in the browser tab. Check there is a title that adequately and briefly describes the content of the page. Check the title is different from other pages on the website, and adequately distinguishes the page from other web pages. Consistent navigation: is the navigation consistent across pages eg menus stay in the same order? Does each part of your site have the same kind of menu structure or does the user experience different navigation conventions on different parts of the website?

30. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Content page checks (3) Consistent icons and labelling: are icons and labels consistent across pages eg icons represent the same function on and across pages? Ideally icons should have text labels displayed on screen. Any icons without text labels need a programmatic label readable by screen readers. This may be shown in ANDI. Image alternatives: do all informative images have text alternatives? Are decorative images marked appropriately? Does each decorative image have null alt text (or aria-hidden attribute)? Is the alt text on other images meaningful?

31. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Content page checks (4) Link text: does link text make sense in context? Is every link text on a page unique? Link text should be meaningful. Look for hyperlinks on a page. Are they unique and meaningful within content (eg contact us) or repetitive/unenlightening (eg Click here)? Colour contrast and meaning: Is there sufficient colour contrast between text and or meaningful graphics (eg icons) and background colours? A contrast ratio of 4.5:1 is required for text content, 3:1 for large text or non-text graphical controls. Check with code inspector, WAVE, ANDI or CCA. Is colour never the only means of conveying meaning?

32. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Form page checks (1) Form field labels: are form field labels associated with input fields? Form fields should be associated with their labels. A quick check on simple form fields is to click on a form field name in a desktop browser. Or check with ANDI / WAVE. Are required fields identified? Are forms keyboard accessible? Can you tab through and complete the whole form without touching the mouse? Including text fields, checkboxes & radio buttons (Space) and drop downs (Arrow keys).

33. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Form page checks (2) Error messages: are error messages associated with input fields? When you do something wrong (like put your name in an email field of a form) do you get a helpful error message that helps you correct the mistake? Check if the error message is associated with the form field so that screen-reader users can know there is an error on a field. This can be checked by using ANDI / WAVE on a form with an error. The message should be associated with the field using an aria- described-by tag.

34. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Multimedia page checks Alternative media: do videos have accurate Captions Audio descriptions Transcripts (note this is not sufficient for Level AA but meets A) To check what is needed: https://www.w3.org/WAI/media/av/planning/

35. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Multimedia page checks (2) Pause or stop: Can auto-play video be paused or stopped? Can audio be muted? Any content on a page that moves or auto-plays for more than 5 seconds can be paused, stopped or hidden. This control must be keyboard accessible. If audio plays automatically on a page for more than 3 seconds, it should be possible to pause/stop it or alter volume independently of the device audio control (eg a mute button). No content flashes more than 3 times per second.

36. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Should I check with a screen reader? Yes, absolutely, but Choose the right browser/screen reader combination Learn the screen reader modifier key Navigation: Mostly the same as keyboard navigation Basic generic shortcut keys: H jump to headings Ctrl stop speech Screen Reader Browser JAWS NVDA Edge/Chrome Firefox Narrator Edge Voice Over Safari Further information: WebAIM Q&A on screen reader testing

37. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Should I test with disabled users? Deeper Understanding Comprehensive Evaluation Practical Insight See the importance of a site s usability for disabled users Complements W3C Audits, giving you a more comprehensive accessibility evaluation of your site Gain a deeper understanding of accessibility issues from a user s perspective

38. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 @Mark Questions?

39. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Resources Tools: Useful sites: WAI Easy Checks GOV.UK Testing for accessibility WAVE links to the extensions are on the WAVE Webaim extension page. Headings Map extension for Chrome or Firefox Microsoft Accessibility Insights (includes aXe) Add Focus indicator (Chrome) Focus indicator Paciello Group Colour Contrast Analyser Paul J Adam accessibility bookmarklets ANDI accessibility bookmarklet

40. How to Begin Your Own Accessibility Testing | Jessica Cahill| December 2023 Thank you!