buttons unreadable #27

Open
daxim opened this Issue Dec 11, 2009 · 5 comments

Comments

Projects
None yet
3 participants

daxim commented Dec 11, 2009

In the screenshot http://www2.pic-upload.de/11.12.09/cuji68t225hx.png pay attention to the elements marked with number 2.

The buttons are stunted, they overlap the input form element and their text is unreadable. The tool tip only shows the URL. Give the buttons a descriptive title attribute.

Owner

davorg commented Dec 12, 2009

Which browser and OS is this? The buttons work fine on every system I've tried.

Happy to try and fix this, but you'll need to help us to reproduce it.

daxim commented Dec 14, 2009

Opera 10.10 on openSUSE 11.2/KDE 4.3.4

Owner

davorg commented Dec 14, 2009

Thanks for the information.

I've just tried with Opera 10.10 on Fedora 11/Gnome 2.26 and the buttons look fine to me. We obviously need to investigate further.

daxim commented Dec 14, 2009

Investigation reveals the fault is with base.css:

text-indent: -999em;
overflow: hidden;

I use the following in my user style to undo it and now the buttons are readable.

#search-form-aux .submit, #global-nav-search .submit {
    text-indent: inherit !important;
    overflow: inherit !important;
}

Negative text-indent has been considered inaccessible for a long time (creates mystery-meat menus when images are unreliable). There are better ways, including image replacement or, in the case of form buttons, the input type="image" would maybe be best. Those can have alt text which shows when the image doesn't.
For that matter, the ambiguous text "Go" would be better as "Submit" as the search button image actually says. Frankly, that larger button would be fine with real button text and a background image... no need for text-indent there at all. More accessible, should generally still look good everywhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment