E-mail List Archives
Thread: Data in tables or lists with accessibility and responsive design in mind
Number of posts in this thread: 13 (In chronological order)
From: ben jarlett
Date: Mon, Feb 10 2014 8:10AM
Subject: Data in tables or lists with accessibility and responsive design in mind
No previous message | Next message →
Hi, I am creating a list of links which have the following in them:
- link title and url
- a comment about the link
- a date that the link was posted
I wish to do this using accessible best practice, but also would like to
avoid using tables because I'd like to keep the site responsive
(mobile/tablet/desktop) - and although you can create accessible tables and
responsive tables I'm not sure that you can have a responsive and
accessible table.
There is an answer
here<http://ux.stackexchange.com/questions/34588/what-would-be-more-accessible-un-ordered-lists-or-tables>;,
but it doesn't fully help me. It states helpfully that "Basic question you
should ask yourself: do you need rows and columns? Do you need some kind of
cross-referencing and/or sortable on different properties of the individual
items? In that case, use a table. Otherwise, use an unordered (or ordered)
list."
For my example I'm not giving the user an opportunity to sort the data, and
as for cross referencing I'm not sure if this applies - but am happy to
take advice on that.
Thanks - Ben
--
-------------
= EMAIL ADDRESS REMOVED =
benjarlett.co.uk <http://www.benjarlett.co.uk>;
07734 970739
From: Léonie Watson
Date: Mon, Feb 10 2014 8:32AM
Subject: Re: Data in tables or lists with accessibility and responsivedesign in mind
← Previous message | Next message →
Ben Jarlett wrote:
"I wish to do this using accessible best practice, but also would like to
avoid using tables because I'd like to keep the site responsive
(mobile/tablet/desktop) - and although you can create accessible tables and
responsive tables I'm not sure that you can have a responsive and accessible
table."
For a simple table like this, it's possible both are achievable. The catch
may be whether all three columns can be displayed at smaller screen sizes
and/or whether all content is readable at that point?
Léonie.
From: Lynn Wehrman
Date: Mon, Feb 10 2014 8:52AM
Subject: Re: Data in tables or lists with accessibility andresponsivedesign in mind
← Previous message | Next message →
Our testers with sight-related disabilities who use screen readers find many tables inaccessible. Are there pointers that anyone can provide to create table-based format that is more accessible to these devices?
Warm Regards,
Lynn Wehrman
President & Test Management Team Director
theweco.com 855-849-5050 x705 = EMAIL ADDRESS REMOVED =
Follow WeCo on Twitter: @WeCo5 Interact with us on Facebook and read about current press coverage of our company!
Not sure if your webpage is accessible? Try our quick and easy Access Check-In service to find out within one week.
This email, including attachments, may be confidential and/or proprietary information, and may be used only by the person or entity to which it was addressed. If the reader of this email is not the intended recipient or his or her authorized agent, the reader is hereby notified that any dissemination, distribution or copying of this email is prohibited. If you have received this email in error, please notify the sender by replying to this message and delete this email immediately.
From: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > on behalf of Léonie Watson < = EMAIL ADDRESS REMOVED = >
Sent: Monday, February 10, 2014 9:32 AM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] Data in tables or lists with accessibility and responsive design in mind
Ben Jarlett wrote:
"I wish to do this using accessible best practice, but also would like to
avoid using tables because I'd like to keep the site responsive
(mobile/tablet/desktop) - and although you can create accessible tables and
responsive tables I'm not sure that you can have a responsive and accessible
table."
For a simple table like this, it's possible both are achievable. The catch
may be whether all three columns can be displayed at smaller screen sizes
and/or whether all content is readable at that point?
Léonie.
From: Nathalie Sequeira
Date: Mon, Feb 10 2014 8:59AM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Hi Ben,
> Hi, I am creating a list of links which have the following in them:
>
> - link title and url
> - a comment about the link
> - a date that the link was posted
>
> I wish to do this using accessible best practice, but also would like to
> avoid using tables because I'd like to keep the site responsive
> (mobile/tablet/desktop)
being a great fan of the DL, to me it sounds like it could be a good
solution for your requirements.
As in:
<dl>
<dt>link title and URL</dt>
<dd>comment about the link</dd>
<dd>date posted</dd>
</dl>
You can style this into table-ish format for large screens and fallback
on a more listy display in your smaller responsive layouts,
while always having the semantics of each link being a unit with main
and sub-information.
HTH
Nathalie
From: Bourne, Sarah (ITD)
Date: Mon, Feb 10 2014 9:11AM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Ben,
I would suggest that you answered yourself in your question: "I am creating a list of links." If it's a list, it should be marked up as a list. And lists are certainly more flexible for multi-device design. You can use other elements inside of list items, and of course CSS. Exactly what you use is going to depend on what visual effects are needed.
But here's an example that would result in a stacked display, with default styling. (Note that this does not display the URL - screen readers will voice those, and the URL rarely provides enough value to make it worthwhile.)
<li>
<p><a href="URL-goes-here">Display title for link</a></p>
<p>This is a very useful resource for aspiring novelists</p>
<p>Posted 10 February 10, 2014</p>
</li>
If you don't like having all those <p> elements, you could use <span> instead:
<li>
<span><a href="URL-goes-here">Display title for link</a></span>
<span>This is a very useful resource for aspiring novelists</span>
<span>Posted 10 February 10, 2014</span>
</li>
The default styling would be inline, but you could use CSS to do any number of things from there: put the post date in italics, make the link title bold, put the comment on a new line and indent it, etc.
And of course you can go totally barebones and just use punctuation:
<li><a href="URL-goes-here">Display title for link</a>: This is a very useful resource for aspiring novelists. (Posted 10 February 10, 2014)</li>
I would use a table if there was more data, like maybe number of downloads, author, category, etc., or if you were giving the ability to sort.
Sarah E. Bourne
Director of Assistive Technology
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd
From: ben jarlett
Date: Mon, Feb 10 2014 2:36PM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Thanks for all the thinking... Yes Léonie that is the catch... I want it to
work on smaller screen sizes, and I don't think it'll work on a phone in a
table... so I'm gonna go with the DL suggestion and tableish styling for
large screen display. :)
On 10 February 2014 15:10, ben jarlett < = EMAIL ADDRESS REMOVED = > wrote:
> Hi, I am creating a list of links which have the following in them:
>
> - link title and url
> - a comment about the link
> - a date that the link was posted
>
> I wish to do this using accessible best practice, but also would like to
> avoid using tables because I'd like to keep the site responsive
> (mobile/tablet/desktop) - and although you can create accessible tables and
> responsive tables I'm not sure that you can have a responsive and
> accessible table.
>
> There is an answer here<http://ux.stackexchange.com/questions/34588/what-would-be-more-accessible-un-ordered-lists-or-tables>;,
> but it doesn't fully help me. It states helpfully that "Basic question you
> should ask yourself: do you need rows and columns? Do you need some kind of
> cross-referencing and/or sortable on different properties of the individual
> items? In that case, use a table. Otherwise, use an unordered (or ordered)
> list."
>
> For my example I'm not giving the user an opportunity to sort the data,
> and as for cross referencing I'm not sure if this applies - but am happy to
> take advice on that.
>
>
> Thanks - Ben
>
> --
>
>
> -------------
> = EMAIL ADDRESS REMOVED =
> benjarlett.co.uk <http://www.benjarlett.co.uk>;
> 07734 970739
>
--
-------------
= EMAIL ADDRESS REMOVED =
benjarlett.co.uk <http://www.benjarlett.co.uk>;
07734 970739
From: Bourne, Sarah (ITD)
Date: Tue, Feb 11 2014 8:19AM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Ben,
Before settling on the DL approach, you should take a look at a recent thread on the W3C WAI discussion list. This message, in particular, discusses some problems with how AT has implemented DLs:
http://lists.w3.org/Archives/Public/w3c-wai-ig/2014JanMar/0031.html
(See http://lists.w3.org/Archives/Public/w3c-wai-ig/2014JanMar/thread.html for listing by thread - you can see that discussion has been lively!)
While "use the right element for the job and reports bugs to AT vendors" is the right thing to do (as is pointed out someplace in that thread) I think you have some choice in what the "right" element is, and so may want to consider how it will actually work for users.
sb
Sarah E. Bourne
Director of Assistive Technology
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd
From: = EMAIL ADDRESS REMOVED = [ = EMAIL ADDRESS REMOVED = ] On Behalf Of ben jarlett [ = EMAIL ADDRESS REMOVED = ]
Sent: Monday, February 10, 2014 4:36 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Data in tables or lists with accessibility and responsive design in mind
Thanks for all the thinking... Yes Léonie that is the catch... I want it to
work on smaller screen sizes, and I don't think it'll work on a phone in a
table... so I'm gonna go with the DL suggestion and tableish styling for
large screen display. :)
From: Lucy Greco
Date: Tue, Feb 11 2014 10:20AM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Hello:
I tend to disagree with that message. I have seen jaws defiantly tell me
about a definition list but I find when it does the dev has used the tag
improperly
Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu Http://accessaces.com
Follow me on twitter @accessaces
From: Steve Green
Date: Tue, Feb 11 2014 4:25PM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
I would have a slightly different recommendation. Report bugs to the vendors but publish code that works right now. In my view it is irresponsible to publish code that *should* work but doesn't. Sadly there are a number of people who are perfectly happy to publish code that they know doesn't work, and say it's not their problem if browsers and ATs don't render that code according to standards.
In some cases people are using ATs that pre-date the standards, and in some cases the standards do not fully specify what the behaviours of the browsers and ATs should be. Not everyone can afford to upgrade to the latest AT version even in the Western world, let alone poorer parts of the world. And many people cannot quantify the benefit of a costly upgrade.
There is a disturbing narcissism in the development community. The most important people on any project are the project owner and the end user. Everything that developers do should be done with the intention of supporting them. But some developers, designers and consultants choose to pursue their own agenda even when it is not in the best interest of the people they should be serving. In my view that is not professional.
Steve Green
From: ron
Date: Tue, Feb 11 2014 5:10PM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Once again I am going to speak from the public education space and in particular from the perspective of
California since it currently is the best exemplar. In most instances they no longer have funding to maintain
upgrades nor to buy SMA's for products such as JAWS, if the could even get one in the first place. For
others when categorical funding went away several years ago they lost the ability to maintain access and
are forced to support JAWS going back to version 7 based on the most current version. Legally in many
instances they are also forced to be entirely product agnostic in their work in trying to avoid risk
management issues. Am I supporting this absolutely not, except for product neutrality which actually is
required in most states by statute. Most of my work is in the area of recommending unbiased pragmatic
and cost effective advice at the institution or system level.
I will now let you go back to your regular programming. If any wish to engage in a conversation out of the
public eye please email me privately and I will will love to hear about your experiences or successes.
Ron Stewart
> --
From: Lucy Greco
Date: Tue, Feb 11 2014 5:19PM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Ron I agree that voice over does have problems in this space. But it's
even more tricky then saying it does not work. For example I was working
with a site that used ARIA well and voice over just would not read it.
Turned out because the site also used html 5 vo over rode the ARIA for the
html 5 and the html5 did not have the same property's set so the user did
not get the message and as vo was ignoring the aria things like required
just did not happen. Bad choice on apples part but at often is the problem
to shrug. My next g3ict blog post talks about this
Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu Http://accessaces.com
Follow me on twitter @accessaces
From: ron
Date: Tue, Feb 11 2014 5:39PM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | Next message →
Okay one more reply, in all my attempts to get this unbiased info out over almost 20 years we have always
given a Vendor an opportunity to respond to the data we were wanting to discuss including all the
companies that have responded to this thread. None ever did, and in most instances without any response.
Now today these same companies have become pretty good actors in most instances at least in the public
eye. Behind the curtain often the same blame game continues. In one instance, for a very large company,
counsel received a nasty gram threatening litigation. But it post analysis it may have been legal acting
disconnected from a major accessibility push. Fortunately the response was bring it on. They were looking
forward to the legal battle in the public space. We did a similar activity in regards to the information I also
did I regard to conformance and functional with library tech with the standards of the day. Now granted
this is now somewhat outdated, but it was the case as recent as 2008.
Ron Stewart
> --
From: Duff Johnson
Date: Fri, Feb 14 2014 7:42AM
Subject: Re: Data in tables or lists with accessibility and responsive design in mind
← Previous message | No next message
I apologize for cross-posting
I found the W3C list's discussion about lists fascinating.
So I decided to study the differences between PDF and HTML when it comes to making lists accessible.
The conclusion: PDF's mechanism is more generic, and thus, more capable. It's also accessibility-supported today.
Here's the blog-post, which includes a link to the article on the subject.
http://duff-johnson.com/2014/02/13/li-and-the-lists-html-cannot-reach/
These views are my own, and not those of the ISO 32000 Committee or the PDF Association.
Duff Johnson
p +1.617.283.4226
e = EMAIL ADDRESS REMOVED =
w http://duff-johnson.com
l http://www.linkedin.com/in/duffjohnson/