View source for Accessibility (A11y) Quick Test Check List

The '''basic accessibility '''of a User Interface (UI) element can be summed up in two areas which can be checked by anyone without deep knowledge in a11y:

# The accessibility over '''keyboard'''
# The correct use '''colors''' and the''' high contrast''' compliance

= Keyboard functionality =
The rule: “Every UI element must be reachable with the keyboard”

Check this as follows:

(WARNING: those are general keys which should work on most of the operating systems and window manager – beware about system specificities!)

* You can '''travel''' using <tt>'''Tab'''</tt> and the <tt>'''arrow'''</tt> keys in the '''whole UI '''and in a logical order
* Alternatively, you can use the '''mnemonics '''(also called shortcuts) to jumps to controls. Standard is <tt>'''<nowiki>Alt+<letter></nowiki>'''</tt>
* You can '''Close''' a dialog with <tt>'''Esc'''</tt>
* '''Execute''' a button using <tt>'''Space'''</tt> or <tt>'''Enter'''</tt>
* Check a '''check box''' with <tt>'''Space'''</tt>
* Open a '''drop-down list box''' with <tt>'''Alt+Down'''</tt>
* Change '''Tab pages''' using <tt>'''Ctrl+Tab'''</tt>
* Operations on a whole '''dialog''' (move, re-size, maximize...) can be done using the '''window menu''' which can be reached using <tt>'''Alt+Space'''</tt>
* Traveling between floating panels, toolboxes, document window, menu bar with <tt>'''F6'''</tt> ; back with <tt>'''Shift+F6'''</tt>

= The correct use colors and the high contrast compliance =
== Colors ==
In general colors should NOT be used to convey information.

Colors “may” be used IF there are text alternative for the information they convey.


Example: a tasks list tagged with different categories.


{| style="border-spacing:0;"
| style="border-top:0.002cm solid #000000;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| [[Image:]]
| style="border-top:0.002cm solid #000000;border-bottom:0.002cm solid #000000;border-left:none;border-right:0.002cm solid #000000;padding:0.097cm;"| BAD: the tasks are only differentiable using the colors

NOT accessible

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| [[Image:]]
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:none;border-right:0.002cm solid #000000;padding:0.097cm;"| BETTER: the colors can still lead to visibility problems but the second column convey the accurate information.

The colors MUST be customizable

|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:none;padding:0.097cm;"| [[Image:]]
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:none;border-right:0.002cm solid #000000;padding:0.097cm;"| BEST: don't use colors where it is not needed.

|}
== High Contrast ==
A high contrast them is a theme in which the '''color number is reduced''' and the graphical (i.e. icons) elements '''simplified'''.

Some high contrast themes, like High Contrast Black, invert the foreground and background colors. The application/document background switches to black while the text switches to a light color (white, green, yellow...).


=== How to set the High Contrast Black theme on Windows (XP)? ===
- Start – Control Panel – Accessibility Options – Display

- Check "Use High Contrast"

<nowiki>- Click on [Settings]</nowiki>

- Choose "High Contrast Black" in the list.


=== How to set the High Contrast Black theme on Gnome? ===
- Gnome Launch menu - Preferences - Desktop Preferences - Display - Theme

- Choose the "High Contrast inverse" theme

=== How to set the High Contrast Black theme on MAC OSX? ===
There is no High Contrast Theme on MAC OSX.

Not in the meaning of different icon sets with modified colors.

The High Contrast Black setting can be reached under: System Preferences - Universal Access - Seeing - Display - White on Black (and) Contrast.

But this is just a video display change so it is useless to test this with OOo.

=== Example of UI in High Contrast Black mode: ===

{| style="border-spacing:0;"
| style="border:0.002cm solid #000000;padding:0.097cm;"| <center>[[Image:Hc_off.jpg]]</center>

<center>UI on Windows - High Contrast OFF</center>




|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| <center>[[Image:Hc_on.jpg]]</center>

<center>UI on Windows - High Contrast ON</center>




|-
| style="border-top:none;border-bottom:0.002cm solid #000000;border-left:0.002cm solid #000000;border-right:0.002cm solid #000000;padding:0.097cm;"| <center>[[Image:Hc bug.jpg]]</center>

<center>Non compliant icons when High Contrast is ON</center>

<center>- not contrasting colors</center>

<center>- gradients</center>

<center>- white background remains white </center>

|}