Re: Accessibility on mobile device for table with 11 columns with scroll feature

thank you all for sharing your thoughts. humbly appreciated your guidance in making web accessible to all. Thank you! 

Sent from my iPhone

> On Jul 12, 2017, at 7:43 AM, Joe Chidzik <joe.chidzik@abilitynet.org.uk> wrote:
> 
> Hi Kiran,
>  
> A potential issue that I’ve seen with similar layouts is that the first (locked) column is a single table. The rest of the table adjacent, that scrolls, is another separate table. This is fine for sighted users as they can always see the locked column. For screenreader users, there is no relationship between them, and so this link is lost.  This would be an accessibility failure.
>  
> A solution I’ve recommended in these cases is to retain the initial, locked, column as a standalone table. However mark is as hidden for screenreader users e.g. aria-hidden=”true”.
>  
> For the second table, that scrolls, have a first column replicating the locked column, but instead, visibly hide it from sighted users. This allows screenreader users to read the table with the benefit of the column descriptions, and for sighted users to benefit from having a locked visible column.
>  
> The mark-up for this might look like.
>  
>  
> <!—first column, locked and hidden for screenreader users -->
> <table id=”locked_column” aria-hidden=”true”>
> <tr>
>                 <th>Variable rate mortgage</th>
> </tr><tr>
>                 <th>Fixed rate mortgage</th>
> </tr><tr>
>                 <th>Surprise rate mortgage</th>
> </tr>
> </table>
>  
> <!—Second table, with just first column visibly hidden using appropriate CSS class of visibly-hidden           -->
> <table id=”mortgage_types”>
> <tr>
>                 <th scope=”row” class=”visibly-hidden>Variable rate mortgage</th>
>                 <td>This is some information about variable rates</td>
> </tr><tr>
>                 <th scope=”row” class=”visibly-hidden>Fixed rate mortgage</th>
>                 <td>This is some information about fixed rates</td>
> </tr><tr>
>                 <th scope=”row” class=”visibly-hidden>Surprised rate mortgage</th>
>                 <td>This is some information about surprise rates</td>
> </tr>
> </table>
>  
> There are various bits of CSS that can be used to achieve this task of visibly hiding content, yet leaving it accessible to screenreader users e.g. https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
>  
> I don’t recall any other specific accessibility issues with this type of proposed table behaviour. Having horizontal scroll in addition to vertical scrolling is often not ideal, but is not in itself a failure, and in any case, it is challenging to produce readable data tables on a mobile screen without having some horizontal scrolling.
>  
> Cheers
> Joe
>  
> From: Kiran [mailto:kiranph@gmail.com] 
> Sent: 10 July 2017 18:54
> To: w3c WAI List <w3c-wai-ig@w3.org>
> Subject: Accessibility on mobile device for table with 11 columns with scroll feature
>  
> Hi All,
>  
> Good morning to all!
>  
> I have a question in terms of accessibility for a table with approx 10 columns and 1 main header column.
>  
> In order to show this table on mobile devices, I have used scrolling feature, where the user can keep scrolling towards the right to view all content. the first main header column is locked.
>  
> If you have a table with pretty good width, and users have to scroll towards the right to view the content on mobile devices, will that be an issue in terms of accessibility to meet  WCAG 2.0  success criteria? 
>  
> I think this might not be a good approach in terms of usability and accessibility, however, just wondering will this be breaking any WCAG S. C?
>  
> As usual, I honestly appreciate all expert feedback and thoughts for this from members of this group.
>  
> Thank you so much!