search

mrwweb / useful-block-styles

Simple block styles you frequently need for the WordPress Block Editor
GNU General Public License v3.0
4 stars 1 forks source link

new Screen Reader Text style for headings #15

Closed mrwweb closed 3 years ago

mrwweb commented 3 years ago

Accessibly hides headings on front end and shows them dimmed and with icon in the editor. closes #14

Screenshots

Editor

image

Front End

image

Headings are hidden and tota11y shows the correct outline

rtvenge commented 3 years ago

@mrwweb looks great to me! I like that you used opacity to lighten it.

For good measure, I checked the color contrast and it does in fact pass WCAG 2.0 AA (when text is over 18pt). So I think that's great! I checked with Teri and she was pretty sure their requirement for WordPress admin is AA.

mrwweb commented 3 years ago

@rtvenge I agree that AA contrast is the goal. Opacity is tricky! I used it intentionally so it won't interfere with theme colors. However, it may not hit contrast marks for all colors that have proper contrast when fully opaque.

Maybe opacity should only apply when not hovered or focused? Maybe we should use some other indicator? I appreciate you thinking this through with me!