Display notice instead of header for tables with complex header structures

Author: stefanruijsenaars

HTMLCS.Util.js

@@ -903,6 +903,8 @@ _global.HTMLCS.util = function() {
      * - wrongHeaders (Array): Array of elements where headers attr is incorrect.
      *                         Each is a structure with following keys: element,
      *                         expected [headers attr], actual [headers attr].
+     * - isMultiLevelHeadersTable (Boolean): Whether this table has multi-level headers.
+     *                                    See: https://www.w3.org/WAI/tutorials/tables/multi-level/
      *
      * @param {DOMNode} element Table element to test upon.
      *
@@ -917,7 +919,8 @@ _global.HTMLCS.util = function() {
             allowScope: true,
             missingThId: [],
             missingTd: [],
-            wrongHeaders: []
+            wrongHeaders: [],
+            isMultiLevelHeadersTable: false,
         };
 
         var rows      = self.getChildrenForTable(element, 'tr');
@@ -1022,6 +1025,7 @@ _global.HTMLCS.util = function() {
 
         if ((multiHeaders.rows > 1) || (multiHeaders.cols > 1)) {
             retval.allowScope = false;
+            retval.isMultiLevelHeadersTable = true;
         } else if ((retval.allowScope === true) && ((multiHeaders.rows === 0) || (multiHeaders.cols === 0))) {
             // If only one column OR one row header.
             retval.required = false;

Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_3/1_3_1.js

@@ -459,9 +459,13 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_3_1_3_1 = {
             }
         }//end if
 
-        // Incorrect usage of headers - error; emit always.
-        for (var i = 0; i < headersAttr.wrongHeaders.length; i++) {
-            HTMLCS.addMessage(HTMLCS.ERROR, headersAttr.wrongHeaders[i].element, _global.HTMLCS.getTranslation("1_3_1_H43.IncorrectAttr").replace(/\{\{expected\}\}/g, headersAttr.wrongHeaders[i].expected).replace(/\{\{actual\}\}/g, headersAttr.wrongHeaders[i].actual), 'H43.IncorrectAttr');
+        if (headersAttr.isMultiLevelHeadersTable) {
+            HTMLCS.addMessage(HTMLCS.NOTICE, table, _global.HTMLCS.getTranslation("1_3_1_H43.IncorrectAttrNotice"), 'H43.IncorrectAttr');
+        } else {
+            // Incorrect usage of headers - error; emit always.
+            for (var i = 0; i < headersAttr.wrongHeaders.length; i++) {
+                HTMLCS.addMessage(HTMLCS.ERROR, headersAttr.wrongHeaders[i].element, _global.HTMLCS.getTranslation("1_3_1_H43.IncorrectAttr").replace(/\{\{expected\}\}/g, headersAttr.wrongHeaders[i].expected).replace(/\{\{actual\}\}/g, headersAttr.wrongHeaders[i].actual), 'H43.IncorrectAttr');
+            }
         }
 
         // Errors where headers are compulsory.

Translations/en.js

@@ -121,6 +121,7 @@ _global.translation['en'] = {
     ,"1_3_1_H63.2" : 'Scope attributes on td elements that act as headings for other elements are obsolete in HTML5. Use a th element instead.'
     ,"1_3_1_H43.ScopeAmbiguous" : 'Scope attributes on th elements are ambiguous in a table with multiple levels of headings. Use the headers attribute on td elements instead.'
     ,"1_3_1_H43.IncorrectAttr" : 'Incorrect headers attribute on this td element. Expected "{{expected}}" but found "{{actual}}"'
+    ,"1_3_1_H43.IncorrectAttrNotice" : 'Check that headers attribute on td element is correct.'
 
     ,"1_3_1_H43.HeadersRequired" : 'The relationship between td elements and their associated th elements is not defined. As this table has multiple levels of th elements, you must use the headers attribute on td elements.'
     ,"1_3_1_H43.MissingHeaderIds" : 'Not all th elements in this table contain an id attribute. These cells should contain ids so that they may be referenced by td elements\' headers attributes.'