WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Presenting a table without any data

for

From: Birkir R. Gunnarsson
Date: Feb 21, 2017 7:50PM

You could do two things here as a compromise:
* Use the table cell with text "no records to display" that spans a
whole row, bt make it visually hidden. This is a best practice that
benefits screen eader users, who are the users most likely to be
confused by not finding the table they expect.
* Add aria-controls="the id of the table" (assuming a unique ID can be
added to that table), to the "add" button at the top of the page.
* You can add aria-label="receipts" to the <table>, it is not visible,
so developers should be able to implement it without losing to much
sleep.

<button aria-controls="receiptsTable">Add</button>
... content
<table id="receiptsTable" aria-label="my receipts">
<tr>header cells</tr>
<tr><td class="visuallyHidden" colspan="number of columns in table>no
receipts to display.</td></tr>
</table>


for a receipt. Screen readers who support it will indicate the
programatic relationship between the button and the table, subtle but
it can be very helpful.


On 2/21/17, Meacham, Steve - FSA, Kansas City, MO
< <EMAIL REMOVED> > wrote:
> Thank you, Ryan and everyone for your help.
>
> In my haste, I may have oversimplified. Here's the exact scenario: A
> master record is created on one page. The user then navigates to this "add
> receipts" page, which has a form to fill out on top with an "add" button,
> and a table at the bottom that accumulates the receipts and presumably
> allows the user to go back and edit or remove them one by one if necessary.
> Presumably they can come back to this page at a later time, after some
> receipts have already been added, and see the table already populated.
>
> Does that clarify? I've attached a really low-res screen print of what I
> just described. That, BTW, is what I was given to analyze.
>
> - Steve
>
> P.S. Oh...they won't use "caption" or "h1"-"h6" elements, either, because
> they're ugly and clutter the page. They prefer to wrap entire portions of
> the page in "fieldset" elements. At a glance, there are even more things
> worse with the page, but for reasons you can probably imagine, they are off
> limits to me for now. I apologize for my blatant frustration.
>
>