I am developing an application using accessibility properties. I have some buttons that increment and decrement some values showed in labels. Is it possible somehow force the screen reader to read a label when a blind user changes the values?
Support for aria-live is spotty.
Seeing a code example would be handy, but if you are always putting focus on the field then perhaps you want to use aria-label with some good messaging instead as this is better supported and will be spoken when the field gets focus.
<label for="foo">Field Label</label>
<input type="text" id="foo" aria-label="Field Label. Note: If you are using a screen reader…">
Note: The screen reader reads the value when ever there is focus so after clicking the button check where your focus resides.
1. Probably worth a read: https://developer.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/
2. An example from JAWS: ARIA https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm
OR
Accessibility - live region in Xamarin.Forms
<TextView
android:id="#+id/feedback_text_view"
android:accessibilityLiveRegion="polite" />
Please follow for more help = https://codelabs.developers.google.com/codelabs/basic-android-accessibility/#6
Hope will help you
Related
Is the following valid per WCAG 2.0?
<span id="my-label">Your photo</span>
<input id="my-upload" type="file" aria-labelledby="my-label">
The OS X screen reader understands this, e.g. reading the label for the input when it gets the focus, but Total Validator complains as follows:
You can try it yourself by running Total Validator on this page. Is Total Validator correct to report this error, or is this a bug in Total Validator?
(Obviously, in this particular example, I could use a <label for="my-upload">, instead of relying on the aria-labelledby. One could even argue that using a <label> has more semantic weight and should be prefered. But that is not the question I'm asking, as in my real-life scenario using a <label> can't be done.)
aria-labelledby is used to provide information to accessibility devices like screen readers. It won't be of any help if you do not use such specific device.
It won't give any information to 99% of people. So yes, Total Validator is correct to report this as an error as WCAG does not require to use a specific device. That being said, you can use the title attribute in situation where you can't use a label tag.
See: H65: Using the title attribute to identify form controls when the label element cannot be used
It is ok to use aria-labelledby as a way of creating an accessible name where a visible label already exists. It is better to provide a label association using for-id because that will allow clicking on the label text to place the focus in the input field (or select the checkbox or radio button).
Your accessibility analyzer is old. If you use the aXe accessibility analyzer, you will notice that it will not complain about this issue.
I couldn't find anything in the angularjs docs, nor online, about this specific aspect of form validation. You know when someone writes something in an input field (example: name, phone number, email etc.), and then there is a green checkmark that appears? Or an X that appears implying it's wrong, incomplete etc.
So, I have those images in my folder and ready for use in either situation. Problem is, I can't find the documentation to properly achieve what I would like to achieve. I am thinking that angularjs would be the solution to use, as the rest of my code in is angular.
Since this is angularjs, the only post and documentation that presented a viable option (which does not work for a few reasons) are the following options:
How to put an image in div with CSS?
https://docs.angularjs.org/tutorial/step_09
I was thinking of using CSS to trick the browser into making the one or the other image appear as it validates. I thought it might force the image in my other div to appear, but to no avail.
For example, in this CSS, I tried this:
.ng-valid.ng-dirty .div.test{
border-color: green;
content:url(http://example.com/image);
}
Using this in my HTML:
<div class="test">
<label style="float:left">by:</label>
<input class="form-control controltwo" required ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="width:350px;" placeholder="Email Address"/>
</div>
As I said before, I am trying to achieve something using angularjs. As CSS can be used for styling, it cannot be tricked into being a styling option and a complex validator. I've tried a few tricks as show on the links, but they don't work. As for the second link, it just isn't made for this purpose, and considering they are made only for filters and images, the docs for the filters don't help a bit.
A simple way of achieving what you want is to look in to the $valid or $invalid properties of your form control.
For example, to show a small message when the email is invalid, you would put this element in your markup.
<div ng-show='reviewForm.email.$dirty && reviewForm.email.$invalid'>Invalid Email</div>
Where reviewForm is the name of your form, and email is the name of your input control.
Here is a plunkr demonstrating this: http://plnkr.co/edit/tUuToy99xjfMhbyMd3eV
You can replace the element with whatever else you want
You can do this with ng-show, ng-src and ng-model depending on what you're validating.
https://docs.angularjs.org/api/ng/directive/ngModel
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngSrc
The example under ng-model:text shows pretty much what you want. If you're not using forms, you should be able to use ng-change to fire off a check and change the image to the appropriate one.
https://docs.angularjs.org/api/ng/input/input%5Btext%5D
If ng-show watches the $valid attribute of the field in question you can hide the check mark when validation is false, and show it when true. You can flip the logic if you want an X.
I notice this as a frequent problem on many wbesites, even those of large corporations, so as a web developer applying for jobs, I think, I should know how to fix this.
Basically, for example, a username field will say "Username" until you click it to type in your username, at which time it should clear itself of the text "Username." But in most cases, it doesn't, and you end up typing in the middle of that pre-existing text.
I've looked this up, and the best solution I found was a 30+ line set of Javascript functions which did exactly what you'd expect: set up a system that clears the default value away when a user clicks on the field, and also puts it back when they click away so long as they hadn't entered anything.
But that's not really what I was looking for, because I already knew how to do that.
I feel like by now, with HTML5 and all, there should be a simpler fix to this. And not just a reduction of the JavaScript to a shorter jQuery script. I mean more of an embedded, inherent fix.
Does anyone know of any ways to stop this phenomenon from happening?
Simply use HTML5 placeholder attribute
<input type="text" placeholder="Whatever" />
Fiddle
Cross Browser Info :
Some Firefox versions clear the placeholder text on click of text box and Chrome clears it after the user starts typing, but later version of Firefox acts like chrome, it clears the placeholder text as the user starts typing in the input box.
You can use the HTML5 placeholder attribute http://www.w3schools.com/html5/att_input_placeholder.asp
Modern browsers now support the placeholder attribute for forms, which let you do just what your asking
Check out
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
For a article using modenizr for cross browser compatibility
just use the HTML5 placeholder attribute.
<input type="text" placeholder="Username" />
This will obviosuly not be completely cross browser compatible so for that you will still need the old Javascript / jQuery fixes.
I'm currently working on a button like the "Facebook like" and "Twitter" buttons. Since it will be a bit more complex, involving a tooltip that is shown after a click on the button, I cannot place it into an iframe.
So I thought a bit about why everyone puts their buttons into an iframe. The first thing that came to my mind was that it makes it impossible to alter the appearance of the button. But are there any other (security) concerns that matter in this case?
I suppose it indeed prevents easy tampering with the appearance, but also with the behavior (all kinds of Javascript i.e.), it allows for easier statistics collection and it's probably an easy way to have it implemented widely. Simply saying "please put <iframe src="http://blabla" /> into your website" is a lot easier for users to do and understand than "please put <script .....> into the head of your code, and <form><input type="hidden" ..><input type="submit" ..></form> into the body"
Is this possible to achieve without javascript/jQuery?
I currently have a login template with the input fields as:
<input id="username" type="text" name"username" placeholder="username" autofocus>
I was wondering if there was a way when the user clicked their mouse on the field to type the placeholder text would disappear without using javascript if possible? Before this i was just using value and echoing the variables out into the fields but currently experimenting with HTML 5 and CSS3.
Thanks.
New browsers have a native way to do this. And if supported, you don't have to do anything.
With older browsers you do need to use javascript.
Edit: When using new features on old browsers its called Pollyfills. Here is a nice list with a lot of pollyfills that can be used together with Modernizer, that in turn can detect this features.