Confirmed users
292
edits
SeaMonkey:Toolkit Transition:PrefwindowPanes:HowTo: Difference between revisions
SeaMonkey:Toolkit Transition:PrefwindowPanes:HowTo (view source)
Revision as of 19:13, 5 April 2008
, 5 April 2008Adding accessibility markup improvement suggestions.
(correction of late night errors) |
(Adding accessibility markup improvement suggestions.) |
||
| Line 116: | Line 116: | ||
* Finally, any <prefpane> 'onpaneload' handler attribute is evaluated. | * Finally, any <prefpane> 'onpaneload' handler attribute is evaluated. | ||
== Accessibility markup enhancements == | |||
While migrating the preferences, all XUL files should be checked for accessibility markup, correct/consistent access keys, and other related changes. | |||
=== Properly labelling controls === | |||
Associating a XUL:label element with the XUL element it is labelling can be done in one of two ways: | |||
For simple labelling, use the "control" attribute of the XUL:label element and set its value to the ID of the XUL element it is labelling. This has two effects: | |||
* It associates the XUL element's accessible with the name/value of the label it is associated with. | |||
* When clicking on the label, the associated control gains focus. | |||
This is good for most label/control combinations. XUL elements that can be used are textbox, menulist, radiogroup or other similar controls. Elements like buttons, checkboxes or radio elements that have a "label" attribute usually don't need labelling, since their label provides the necessary info. | |||
The other way to label a control is to use the "aria-labelledby" attribute on the XUL control that is to be labelled. The "aria-labelledby" attribute's value consists of one or more IDs of other elements that make up the label. An example is the "keep history for x days" combination. There is one label in front of the textbox "keep history for", then there's the value of days inside the textbox, and another label following that only contains the "days" appendix. If we used the "control" attribute on the preceeding label, the label would only be "Keep history for". However the user would not know what: Days, Months, Eons? So we use a little trick borrowed from Web 2.0 accessibility technology: We make up the label out of the first label, followed by the contents of the textbox, followed by the trailing label. The IDs of these are to be enclosed in quotes and separated by spaces. Of course, the two labels will need to get IDs for this to work. | |||
"aria-labelledby" can also be used if you actually need a XUL:description element to label something (because you might need wrapping). Instead of giving the XUL:description element the "control" attribute, give it an ID instead, and give the control it is labelling an "aria-labelledby" attribute with the ID of the XUL:description element that is labelling it. If we used the "control" attribute on the XUL:description, it would become the AccDescription property of the control's accessible, which is usually used to give additional information rather than the main name. | |||
You can also use "aria-labelledby" on a textbox that follows a checkbox or radio button, and set it to the checkbox's or radio button's ID. This causes the checkbox's or radio button's caption to become the accessible name of the textbox. | |||
An example taken from the new History preferences pane: | |||
old: | |||
<label value="&pageHis.label;" | |||
accesskey="&pageHis.accesskey;" | |||
control="histDay"/> | |||
<textbox id="histDay" | |||
size="3" | |||
preference="browser.history_expire_days"/> | |||
<label value="&days.label;"/> | |||
Note that this has already a simple label/textbox association. However it can be improved like this: | |||
<label value="&pageHis.label;" | |||
accesskey="&pageHis.accesskey;" | |||
control="histDay" | |||
id="histHeadLabel"/> | |||
<textbox id="histDay" | |||
size="3" | |||
preference="browser.history_expire_days" | |||
aria-labelledby="histHeadLabel histDay histTrailLabel"/> | |||
<label value="&days.label;" | |||
id="histTrailLabel"/> | |||
The accessible name for the textbox will become the first label, followed by the value currently inside the textbox, followed by the trailing label, giving the control a much more meaningful name. Keeping the "control" attribute on the label ensures that, if it is clicked, the textbox gets focus. "aria-labelledby" will, if present, override the label/textbox association for the accessible name. | |||
=== Checking access keys === | |||
Access Keys are a good way to give quick access to the controls of a dialog. Usually the ALT key is being held down while the underlined letter, the letter we specify as the access key, is being pressed. A few things to note: | |||
* The access key should obviously be part of the control's caption/label. | |||
* Access keys in multipage dialogs such as the new pref window do not need to be unique across the whole dialog, they just need to be unique on a single pane. So while you should avoid having the letter "g" associated with two controls on the same pane, having the letter "g" on two different panes is no problem. | |||