Confirmed users
36
edits
Accessibility/Design Guide: Difference between revisions
Clarify combo color usage.
Mreschenberg (talk | contribs) (Alter button hover example to match current guidance.) |
Mreschenberg (talk | contribs) (Clarify combo color usage.) |
||
| Line 18: | Line 18: | ||
For components which represent a combination of states, a combination of colors is necessary. For example: | For components which represent a combination of states, a combination of colors is necessary. For example: | ||
* A hovered button | * A hovered button should invert its colors, using ButtonFace for text and border, and ButtonText for its background. | ||
* A visited link on a selected card should use MozNativeVisitedHyperlinkText | * A visited link on a selected card should use MozNativeVisitedHyperlinkText as its foreground, letting SelectedItem show through as its background. | ||
* An inactive button should use GrayText / ButtonFace | * An inactive button should use GrayText / ButtonFace | ||
* A selected tab should use SelectedItemText / SelectedItem with a ButtonText border | |||
Components which require a mapping that isn't explicitly described above should have their mapping approved by the Accessibility team. | Components which require a mapping that isn't explicitly described above should have their mapping approved by the Accessibility team. | ||
| Line 26: | Line 27: | ||
In addition to the color requirements described above, we enforce stylistic requirements for HCM. These styles increase component discoverabiltiy and assist users with cognative and/or motor disabilities, among others. | In addition to the color requirements described above, we enforce stylistic requirements for HCM. These styles increase component discoverabiltiy and assist users with cognative and/or motor disabilities, among others. | ||
* Controls, sidebars, toolbars, dialogs, and other views should be bounded by a solid, 1px border at minimum. This border should inherit the component's foreground color. In addition, the component should have adequate padding to ensure the border does not reduce the legibility of the component's content.A border is not necessary if the component's (semantically appropriate) background color differs from the background of its embedded component. | * Controls, sidebars, toolbars, dialogs, and other views should be bounded by a solid, 1px border at minimum. This border should inherit the component's foreground color unless the component requires a combination of colors (like the "selected tab" example above). In addition, the component should have adequate padding to ensure the border does not reduce the legibility of the component's content.A border is not necessary if the component's (semantically appropriate) background color differs from the background of its embedded component. | ||
* With HCM enabled, the set of styles our style system will permit is reduced. Properties [https://searchfox.org/mozilla-central/search?q=ignored_when_colors_disabled&redirect=false here] with a value of `ignored_when_colors_disabled=True` may be tweaked by the style system before computed style is set. Learn more [https://searchfox.org/mozilla-central/rev/25997ce8267ec9e3ea4b727e0973bd9ef02bba79/servo/components/style/properties/cascade.rs#388 here]. | * With HCM enabled, the set of styles our style system will permit is reduced. Properties [https://searchfox.org/mozilla-central/search?q=ignored_when_colors_disabled&redirect=false here] with a value of `ignored_when_colors_disabled=True` may be tweaked by the style system before computed style is set. Learn more [https://searchfox.org/mozilla-central/rev/25997ce8267ec9e3ea4b727e0973bd9ef02bba79/servo/components/style/properties/cascade.rs#388 here]. | ||