w3c / wai-wcag-quickref

How to Meet WCAG (Quick Reference)
https://wai-wcag-quickref.netlify.com
Other
69 stars 35 forks source link

Clearly separate WCAG Version drop-down from other text #160

Closed shawna-slh closed 6 years ago

shawna-slh commented 6 years ago
wimpy-border

Drop-down text visually runs into the text below it -- very hard to tell what is in the drop-down and not.

Needs much more clear separation.

Maybe make a very strong (probably extra-thick and dark) border at the bottom of the WCAG Version drop-down box. Possibly extra space, too?

Thanks!

yatil commented 6 years ago

This is the default styling of the operating system. Other operating systems do a better job here. Example: macOS

I see what I can do, but those native form elements are hard to style.

yatil commented 6 years ago

@slhenry Only so I can make sure it works in the browser you are using, too: Can you tell me what you use (or if it is a general issue on Windows. (there should at least be a border underneath “Only 2.1…”

shawna-slh commented 6 years ago

grumble, grumble, grumble browsers!

Chrome:

wimpy-border

Firefox:

ff-wimpy-border

IE:

ie-wimpy-border

p.s. Keep in mind that I have some OS and browser settings to increase readability and legibility for low vision. Unfortunately, I haven't kept track of them all, and so can't easily turn them all off for testing. :-/

Feel free to close this GitHub issue if we're calling it a browser ACCESSIBILITY BUG that's not reasonably worked-around.

yatil commented 6 years ago

In my Windows 8.1 testing environment, chrome at least has a bottom border. I looked into fiking it with CSS but there seems no obvious way.

screen shot 2018-06-06 at 11 39 14