E-mail List Archives
Thread: questions about tfoot and content order
Number of posts in this thread: 3 (In chronological order)
From: tee
Date: Mon, Dec 13 2010 7:42AM
Subject: questions about tfoot and content order
No previous message | Next message →
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
From: Chris Hoffman
Date: Wed, Dec 15 2010 3:39AM
Subject: Re: questions about tfoot and content order
← Previous message | Next message →
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 ADDRESS 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
>
From: tee
Date: Wed, Dec 15 2010 10:18AM
Subject: Re: questions about tfoot and content order
← Previous message | No next message
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 ADDRESS 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
>>