-
Notifications
You must be signed in to change notification settings - Fork 0
Accessibility
Accessibility in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. Here we provide information on developing content to be accessible.
The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
This approach to providing form labels is fine for people with good sight who can identify the relationship between form label and form field spatially.
<label for="first_name">Your First Name</label>
<input id="first_name" type="text" name="fname"/>When forms and labels are bound to one another using this method, screen readers automatically announce label text when focus is moved to the corresponding form field. This is equivalent to a sighted person glancing at the label text as they move to the form field in question. It is easy to see how the majority of visually impaired users would prefer this to being forced into performing monotonous navigational actions in order to identify the purpose of every form field provided. Ensuring form labels and fields are explicitly bound to one another also has another benefit: if a correctly bound form label is clicked the cursor will be moved to the bound form field automatically.
This functionality is useful for people who have motor impairment diseases or poor hand to eye co-ordination. This effectively ensures that the form label acts as an extended hit area for the form field creating a better all round user experience.
Fieldset tags are used as a mechanism for grouping related sections of forms. Correctly implemented <fieldset> tags have benefits for various people. By default <fieldset> tags provide a visual outline around the form field grouping. This can be extremely beneficial for people with cognitive disabilities as it effectively breaks the form into smaller subsections, making the form easier to interpret in the first instance.
Assistive technologies such as screen readers provide varying degrees of functional support for <fieldset> and <legend> tags. While some will ignore the groupings, providing no extra benefit, other screen readers will identify a fields form grouping when it gains focus, announcing the text within the corresponding<legend>tag before the fields label.
The <legend> tag should be used to provide descriptions of the form groupings on the page. For any given <fieldset> there should always be one associated <legend> tag. This should appear directly after the opening <fieldset> tag and should provide a descriptive context from which the purpose of following form fields can be identified. If legend tags are not implemented effectively, people with cognitive disabilities may find it hard to identify the context of the form, and hence the purpose of the form fields that follow are more likely to be ambiguous.
<form action="some-script.php">
<fieldset>
<legend>Broadband Payment Form</legend>
<fieldset>
<legend>Your broadband account</legend>
<label for="fName">First Name</label>
<input id="fName" type="text" name="fName"/>
<label for="sName">Surname</label>
<input id="sName" type="text" name="sName"/>
<label for="aNum">Account Number</label>
<input id="aNum" type="text" name="aNum"/>
</fieldset>
<fieldset>
<legend>Your banking details</legend>
<label for="aNum2">Account Number</label>
<input id="aNum2" type="text" name="aNum"/>
<label for="eDate">Expiry Date</label>
<input id="eDate" type="text" name="eDate"/>
</fieldset>
</fieldset>
</form><label for="name">Name:</label>
<input id="name" type="text" name="textfield"><fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
<input id="mushrooms" type="checkbox" name="toppings" value="mushrooms">
<label for="mushrooms">Mushrooms</label><br>
<input id="olives" type="checkbox" name="toppings" value="olives">
<label for="olives">Olives</label>
</fieldset><fieldset>
<legend>Choose a shipping method:</legend>
<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>
<input id="twoday" type="radio" name="shipping" value="twoday">
<label for="twoday">Two day</label><br>
<input id="ground" type="radio" name="shipping" value="ground">
<label for="ground">Ground</label>
</fieldset><label for="favcity2">Choose your favorite city?</label>
<select id="favcity2" name="favcity2">
<optgroup label="Asia">
<option value="3">Delhi</option>
<option value="4">Hong Kong</option>
<option value="8">Mumbai</option>
<option value="11">Tokyo</option>
</optgroup>
<optgroup label="Europe">
<option value="1">Amsterdam</option>
<option value="5">London</option>
<option value="7">Moscow</option>
</optgroup>
<optgroup label="North America">
<option value="6">Los Angeles</option>
<option value="9">New York</option>
</optgroup>
<optgroup label="South America">
<option value="2">Buenos Aires</option>
<option value="10">Sao Paulo</option>
</optgroup>
</select><input type="submit" name="submit" value="Submit Search">
<input type="reset" name="reset" value="Reset">This contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels. Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object.
To improve compatibility with user agents that do not support ARIA, you can use aria-labelledby with the <label> element (using the for attribute).
<div id="billing">Billing</div>
<div>
<div id="name">Name</div>
<input type="text" aria-labelledby="billing name"/>
</div>
<div>
<div id="address">Address</div>
<input type="text" aria-labelledby="billing address"/>
</div><div id="radio_label">My radio label</div>
<ul role="radiogroup" aria-labelledby="radio_label">
<li role="radio">Item #1</li>
<li role="radio">Item #2</li>
<li role="radio">Item #3</li>
</ul>This is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>While the aria-labelledby overrides the , aria-describedby does not. This means that aria-describedby should only be used in addition to a label (e.g., or ), not in place of one.
More links on Accessibility
https://www.w3.org/WAI/tutorials/forms/instructions/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form