Uploaded image for project: 'Kuali Rice Development'
  1. Kuali Rice Development
  2. KULRICE-5437

UIF Framework - Add standard markup for table semantics

    Details

    • Type: Task
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: 2.6
    • Security Level: Public (Public: Anyone can view)
    • Labels:
    • Environment:
    • Epic Link:
    • Rice Team:
      Framework
    • Rice Module:
      KRAD
    • Application Requirement:
      KS
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required

      Description

      For fixing missing table semantics within the KNS L&F forms, and the reqs for new KRAD table structures, see https://wiki.kuali.org/display/KULRICE/KRAD+-+Table+semantics+-+uplift+to+code+standards+%28including+accessibility%29

      (The material below is redundant with the above requirements page.)

      Required for WCAG 2.0 level A (Must have):
      – Adaptable Content criteria 1.3.1: Info & relationships: info, structure & relationships can be programmatically determined or are available in text. (This applies for read-only information as well as for editable forms that require user input.)
      – Readable Content criteria 3.3.2: Labels or instructions are provided when content requires user input.

      (Related to this, for grouping items within a table cell, See https://jira.kuali.org/browse/KULRICE-5842)

      1. Table summary tags. Recommendation is to add the appropriate table semantics/structure as detailed below, rather than to add a summary tag. If not possible to fix the table structure, then add and populate the summary tag. Background details: See http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H73. With other good table structure, not having the summary tags wouldn't make us inaccessible. The "summary" attribute is only required if the actual table name (i.e. as provided by a <caption> element, a "title" attribute or an "aria-labelledby" attribute) is not sufficient. In that case, the summary attribute is used to provide a textual description of the information and structure that the table provides.

      2. Header attributes on the td tags where the cells include a link. Recommendation:
      Add header attribute on the td tags that include a link. Background details: If the table is marked up correctly screen readers, e.g.JAWS, will announce the headers before announcing the cell values. See http://www.w3.org/WAI/GL/2010/WD-WCAG20-TECHS-20100708/H79. For most problematic example/location, see the travel account inquiry page. The cells with the links in the main tables on this page (e.g. "a14") don't have header attributes on the td tags. And the cells in the table at the bottom of that same page with links also don't have them. The header attribute is particularly useful for complex tables where a cell's associated headers cannot be reliably determined from the table structure.

      Fix alternative 2.a., code snippet example (this example also has off-screen column headers, but focus on the header id and header reference tags):

      CSS:
      .offScreen

      { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

       
      HTML:
      <h4 id="tableLbl">Travel Account (a14)</h4>
      <table aria-labelledby="tableLbl">
      <tr class="offScreen">
      <th>Property Name</th>
      <th>Property Value</th>
      </tr>
      <tr>
      <td>Travel Account Number</td>
      <td><a href="#">a14</a></td>
      </tr>

      3. Missing column and row header scope attributes (scope='') on the td tags. See http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H63. For example problem table, see the "Fiscal Officer Accounts" sub-section at the bottom of the travel accounts inquiry page. The content is created as two separate tables, one for the headings (JAWS reads "table with 5 columns and 1 row" and reads across it) and a different table for the content (after reading the headings table, JAWS reads "table with 5 columns and 5 rows" and reads across each row, then continues to the next row). This is a problem as there is no way for non-sighted users to associate the row contents with the headings or even to tell when one cell ends and another begins. For a proper column header announcement the screen reader must perceive the table as one single structure. This means that the best way is to mark up the table up using one <table> element, and mark up the column headers appropriately.

      However, if instead, this MUST be 2 tables (for widget/sorting capabilities, etc.), the 2nd table must have table structure tags that associate each cell with the appropriate column label provided in the 1st table, so a screen reader can announce in the second table the appropriate semantic information with each cell's content. There are two potential fixes for this, detailed below:

      3.a. Fix alternative a = To fix the broken table structure for browsers that support ARIA, do the following:

      • Wrap a single <div role="grid" aria-readonly="true"> around both tables.
      • Add row="presentation" to each individual table element.
      • Because role="presentation" removes all native roles for the rows and cells inside the table, you have to re-apply them using ARIA as well: Use role="row" for <tr> elements, role="columnheader" or role="rowheader" for <th> elements, and role="gridcell" for <td> elements.

      Below is a code "snippet" example:

      <div role="grid" aria-readonly="true">
      <table role="presentation">
      <tr role="row">
      <th role="columnheader">Travel Account Number</th>
      <th role="columnheader">Account Name</th>
      <th role="columnheader">Travel Fiscal Officer ID</th>
      </tr>
      </table>
      <table role="presentation">
      <tr role="row">
      <th role="rowheader">234235245</th>
      <td role="gridcell">Expenses</td>
      <td role="gridcell">235</td>
      </tr>
      <tr role="row">
      <th role="rowheader">234234333</th>
      <td role="gridcell">Accomodation</td>
      <td role="gridcell">235</td>
      </tr>
      <tr role="row">
      <th role="rowheader">769856859</th>
      <td role="gridcell">Transport</td>
      <td role="gridcell">237</td>
      </tr>
      </table>
      </div>

      3.b. Fix alternative b = Fix for all browsers (non-ARIA as well as ARIA): Add hidden Column Headings. With this approach a column header row is added to the 2nd table. In this case there would be two column headers: one for the property name column and one for the property value column. To maintain the same visual appearance, this row can then be hidden off screen using CSS while keeping the information available for screen reader users:

      Below are code "snippet" examples:

      CSS:
      .offScreen

      { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

      HTML:
      <h4 id="tableLbl">Travel Account Information</h4>
      <table aria-labelledby="tableLbl">
      <tr class="offScreen">
      <th>Property Name</th>
      <th>Property Value</th>
      </tr>
      <tr>
      <td>Travel Account Number</td>
      <td><a href="#">a14</a></td>
      </tr>
      <tr>
      <td>Account Name</td>
      <td>*********</td>
      </tr>
      <tr>
      <td>Account Type</td>
      <td>CAT - Clearing Account Type</td>
      </tr>
      </table>

      4. Missing rowspan and colspan tags in table definitions. See http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H43.html. For example, text headings are used instead of column headings in places in tables (for example "Old", "New" in the travel account maintenance edit page are heading level 4s). Impossible for non-sighted user to understand the semantic relationship with the cells. Without proper table markup (since this is a table) it is confusing: user is told there is a table with 4 columns and 9 rows, then the screen reader starts out by reading old, then new – most people will assume this is the first two columns in the first row, and will be listening for the next two items in that row.

      We could create a 3-column table instead, where the first column contains the variable name, the second column contains the old value and the 3rd column contains the input controls for the new values. Or we could add rowspan and colspan tags on the table header definitions of the current 4-column table to properly mark up the old and new headings that span multiple columns.

      4.a. Below is a code snippet example that fixes the semantics/mark-up in the single table of 4 rows, with colspan and scope attributes, and a hidden row of headers:
      HTML:
      <h4 id="tableLbl">Travel Account (a14)</h4>
      <table aria-labelledby="tableLbl">
      <tr>
      <th colspan="2" scope="colgroup">Old</th>
      <th colspan="2" scope="colgroup">New</th>
      </tr>
      <tr class="offscreen">
      <th>Name</th>
      <th>Value</th>
      <th>Name</th>
      <th>Value</th>
      </tr>
      <tr>
      <th scope="row">Travel Account Number</th>
      <td><a href="#">a14</a></td>
      <td>Travel Account Number</td>
      <td><input type="text" title ="new travel account number"/></td>
      </tr>
      </table>

      4.b. And below is a code "snippet" example that fixes the semantics/markup with ARIA tags:

      <table aria-labelledby="tableLbl">
      <tr>
      <th>Variable</th>
      <th>Old Value</th>
      <th>New Value</th>
      </tr>
      <tr>
      <td>Travel Account Number</td>
      <td><a href="#">a14</a></td>
      <td><input type="text" /></td>
      </tr>
      </table>

      For other summary techniques, see:
      Table summary tag:
      http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H73

      Table header attribute to clarify context of links included in any table cell:
      http://www.w3.org/WAI/GL/2010/WD-WCAG20-TECHS-20100708/H79

      Table row and column header scope attributes to clarify scope of any cell used as a header: http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H63

      Rowspan, Colspan, and id attributes to associate header cells with the appropriate table/data cells (especially when these span columns or rows - rowgroups and colgroups): http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H43.html

      Providing a description for groups of controls using fieldset and legend - see example 4 for logically relating controls at: http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H71

      Aria described-by label for input controls:
      http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/ARIA1

        Attachments

          Issue Links

            Activity

            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Brian,

            Does this overlap with https://jira.kuali.org/browse/KULRICE-8858?

            Jerry

            Show
            jkneal Jerry Neal (Inactive) added a comment - Brian, Does this overlap with https://jira.kuali.org/browse/KULRICE-8858? Jerry
            Hide
            bsmith Brian Smith (Inactive) added a comment -

            Yes, its asking for mostly the same stuff, but I am struggling with the changes we need to make here, as it appears some of this is already correct in the current version.

            Show
            bsmith Brian Smith (Inactive) added a comment - Yes, its asking for mostly the same stuff, but I am struggling with the changes we need to make here, as it appears some of this is already correct in the current version.

              People

              • Assignee:
                Unassigned
                Reporter:
                csoders Candace Soderston (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:

                  Time Tracking

                  Estimated:
                  Original Estimate - 2 days
                  2d
                  Remaining:
                  Remaining Estimate - 2 days
                  2d
                  Logged:
                  Time Spent - Not Specified
                  Not Specified