search

cds-snc / node-starter-app

Quick start application setup.... because you have to start somewhere.
MIT License
5 stars 3 forks source link

Accessibility - Visible focus indicator #138

Open JuliannaR opened 4 years ago

JuliannaR commented 4 years ago

Summary

The skip link has no visible focus indicator because it's used as a banner.

Example of our implementation

Screen Shot 2019-11-27 at 11 49 08 AM

Example of GDS implementation

Screen Shot 2019-11-28 at 9 50 50 AM

Motivation

This is a required accessibility fix. Keyboard users need to have visible focus indicators to understand where they are in the content, or where their focus has moved to.

Design Detail

Focus Visible WCAG 2.0 AA 2.4.7 https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

Content on Hover/Focus WCAG 2.1 AA 1.4.13 https://knowbility.org/blog/2018/WCAG21-1413ContentHoverFocus/

Drawbacks

None that I am aware of. Open to discussion.

Prior Art

Discuss prior art, both the good and the bad, in relation to this proposal. A few examples of what this can include are:

See above to GDS example.

Unresolved questions

What parts of the design do you expect to resolve through the RFC process before this gets merged?

What parts of the design do you expect to resolve through the implementation of this feature before stabilisation?

What related issues do you consider out of scope for this RFC that could be addressed in the future independently of the solution that comes out of this RFC?

timarney commented 4 years ago

Looks like I didn't ask you.

Let's merge this - wondering why the skip link doesn't have a focus outline but we can chat with @JuliannaR next week.

https://github.com/cds-snc/node-starter-app/pull/51#issuecomment-533667022