high contrast mode issues

[danielweck]

"About Readium" button not visible in Windows

Using Firefox version 30 running in Windows 7 the Readium About button is not visible in the nav bar when Windows high contrast mode is enabled. This is because a background image is used for the button face.

Since Readium doesn't load many images it may be easier just to use a real element rather that detecting high contrast mode and showing a hidden text span. We could also add the image as :before or :after content - these work with high contrast on but do not work when images are turned off.

Bugzilla:
https://app.devzing.com/Readium/bugzilla/show_bug.cgi?id=84

[danielweck]

Also:

These may be Firefox issues but entering here for more research and to track.

1)Using Firefox 30 in Windows 7 focus is not visible in the Settings dialog. Other than the radio buttons there is no visible focus indicator on the buttons and controls.

2. The borders of the tabs are not visible. The border change indicates which tab is active (even though the active tab can be determined by the content, it is still important for the active tab to be visually indicated in order to support screen magnifiers)

3. The Text and Background Styles buttons as well as the Close and Save Changes buttons are missing borders.

Bugzilla:
https://app.devzing.com/Readium/bugzilla/show_bug.cgi?id=85

[danielweck]

Also:

Tested in IE 11 and Firefox 30 in Windows 7 (via Parallels 8 on Mac running OS X 10.9.3)

In IE the title tooltip is displayed if I hover over the buttons with the mouse (even though I can't see the actual button image) and I can click them to change pages.

In FF the tooltip is not displayed when I hover over the buttons but the mouse cursor changes and I can click them to change pages.

Bugzilla:
https://app.devzing.com/Readium/bugzilla/show_bug.cgi?id=88

[becka11y]

But the mouse hover and click doesn't help keyboard users. If the button is not visible and the tooltip is not displayed on focus, the keyboard user won't know what each button is or does. This will fail WCAG 2.0 AA (which is what IBM requires) if not fixed.

[danielweck]

See also:
#153

[danielweck]

WCAG:
http://www.w3.org/TR/WCAG20/#visual-audio-contrast

[danielweck]

Related issue (dark theme contrast / hyperlinks colours):
#203