Usability and ergonomics

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 make a picture of the form in their mind, according to 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 sited. 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 eyes, 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 large 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>