Create uniform process for designing for accessibility in design work

[srhhnry]

• [x] Research design accessibility standards to create a first draft of a list
• [x] Develop a checklist for accessibility moving forward
• [x] Check with developers to refine list of accessibility considerations
• [x] Integrate Fed requirements (per @machikoyasuda suggestion)
• [x] Incorporate standards on focus rings, hover design, and skip navs (per @machikoyasuda suggestion)

[srhhnry]

https://www.w3.org/WAI/fundamentals/accessibility-principles/ from @segacy1

[srhhnry]

@thekaveman @machikoyasuda @angela-tran

I put together a design checklist for accessibility. This checklist is to help Design ensure we're handing off accessible designs to you all so that Dev is not solely responsible for adhering to accessibility guidelines. When you have the time to review, do you mind adding any suggestions or edits that you think the list could use?

[thekaveman]

Thank you @srhhnry!

@machikoyasuda can you please give this a first pass from our side? We can discuss any questions this week as needed. I'll also take a look at the doc a little later this week.

[machikoyasuda]

I would recommend we start / re-use the checklists that have already been created by the federal government teams, and then add on anything extra for our Cal-ITP senior population (like font size maybe): https://accessibility.18f.gov/checklist/ https://accessibility.digital.gov/visual-design/getting-started/ https://accessibility.digital.gov/ux/getting-started/

Specifically, these two guides provide a lot more vital and comprehensive information: https://accessibility.18f.gov/keyboard/ + https://accessibility.18f.gov/forms/

My personal response, these are my top 2 requests from design:

1. It would be nice if design also designed custom focus rings. Or, if we are to default to whatever is the browser's default focus ring, then state this as a policy. I've noticed a lot of government sites have really big, definitive focus ring styles though -- like the ones below -- and I personally enjoy them:

2. All of our sites have skip navs: It would be nice to have design actually designs these too. Other sites have skip navs that match the design of their site.

[srhhnry]

Awesome! Thanks for the updates @machikoyasuda! I'm going to comb through both federal recommendations and incorporate them into the doc, as well as include sections for focus rings and skip nav. I updated the checklist up top to include those changes.

[machikoyasuda]

The 3 things I should see in Figma files, with regards to accessibility:

1. All buttons, links, inputs - anything clickable - should have a designed focus ring.
2. All buttons, links should have a designed hover design.
3. All header navs should have a designed Skip Nav.

[srhhnry]

I went through all of @machikoyasuda's suggestions and recommended guides and incorporated them into what is now a fairly robust document! I feel like I learned a lot and have a much better handle on incorporating accessibility into design.

The document can be found here: https://docs.google.com/document/d/1Hi0DnMvZUOsCMYcwhuySSeFcY5yzGj4JHN1hxR_nfMQ/edit?usp=sharing

And I'm going to go ahead and close this ticket and open up a new one for applying the steps to all of the current design projects.