A11y review of component library Part 1

[amycole501]

https://bears-storybook.app.cloud.gov/

Review all interactive elements and components in the library Ernesto created in Figma. https://www.figma.com/file/jt1oS8sGYDJn0MjYaprQkM/BEARS-DESIGN?type=design&node-id=1220-25299&mode=design

https://www.figma.com/file/y8Op8kBqkvCEMZQ7i13Fcr/SHARED-DOC-BEARS?type=design&node-id=1423-11679&mode=design&t=e4RAJK79cG93M41g-0

Add comments, considerations, and success criteria to ensure WCAG conformance.

Resources: https://www.w3.org/WAI/tips/designing/ WCAG https://accessibility.digital.gov/ux/forms/ Digital.gov

https://www.ramotion.com/blog/accessibility-in-ux-design/ UX designers can create accessible designs with the help of the following guidelines.

1. Create user personas
2. Design for all platforms and devices
3. Organize the content logically
4. Ensure consistency in design
5. Use accessible fonts
6. Choose the appropriate color contrast
7. Include alt-text for media content
8. Provide transcriptions and subtitles
9. Avoid excessive animation
10. Ensure meaningful anchor text
11. Use proper headings and HTML tags
12. Make the design screen-reader friendly
13. Include keyboard shortcuts
14. Use accessibility tools
15. Test with different users

[EnriqueOrt]

On track to be worked on by end of Sprint 10

[amycole501]

Started draft document here with comments https://docs.google.com/document/d/1sBVWo08RPtSlY-4gIMXVmZjBWUHRLufgVe-OnnkpJyk/edit?usp=sharing

[amycole501]

Met with Ernesto about aligning the style guide in Figma with details in the library-discussed differences in font, accordion slight differences, etc. Looped in Scott and found out that we are Ok to make suggestions and put in tickets as needed to suggest changes. Will continue working on this ticket and will close it and will most likely open an additional follow-up ticket to finish the review in the next sprint.

[amycole501]

This ticket will need to be broken up into several and pulling in Angelina to help test each component manually.