From 9bbc8dc21293bfd1045866dc2986f92d259e87c7 Mon Sep 17 00:00:00 2001 From: Jasper de Groot Date: Wed, 26 Sep 2012 10:56:23 +0200 Subject: [PATCH] Docs (forms): Added info about hiding labels accessibly in case of radio buttons and checkboxes. --- docs/forms/docs-forms.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/forms/docs-forms.html b/docs/forms/docs-forms.html index d3cc7582e2e..9d156105038 100644 --- a/docs/forms/docs-forms.html +++ b/docs/forms/docs-forms.html @@ -81,7 +81,27 @@

Hiding labels accessibly

While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

+

Because radio and checkbox buttons use the label to display the button text you can't use ui-hidden-accessible in this case. However, the class ui-hide-label can be used to hide the legend element:

+ +
	
+<div data-role="fieldcontain" class="ui-hide-label">
+    <fieldset data-role="controlgroup">
+	   <legend>Agree to the terms:</legend>
+	   <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
+	   <label for="checkbox-2a">I agree</label>
+    </fieldset>
+</div>
+
+ +
+
+ Agree to the terms: + + +
+
+

Disabling form elements

All jQuery Mobile widgets can be disabled in the markup by adding the standard disabled attribute to the element, just like you would with native controls. Each form widget also has standard disable and enable methods that are documented with each form widget. Here are a few examples of disabled widgets: