WebFacing Accessibility

The IBM® WebFacing Tool provides WebFacing application accessibility that removes barriers for users with special needs, allowing them better to access your applications.

Since the WebFacing tool is unique in that it converts an original 5250 host application into a Web application automatically, the accessibility of the resulting Web application is limited by the information available in the DDS at the time of conversion. Unfortunately, this information is usually insufficient, making additional changes by the WebFacing developer necessary after conversion to further improve the application's accessibility. This document describes different areas a developer should investigate and possibly modify to make the application more accessible.

• Images

  A visually impaired user who accesses your application using an assistive technology (AT) such as a screen reader must rely on alternative text to associate meaning with images or graphics. The Alternative text field has been added to WebFacing's Image Web Setting that allows you to easily specify the alternative text.

  
  Note: If no alternative text is specified, the field's current value will be used.

  For guidelines on how to specify good alternative text, please see the Related information below.

• Structures

  For assistive technologies to navigate, interpret, and deliver content, it is important that an application's markup correctly conveys the intended meaning. Using structural markup (rather than presentation markup) preserves the semantic meaning for users who do not use a visual browser.

  For example, HTML provides the elements <h1> to <h5> to identify headings. Since there is no equivalent DDS construct, however, WebFacing conversion cannot tell which fields or constants are headings and which are not.

  It may be clear that a heading such as “Parts Order Entry” is a heading when the screen is viewed by someone who is not visually impaired. However, someone using a screen reader, for instance, cannot tell that it is a heading simply by reading the text.

  

  The challenge is similar for the WebFacing conversion engine. You can, however, use the HTML overrides Web Setting to insert heading tags around the field:

  1. Open the DDS and find the text you want to identify as a heading.
  2. In the Web Settings view, select the HTML overrides category, then check Override generated HTML, and select the Insert radio button.
  3. Select the Before tab, and insert <h3 style="display:inline;"> .
  4. Switch to the After tab and enter </h3> to close the tag.
  5. Save and re-convert your DDS.

  Similar techniques can be used enhance accessibility by making changes for lists, table headings, and quotations, among other things. Please see the related documents section for further details on making changes to structural markup in a web application.

• Forms

  When assistive technologies encounter a form field, it is important that its context and description are available for the user to make sense of it. The recommended way achieving this is by associating fields with their descriptive text using the <label> element. In an original 5250 application, there is no mechanism with which to programmatically associate a field with its label. Typically, the only available cues are visual, such as how fields are positioned in relation to each other.

  

  This makes it impossible for the WebFacing conversion engine to automatically create such semantic associations in the generated Web application. Modifications for accessibility should be made by the WebFacing developer before deployment.

  To define a string of text as a label for a form field, use the <label> HTML element. The general syntax used is as follows:

  <form [...] >
          <label for="inputID" [...] >description</label>
          <input id="inputID" [...] />
  </form>

  For the application illustrated above, suppose that you would like to specify that “Customer number” is the label for the input field to its right.

  1. Open the DDS and locate the field you would like to use as a label.
  2. In the Web Settings view, select the HTML overrides category, then check Override generated HTML, and select the Insert radio button
  3. Select the Before tab, type <label for="">, and place the cursor between the quotation marks.
  4. Click the Insert field attribute button, and select the identifier of the field for which you want to specify the label.
  5. Click Insert. The Web Setting should now be in the following format:

     <label for="&{FMT01.CUSTNO.ID}">

  6. Switch to the After tab and enter </label> to close the tag.
  7. Save and re-convert your DDS.
  Note: It is possible to define multiple labels for a single form field. In the example we looked at above, the string “F4 for list” would be a good candidate for an additional label.
• Language

  WebFacing Version 9.5 introduces changes to dynamically query and use the language used by a job at run time on supporting servers. Since this requires the job to be started, however, the language information is not available prior to launch on the application's index or logon pages, so the language defaults to English.

  To specify a different language on the index page, open the file index.jsp, and add the lang attribute with the appropriate language code to the <html> tag, for example:

  <HTML lang="en">

  The same technique can be used for the page logon.jsp.

  Note: If your application includes pages that contain multiple languages on the same screen, you can use the lang attribute on other tags to identify the language. This can be done using the HTML overrides Web Setting by selecting the Insert option and specifying lang=”<encoding>" on the Inside tab.
• Tables

  When using a table to display data, relationships between headings and rows or columns can get quite complicated, making it difficult for assistive technologies to deliver content in a way that is easy to understand. Changes that a WebFacing developer can make to improve the accessibility of tables in their application are described below.

  Making sense of data tables can be very challenging without knowing how that data is organized. Using markup to identify the headings of rows and columns will make it much easier for assistive technology to deliver content in a meaningful fashion.

  To identify a table cell as the heading of a column or row, use the table heading tag, <TH>, in combination with the scope attribute.

  Following is an example of how to make such a change for a subfile:

  1. Open the appropriate JSP (in this example the JSP which was generated for the subfile control record).
  2. In the JSP, locate the table headings tags (indicated by <TD>).
     

  3. Replace the <TD> opening and </TD> closing tags with <TH> and </TH> respectively.
     

  4. Add the attribute scope=”col” to each instance.
     
     Note: There is a corresponding scope=”row” value that can be used in situations where you may have horizontal headings. Both values may be used on the same table.

  When changing a cell's markup from <TD> to <TH>, you may find that text has been centered and boldfaced, depending on the styles already applied. Testing your changes will quickly tell you whether any further modifications are needed.

• Error Messages

  To access error messages using a screen reader a shortcut key for headers can be used. Reading out the whole page again will also read out the error message.

• Windows

  For assistive technology to read out when a window comes up, a WDWTITLE keyword needs to be specified with the appropriate title text on the WINDOW record.

For more detailed and a complete list of web accessibility considerations, refer to the related links below.