Results 1 to 3 of 3

Thread: Grid lacks table headers

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2009

    Default Grid lacks table headers

    A 508 expert is reviewing our app and has taken issue with the fact that the ExtGrid doesn't write it's column headers as TH elements. This means screenreaders don't connect the column header to the data. Is there a way to get the grid to write the thead and th tags?

    This is Ext 6.2

  2. #2
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Redwood coast


    There is no point in using <thead> and <th> tags for grid column headers, because Ext JS grid is not contained within a single <table> tag. In fact every row is a separate <table> tag (for performance reasons), and column headers are widgets in a separate <div> container. Using <th> tags for column headers doesn't work because in HTML there is no way to map <thead> in one table to <tbody> in another table.

    To work around this limitation, we are using ARIA attributes to transform our grid's HTML markup into a virtual "accessible widget" that a browser can recognize and publish to assistive technologies such as screen readers. Support for ARIA features varies greatly among browsers, Firefox is best at this.

    When evaluating accessibility, it is helpful to keep in mind that Ext JS is used to build applications as opposed to web pages. Not all criteria applicable to web pages are going to work for applications, and there are tradeoffs between rich functionality and accessibility.

  3. #3


    I have noticed another warning related to grids and "rowgroup"
    For tree view and simple grid views, an Chrome ARIA compatibility checker will report that some "[role]s are not contained by their required parent element".

    As you can see from the examples below, this seems to affect only role="rowgroup"

    <div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top
     x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-unselectable x-noborder-rl"
     style="height: 0px; width: 340px; left: 0px; top: 72px;" role="rowgroup" aria-hidden="false" aria-disabled="false" 
    id="headercontainer-1019" data-exttouchaction="14">

    <div class="x-tree-view x-fit-item x-tree-view-default x-unselectable x-scroller" role="rowgroup" 
    id="treeview-1020" tabindex="0" style="overflow: hidden auto; margin: 0px; width: 340px; height: 637px;" 

    <div class="x-grid-header-ct x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top 
    x-grid-header-ct-default-docked-top x-box-layout-ct x-scroller x-unselectable x-noborder-trl" role="rowgroup" 
    aria-hidden="false" aria-disabled="false" id="headercontainer-1116" data-exttouchaction="14" 
    style="overflow: hidden; width: 340px; left: 0px; top: 0px;">

    <div class="x-grid-view x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable x-scroller" 
    role="rowgroup" id="tableview-1117" tabindex="0" data-componentid="tableview-1117" 
    style="overflow: hidden auto; margin: 0px; width: 340px; height: 145px;">

    It seems that these elements are correctly placed as child elements of

    So I don't know why Chrome is reporting this as an issue?
    Is this something that you are familiar with?

Similar Threads

  1. Replies: 1
    Last Post: 21 Apr 2015, 9:47 AM
  2. Replies: 0
    Last Post: 11 Nov 2010, 7:37 AM
  3. Bad rendering of table headers
    By zeroed in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 2 Oct 2008, 6:27 AM
  4. Hiding Column Headers on a table
    By bakachu in forum Community Discussion
    Replies: 2
    Last Post: 12 Aug 2008, 10:35 PM
  5. Table Column Headers
    By jerryc57 in forum Ext GWT: Help & Discussion (1.x)
    Replies: 5
    Last Post: 26 May 2008, 10:59 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts