top trim

Integrieren mit Bildschirmlesertechnik

To make an application available to visually impaired or blind users, you need to ensure that it properly integrates with assistive technology, such as screen reader software. Screen reader software interprets and reads information from the screen aloud. There are a variety of screen readers on the market today, the most popular of which is JAWS screen reader. To download a free demonstration version of JAWS, visit the Freedom Scientific website.

Wie es funktioniert

If a user is running a screen reader on his or her machine, the Boxely UI Toolkit will automatically detect it and relay information about the application to the reader. It is your job as the developer to ensure that the information relayed is accurate and helpful.

With Boxely Toolkit, much of the work is done for you. Each gadget included in the Toolkit is pre-programmed to tell the screen reader how to interpret it to the user. If, however, you choose to incorporate a non-gadget element in your application or if you choose to build a custom gadget, you must include specific code to inform the screen reader of its role, name, description, and so forth.

Integrationsrichtlinien

To integrate with screen reader technology, your application must provide:

  • Text equivalents for all graphics.

  • Text labels for all objects and controls.

  • Default buttons.

In additional, as you incorporate instructions in your application, be sure to:

  • Avoid instructional text that implies mouse activity.

  • Avoid instructional text that references the physical layout of the window.

"Reading" Eingabefelder

This section describes the various ways to introduce input fields using a screen reader.

At the simplest level, you can add an input gadget to your application using the following code:

<input value="" s:width="15" />

If you run an application with this code, when the input field is in focus, the screen reader determines its Microsoft Active Accessibility (MSAA) role and then announces information to the user to explain how he or she is expected to interact with the field. For example, when the input field is in focus, a screen reader might announce the following:

  • The type of control: "Edit"

  • Its value: "" (In the example above, the value is empty. If, however, the user returns to the input field after entering information into it, the reader will announce its current value.)

  • What the user is expected to do: "Type in text" (As the user types in text, the screen reader will announce each letter he or she types.)

To incorporate an input field with a label:

In most cases, an input field is accompanied by a label, as shown in the following code.

<hbox s:vAlign="center">
  <label id="firstName" value="First Name:" s:width="60"/>
  <input value="" s:width="15" accUseLabel="firstName" />
</hbox>

When the above code is run and the input field is in focus, the screen reader announces the following:

  • The label associated with the control: "First Name"

  • The type of control: "Edit"

  • Its value: "" (In the example above, the value is empty. If, however, the returns to the input field after entering information into it, the reader will announce its current value.)

  • What the user is expected to do: "Type in text" (As the user types in text, the screen reader will announce each letter he or she types.)

Wichtig

If the accUseLabel attribute is omitted, The Boxely UI Toolkit will look to the previous sibling element for text that describes the input field. As a result, if the previous sibling element is an label describing the input, it is not necessary to explicitly associate the two items using the accUseLabel attribute.

To incorporate an input field using accName:

If an input field has no visible label, you can use the accName attribute to inform the user of the type of information expected:

<input value="" accName="First Name" s:width="15" />

When the above code is run and the input field is in focus, the screen reader announces the following:

  • The label for the control: "First Name"

  • The type of control: "Edit"

  • Its value: "" (In the example above, the value is empty. If, however, the user returns to the input field after entering information into it, the reader will announce its current value.)

  • What the user is expected to do: "Type in text" (As the user types in text, the screen reader will announce each letter he or she types.)

"Reading" Check Boxen

This section describes how check boxes are introduced using a screen reader.

To incorporate a check box:

To add a check box to your application, use the following code:

<checkButton id="checkButton1" label="Subscribe to My AOL" />

When the above code is run and the check box is in focus, the screen reader determines its MSAA role and then announces information to the user to explain how he or she is expected to interact with the field. For example, when the check box field is in focus, a screen reader might announce the following:

  • The label for the control: "Subscribe to My AOL"

  • The type of control: "Check box"

  • Its value: "Not checked" or "Checked"

  • What the user is expected to do: "To check, press the space bar" or "To clear check box, press the space bar"

"Reading" Radio Buttons

This section describes how radio buttons are introduced using a screen reader.

To incorporate a radio button:

To add a radio box to your application, use the following code:

<radioButton label="New Member" value="newMember" accessKey="N"  />

When the above code is run and the radio button is in focus, the screen reader determines its MSAA role and then announces information to the user to explain how he or she is expected to interact with the field. For example, when the radio button is in focus, a screen reader might announce the following:

  • The label for the control: "New Member"

  • The type of control: "Radio Button"

  • Its value: "Not checked" or "Checked"

  • What the user is expected to do: "To change the selection, press the up or down arrow."

"Reading" Combo Boxen

This section describes how combo boxes introduced using a screen reader.

To incorporate a combo box with a label:

To add a combo box to your application, use the following code:

<label id="labelCCType" value="Select Credit Card Type" s:width="60"/>
<comboBox s:width="100" instantTooltip="Select Credit Card Type"
    accUseLabel="labelCCType" >
  <menuItem label="Visa" value="Visa" />
  <menuItem label="American Express" value="American Express"
      selected="true" />
  <menuItem label="MasterCard" value="MasterCard" />
</comboBox>

