WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: questions about tfoot and content order

for

From: tee
Date: Dec 15, 2010 10:18AM

Perhaps what I should have asked is, is the markup for the cart section correct, and if tfoot should be used at all? Also, supposed the markup is coded correctly that contents in the tfoot do describe the contents of the columns , how do the screen readers other than VoiceOver read it?

The original code was not created by me but from a template file from the ecommece software, I thought the order was wrong so I changed it by placing tbody (which is for the contents) above tfoot. This was about two years ago, and I thought what I did was correct as VoiceOver picked up the order of the contents correctly, so is the structure order from WAVE. Recently something prompted me to check the table spec from w3c site, and I found I got it all wrong.

I still don't quite understand the spec as to why the tfoot should precede the required tbody, because just looking at the source code, the flow of the content is structurally wrong and supposed screen reader reads like search engine bot, from left to right, top to bottom.

But the order of the "update" and "continue shopping" buttons should be placed after the content of the cart.

Thanks.

tee


On Dec 15, 2010, at 2:38 AM, Chris Hoffman wrote:

> The "update" and "continue shopping" buttons don't belong in the tfoot, since they don't describe the contents of the columns.
>
> Chris
>
>
> On Dec 13, 2010, at 9:42 AM, tee < <EMAIL REMOVED> > wrote:
>
>> Quote the spec:
>>
>> The TFOOT element defines a group of footer rows in a table. A TABLE may have one TFOOT, which must follow the optional THEADand precede the required TBODY.
>>
>>
>> I have a shopping cart with following markups.
>>
>> [h1] Shipping Cart
>>
>> ------------------------------------------------
>> tabular data
>> <table summary="items in the shopping cart">
>> <thead>
>> <tr>
>> <th>
>> ............ content
>>
>> <tfoot>
>> <tr>
>> <td>[button] update cart [button] continue shopping</td>
>>
>> <tbody>
>> <tr>
>> <td>............ content
>>
>>
>> ------------------------------------------------
>>
>> [h2] discount code
>> ............ content
>>
>> ------------------------------------------------
>> tabular data
>>
>> <table summary="tax and subtotal details">
>> <tfoot>
>> <tr>
>> <th>
>> <tbody>
>> <tr>
>> <td>
>>
>> ------------------------------------------------
>>
>> [button] checkout
>>
>>
>> [h2] Estimate Shipping & Tax
>> ............ content
>>
>> [h2] cross-sell
>> ...cross-sell items
>>
>>
>> Testing from VoiceOver, as expected, it reads content in the tfoot first before tbody.
>>
>> Question 1: Will it be confusing for screen reader user?
>>
>> Question 2: This is more a usability issue than accessibility that I am concerned with. Do screen reader users find it more accessible if the "Estimate Shipping & Tax" and "cross-sell" place above the "Checkout" button?
>>
>> Thanks!
>> tee
>>