I'm using the AngularDart to build a web project. I need to make the website accessible, so I use WAVE (web accessibility evaluation tool) to run evaluations for my webpage. The label above the input area shows "A form label is present, but does not contain any content."
I know that I need to add the attribute "for=id_of_input" to the label tag, but the input tag is customized and the IntelliJ shows "invalid id reference" when I do something like this:
<label for="some_id"> username: </label>
<customized-input id="some_id"></customized-input>
So How could I deal with this situation?
There is another approach that might work for you: Simply place the <label> around the <input>. Then you can skip the for and even the id attribute. If it behaves in AngularDart, it should pass in WAVE as well.
Related
please , I need to know difference between area-placeholder and placeholder ? when area-placeholder will appear in input field
<input type="search" placeholder="Search" aria-placeholder="Search2" />
edit (added a deeper explanation)
ARIA labels are used to express semantics that HTML can't express on its own, i.e bridging areas with accessibility issues that can't be managed with native HTML. It works by allowing you to specify attributes that modify the way an element is translated into the accessibility tree.
for example, let's use a list item as a custom checkbox (the CSS class 'checkbox' gives the element the required visual characteristics.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
for sighted users, this will work fine, but a screen reader won't give an indication that this element is a checkbox, so users with low vision might miss this element.
using ARIA will give the element the missing information for the screen reader to properly interpret it.
there are many ARIA attributes, and if you plan on using them (you should!) i recommended reading more here
Aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label, only the aria-label value will be used.
A placeholder is a text that appears in the form control when it has no value set. The HTML placeholder attribute enables providing a sample value or a brief description of the expected format for several HTML types and .
If you are creating a textbox using any other element, the placeholder is not supported. That is where aria-placeholder comes into play. The aria-placeholder attribute can be used to define a short hint to help the user understand what type of data is expected when a non-semantic form control has no value.
<p id="date-of-birth">Birthday</span>
<div contenteditable role="textbox" aria-labelledby="date-of-birth"
aria-placeholder="MM-DD-YYYY">MM-DD-YYYY</div>
The placeholder hint should be shown to the user whenever the control's value is empty, including when a value is deleted.
The aria-placeholder is used , in addition, to, not instead of, a label. They have different purposes and different functionality. A label explains what kind of information is expected. Placeholder text provides a hint about the expected value.
ARIA is only modifying the accessibility tree for an element and therefore how assistive technology presents the content to your users. ARIA doesn't change anything about the function or behavior of an element. When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior.
for a more detailed explanation, you can visit the aria-label page on Mozilla
Are there any differences between these two screen reader techniques on forms, and is one more encouraged than the other:
<label for="titleInput">Title</label>
<input type="text" id="titleInput" name="title" value="">
<div>Title</div>
<input type="text" aria-label="Title" name="title" value="">
The first way has always been the way to set this up, but since WAI-ARIA was introduced, it's got me thinking if using aria-label with forms is the better than using <label for="x">.
As a rule of thumb: If a real element can do the job, then use a real element. ARIA is what you fallback to when there is no real element that expresses the semantics or when you are doing something really weird which prevents you using the normal element.
(Most of the time, when you are doing something really weird, you should stop doing the weird thing instead).
In this particular case, there are a couple of major differences between the two.
Browsers won't extend the click target to the div element as they would with a label element. Clicking the label will focus the input, clicking the div will not.
You now have two labels. The div and the attribute provide the same information in two different places. The attribute doesn't replace the div, so a screen reader will read out the div text and the label associated with the input.
Use a <label>. It is specifically for associating text with a form control.
aria-label is designed for providing a text description of some content which a screen reader can't read out. e.g. when you are using a background image to convey information instead of using an <img> with an alt attribute (See my previous note about weirdness).
Aria-label is for accessibility. If Aria-label is added, on voice-over i.e (cmd +F5 on MAC or JAWS on windows machine will read whatever is typed inside the aria-label attribute of the HTML tag. This functionality is highly helpful for visually disabled users. Read here https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
Label is HTML tag , just like <form> or <h1>..<h6> , etc tags, when tag is used it renders Label on the UI. E.g: <Label>ENTER NAME</Label>
I'm just starting to learn about Web Content Accessibility and I was reading this document regarding non-text contents.
According to it:
For non-text content that is a control or accepts user input, such as
images used as submit buttons, image maps or complex animations, a
name is provided to describe the purpose of the non-text content so
that the person at least knows what the non-text content is and why it
is there.
So I double checked if what was meant here as name is the same as the HTML name attribute and found out that it isn't.
Near the bottom of the document here's what the definition of name is:
name
text by which software can identify a component within Web content to
the user
Note 1: The name may be hidden and only exposed by assistive
technology, whereas a label is presented to all users. In many (but
not all) cases, the label and the name are the same.
Note 2: This is unrelated to the name attribute in HTML.
So my question is how do I incorporate this name in my website if it's not the HTML attribute?
It depends on the control you are using. Some examples:
Input controls, textarea:
Use the label element with the for attribute, matching the id attribute of the element.
<label for="input1">My label</label><input type="text" id="input1" />
Buttons
If you use the button element include the description inside the content
<button>My label</button>
For input[type=submit], you can use the value attribute:
<input type="submit" value="My label" />
If you want to describe an image, use the alt attribute
Ex:
<img src="..." alt="My label" />
See my answer on If an HTML element has role="button" should it also have the attribute "name". Another person was asking about the "name" of an object and I clarified that the name of an object is not the name= property (that property is used for javascript) but rather is the label of the object that assistive technology will surface to the user. More details in my post.
The "name" attribute you mean is an attribute of the tag you are using in the web page. Example: Tag Button you can specify the name of the tag to facilitate user. Note 2 is telling you that HTML tag is unrelated to this attribute.
I have an order form and I need to do something like this:
<input id="myInput" type="text" name="myInput" value='<time datetime="2015-01-01" itemprop="startDate">1.1.2015</time>' class="width-100" readonly />
but in the browser, in the input area, where should be displayed just: 1.1.2015, as I supposed, is displayed the whole time tag: <time datetime="2015-01-01" itemprop="startDate">1.1.2015</time>
...idk why, and I can't figure out how to make this work.
The time tag in input's value is based on date selected from DB and returned by function, like: return '<time datetime="'.date('Y-m-d', strtotime($from)).'" itemprop="startDate">'.date('j.n.Y', strtotime($from)).'</time>';
Any advice would be helpful. Thanks
You can write almost anything you want inside an HTML attribute, as long as you encode it properly (e.g. < instead of <, " instead of ", etc.). All decent programming languages provide built-in methods to take care of the dirty details. Whether those values are valid, meaningful or useful in the context of the precise attribute is a different thing.
<input> elements are designed to hold plain text. Whatever you write into the value attribute will be rendered to the user as-is. If you type HTML tags, you'll display HTML code, nothing else.
If you want to send form data to the server, you can simply use form fields, as you are already doing. The missing bit is that form fields do not need to be visible. There's a specific control for hidden data: <input type="hidden">. From MDN reference:
hidden: A control that is not displayed, but whose value is submitted to the server.
Is there any way to allow a link/anchor within an input field so that whatever text is in the field is ALSO clickable and actionable?
This is unfortunately not possible in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.
You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.
These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:
The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):
<input id="myTxtbox" type="text" value="http://yahoo.com">
where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:
in pure javascript:
document.getElementById("myTxtbox").value
in jQuery:
$("myTxtBox").val()
When your link/url is the text in between the <INPUT> and </INPUT>, i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):
<input id="myTxtbox" type="text">
http://yahoo.com
</input>
The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerText
jQuery:
$("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).
The result being: http://yahoo.com
When your link/url is the form of an ANCHOR (<A>) with an HREF to your url (and visible link text) in between the <INPUT> and </INPUT>, i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:
<input id="myTxtbox" type="text">
<a href="http://yahoo.com">
http://yahoo.com
</a>
</input>
Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerHTML
jQuery:
$("myTxtBox").html()
The result being: http://yahoo.com