modxcms / a11y

MODX Accessibility for the Manager
14 stars 10 forks source link

Focus Indicator Color & Style #28

Closed dubrod closed 9 years ago

dubrod commented 9 years ago

For compliance with Web Content Accessibility Guidelines (WCAG)

The visual focus indicator on keyboard focus is either non-existent in some places or too hard to see. This can be added to manager/templates/default/css/index.css:

body *:focus {outline:2px solid #00948e !important;}
body #modx-header *:focus {outline:2px solid #fbf5be !important;}

This will solve the problem nearly everywhere, but additional styling and/or JavaScript will need to be added to make sure there is a visible outline around the custom checkboxes. I realize that this impacts the design somewhat, but having an easily-visible keyboard focus indicator is a requirement for accessibility, and has a huge positive impact on people who can't use a mouse. The impact on mouse users is minimal. They will see it on form fields, but that's probably a good thing. They won't see it with mouse hover (though you could certainly add the same styles for :hover, which would also be good for accessibility, though not as much of a requirement.)

[NOTE: I just noticed that the above styles only partially work in Safari and Chrome, presumably due to some conflicts with other webkit-specific styles in the style sheet somewhere, so additional work is needed to make the visual keyboard focus indicator functional in webkit browsers.]

See accessibility to-do list at https://dequeuniversity.com/modx-accessibility.html#styles

dubrod commented 9 years ago

added to index.scss

a11y-outline