{"id":58007,"date":"2023-08-20T13:47:49","date_gmt":"2023-08-20T08:17:49","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=58007"},"modified":"2024-06-10T15:36:16","modified_gmt":"2024-06-10T10:06:16","slug":"part-2-web-accessibility-your-guide-to-comprehensive-website-testing","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/part-2-web-accessibility-your-guide-to-comprehensive-website-testing\/","title":{"rendered":"Part 2 \u2013 Web Accessibility: Your guide to comprehensive website testing"},"content":{"rendered":"

Accessibility Testing –\u00a0<\/span><\/strong><\/h2>\n

Automated Assessment:<\/span><\/strong><\/h3>\n

Automated testing tools can scan websites or mobile applications to identify errors across numerous pages based on WCAG standards. This approach can potentially uncover up to 57% of accessibility concerns.<\/span><\/p>\n

1. VS Code Plugin – The axe Accessibility Linter plugin for VS Code assists developers by conducting real-time code analysis, ensuring adherence to common accessibility best practices. (Recommended)
\n<\/span>Link:\u00a0<\/span>Axe Accessibility Linter<\/span><\/a><\/p>\n

2. WAVE serves as a web accessibility evaluation tool developed by WebAIM. It offers visual feedback on your web content’s accessibility by embedding icons and indicators within your page.
\n<\/span>Link:\u00a0<\/span>WAVE Evaluation Tool<\/span><\/a><\/p>\n

3. Axe Devtools offers an automated and guided accessibility testing solution designed for component developers, front-end developers, native mobile app developers, and test engineers. It enables swift identification and correction of nearly all accessibility issues before your applications progress beyond the development phase.
\n<\/span>Link:\u00a0<\/span>Axe DevTools<\/span><\/a><\/p>\n

4. Lighthouse, a Chrome development tool, provides a comprehensive report. To analyze a webpage, navigate to it, right-click on the screen, choose “Inspect Element,” select the “Lighthouse” tab, check “Accessibility,” and then click “Generate Report.”<\/span><\/p>\n

Manual Assessment:\u00a0<\/b><\/h3>\n

Manual examination plays a pivotal role in accessibility testing due to the fact that 80% of WCAG success criteria necessitate manual assessment, and certain aspects are beyond the scope of automated testing.<\/span><\/p>\n

1. Keyboard Navigation –<\/strong>
\n<\/span><\/p>\n

\u21d2 How to conduct a keyboard test?<\/strong><\/p>\n

– Tab: Access form controls and links.
\n– Shift + Tab: Navigate backward.
\n– Spacebar: Activate checkboxes and buttons.
\n– Enter: Trigger buttons and links.
\n– Arrow keys: Interact with tree menus, auto-complete, radio buttons, select\/drop-down menus, sliders, tab panels, etc.
\n– Escape: Close browser menus or dialog boxes.<\/p>\n

\u21d2 What to assess?<\/strong><\/span>
\n<\/span>
\n<\/span>– Any mouse-dependent features like hover menus?<\/span>
\n<\/span>– Presence of “skip navigation” link; test its functionality.<\/span>
\n<\/span>– Logical and intuitive navigation sequence.<\/span>
\n<\/span>– Visible keyboard focus indicator.<\/span>
\n<\/span>– Test pop-up dialogs for navigation and closure.<\/span>
\n<\/span>– Ensure ‘Esc’ closes all dialogs.<\/span><\/p>\n

2. Non-Visual Navigation with a Screen Reader<\/strong>: <\/span><\/span>Employ a screen reader to identify problems related to reading sequence, spelling, dynamic elements, and interactive components. Despite its initial complexity, this is an essential stage in assessing the accessibility of content.<\/p>\n

Free screen readers:
\n– NVDA for PC
\n<\/a>– VoiceOver for Mac
\n<\/a><\/p>\n

3. Manual Content Review\u00a0<\/strong><\/p>\n

\u21d2 BODY TEXT
\n– Verify unique, descriptive page titles marked as <h1>. Only one <h1> per page.
\n– Check meaningful visual headings marked as <h> elements in hierarchical order (<h1>, <h2>, etc.). Avoid skipping heading levels.<\/p>\n

\u21d2 IMAGES<\/span>
\n<\/span>– Ensure “alt” text conveys non-decorative image content and function concisely and accurately.<\/span>
\n<\/span>– Confirm images of text have corresponding textual representation.<\/span><\/p>\n

\u21d2 COLOR<\/span>
\n<\/span>– Check text-background color contrast ratio (at least 4.5:1).<\/span>
\n<\/span>– Avoid using color as sole information conveyance.<\/span>
\n<\/span>
\n<\/span>Link: <\/span>WebAIM Contrast Checker
\n<\/span>
\n<\/span><\/a>\u21d2 TABLES
\n<\/span>– Limit table usage to tabular data, not layout.
\n– Verify table caption and row\/column headers for data tables.<\/p>\n

\u21d2 FORMS
\n– Assign descriptive labels to form controls.
\n– If labels aren’t visible, check for hidden <label>, aria-label, or title attribute.<\/p>\n

\u21d2 ZOOM IN TO 200%
\n(Windows users use Control +, Mac users use Command +)<\/p>\n

– Assess content visibility, order, and overlapping.
\n– Examine navigation bars, mobile-style menus, and scrolling behavior.
\n– Ensure functionality of links, buttons, forms, and menus with content zoomed.<\/p>\n

\u21d2 USABILITY
\n– Confirm basic, legible fonts for readability.
\n– Maintain consistency and logic in visual navigation.<\/p>\n

\u21d2 NON-AUDIO ACCESS
\n– Control audio\/video start options.
\n– Include accurate captions and transcript links for videos.<\/p>\n

\u21d2 DOWNLOADABLE FILES
\n– Ensure searchable, tagged, and OCR’d PDFs, Word docs, and PPTs with relevant alt text.
\n<\/span><\/p>\n

Reference :\u00a0<\/strong><\/h2>\n