E-mail List Archives

Thread: Layout tables

for

Number of posts in this thread: 7 (In chronological order)

From: Joseph Sherman
Date: Tue, Dec 05 2017 2:09PM
Subject: Layout tables
No previous message | Next message →

How bad are layout tables? I believe that WCAG 2.0 discourages but allows them. My web application folks love layout tables and put everything in them, including forms with multiple layout tables (e.g. https://globalsearch.cuny.edu/CFGlobalSearchTool/search.jsp). This results in screen readers reading out "table with 3 rows and 3 columns, row 1, column 1", YES "row 1, column 2" College, and similar for each row and column in the form. Must/should we add role="presentation" to all the layout tables or use CSS for layout?


Joseph

From: Beranek, Nicholas
Date: Tue, Dec 05 2017 2:14PM
Subject: Re: Layout tables
← Previous message | Next message →

They're not that bad when you add role="presentation" to the <table>, and each descendant <table>, as well. It kills the semantics of the table and a screen reader user won't get that noise. I'd be more concerned about SC 1.3.2 Meaningful Sequence than SC 1.3.1 Info and Relationships in this case. Make sure that the positioning of the content falls in line with the DOM order as to create a proper reading order. I don't think not having a role="presentation" is a classic failure of SC 1.3.1, but it is highly recommended as a best practice to do so. Oddly enough, it is a failure if you use role="presentation" on an element that needs to convey semantic information.

I hope this helps,

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Tuesday, December 05, 2017 4:09 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Layout tables

How bad are layout tables? I believe that WCAG 2.0 discourages but allows them. My web application folks love layout tables and put everything in them, including forms with multiple layout tables (e.g. https://globalsearch.cuny.edu/CFGlobalSearchTool/search.jsp). This results in screen readers reading out "table with 3 rows and 3 columns, row 1, column 1", YES "row 1, column 2" College, and similar for each row and column in the form. Must/should we add role="presentation" to all the layout tables or use CSS for layout?


Joseph

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Josh Schroder
Date: Tue, Dec 05 2017 2:33PM
Subject: Re: Layout tables
← Previous message | Next message →

I agree with Nick -- it's all about maintaining the proper reading order.

Layout tables aren't inherently inaccessible, but the author (in this case your web app folks) needs to understand the principles of content linearization and actually care about correct implementation.

A better solution would be to encourage them to use something like Bootstrap for layout instead.

Josh Schroder
Web Administrator II
Office of Strategic Communications
Texas Department of Licensing and Regulation
(512) 936-8937

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas via WebAIM-Forum
Sent: Tuesday, December 5, 2017 3:14 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Layout tables

They're not that bad when you add role="presentation" to the <table>, and each descendant <table>, as well. It kills the semantics of the table and a screen reader user won't get that noise. I'd be more concerned about SC 1.3.2 Meaningful Sequence than SC 1.3.1 Info and Relationships in this case. Make sure that the positioning of the content falls in line with the DOM order as to create a proper reading order. I don't think not having a role="presentation" is a classic failure of SC 1.3.1, but it is highly recommended as a best practice to do so. Oddly enough, it is a failure if you use role="presentation" on an element that needs to convey semantic information.

I hope this helps,

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Joseph Sherman
Sent: Tuesday, December 05, 2017 4:09 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Layout tables

How bad are layout tables? I believe that WCAG 2.0 discourages but allows them. My web application folks love layout tables and put everything in them, including forms with multiple layout tables (e.g. https://globalsearch.cuny.edu/CFGlobalSearchTool/search.jsp). This results in screen readers reading out "table with 3 rows and 3 columns, row 1, column 1", YES "row 1, column 2" College, and similar for each row and column in the form. Must/should we add role="presentation" to all the layout tables or use CSS for layout?


Joseph

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Srinivasu Chakravarthula
Date: Thu, Dec 07 2017 1:00AM
Subject: Re: Layout tables
← Previous message | Next message →

I agree. Layout tables are helpful when you prefer to place something on a
specific format on a single page. But if requirement is for multiple pages,
then CSS is better so that design can be controlled centrally whenever
there is a change needed.

Regards,

Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com

Let's create an inclusive web!

Lead Accessibility Consultant, Informatica


On Wed, Dec 6, 2017 at 3:03 AM, Josh Schroder < = EMAIL ADDRESS REMOVED = >
wrote:

> I agree with Nick -- it's all about maintaining the proper reading order.
>
> Layout tables aren't inherently inaccessible, but the author (in this case
> your web app folks) needs to understand the principles of content
> linearization and actually care about correct implementation.
>
> A better solution would be to encourage them to use something like
> Bootstrap for layout instead.
>
> Josh Schroder
> Web Administrator II
> Office of Strategic Communications
> Texas Department of Licensing and Regulation
> (512) 936-8937
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Beranek, Nicholas via WebAIM-Forum
> Sent: Tuesday, December 5, 2017 3:14 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Layout tables
>
> They're not that bad when you add role="presentation" to the <table>, and
> each descendant <table>, as well. It kills the semantics of the table and a
> screen reader user won't get that noise. I'd be more concerned about SC
> 1.3.2 Meaningful Sequence than SC 1.3.1 Info and Relationships in this
> case. Make sure that the positioning of the content falls in line with the
> DOM order as to create a proper reading order. I don't think not having a
> role="presentation" is a classic failure of SC 1.3.1, but it is highly
> recommended as a best practice to do so. Oddly enough, it is a failure if
> you use role="presentation" on an element that needs to convey semantic
> information.
>
> I hope this helps,
>
> Nick Beranek
> Capital One
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Joseph Sherman
> Sent: Tuesday, December 05, 2017 4:09 PM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] Layout tables
>
> How bad are layout tables? I believe that WCAG 2.0 discourages but allows
> them. My web application folks love layout tables and put everything in
> them, including forms with multiple layout tables (e.g.
> https://globalsearch.cuny.edu/CFGlobalSearchTool/search.jsp). This
> results in screen readers reading out "table with 3 rows and 3 columns, row
> 1, column 1", YES "row 1, column 2" College, and similar for each row and
> column in the form. Must/should we add role="presentation" to all the
> layout tables or use CSS for layout?
>
>
> Joseph
>
> > > at http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The information
> transmitted herewith is intended only for use by the individual or entity
> to which it is addressed. If the reader of this message is not the intended
> recipient, you are hereby notified that any review, retransmission,
> dissemination, distribution, copying or other use of, or taking of any
> action in reliance upon this information is strictly prohibited. If you
> have received this communication in error, please contact the sender and
> delete the material from your computer.
> > > at http://webaim.org/discussion/archives
> > > > > >

From: Graham Armfield
Date: Thu, Dec 07 2017 2:56AM
Subject: Re: Layout tables
← Previous message | Next message →

I'd be interested to hear how the developers who like layout tables cope
with responsive designs - something that's quite crucial these days.

As Srinivasu said, CSS techniques are way better - and with flex and now
grid being widely supported, the disadvantages of floated layouts can
disappear.


Regards
Graham Armfield

From: mhysnm1964@gmail.com
Date: Thu, Dec 07 2017 10:49PM
Subject: Re: Layout tables
← Previous message | Next message →

AS a screen reader user, I hate presentation layouts regardless of the standards say. I do not believe they are necessary in todays web pages. Especially when they are forms or items you have to select.

For example, a table that has a column of check boxes and another with the description. If they are not correctly linked, the screen reader and low vision user cannot easily associate the check box with the description. This is just one example.

Sean


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Graham Armfield
Sent: Thursday, 7 December 2017 8:56 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Layout tables

I'd be interested to hear how the developers who like layout tables cope with responsive designs - something that's quite crucial these days.

As Srinivasu said, CSS techniques are way better - and with flex and now grid being widely supported, the disadvantages of floated layouts can disappear.


Regards
Graham Armfield

From: Patrick H. Lauke
Date: Fri, Dec 08 2017 1:46AM
Subject: Re: Layout tables
← Previous message | No next message

On 08/12/2017 05:49, = EMAIL ADDRESS REMOVED = wrote:
> AS a screen reader user, I hate presentation layouts regardless of the standards say. I do not believe they are necessary in todays web pages. Especially when they are forms or items you have to select.
>
> For example, a table that has a column of check boxes and another with the description. If they are not correctly linked, the screen reader and low vision user cannot easily associate the check box with the description. This is just one example.

Note that those are two separate issues. Use of layout tables does not
preclude use of correct <label> elements. No point conflating the two.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke