search

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
282 stars 203 forks source link

Create Accessibility Testing Artifact for EFSR Staging Review #57172

Closed OptionSelect closed 1 year ago

OptionSelect commented 1 year ago

https://depo-platform-documentation.scrollhelp.site/collaboration-cycle/prepare-for-an-accessibility-staging-review#Prepareforanaccessibilitystagingreview-Usingtheaccessibilitytestingartifactartifact

Per Brian DeConinck (Accessibility Team), this needs to be done at least 4 days prior to staging review. (We are tentatively planning for Staging Review to take place around June 6, 2023).

*Plan to bring this ticket into Sprint 100 (May 24- June 6).

OptionSelect commented 1 year ago

Needs to be created AFTER the following are merged. https://app.zenhub.com/workspaces/vsa---debt-607736a6c8b7e2001084e3ab/issues/gh/department-of-veterans-affairs/va.gov-team/56738

amponce commented 1 year ago

Design Team Roles:

  1. Color and contrast:

    • Ensure that color choices and contrast ratios meet accessibility guidelines during the design phase.
    • Utilize tools such as Who Can Use for checking color contrast ratios and Chrome Colorblindly plugin for colorblindness considerations.

  2. Typography and readability:

    • Choose accessible fonts, sizes, and line spacing to ensure that the text is easily readable by all users.
    • Design content hierarchy with accessibility in mind, making it easy for users to understand and navigate the information.

  3. Designing for keyboard navigation:

    • Consider keyboard navigation when designing layouts, menus, and interactive elements, ensuring a logical tab order and clear focus indicators.

  4. Designing for zoom and reflow:

    • Ensure that designs work well with different zoom levels and reflow, maintaining readability and usability.

  5. Accessible design components and patterns:

    • Use accessible design components and patterns from design systems, such as the VA.gov design system, as a foundation for creating accessible interfaces.

Frontend Team Roles:

  1. Implementing accessible markup and coding practices:

    • Write semantic HTML, use appropriate ARIA roles, and follow best practices to ensure that the code is accessible to assistive technologies.

  2. Keyboard navigation:

    • Ensure that all interactive elements are accessible via keyboard navigation, maintaining a logical tab order, and providing clear focus indicators.

  3. Content zoom and reflow:

    • Implement responsive design techniques to ensure that the content adapts well to different screen sizes and zoom levels, maintaining readability and usability.

  4. Testing with assistive technologies:

    • Test the implementation with screen readers, such as NVDA, JAWS, or VoiceOver, to ensure that it works as expected for users who rely on these tools.

  5. Automated accessibility testing:

    • Use tools like axe by Deque to perform automated accessibility testing and identify potential issues in the code.

  6. Addressing accessibility issues:

    • Collaborate with the design team to address any accessibility issues found during testing, working together to find solutions that meet the accessibility requirements.