When the above code is run and the combo box is in focus, the screen reader determines its MSAA role and then announces information to the user to explain how he or she is expected to interact with the box. For example, when the combo box is in focus, a screen reader might announce the following:

  • The label for the control: "Select Credit Card Type"

  • The type of control: "Combo Box"

  • Its value: "American Express"

  • What the user is expected to do: "To change the selection, use the arrow keys."

To incorporate a combo box using accName:

If a combo box has no visible label, or if you wish to provide descriptive information to the reader that differs from the label values in the combo box menu items, you can use the accName attribute:

<comboBox s:width="100" accName="Select Credit Card Type" >
  <menuItem label="Visa" value="01" accName="Visa" />
  <menuItem label="Amex" value="02" selected="true"
     accName="American Express" />
  <menuItem label="MC" value="03" accName="MasterCard" />
</comboBox>

When the above code is run and the combo box is in focus, the screen reader announces the following:

  • The label for the control: "Select Credit Card Type"

  • The type of control: "Combo Box"

  • Its value: "American Express"

  • What the user is expected to do: "To change the selection, use the arrow keys."

"Reading" Menüs

This section describes how menus are introduced using a screen reader.

To incorporate a menu:

To add a menu to your application, use the following code:

<menuBar>
<menuBarItem label="File" accessKey="F" topLevelMenu="true">
  <menuPopup id="File">
    <menuItem label="New"/>
    <menuItem label="Open"/>
    <menuItem label="Save" accessKey="S" command="cmdSave" />
    <menuItem label="Save As"/>
  </menuPopup>
</menuBarItem>
<menuBarItem label="Edit" accessKey="E" topLevelMenu="true">
  <menuPopup id="Edit">
    <menuItem label="Cut"/>
    <menuItem label="Copy"/>
    <menuItem label="Paste" />
  </menuPopup>
</menuBarItem>
</menuBar>

When the above code is run and the menu is in focus, the screen reader determines its MSAA role and then announces information to the user to explain how he or she is expected to interact with the object. For example, when the menu is in focus, a screen reader might announce the following:

  • The type of control: "Menu"

  • What the user is expected to do: "To move through items, press up or down arrow" (As the user moves through items, the screen reader announces the label for the currently selected item.)

"Reading" Baumansichten

This section describes how tree views are introduced using a screen reader.

To incorporate a tree view:

To add a tree view to your application, use the following code:

<library xmlns="http://www.aol.com/boxely/resource.xsd"
  xmlns:box="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd">

  <bitmap id="bmp.folder" src="path/to/folder.png" />
  <bitmap id="bmp.folderOpen" src="path/to/folder_open.png" />
</library>

<listBox style="bordered" selectMode="multiple" s:width="160" treeIndent="30"
  s:height="300" s:maxHeight="auto" s:overflow="scroll" rowStroke="true">

<columns header="false">
  <column s:width="130"/>
</columns>

<rows>
<treeRow container="true">
 <treeCell icon="#bmp.folder" iconSelected="#bmp.folderOpen" label="Item 1"/>
 <rows>
  <treeRow>
   <treeCell icon="#bmp.folder" iconSelected="#bmp.folderOpen" label="Sub 1"/>
  </treeRow>
  <treeRow>
   <treeCell icon="#bmp.folder" iconSelected="#bmp.folderOpen" label="Sub 2"/>
  </treeRow>
 </rows>
</treeRow>

<treeRow container="true">
 <treeCell icon="#bmp.folder" iconSelected="#bmp.folderOpen" label="Item 2"/>
 <rows>
  <treeRow>
   <treeCell icon="#bmp.folder" iconSelected="#bmp.folderOpen" label="Sub 1"/>
  </treeRow>
  <treeRow>
   <treeCell icon="#bmp.folder" iconSelected="#bmp.folderOpen" label="Sub 2"/>
  </treeRow>
 </rows>
</treeRow>

</rows>
</listBox>

When the above code is run and the tree is in focus, the screen reader determines its MSAA role and then announces information to the user to explain how he or she is expected to interact with the tree. For example, when the tree is in focus, a screen reader might announce the following:

  • The label for the control: "Standard Tree Control"

  • The type of control: "List Box"

  • What the user is expected to do: "To move through items, press the arrow keys." (As the user moves through items, the screen reader announces the label for the currently selected item, as well as its level in the tree hierarchy.)

"Reading" Benutzerdefinierter Gadgets

While all of the available gadgets in the Boxely Toolkit are pre-programmed to announce the gadget to the user, if you incorporate a custom gadget into your application, you'll need to include information in the markup that describes how the gadget should be interpreted and introduced.

For example, the following code describes a custom gadget that is a button:

<gadget id="accTrainButton" type="control">
  <attributes  blockEvents="true"  accRole="buttonMenu"
     accNameAt="menuBoxLabel" />
  <parts>
    <box:text id="menuBoxLabel"
       inherits="value=label,icon,accelChar=accessKey" />
  </parts>
  <behavior inherits="box://ocpToolkit/content/behaviors.box#commandable">
    <reaction event="keyPress" keyCode="SPACE" action="toolkit:Pop"/>
  </behavior>
</gadget>

To properly introduce the gadget to a visually impaired user, the accRole and accNameAt attributes are required:

  • accRole defines the control's type.

  • accNameAt defines the part of the gadget that contains the text to be read as the label.

For more information on accessibility attributes, refer to online Accessibility Attributes and accRole Values lists.

bottom trim