Usability and ergonomics

How to adapt application forms to disabled users?

Design simple application forms

Keep your forms as simple as possible. Because everything will be described by the screen reader software, it is preferable to have a lot of small and concise forms with a few fields. With forms containing a lot of labels and fields, the screen reader will take a long time to enumerate every name and description. The end user must be able to create an image of the form in his mind, based on the form description.

Make form content bigger

Consider using a special .4st presentation styles file defining big fonts, big icons, and high contrast color themes; this will make your application a lot more efficient for users who are partially sighted. Forms will take more space on the screen, assuming that the forms have a limited number of fields to have sufficient room for large widgets.

Use large icons (such as 64x64 pixel icons), for people with impaired vision. Do not forget that most of the default sizes (font, icons, GUI components, and so on) were set when the default resolution was 640*640 pixels in 16 colors. Now, even if the user has very good sight, with the screen resolution available today, old-style icons look small.

Use a high contrast color theme. Although support of the system high contrast theme is only partial, nothing prevents you from setting up the correct theme using a specific presentation style attributes.

Example

Presentation styles file defining larger, bolder fonts and larger icons:

<StyleList>

  <Style name="*" >
    <StyleAttribute name="fontSize" value="10" />
  </Style>

  <Style name="Action" >
    <StyleAttribute name="scaleIcon" value="28px"/>
    <StyleAttribute name="fontSize" value="12" />
  </Style>

  <Style name="Window" >
    <StyleAttribute name="actionPanelPosition" value="bottom"/>
    <StyleAttribute name="actionPanelButtonSpace" value="huge"/>
    <StyleAttribute name="actionPanelHAlign" value="center"/>
    <StyleAttribute name="ringMenuPosition" value="bottom"/>
    <StyleAttribute name="ringMenuButtonSpace" value="huge"/>
    <StyleAttribute name="ringMenuHAlign" value="center"/>
  </Style>

  <Style name="ToolBar" >
    <StyleAttribute name="scaleIcon" value="32px"/>
  </Style>

  <Style name="Edit:focus" >
    <StyleAttribute name="fontWeight" value="bold" />
    <StyleAttribute name="backgroundColor" value="darkBlue" />
    <StyleAttribute name="textColor" value="white" />
  </Style>

</StyleList>