a11y-artifact-discovery's People
Forkers
shiragoodmana11y-artifact-discovery's Issues
Another test
[Accessibility Testing]: 526ez | Update military service options
Product information
- Team name, product name, and feature name have been added to the title of this issue.
- Product label and feature label (if applicable) have been added to this issue.
Who completed the use of color and color contrast test?
joshkimux
Use of color and color contrast checks
- All text of 20px or smaller has a 4.5:1 contrast ratio to its background (or better)
- All text of 20px or larger has a 3:1 contrast ratio to its background (or better)
- Non-text elements have a 3:1 contrast ratio to their background and to neighboring elements (or better)
- Color is not the only way to distinguish links from other text (eg. links are underlined)
- Any charts, maps, infographics, and tables convey all information without only relying on color
- Content does not refer to color, especially when providing user instructions (eg. "Click the blue button")
How did color testing go?
I also tested using various filters. Using greyscale, my eyes strained a bit reading the thicker source sans font.
That being said, it still easily passes the required contrast ratio.
Who completed the axe scans?
joshkimux
axe checks
- Each page has been scanned using axe (results shared below)
- axe is integrated into your end-to-end testing
axe DevTools scan results
Nothing but the usual flags to review color contrast and the repetitive link in the header
How did axe testing go?
Easy as always!
Who completed the content zoom and reflow test?
joshkimux
Content zoom and reflow checks
- All page elements are readable and usable at 200% zoom
- All page elements are readable and usable at 300% zoom
- All page elements are readable and usable at 400% zoom
How did content zoom and reflow testing go?
No response
Who completed the keyboard navigation test?
joshkimux
Keyboard navigation checks
- Each link, button, form input, checkbox, radio button, select menu, and custom element can receive keyboard focus
- Each link, button, form input, checkbox, radio button, select menu, and custom element responds to expected keys
- All elements under focus have a visible focus indicator
- The order of [Tab] stops made sense and was appropriate for completing tasks
How did keyboard testing go?
Robin is the GOAT ๐ , so this went mostly smoothly despite the immense complexity of this pattern.
Visible focus indicators?
There is the open conversation on if there should or shouldn't be a visible focus indicator for elements that receive focus but aren't interactive e.g. the legends Robin jumps the focus to.
To make the experience more consistent, we may want to consider only placing the focus on interactive fields. This is more of a defect-4
(minor/consider) ticket though as the experience still works smoothly and may not even be an issue if it tests well.
Focus is lost when more than one fieldset is expanded
When more than one fieldset is expanded and the user clicks "save," focus is lost and is not placed on the edit button as what would be expected.
Screen.Recording.2022-11-15.at.8.50.48.AM.mov
Acceptance criteria
- When more than one fieldset is expanded and the user clicks "Save," focus should be placed on the edit button of that fieldset
Mismatched focus when updating multiple fieldsets
Another interesting issue I caught is when the following conditions are met
- 3 service periods exist
- The first two service periods are open and the third is closed
- The user clicks "update" or "cancel" on the second service period
- Focus is sent to the third service period's edit button, not the second
Screen.Recording.2022-11-15.at.8.55.49.AM.mov
Acceptance criteria
- Focus must be sent to the service period's edit button when updating (and not to different service periods)
Do you have any other results to share?
Smooth scroll
When a new service period is added, the page smooth scrolls down to follow the focus which may cause physical discomfort for some Veterans with TBI or vestibular disorders.
Screen.Recording.2022-11-15.at.8.38.02.AM.mov
Acceptance criteria:
- Page does not smooth scroll when adding a new service period (a quick jump to is preferred)
Persistent errors
When a user...
- Adds a new service period
- Attempts to submit without filling out anything
- Receives an error
- Deletes the new service period (without filling anything in)
- Adds a new service period again
The errors are still active. For a screen reader user, they'll hear a loud bleep alert calling out an error.
Screen.Recording.2022-11-15.at.8.45.11.AM.mov
Acceptance criteria
- When adding a new service period, errors should not persist from prior efforts
Accessibility Testing for [47915, Cheryl E, TEST-1]
Product information
- Team name, product name, and feature name have been added to the title of this issue.
- Product label and feature label (if applicable) have been added to this issue.
Who completed the use of color and color contrast test?
CherylEvans
Use of color and color contrast checks
- All text of 20px or smaller has a 4.5:1 contrast ratio to its background (or better)
- All text of 20px or larger has a 3:1 contrast ratio to its background (or better)
- Non-text elements have a 3:1 contrast ratio to their background and to neighboring elements (or better)
- Color is not the only way to distinguish links from other text (eg. links are underlined)
- Any charts, maps, infographics, and tables convey all information without only relying on color
- Content does not refer to color, especially when providing user instructions (eg. "Click the blue button")
How did color testing go?
@briandeconinck Is this space intended to answer the above questions, and tag someone to look at prior to SR? Is this space also intended to reference any GH issues you've created as a result of this testing? :-)
I assume it is, just wanted to be sure.
Who completed the axe scans?
CherylEvans
axe checks
- Each page has been scanned using axe (results shared below)
- axe is integrated into your end-to-end testing
axe DevTools scan results
There were no unresolved issues.
How did axe testing go?
@briandeconinck Testing went well. I have attached an image.
Who completed the content zoom and reflow test?
CherylEvans
Content zoom and reflow checks
- All page elements are readable and usable at 200% zoom
- All page elements are readable and usable at 300% zoom
- All page elements are readable and usable at 400% zoom
How did content zoom and reflow testing go?
@briandeconinck I am attaching a test image
Who completed the keyboard navigation test?
CherylEvans
Keyboard navigation checks
- Each link, button, form input, checkbox, radio button, select menu, and custom element can receive keyboard focus
- Each link, button, form input, checkbox, radio button, select menu, and custom element responds to expected keys
- All elements under focus have a visible focus indicator
- The order of [Tab] stops made sense and was appropriate for completing tasks
How did keyboard testing go?
Do you have any other results to share?
@briandeconinck TEST TEST TEST
[Accessibility Testing]: [Insert Product Name] TEST
Who completed the use of color and color contrast test?
No response
Use of color and color contrast checks
- All text of 20px or smaller has a 4.5:1 contrast ratio to its background (or better)
- All text of 20px or larger has a 3:1 contrast ratio to its background (or better)
- Non-text elements have a 3:1 contrast ratio to their background and to neighboring elements (or better)
- Color is not the only way to distinguish links from other text (eg. links are underlined)
- Any charts, maps, infographics, and tables convey all information without only relying on color
- Content does not refer to color, especially when providing user instructions (eg. "Click the blue button")
How did color testing go?
No response
Who completed the axe scans?
No response
axe checks
- Each page has been scanned using axe (results shared below)
- axe is integrated into your end-to-end testing
axe DevTools scan results
No response
How did axe testing go?
No response
Who completed the content zoom and resizing test?
No response
Content zoom and resizing checks
- All page elements are readable and usable without any horizontal scrolling at 200% zoom
- All page elements are readable and usable without any horizontal scrolling at 300% zoom
- All page elements are readable and usable without any horizontal scrolling at 400% zoom
How did content zoom and resizing testing go?
No response
Who completed the keyboard navigation test?
No response
Keyboard navigation checks
- Each link, button, form input, checkbox, radio button, select menu, and custom element can receive keyboard focus
- All elements under focus have a visible focus indicator
- The order of [Tab] stops made sense and was appropriate for completing tasks
How did keyboard testing go?
No response
Test
Accessibility Testing for [Team TEST, Product TEST, Feature TEST]
Product information
- Team name, product name, and feature name have been added to the title of this issue.
- Product label and feature label (if applicable) have been added to this issue.
Who completed the use of color and color contrast test?
Use of color and color contrast checks
- All text of 20px or smaller has a 4.5:1 contrast ratio to its background (or better)
- All text of 20px or larger has a 3:1 contrast ratio to its background (or better)
- Non-text elements have a 3:1 contrast ratio to their background and to neighboring elements (or better)
- Color is not the only way to distinguish links from other text (eg. links are underlined)
- Any charts, maps, infographics, and tables convey all information without only relying on color
- Content does not refer to color, especially when providing user instructions (eg. "Click the blue button")
How did color testing go?
TEST TEST: Our team didn't design the icons on our page and have no control over them, but the contrast within the icon is not 3:1 (dark gray circle with black icon at center). It does meet contrast requirements to adjacent background. Do you have advice?
Who completed the axe scans?
axe checks
- Each page has been scanned using axe (results shared below)
- axe is integrated into your end-to-end testing
axe DevTools scan results
TEST: Axe reports that 67 instances of "element must have sufficient color contrast." The expansion on this issue states "the element's background color could not be determined due to a background image." Test done on this page: (https://www.va.gov/education/)
How did axe testing go?
This meets our expectations, but a few issues did show up. I am confident that the color contrast meets the requirements listed above, but axe couldn't read it. Should I do anything about this? How do I know if any of this will be designated as launch blocking?
Who completed the content zoom and reflow test?
Content zoom and reflow checks
- All page elements are readable and usable at 200% zoom
- All page elements are readable and usable at 300% zoom
- All page elements are readable and usable at 400% zoom
How did content zoom and reflow testing go?
Great! No issues.
Who completed the keyboard navigation test?
Keyboard navigation checks
- Each link, button, form input, checkbox, radio button, select menu, and custom element can receive keyboard focus
- Each link, button, form input, checkbox, radio button, select menu, and custom element responds to expected keys
- All elements under focus have a visible focus indicator
- The order of [Tab] stops made sense and was appropriate for completing tasks
How did keyboard testing go?
Great!
Do you have any other results to share?
-
I wasn't able to add additional labels to this ticket (probably while its in your personal repo?)
-
If someone wanted to do additional testing using JAWS or a device, should we provide a link to advanced accessibility testing documentation/guidance within this ticket?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.