Working on accessibility, have a textbox containing a date (format depends on language selected). Screen readers read the date currently in the textbox letter-by-letter ("Twelve-slash-oh-five-slash-twenty-thirteen" for 12/05/2013).
1) How can I tell the reader program to read out "twelfth may twenty-thirteen"?
2) How can I tell the reader the format required by the textbox to be typed in? e.g. "day-slash-month-slash-year"
I'm new to this topic and not familiar with the concepts. Any ideas or hints, links to details or concepts are very much welcome.
1) you can't. I wouldn't worry about it.
2) Screen readers need <label>s to be read correctly, you can do it like so
<label for="date">Birthday (DD/MM/YYYY)</label>
<input id="date" name="date" type="text"/>
If you want to hide the formatting, you can do:
<label for="date">Birthday <span class="hidden">DD/MM/YYY</span></label>
where hidden is:
.hidden {
position: absolute;
top: 0;
left: -999px;
}
Related
I'm developing a webapp (angularjs) that requires user to input a credit card. The first 12 digits of the credit card must be invisible to user, so currently right now I'm using password inputs to achieve this.
The problem with this is that Chrome thinks that I'm really writing a password, so it gives me the option to use/change my stored credentials for this website:
So I want to know if there is a CSS way or angular plugin that I can use in order to make my text inputs looks like password for the user.
You can use HTML5 Input Type Password, like this:
.pass, .regular{
float: left;
width: 80px;
margin: 5px 0px 15px 15px;
}
<div>
<p>Credit Card:</p>
<input type="password" class="pass">
<input type="password" class="pass">
<input type="password" class="pass">
<input type="text" class="regular">
</div>
Here a link to an example.
I cannot use HTML input type password because it tries to use my credentials for the site for autofill, so I went with Nirav Parmar answer and used: -webkit-text-security: disc;
However, this only works for chrome, for all browsers you can use this plugin that creates a font based only of circles or dots.
https://github.com/noppa/text-security
Is there a way to hide/disable control options for date and time input's types that allow increment/decrement values by clicking on arrows.
<input type='date' />
<input type='time' />
And at the same time have the possibility to provide data for each segment like dd from dd/mm/yyyy (basicly just hide the controls)
Like for example it's possible to set resize: none for textarea.
textarea {
resize: none;
width: 200px;
height: 100px;
}
<textarea />
You can set the input to disabled, or use a <input type="text" /> if those spinners are getting in your way
EDIT
I googled a little and it turns out it can be done on webkit browsers...
https://css-tricks.com/snippets/css/turn-off-number-input-spinners/
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
<input type='date' />
<input type='time' />
At this stage, the short answer is that you can’t. The date and time elements aren’t widely supported yet, and any tweaking is, at this stage, still experimental.
There are good reasons to prefer the date and time types over the text type, but you won’t be able to control their appearance on all browsers reliably.
Chrome has some experimental styles: you can read about that at https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/. the ::-webkit-inner-spin-button property may help.
Just remember that, at this stage, it is by no means universal.
As shown here: http://msdn.microsoft.com/library/windows/apps/Hh465498
Do Mozilla and Webkit have equivalent options? The clear button on text inputs is good for touch screen apps. I don't want any JavaScript workarounds and an easy CSS fix would be very helpful.
I already know this is possible with JavaScript, but IE 10 has an inbuilt solution for displaying clear button, and I'm wondering if any other browsers have similar options?
The short answer is No.
There is no way to use CSS to generate a button that will clear the contents of an input without the use of JavaScript.
The clear button is built in functionality to IE10. -ms-clear is not what generates it, but simply a way to target it for styling.
I should mention though, that the <input type=search> field in Chrome will give you a clear button as well, but not on normal <input type=text> fields.
Was looking for same issue so I made a jQuery plugin (TextClear) to offer the same feature :
here is the download link
and about trick behind this:
set background image on input text field and position it to the right corner like
{
background-image: url('imagesUrl');
background-repeat: no-repeat;
background-position: right center;
background-size: 10% 90%;
padding-right: 1%;
}
And then handling click event on it by mapping its position (you can check the source code as well for detailed logic)
You cannot actually do this using css..
But you can user jQuery, and its simple. All you gotto do is this...
HTML code:
<form id="myform" method="post">
<input type.... />
<input type.... />
<input type.... />
<input type="button" id="clear" name="clear" />
</form>
jQuery Code:
$("#clear").click(function(){
$("#myform").reset();
});
And this will work.. But the form tag is necessary.
Y U NO like Javascript? Look how easy jQuery makes this process:
Markup
<form>
<input type="text">
<button>X</button>
</form>
jQuery
$("form").on("click", "button", function() {
$("input").val("");
return false;
});
http://jsfiddle.net/QyE92/
With CSS, you can style the button and position it appropriately to mimic the "x" in the metro interface almost exactly.
url: http://translate.google.com/
eg. source lang is english, translate lang is other. and enter the text 'i' in the above page's textarea. hover the translate word, and the word background will highlight, and the 'i' will highlight.
I want to know that blew the code how does the '.gt-hl-layer' cooperate with the '#source' work?
<div style="width: 100%;"><!--from google translator-->
<div class="gt-hl-layer" style="box-sizing: content-box; width: 641px; height: 65px; left: 0px; top: 0px; " dir="ltr"></div>
<textarea id="source" name="text" wrap="SOFT" tabindex="0" dir="ltr" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" style="overflow-y: hidden; overflow-x: auto; box-sizing: border-box; " class="goog-textarea"></textarea>
</div>
It's better to give some simple demo or code.
thanks very much!
I imagine it could work like this:
Run source through the "translation machine", it produces the translated text, and in the process does a lot of tagging (annotations) on the source -- the translation also comes with annotations.
The translation process determines which tokens in the source are linked to each other (e.g. phrasal verbs) and how the tokens are linked to the corresponding elements in the translation.
The translation text is an end product, it's generated from a dataset which had much richer annotations and tags -- using this richer set, you can have this annotated structure compiled into any other format (say, XML), or in the case of HTML, it probably takes the form of lots of spans, each with an ID.
On the surface, the HTML is re-fabricated for the source text too (now with the structure from the underlying annotations). It's like a tokenized text with lots of spans, each with an generated ID. Usually there's another layer that matches the text areas and carries the highlighting.
Then probably there's a middle part that map out which mouseover in the translation should light up which span(s) in the source.
I'm looking for some examples of stylish web forms that can be used on any site. I've googled for "stylish web forms", but most of the examples I find are of very ornate forms that use a lots of images, which are unlikely to look good on other sites that use different color schemes. I've also found lots of examples of using CSS to layout forms, but they usually don't apply any styling to the forms to make them look good.
What I'm looking for is something in between:
Properly laid out, e.g. labels and inputs aligned (I have no opinion on the whole "label on top or alongside" debate)
Nicely styled, but without using images so colors can be easily changed
Semantically valid markup, e.g. no tables or JavaScript, though I'm not fundamentalist about this (a few extra divs is OK)
A response that points to a single example is a lot more useful than "here's a page with a million example forms, most of which don't meet your requirements".
I realize I'm being very demanding here, so apologies and thanks!
Here are a few good sites, with self explanatory examples and usage.
http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/.../
http://jeffhowden.com/code/css/forms/
http://24ways.org/2006/showing-good-form
There are billions more online, tutorials, downloadable examples, stylesheets. To get your ideal solution you might have to mash them together.
See Prettier Accessible Forms.
However, as noted in Styling form controls with CSS, revisited, you are going to have a lot of variation in appearance across browsers and operating systems.
These articles will show you how to build visually pleasing forms, instead of giving you a catalog of a bunch of ready made templates.
I'm not sure if this is as comprehensive as what you're asking for, but I like going with something simple like this:
<fieldset>
<legend>New customer? Provide the following</legend>
<label for="FirstName">First Name:</label>
<input type="text" ID="FirstName" name="FirstName" />
<label for="LastName">Last Name:</label>
<input type="text" ID="LastName" name="LastName" />
<label for="Address">Address:</label>
<input type="text" ID="Address" name="Address" />
<label for="City">City:</label>
<input type="text" ID="City" name="City" />
<label for="State">State:</label>
<input type="text" ID="State" name="State" />
<label for="Zip">Zip:</label>
<input type="text" ID="Zip" name="Zip" />
<input type="submit" Text="Submit Order" />
</fieldset>
Using CSS like this:
fieldset {
overflow: hidden;
}
label {
clear: both;
float: left;
margin-top: 10px;
width: 125px;
/* If you want the labels flush along the right edge */
padding-right: 5px;
text-align: right;
}
input {
float: left;
margin-top: 10px;
}
/* Align the submit button under the fields */
input[type=submit] {
clear: both;
float: left;
margin-left: 135px;
margin-top: 10px;
}
That produces the layout shown in the image early in this (completely unrelated) post. There's a source download with the markup and CSS there too, if you don't mind ASP.NET.
Speaking to reuse, I've found that basic structure to be flexible enough to use anywhere. For example, we used basically the same markup and CSS for this more customized contact form: http://www.thirtyfiveatlanta.com/meet/
I really like Wufoo's forms : http://wufoo.com/examples/
I've copied and used their HTML and CSS for my own projects with good results.
Uni-Form
This response was posted as a comment by Darmen, but I feel it's sufficiently useful that it deserves to be promoted to a reply
http://www.rockettheme.com/ has some pretty good templates and themes. They are generally for existing CMS systems but you could adapt them or parts of them for your own sites.