I'm working on taking an existing webapp and making it WCAG AA compliant.
Part of the app involves displaying a "choice matrix": a series of questions presented in a tabular format. Here's a simplified example.
<table>
<thead>
<tr>
<th>Question</th>
<th>True</th>
<th>False</th>
</tr>
</thead>
<tbody>
<tr>
<td>google.com is hosted on the internet</td>
<td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: True"></td>
<td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: False"></td>
</tr>
<tr>
<td>January is the third day of the week</td>
<td><input name="q2" type="radio" aria-label="January is the third day of the week: True"></td>
<td><input name="q2" type="radio" aria-label="January is the third day of the week: False"></td>
</tr>
</tbody>
</table>
Now -- if we run aXe Chrome Extension against this snippet, it complains:
Radio inputs with the same name attribute value must be part of a group
So it seems that we need to group the radiobuttons together in order to satisfy WCAG 1.3.1. This makes sense and seems worthwhile.
aXe suggests two ways to do that:
1) All elements with the name "q1" do not reference the same element with aria-labelledby
2) Element does not have a containing fieldset or ARIA group
But neither of those solutions seems to solve my issue.
The first solution seems nonsensical -- why would I give multiple radiobuttons the same aria-label? How would the screen reader user choose between them, if they're all the same?
So I'm looking into how to apply role="group" or role="radiogroup" to my radiobuttons.
There's a good example of using role="radiogroup" on the aXe site.
But... when I add role="radiogroup" to a element, jsx-a11y gives a warning:
Interactive elements should not be assigned non-interactive roles
It seems that by giving the a role, we're likely to cause problems because has implicit roles that are now being overwritten.
I'm not clear what havoc this may cause, but it gives me pause.
I also can't use this:
<table><div role="radiogroup"><tr>
without breaking the rules of html.
So it appears that I either need to break the rules of ARIA, HTML5, or usability if I want to resolve these warning messages.
Or, change this from a to a group of s. But it seems to me that is semantically appropriate in this use-case, right?
Is there a solution here that will work well across different screen readers? Currently the winner is to just put role="group" on the and ignore the warnings, but I haven't tested it sufficiently across screen readers yet.
It looks like we can use multiple <tbody> tags inside a <table>.
https://stackoverflow.com/a/3076790/2253611
So, the best solution I've seen so far is to wrap each <tr> in a <tbody role="radiogroup">, and take the role="radiogroup" away from the <tr>.
So far, in my testing, it seems solid!
Related
There are many different ways to freeze a header row of an html table, but I need something minimally invasive. I'm working in a large and complex system in which the table html is generated through many layers of back-end coding and it will be non-trivial and risky to change the table structure (lots of complex javascript and css depends on the HTML structure remaining as-is and I don't want to break anything). So I'm looking for a way to freeze my html header rows (2 rows need to be frozen, not just 1) by changing/adding only CSS and/or adding attributes to the table or rows in the table. Here's an accurate example of my table:
<table>
<tbody>
<tr>
<th> </th>
<th id="col0">Option ID</th>
<th id="col1">Description</th>
<th id="col2" title="Sort on Description">Description</th>
</tr>
<tr>
<th> </th>
<td title="Filter on Option ID (Text)">
<input type="text" id="f0">
</td>
<td title="Filter on Description (Text)>
<input type="text" id="f1">
</td>
</tr>
<tr>
<td><input type="radio" name="chk0" id="c_01Q0"></td>
<td>0093005</td>
<td>Local pickup & delivery.</td>
</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
<tr>...etc...</tr>
</tbody>
</table>
As you can see it's nothing exotic. But as I've searched for solutions I have found a lot of examples like this, which require more structural changes to the HTML than I dare make (I'm mainly just worried about having to surround the table by section and div elements -- and it seems like a lot of CSS just to freeze a header row). The 1st two rows both need to be frozen so that when I scroll down, they remain nicely in-place. The first data row (non-frozen) is the row containing 0093005.
A few objectives/desires:
Brevity is more important than elegance. I'm fine with a hack, in this case.
Don't change the HTML structure if at all possible, though adding attributes to existing elements can be done.
Pure CSS additions/changes without touching the HTML would be ideal, but I suspect the HTML will need to be decorated to some extent, and that is ok.
Use of js or jquery is a last resort only, to be avoided if possible.
Many thanks in advance for everyone's time.
This might be common knowledge, but I couldn't find it... Sometimes, two radios styled exactly the same will have different size checked indicators, the black dot will be bigger in one than the other. Why is that? And how do you fix it?
Here are two screen shots of the same radio group:
EDIT:
Here's the html. I removed style just in case that was causing it, but I still get it.
<table>
<thead><tr><td>New or Maintenance</td></tr></thead>
<tbody>
<tr>
<td><input type="radio" name="rNewOrMaint" id="rNewOrMaint" value="New"/> New
<input type="radio" name="rNewOrMaint" id="rNewOrMaint" value="Maintenance"/> Maintenance</td>
</tr>
</tbody>
</table>
Things are changed now(not relevant post according to today's standards).
But consider to.
1- Change Styling where CSS is present. (external-file, inline, same file)
This question already has answers here:
Why not use tables for layout in HTML? [closed]
(66 answers)
Closed 9 years ago.
Some people believe table is the devil's spawn. Others primarily use to it to format their website. When do you draw the line on tables? When do you feel you're abusing them?
I, personally, use tables only to display data, which in most cases need a table. I've hit a brick wall, though. I need two text boxes to be aligned, would you use tables for this?
I'm thinking of doing something like this:
<table style="border: 0; border-collapse: separate; border-spacing: 10px; margin: 10px auto;">
<tr>
<td><label for="username">Username</label></td>
<td><input type="text" name="username" placeholder="Username"></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" name="password" placeholder="••••••••"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" class="btn btn-large btn-info" style="float: right"></td>
</tr>
</table>
Please excuse the inline CSS, I was using it for this example.
Would you draw the line there? Am I crossing this imaginary line? What would you do?
To align things, I would use either the <div> element or, if that fails, absolute positioning. Also try display:inline-block on the div element. Why won't they line up? What have you tried? Tables should never be used for formatting. That is an awful practice which tables weren't designed for. Only ever use tables if you are displaying tabular data. Otherwise see above.
Tables should be used to represent tabular data. Divs are divisions or sections and should be used to group block-elements. Spans are useful when you want to group inline-elements.
I personally think using tables for layout in regards to forms is OK, especially in the case of some super complicated form - Such as this one: http://www.wolfhair.com/consultation-options/
My reasoning behind this is that if the data that was being inputted into the text fields was actual text and not a text field, it would in fact appear to be tabular data. In fact, if you were to store this information, it would be placed into a table like structure in order to be then pulled from later.
As a demonstration, take for instance your very example. If it were filled out and the text fields were actual data results.
<table border="1">
<tr>
<td><label for="username">Username:</label></td>
<td>MyUsernameRox</td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td>M0stSecurePasswordEv3r</td>
</tr>
</table>
http://jsfiddle.net/sGq2Q/
Outside of using it to organize and arrange a form, it should not be used for layout.
Traditionally, I always lay out forms by styling each property, but I have read a lot lately about styling forms using a table. My problem is that with a table, when one cell is rather large, all other cells in that column become the same width. When editing them, the problem I end up with is either large gaps between input fields due to a large cell placed above them or, when you resize the screen, things get too close for comfort.
I tried setting the <td> widths individually but that doesn't work. I created a fiddle to see if someone could get me going in the right direction.
Thank you all so much in advance!
http://jsfiddle.net/uFwkd/
The table in the jsfiddle (which seems to be what the question is really about) contains rows with different numbers of cells, e.g.
<tr>
<td><input type="text" name="street" id="street" value="" size="20" /></td>
</tr>
<tr>
<td>City:</td>
<td>State:</td>
<td>Zip:</td>
</tr>
This causes rather unpredictable rendering in practice.
You could make the structure more appropriate by ensuring that all rows have the same number of slots (3, in this case), by using the colspan attribute on cells (on the first row above, with <td colspan="3">. This would require some artificial decision for the row containing two cells: one of them would need to span two columns.
This would be somewhat unnatural (cells in a column would not really be related to each other, just placed in the same column) and would imply accessibility problems. A better tabular structure for a form has one row for each input control (one field, such as one input element), with label in one column, the control itself in another, so you would start with something like
<table>
<tr><td><label for="org">Organization name:</label></td>
<td><input type="text" name="org" id="org" value="" size="20" /></td>
</tr>
There is debate between using div and table to layout a form. There are some rules of thumb about this:
Table only for display
Use div as a form layout
In your case, you can consider transforming your table into a div.
I frequently find myself wanting to make a table of forms -- a bunch of rows, each row being a separate form with its own fields and submit button. For instance, here's an example pet shop application -- imagine this is a checkout screen which gives you the option to update the quantities and attributes of the pets you've selected and save your changes before checking out:
Pet Quantity Color Variety Update
snake 4 black rattle update
puppy 3 pink dalmatian update
I would love to be able to do this using HTML that looks like this:
<table>
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead>
<tbody>
<tr>
<form>
<td>snake<input type="hidden" name="cartitem" value="55"></td>
<td><input name="count" value=4/></td>
<td><select name="color"></select></td>
<td><select name="variety"></select></td>
<td><input type="submit"></td>
</form>
</tr>
</tbody>
</table>
This is basically a table full of forms, one form per row. Hitting update once allows you to update that specific row (this is not a real example, my real applications really do require independence of rows).
But this is not valid HTML. According to spec, a <form> has to be either completely inside a <td> or completely outside a <table>. This invalid html breaks javascript libraries and is a huge pain to deal with.
I end up making one table to contain column headings, and then making one table per form. But this requires fixed column widths to have the inputs lined up in neat columns, which is sub-par. How do you end up dealing with this problem? Is there an obvious easy solution I'm missing? How to I make a table of forms?
You can use css to give table layout to other elements.
.table { display: table; }
.table>* { display: table-row; }
.table>*>* { display: table-cell; }
Then you use the following valid html.
<div class="table">
<form>
<div>snake<input type="hidden" name="cartitem" value="55"></div>
<div><input name="count" value=4/></div>
</form>
</div>
The trick here is to just use a single form, e.g.
<form>
<table>
<!-- rows... -->
</table>
<p><input type="submit" value="Update quantity"></p>
</form>
Say you have a product snake with id 6. You then name the input for that item's quantity field quantity[6].
I don't know what server side language you are using, but in PHP you can then iterate over the quantites and update based on the ID. You'd get an array like this:
$_POST['quantity'] = array(
'6' => 4
)