E-mail List Archives
Thread: Manual user web interface accessibility test
Number of posts in this thread: 4 (In chronological order)
From: PATIENCE AGABIRWE
Date: Thu, Mar 14 2024 8:44AM
Subject: Manual user web interface accessibility test
No previous message | Next message →
Hi everyone,My name is Patience, from Uganda. I need support on how to run a manual accessibility test of a website. My focus is on text alternatives for non-text content, color contrast, keyboard navigation, navigation, and orientation. I have already used WAVE for the automatic accessibility evaluation test. I will be grateful for your kind support. Thank you.
Patience AgabirweMakerere university
People are different - and new technology must take that into account!MediaLT
From: Hayman, Douglass
Date: Thu, Mar 14 2024 9:41AM
Subject: Re: - Manual user web interface accessibility test
← Previous message | Next message →
Patience,
Are you meaning something like manually navigating through a web site using assistive technology like the NVDA screen reader to land upon non-text content and listen to what has or has not been provided as an alternative? Manually roaming through a page or site using keyboard only navigation?
Doug Hayman
IT Accessibility Coordinator
Information Technology
Olympic College
= EMAIL ADDRESS REMOVED =
(360) 475-7632
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of PATIENCE AGABIRWE via WebAIM-Forum
Sent: Thursday, March 14, 2024 7:44 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Cc: PATIENCE AGABIRWE < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] - [WebAIM] Manual user web interface accessibility test
CAUTION: This email came from a non-OC system or external source. Beware of phishing and social engineering!
Hi everyone,My name is Patience, from Uganda. I need support on how to run a manual accessibility test of a website. My focus is on text alternatives for non-text content, color contrast, keyboard navigation, navigation, and orientation. I have already used WAVE for the automatic accessibility evaluation test. I will be grateful for your kind support. Thank you.
Patience AgabirweMakerere university
People are different - and new technology must take that into account!MediaLT
From: Jano Llorca Lis
Date: Thu, Mar 14 2024 9:58AM
Subject: Re: Manual user web interface accessibility test
← Previous message | Next message →
Hello Patience,
Manual accessibility testing is crucial to ensure that all users,
regardless of their abilities, can access and effectively use a website.
It's great to know that you've already used automatic tools like WAVE to
assess the accessibility of your website. Below, I detail how to carry out
manual tests focusing on text alternatives for non-text content, color
contrast, keyboard navigation, and navigation and orientation:
1.
Text Alternatives for Non-Text Content
- Step by Step:
- Identify All Non-Textual Content: Includes images, videos,
audios, and any multimedia element.
- Review Alt Attribute in Images: Each image should have a
descriptive alt attribute that provides an appropriate
context. Decorative
images can have an empty alt attribute (alt="").
- Verify Descriptions for Multimedia Content: Videos and audios
should have available transcriptions or audio descriptions.
- Use of Development Tools: Use browser development tools to
inspect the source code and ensure that non-textual elements contain
appropriate alternative descriptions.
- Simulate the Experience with a Screen Reader: Use a screen
reader to navigate the website and verify that non-text content is
correctly announced.
2.
Color Contrast
- Step by Step:
- Select a Color Contrast Tool: There are several tools available
online, such as WebAIM's Contrast Checker.
- Examine Text Elements: Select texts (including links, buttons,
and texts on color backgrounds or images) and verify the
contrast between
the text color and its background.
- Meet Minimum Ratios: Ensure the text complies with the minimum
contrast ratios recommended by the WCAG (4.5:1 for normal
text and 3:1 for
large text).
- Review Interactive Visual Elements: Verify that interactive
elements maintain sufficient contrast in different states
(for example,
when hovering or focused).
3.
Keyboard Navigation
- Step by Step:
- Disconnect the Mouse: Start the test by disconnecting the mouse
or avoiding its use.
- Tabulation: Press the Tab key to navigate through links,
buttons, and form fields, ensuring all interactive elements
are reachable.
- Shift + Tab: Use Shift + Tab to navigate backward and verify
that the tabulation order is logical and consistent.
- Shortcut Keys: Test the site-specific shortcut keys, if any, to
ensure they work correctly.
- Keyboard Actions: Ensure all actions (such as submitting a form
or opening a dropdown menu) can be performed using only the keyboard.
4.
Navigation and Orientation
- Step by Step:
- Review Location Indicators: Verify there are clear indicators
that help users understand their current location on the site
(for example,
breadcrumbs).
- Logical Structure of Headers: Use browser development tools to
inspect the structure of headers (H1, H2, H3, etc.) and ensure they
properly reflect the content hierarchy.
- Consistency in Navigation: Check that the main navigation is
consistent across all web pages.
- Search Mechanisms: If the site has a search mechanism, test its
accessibility and functionality using only the keyboard.
- Site Map and Navigation Aids: Verify that accessible site maps
and other elements that facilitate orientation and navigation
are available.
Additional Tools and Tips:
- Documentation: Record accessibility findings in detail, including
screenshots and clear descriptions of the issues.
- Testing with Users: Consider conducting tests with real users,
especially those who use assistive technologies, to obtain feedback on site
accessibility.
Remember, besides manual tests focused on text alternatives for non-text
content, color contrast, keyboard navigation, and navigation and
orientation, there are other important areas to consider to ensure complete
web accessibility. Here I enumerate a comprehensive set of additional
manual tests:
1.
Use of Forms
- Labels and Structure: Verify that all form fields have associated
labels and that the structure is clear and logical.
- Accessible Error Messages: Ensure error messages are specific and
provide clear guidance to correct the error.
- Form Validation: Check that form validations do not rely solely on
color and are accessible.
2.
Dynamic Content
- Content Updates: Test that content updates (such as news feeds) are
announced by screen readers without the need to refresh the page.
- AJAX and JavaScript Interactions: Ensure all dynamic interactions
are accessible and work correctly with both the keyboard and
screen readers.
3.
Assistive Technologies Testing
- Screen Readers: Conduct thorough tests with different screen readers
(for example, NVDA, JAWS, VoiceOver) to ensure all content is accessible
and correctly interpreted.
- Screen Magnifiers: Verify that the website is usable and legible at
different zoom levels, up to a minimum of 200%, without losing
functionality or content.
4.
Browser and Device Compatibility
- Testing in Different Browsers: Test the site in different browsers
(including mobile versions) to ensure consistency and accessibility.
- Touch Responsiveness on Mobile Devices: Ensure the website is fully
functional and accessible on mobile devices, including the
accessibility of
tactile elements.
5.
Orientation and Context
- Help Information: Verify the availability and accessibility of help
information or instructions to understand and navigate the site.
- Additional Navigation Mechanisms: Ensure there are additional
navigation mechanisms like an accessible site map and a functional search
feature.
6.
Multimedia Content
- Subtitles and Transcriptions: Verify that all videos have subtitles
and that audio files have transcriptions.
- Audio Descriptions: Ensure important videos have audio descriptions
for users with visual impairments.
7.
Timeouts and Sessions
- Time Control: Test that the website allows users to control time
limits on sessions and other timed interactions.
- Pause, Stop, Hide: Ensure elements that move, blink, or
automatically update can be paused, stopped, or hidden.
8.
Language and Readability
- Language Clarity: Assess content to ensure the language used is clear
and straightforward, facilitating understanding for all users, including
those with cognitive difficulties.
9.
Testing with Diverse Users
- Usability Testing with People with Disabilities: Conduct tests with
users who have various disabilities to obtain direct feedback on the user
experience and identify accessibility issues not detected in
previous tests.
Conducting these additional manual tests will help you cover a broader
spectrum of accessibility needs and ensure your website is inclusive and
accessible to all users.
*Jano Llorca*
Consultor SEO - SEM - Social Ads
UX - UI - Diseño y Accesibilidad Web
Teléfono: 673 346 726
= EMAIL ADDRESS REMOVED =
<https://ilumina-agencia-consultora-seo.business.site/>
El jue, 14 mar 2024 a las 15:44, PATIENCE AGABIRWE via WebAIM-Forum (<
= EMAIL ADDRESS REMOVED = >) escribió:
> Hi everyone,My name is Patience, from Uganda. I need support on how to run
> a manual accessibility test of a website. My focus is on text alternatives
> for non-text content, color contrast, keyboard navigation, navigation, and
> orientation. I have already used WAVE for the automatic accessibility
> evaluation test. I will be grateful for your kind support. Thank you.
> Patience AgabirweMakerere university
>
> People are different - and new technology must take that into
> account!MediaLT
> > > > >
From: Jano Llorca Lis
Date: Thu, Mar 14 2024 10:05AM
Subject: Re: Manual user web interface accessibility test
← Previous message | No next message
Hello Patience,
Manual accessibility testing is crucial to ensure that all users,
regardless of their abilities, can access and effectively use a website.
It's great to know that you've already used automatic tools like WAVE to
assess the accessibility of your website. Below, I detail how to carry out
manual tests focusing on text alternatives for non-text content, color
contrast, keyboard navigation, and navigation and orientation:
-
Text Alternatives for Non-Text Content
-
Step by Step:
-
Identify All Non-Textual Content: Includes images, videos, audios,
and any multimedia element.
-
Review Alt Attribute in Images: Each image should have a
descriptive alt attribute that provides an appropriate
context. Decorative
images can have an empty alt attribute (alt="").
-
Verify Descriptions for Multimedia Content: Videos and audios
should have available transcriptions or audio descriptions.
-
Use of Development Tools: Use browser development tools to inspect
the source code and ensure that non-textual elements contain
appropriate
alternative descriptions.
-
Simulate the Experience with a Screen Reader: Use a screen reader
to navigate the website and verify that non-text content is correctly
announced.
-
Color Contrast
-
Step by Step:
-
Select a Color Contrast Tool: There are several tools available
online, such as WebAIM's Contrast Checker.
-
Examine Text Elements: Select texts (including links, buttons, and
texts on color backgrounds or images) and verify the contrast
between the
text color and its background.
-
Meet Minimum Ratios: Ensure the text complies with the minimum
contrast ratios recommended by the WCAG (4.5:1 for normal
text and 3:1 for
large text).
-
Review Interactive Visual Elements: Verify that interactive
elements maintain sufficient contrast in different states
(for example,
when hovering or focused).
-
Keyboard Navigation
-
Step by Step:
-
Disconnect the Mouse: Start the test by disconnecting the mouse or
avoiding its use.
-
Tabulation: Press the Tab key to navigate through links, buttons,
and form fields, ensuring all interactive elements are reachable.
-
Shift + Tab: Use Shift + Tab to navigate backward and verify that
the tabulation order is logical and consistent.
-
Shortcut Keys: Test the site-specific shortcut keys, if any, to
ensure they work correctly.
-
Keyboard Actions: Ensure all actions (such as submitting a form or
opening a dropdown menu) can be performed using only the keyboard.
-
Navigation and Orientation
-
Step by Step:
-
Review Location Indicators: Verify there are clear indicators that
help users understand their current location on the site (for example,
breadcrumbs).
-
Logical Structure of Headers: Use browser development tools to
inspect the structure of headers (H1, H2, H3, etc.) and ensure they
properly reflect the content hierarchy.
-
Consistency in Navigation: Check that the main navigation is
consistent across all web pages.
-
Search Mechanisms: If the site has a search mechanism, test its
accessibility and functionality using only the keyboard.
-
Site Map and Navigation Aids: Verify that accessible site maps and
other elements that facilitate orientation and navigation are
available.
Additional Tools and Tips:
-
Browser Extensions
-
axe DevTools Extension [image: opens in a new window]
<https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd>
-
Web Developer Extension for Chrome [image: opens in a new window]
<https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm>
-
Browser Bookmarklets
-
Dylan Barrell's Text Spacing Bookmarklet [image: opens in a new
window] <https://dylanb.github.io/bookmarklets.html>
-
ANDI Bookmarklet [image: opens in a new window]
<https://www.ssa.gov/accessibility/andi/help/install.html>
-
Paul Adam Bookmarklets [image: opens in a new window]
<http://pauljadam.com/bookmarklets/>;
-
Color Contrast Testing
-
Deque Color Contrast Analyzer (web app) [image: opens in a new window]
<https://dequeuniversity.com/color-contrast>
-
Colour Contrast Analyser [image: opens in a new window]
<https://developer.paciellogroup.com/resources/contrastanalyser/>
(desktop
software)
-
Documentation: Record accessibility findings in detail, including
screenshots and clear descriptions of the issues.
-
Testing with Users: Consider conducting tests with real users,
especially those who use assistive technologies, to obtain feedback on site
accessibility.
Remember, besides manual tests focused on text alternatives for non-text
content, color contrast, keyboard navigation, and navigation and
orientation, there are other important areas to consider to ensure complete
web accessibility. Here I enumerate a comprehensive set of additional
manual tests:
-
Use of Forms
-
Labels and Structure: Verify that all form fields have associated
labels and that the structure is clear and logical.
-
Accessible Error Messages: Ensure error messages are specific and
provide clear guidance to correct the error.
-
Form Validation: Check that form validations do not rely solely on
color and are accessible.
-
Dynamic Content
-
Content Updates: Test that content updates (such as news feeds) are
announced by screen readers without the need to refresh the page.
-
AJAX and JavaScript Interactions: Ensure all dynamic interactions are
accessible and work correctly with both the keyboard and screen readers.
-
Assistive Technologies Testing
-
Screen Readers: Conduct thorough tests with different screen readers
(for example, NVDA, JAWS, VoiceOver) to ensure all content is accessible
and correctly interpreted.
-
Screen Magnifiers: Verify that the website is usable and legible at
different zoom levels, up to a minimum of 200%, without losing
functionality or content.
-
Browser and Device Compatibility
-
Testing in Different Browsers: Test the site in different browsers
(including mobile versions) to ensure consistency and accessibility.
-
Touch Responsiveness on Mobile Devices: Ensure the website is fully
functional and accessible on mobile devices, including the
accessibility of
tactile elements.
-
Orientation and Context
-
Help Information: Verify the availability and accessibility of help
information or instructions to understand and navigate the site.
-
Additional Navigation Mechanisms: Ensure there are additional
navigation mechanisms like an accessible site map and a functional search
feature.
-
Multimedia Content
-
Subtitles and Transcriptions: Verify that all videos have subtitles
and that audio files have transcriptions.
-
Audio Descriptions: Ensure important videos have audio descriptions
for users with visual impairments.
-
Timeouts and Sessions
-
Time Control: Test that the website allows users to control time
limits on sessions and other timed interactions.
-
Pause, Stop, Hide: Ensure elements that move, blink, or automatically
update can be paused, stopped, or hidden.
-
Language and Readability
-
Language Clarity: Assess content to ensure the language used is clear
and straightforward, facilitating understanding for all users, including
those with cognitive difficulties.
-
Testing with Diverse Users
-
Usability Testing with People with Disabilities: Conduct tests with
users who have various disabilities to obtain direct feedback on the user
experience and identify accessibility issues not detected in
previous tests.
Conducting these additional manual tests will help you cover a broader
spectrum of accessibility needs and ensure your website is inclusive and
accessible to all users.
If you need help with tools or further testing, please do not hesitate to
contact me.
Regards
*Jano Llorca*
Consultor SEO - SEM - Social Ads
UX - UI - Diseño y Accesibilidad Web
Tlf: 673 346 726
= EMAIL ADDRESS REMOVED =
<https://ilumina-agencia-consultora-seo.business.site/>
El jue, 14 mar 2024 a las 15:44, PATIENCE AGABIRWE via WebAIM-Forum (<
= EMAIL ADDRESS REMOVED = >) escribió:
> Hi everyone,My name is Patience, from Uganda. I need support on how to run
> a manual accessibility test of a website. My focus is on text alternatives
> for non-text content, color contrast, keyboard navigation, navigation, and
> orientation. I have already used WAVE for the automatic accessibility
> evaluation test. I will be grateful for your kind support. Thank you.
> Patience AgabirweMakerere university
>
> People are different - and new technology must take that into
> account!MediaLT
> > > > >