Difference between revisions of "Accessibility (A11y) Quick Test Check List"

From Apache OpenOffice Wiki
Jump to: navigation, search
(New page: 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 '''key...)
 
 
(5 intermediate revisions by 2 users not shown)
Line 9: Line 9:
 
Check this as follows:
 
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!)
+
(WARNING: those are general keys which should work on most of the operating systems and window manager – beware of system specificities!)
  
 
* You can '''travel''' using <tt>'''Tab'''</tt> and the <tt>'''arrow'''</tt> keys in the '''whole UI '''and in a logical order
 
* You can '''travel''' using <tt>'''Tab'''</tt> and the <tt>'''arrow'''</tt> keys in the '''whole UI '''and in a logical order
Line 32: Line 32:
  
 
{| style="border-spacing:0;"
 
{| 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:0.002cm solid #000000;border-right:none;padding:0.097cm;"| [[Image:a11y_bad.jpg]]
 
| 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
 
| 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
  
Line 38: Line 38:
  
 
|-
 
|-
| 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:0.002cm solid #000000;border-right:none;padding:0.097cm;"| [[Image:a11y_better.jpg]]
 
| 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.
 
| 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.
  
Line 44: Line 44:
  
 
|-
 
|-
| 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:0.002cm solid #000000;border-right:none;padding:0.097cm;"| [[Image:a11y_best.jpg]]
 
| 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.
 
| 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 ==
 
== High Contrast ==
 
A high contrast them is a theme in which the '''color number is reduced''' and the graphical (i.e. icons) elements '''simplified'''.
 
A high contrast them is a theme in which the '''color number is reduced''' and the graphical (i.e. icons) elements '''simplified'''.
Line 81: Line 82:
  
 
{| style="border-spacing:0;"
 
{| style="border-spacing:0;"
| style="border:0.002cm solid #000000;padding:0.097cm;"| <center>[[Image:]]</center>
+
| style="border:0.002cm solid #000000;padding:0.097cm;"| <center>[[Image:Hc_off.jpg]]</center>
  
 
<center>UI on Windows - High Contrast OFF</center>
 
<center>UI on Windows - High Contrast OFF</center>
Line 89: Line 90:
  
 
|-
 
|-
| 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:]]</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>
 
<center>UI on Windows - High Contrast ON</center>
Line 97: Line 98:
  
 
|-
 
|-
| 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:]]</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>Non compliant icons when High Contrast is ON</center>
Line 108: Line 109:
  
 
|}
 
|}
 +
 +
[[Category: Accessibility]]

Latest revision as of 13:08, 28 March 2010

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:

  1. The accessibility over keyboard
  2. 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 of system specificities!)

  • You can travel using Tab and the arrow 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 Alt+<letter>
  • You can Close a dialog with Esc
  • Execute a button using Space or Enter
  • Check a check box with Space
  • Open a drop-down list box with Alt+Down
  • Change Tab pages using Ctrl+Tab
  • Operations on a whole dialog (move, re-size, maximize...) can be done using the window menu which can be reached using Alt+Space
  • Traveling between floating panels, toolboxes, document window, menu bar with F6 ; back with Shift+F6

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.


A11y bad.jpg BAD: the tasks are only differentiable using the colors

NOT accessible

A11y better.jpg BETTER: the colors can still lead to visibility problems but the second column convey the accurate information.

The colors MUST be customizable

A11y best.jpg 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"

- Click on [Settings]

- 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:

Hc off.jpg
UI on Windows - High Contrast OFF



Hc on.jpg
UI on Windows - High Contrast ON



Hc bug.jpg
Non compliant icons when High Contrast is ON
- not contrasting colors
- gradients
- white background remains white
Personal tools