I have a question in HTML form and radioboxes as answers, like this:
<span>What is your favorite fruit?</span>
<input type="radio" name="favFruit" id="banana"><label for="banana">Banana</label>
<input type="radio" name="favFruit" id="orange"><label for="orange">Orange</label>
But I realised, that question is not connected with answers, which is probably bad for SEO, accessibility and and could be bad for future maintenance of application. So I added aria-describedby attribute:
<span id="favFruitQuestion">What is your favorite fruit?</span>
<input type="radio" name="favFruit" id="banana" aria-describedby="favFruitQuestion">
<label for="banana">Banana</label>
<input type="radio" name="favFruit" id="orange" aria-describedby="favFruitQuestion">
<label for="orange">Orange</label>
But at Mozilla Developer Network I found article How to structure an HTML form, when advice is to wrap answers in fieldset tag ans put question in legend tag:
<fieldset>
<legend>What is your favourite fruit?</legend>
<input type="radio" name="favFruit" id="banana"><label for="banana">Banana</label>
<input type="radio" name="favFruit" id="orange"><label for="orange">Orange</label>
</fieldset>
But it could not be trustworthy at 100%, because, because there is written:
This article is in need of a technical review.
Is it really a best way to indicate a question with radioboxes as answers? If it's not, what is the best way? Thank you in advance for every answer.
Yes. <legend> / <fieldset> is the correct tool to use.
Avoid overlong legends though. Some screen readers will read out the entire legend before each label.
Related
So yesterday I spent whole day customizing star-rating ("radio-button-ish"). Now I don't want to abandon my css masterpiece (I am not much of a front-end guy so this was real pain for me), but it looks like that my approach to the problem wasn't correct. Html code is quite simple:
<div class="col-md-5 mb-0 mt-3">
<div id="rating">
<input type="radio" name="star" id="star1"><label for="star1"></label>
<input type="radio" name="star" id="star2"><label for="star2"></label>
<input type="radio" name="star" id="star3"><label for="star3"></label>
<input type="radio" name="star" id="star4"><label for="star4"></label>
<input type="radio" name="star" id="star5"><label for="star5"></label>
</div>
</div>
Now, is there a way to simply read from this choice and then use it in my view?
The situation is, normally I would probably use Field in form with choices but the design would be lost. Do you see a simple solution? Or is there a way of customizing a ChoiceField with widget RadioSelect into the same form, so i can use the name, id just like in above html code?
Note: this is my first django project, pardon me if it is a complete nonsense or I missed something basic..
you can put this code inside your form.
here the field name is star. so you if you access field value of star, then you should get the selected value
small note: in your code this snippent 'id="rating"' is unnecessary
Problem: Grouping form elements
I have an HTML form, where in few places a single control is composed of several inputs. One example is a group of radio buttons.
I'd like to group those inputs and it's label explicitly, so that the screen readers would also (in addition to the visual representation by aligning them on a single line) be able to understand and announce this relationship.
For example, let's say I have a control like this:
<div class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Standard solution problems: Fieldset styling issues
fieldset element and it's child legend seem to be made exactly for that (used in the example below).
The problem is that fieldset and legend elements can't be styled like normal elements (some discussion about it) and nowadays other than in Firefox it's impossible to align them on a single line using Flexbox, which my layout requires.
<fieldset class="control">
<legend class="control-label">Type</legend>
<div class="form-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</fieldset>
Question: Is there some other way?
That makes me wonder if there is some accessible way to group several form controls other than using fieldset element?
Possible solution: role="group"?
There is a "group" role (used in the example below), which could be added to a simple div and it looks like it might do the job, but nowhere is stated clearly that it is the functional equivalent to using a fieldset. And if it does, then how do I mark an element of this group to serve as an equivalent of legend?
<div role="group"
class="control">
<div class="control-label">Type</div>
<div class="control-inputs">
<input type="radio"
name="type"
value="a"
id="type-a" />
<label for="type-a">A</label>
<input type="radio"
name="type"
value="b"
id="type-b" />
<label for="type-b">B</label>
</div>
</div>
Basically you have already answered your question in the Possible Solution section (btw, as a blind person, I'm just impressed how you styled your question with headings!). You missed one tiny and simple thing, the aria-label attribute:
<div role="group" class="control" aria-label="Type">
Note: this will be invisible on screen, it is a screen-reader only solution. If however you want to make it visible, do the following using the aria-labelledby attribute instead:
<div role="group" class="control" aria-labelledby="pseudolegend">
<div id="pseudolegend" class="style-it-like-a-legend">Type</div>
[...]
</div>
The pseudolegend may be a span or even a p, of course, if you find it more appropriate.
A quick and dirty local test I made showed that, at least with JAWS and Chrome, there is no difference between a fieldset and a div with aria-label.
Note: For radio button groups in particular you can use role=radiogroup. Also, in order for the semantics of a group or radiogroup to be expressed to screen reader users an accessible name for the grouping element is required.
What's the point in using <legend>>?
It looks to be the same as a <p> tag, although it cannot be nested inside a div?
Is there a reason to use it?
A legend describes the content of a fieldset.
<fieldset>
<legend>What pets do you like?</legend>
<label> <input type="checkbox" name="pet" value="cats"> Cats </label><br>
<label> <input type="checkbox" name="pet" value="dogs"> Dogs </label><br>
<label> <input type="checkbox" name="pet" value="etc"> Etc </label>
</fieldset>
It has the semantic association with the form controls in that fieldset.
This allows, for example, screen readers to announce the question with each of the possible answers to provide context to what the answers are for.
With so many articles on the "proper," "semantic," and "accessible" use of forms and architecture, I'm rethinking how I approach forms. There are literally so many variations of what is "right" that I'm not 100% on what is really accurate anymore.
In an MDN article (here), it mentions:
With this example, a screen reader will pronounce "Fruit juice size small" for the first widget, "Fruit juice size medium" for the second, and "Fruit juice size large" for the third.
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<input type="radio" name="size" id="size_1" value="small" />
<label for="size_1">Small</label>
</p>
<p>
<input type="radio" name="size" id="size_2" value="medium" />
<label for="size_2">Medium</label>
</p>
<p>
<input type="radio" name="size" id="size_3" value="large" />
<label for="size_3">Large</label>
</p>
</fieldset>
</form>
Now, I can see the benefit of this for something like the example above, however, say I made a multi-step shopping cart, I wouldn't want assistive technology to speak "Checkout: cc-number," "Checkout: cc-date" using "checkout" prior to every label. Especially in cases where steps are labelled. This would be repetitive and sometimes confusing I would assume... But I've always grouped sections of a form within a <fieldset>. Now I'm rethinking using fieldset and legend at all, but does it now go against semantics? What's the trade-off? Is there a balance?
Additionally, and I'll use the same MDN article so I'm not sending you all over the web,
Note that even without considering assistive technologies, having a
formal label set for a given widget lets users to click on the label
to activate the corresponding widget in all browsers. This is
especially useful for radio buttons and checkboxes.
Some assistive technologies can have trouble handling multiple labels
for a single widget. Because of this, you should nest a widget inside
its corresponding element to build an accessible form.
<form>
<p>
<input type="checkbox" id="taste_1" name="taste_cherry" value="1">
<label for="taste_1">I like cherry</label>
</p>
<p>
<label for="taste_2">
<input type="checkbox" id="taste_2" name="taste_banana" value="1">
I like banana
</label>
</p>
</form>
Now, in this instance, the labeling for both these items are reasonably common, I have used both methods, but is there a balance between accessibility and semantics here? I tend to put the label not wrapping the input for consistency in code and I know their is strong debate on this subject (mainly the ability to drop the for and not need the id and/or having labels in different areas of the markup). So, I'm not trying to rehash the debate here, I tend to use the for and id regardless if I wrap elements in a label or not. But if there is an accessibility concern for one then why isn't the latter the golden standard?
Yet another point, WAI-Aria rules now contribute, so how much do these rules really impact the accessibility and semantics of a form?
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<form>
<fieldset>
<legend>Fruit juice size*</legend>
<p>
<label for="size_1">
<input type="radio" name="size" id="size_1" value="small" aria-labelledby="size_1_label" />
<span id="size_1_label" required aria-required="true">Small</span>
</label>
</p>
<p>
<label for="size_2">
<input type="radio" name="size" id="size_2" value="medium" aria-labelledby="size_2_label" />
<span id="size_2_label">Medium</span>
</label>
</p>
<p>
<label for="size_3">
<input type="radio" name="size" id="size_3" value="large" aria-labelledby="size_3_label" />
<span id="size_3_label">Large</span>
</label>
</p>
</fieldset>
</form>
I'm really just curious whether or not there is a standardized method of approach when dealing with Semantic and Accessible markup. So far it seems people just do whatever they feel is right and then vocalize their thoughts all over the internet.
I've read through W3C's drafts and recommendations but even they use varying examples. Does anyone have evidence of what approach really improves accessibility and semantics in relation to forms? Are their any particular websites that have the time an resources to test this and draw an accurate conclusion that I'd be able to review?
The answer to your question really is "it depends".
All of the accessible markup you list above is valid. So if you are simply looking for accessible markup, you can use any of the examples. The rest of the decisions really come down to
error handling, and
additional instructions
Error Handling
When errors appear in your form, they need to be programmatically associated with the form fields that they reference. There are two ways to do this while maintaining the label itself:
Add the error to the label
You can add the error text to the label itself. Having a wrapped label gives you more flexibility over the order that this error text occurs in the DOM. you can place the error before the label, after the label, after the input or before the input. For this reason, you might choose to use the wrapping technique instead of the non-wrapping technique:
<label>My Input
<input type="text" aria-invalid="true" id="myinput" name="myinput"/>
<span class="error">The input field must be a valid username</span>
</label>
Associate the error using ARIA
The second technique is to associate the error using ARIA. This is very flexible because it allows multiple elements to form the label of the input and can also be used for additional instructions.
<label id="mylabel">My Input</label>
<input type="text" aria-invalid="true" aria-labelledby="mylabel myerror"/>
<span id="myerror" class="error">The input field must be a valid username</span>
Now if your input is a checkbox or radio button, you will want to maintain the for and id association so that the user can click (or touch) the label in order to activate the checkbox/radio.
Additional Instructions
As mentioned above, using ARIA labelling techniques, you can associate multiple elements with a single input field. This is useful for providing additional instructions and hints. aria-labelledby is used for the accessible name (label) whereas aria-describedby can be used for a hint and can also reference multiple elements by using multiple ids.
<label id="mylabel">My Input</label>
<input type="text" aria-invalid="true" aria-labelledby="mylabel myerror" aria-describedby="unameinstructions"/>
<span id="myerror" class="error">The input field must be a valid username</span>
<span id="unameinstructions">A valid user name must contain at least one alpha, one numeric character and must be at least 8 characters</span>
Here is a presentation I created on accessible dynamic forms http://www.slideshare.net/dylanbarrell/accessible-dynamic-forms-27169766 it references some example code that can be found here https://github.com/dylanb/a11yvalid and the running example of good best practices (except perhaps the CSS styling choices) can be found here http://dylanb.github.io/bower_components/a11yfy/examples/form-validation.html
What are the advantages of using the <fieldset> tag?
I don't really get what it is used for.
Forms are often broken up into various sets of fields.
The fieldset tag allows you to logically group sets of fields in order that your forms be more descriptive.
You'll also note that you can use the fieldset to style your forms and display those logical associations between fields.
Just like forms you find in the "real" world.
The "advantages" of using a fieldset are that they allow you to mark up your data (in this case a form) in the most semantic way available. Consider that placing your fields in a fieldset is more descriptive than placing your fields in a div. The div tells you nothing about the relationship between the fields, a fieldset tells you there is a relationship.
It's a similar principle to many of the new HTML5 tagsets. <footer> for example tells you more about the meaning of the data inside it compared to an ambiguous <div>.
If you take a look at the HTML5 spec for Developers:
http://developers.whatwg.org/forms.html#the-fieldset-element
The fieldset element represents a set
of form controls optionally grouped
under a common name.
(there's a lot more information if you follow the link)
Combined with the legend element, it allows you to easily do this, which is difficult to recreate without using fieldset/legend:
It allows you to group a set of related fields and give them a legend.
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<fieldset>
<fieldset>
<legend>Address</legend>
<label for="line1">Line 1</label>
<input name="address1" id="line1">
<label for="line2">Line 2</label>
<input name="address2" id="line2">
<label for="town">Town</label>
<input name="town" id="town">
<label for="country">country/label>
<input name="country" id="country">
</fieldset>
You group stuff together with it. Which is useful if you need to access things in it for CSS or JavaScript, and don't want to go through the hassle of assigning ID's to everything.
Also, the legend looks pretty good.