E-mail List Archives
Thread: display: table - should we use it?
Number of posts in this thread: 4 (In chronological order)
From: Justin Perry
Date: Fri, May 23 2014 3:48AM
Subject: display: table - should we use it?
No previous message | Next message →
Hello,
I'm new to the list.
I've a particular component on which I'd like to utilise display: table and
display: table-cell to produce variable width columns with flexible heights
and full vertical alignment control. The layout doesn't represent tabular
data. The display: table property would be used to help style it in a
certain way.
A colleague of mine pointed me towards Roger Johansson's article where
Roger highlights some screen readers (NVDA and ORCA) announcing these CSS
tables as a real tables:
www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/
In my own testing on Roger's examples, using NVDA 2014.2 and JAWS 15 with
Firefox 29, (http://www.456bereastreet.com/lab/display-table) it only
announces the real table and treats the CSS tables as regular content.
So I'm wondering, is there any reason why we shouldn't be using
display:table?
Many thanks,
Justin
From: Birkir R. Gunnarsson
Date: Fri, May 23 2014 5:51AM
Subject: Re: display: table - should we use it?
← Previous message | Next message →
Hi
A quick test of the table example using Jaws 14 and NVDA 2014.1 with
IE11 and Firefox 27 display expected behavior. Even with the most
liberal table detection settings, only one table (the actual table) is
detected on the demo page.
If some assistive technology/browser combiantion interpret the page
otherwise, we need to make sure to file bugs against the technology
vendor or community and, if required, the browser.
CSS should not be treated as content and CSS display properties (other
than display: none / visibility: hidden and visually hiding
textoff-screen) should not affect the DOM tree.
Cheers
-Birkir
On 5/23/14, Justin Perry < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
>
> I'm new to the list.
>
> I've a particular component on which I'd like to utilise display: table and
> display: table-cell to produce variable width columns with flexible heights
> and full vertical alignment control. The layout doesn't represent tabular
> data. The display: table property would be used to help style it in a
> certain way.
>
> A colleague of mine pointed me towards Roger Johansson's article where
> Roger highlights some screen readers (NVDA and ORCA) announcing these CSS
> tables as a real tables:
> www.456bereastreet.com/archive/201110/using_displaytable_has_semantic_effects_in_some_screen_readers/
>
> In my own testing on Roger's examples, using NVDA 2014.2 and JAWS 15 with
> Firefox 29, (http://www.456bereastreet.com/lab/display-table) it only
> announces the real table and treats the CSS tables as regular content.
>
> So I'm wondering, is there any reason why we shouldn't be using
> display:table?
>
> Many thanks,
>
> Justin
> > > >
--
Work hard. Have fun. Make history.
From: Olaf Drümmer
Date: Fri, May 23 2014 5:56AM
Subject: Re: display: table - should we use it?
← Previous message | Next message →
On 23 May 2014, at 13:51, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> CSS should not be treated as content
so this would imply 'content' inside ::before and ::after selectors? Like for example:
> p::before
> {
> content:"Read this: ";
> }
Olaf
From: Birkir R. Gunnarsson
Date: Fri, May 23 2014 6:04AM
Subject: Re: display: table - should we use it?
← Previous message | No next message
Yes, this content is invisible to e.g. screen readers,.
See Karl Groves article on this at:
http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/
I see this problem a lot with images included as CSS background.
Well intentioned authors include an alt tag on these images to make
them accessible.
But the screen reader does not know the images are there to begin
with, so the alt text is ignored.
On 5/23/14, Olaf Drümmer < = EMAIL ADDRESS REMOVED = > wrote:
> On 23 May 2014, at 13:51, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> CSS should not be treated as content
>
> so this would imply 'content' inside ::before and ::after selectors? Like
> for example:
>
>> p::before
>> {
>> content:"Read this: ";
>> }
>
>
> Olaf
>
>
>
> > > >
--
Work hard. Have fun. Make history.