Use of sScrollX creates duplicate table header id's, causing accessibility WCAG 2.0 A to fail.

Firstly, would like to say thanks for a great plugin!

I do have an issue that I struggling to resolve ;o(

My table has to conform to WCAG 2.0 AA standard.

I encounter an issue when id’s have been entered into my table header tags and the sScrollX option has been utilised, this combination causes the id’s to be duplicated within the table(s) and therefore causes the accessibility check to fail.

Here is an example of my table source code with the table header tags:

<table id="all-users" class="data-table left">
	<thead>
		<tr>
			<th id="firstname">First Name</th>
			<th id="surname">Surname</th>
			<th id="usertype">User Type</th>
			<th id="email">Email Address</th>
			<th id="username">User Name</th>
			<th id="telephone">Telephone Number</th>
			<th id="centrename">Centre Name</th>
			<th id="currentstatus">Current Status</th>
			<th id="action">Action</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="firstname">Joe</td>
			<td headers="surname">Bloggs</td>
			<td headers="usertype">Admin</td>
			<td headers="email">jbloggs@verelogic.com</td>
			<td headers="username">jbloggs</td>
			<td headers="telephone">01793 411111</td>
			<td headers="centrename">DAO Administrator</td>
			<td headers="currentstatus">Enabled</td>
			<td headers="action"><a href="#" title="Edit Record - Joe Bloggs" alt="Edit Record - Joe Bloggs" class="icon-space icon-file"><span class="icon-pencil-2 small-icon" aria-hidden="true"></span><span class="screen-reader-text">Edit Record - Joe Bloggs</span></a><a href="#" class="icon-user-2" title="Modify User - Joe Bloggs" alt="Modify User - Joe Bloggs"><span class="icon-pencil-2 small-icon" aria-hidden="true"></span><span class="screen-reader-text">Modify User - Joe Bloggs</span></a></td>
		</tr>
	</tbody>
</table>

I’m aware that when the sScrollX option is utilised, the table is split into three separate tables, but this is where I encounter my accessibility issue.

When I view the source or view the code in Firebug, the table header has been duplicated in both the dataTables_scrollHead and dataTables_scrollBody, which fails the accessibility check:

“ID must be unique.”

Please find below the output code to showcase this issue:

The first piece of code is the output for the dataTables_scrollHead (I have only cut three table headers as there is a lot of code.)

<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
	<div class="dataTables_scrollHeadInner" style="width: 1039px; padding-right: 0px;">
		<table class="data-table left dataTable" style="margin-left: 0px; width: 1039px;">
			<thead>
				<tr role="row">
					<th id="firstname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-sort="ascending" aria-label="First Name - click/return to sort descending" style="width: 80px;">
						<div class="DataTables_sort_wrapper">First Name<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>
					</th>
					<th id="surname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="Surname - click/return to sort ascending" style="width: 68px;">
						<div class="DataTables_sort_wrapper">Surname<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
					</th>
					<th id="usertype" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="User Type - click/return to sort ascending" style="width: 75px;">
						<div class="DataTables_sort_wrapper">User Type<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
					</th>

The second piece of code is the output for the dataTables_scrollBody (I have only cut three table headers as there is a lot of code.)

<div class="dataTables_scrollBody" style="overflow: auto; width: 100%;">
	<table class="data-table left dataTable" id="all-users" style="margin-left: 0px; width: 1039px;" aria-describedby="all-users_info">
		<thead>
			<tr role="row" style="height: 0px;">
				<th id="firstname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-sort="ascending" aria-label="First Name - click/return to sort descending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 80px;">
				</th>
				<th id="surname" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="Surname - click/return to sort ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 68px;">
				</th>
				<th id="usertype" class="ui-state-default" role="columnheader" tabindex="0" aria-controls="all-users" rowspan="1" colspan="1" aria-label="User Type - click/return to sort ascending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 75px;">
				</th>

Your help would be much appreciated.