We Keep Coding

Accessibility: show/hide password button in a password input

It's common for password inputs to have a show/hide button but I'm finding little content on the web about any accessibility concerns relevant to them - should I be attaching any kinds of ARIA attributes to the button or password input? Does it make sense for that to be a checkbox or is a button that triggers JS to achieve the effect fine too?
Not sure what I should be looking out for as someone not very steeped in, but wanting to understand accessibility best practices.

Interesting question.
This is perhaps the most relevant bits of litterature I could find on the subject:
A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.
(and)
The element that shows and hides the content has role button.
When the content is visible, the element with role button has aria-expanded set to true. When the content area is hidden, it is set to false.
Optionally, the element with role button has a value specified for aria-controls that refers to the element that contains all the content that is shown or hidden.
See https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure
I'm no usability expert at all but it doesn't seem crazy to see a connection with your use case. So to answer your question here are the ARIA attributes I'd apply, along with some JavaScript.
function toggle_visibility(el) {
const control = el.getAttribute('aria-controls');
const expanded = el.getAttribute('aria-expanded') === 'false';
document.querySelector(`#${control}`).type = expanded ? 'text' : 'password';
el.setAttribute('aria-expanded', String(expanded));
el.textContent = expanded ? 'hide' : 'show';
}
document.querySelector('button').addEventListener('click', ({
target
}) => toggle_visibility(target));
<div>
<label for="password">password</label>
<input type="password" id="password">
<button aria-controls="password" aria-expanded="false">show</button>
</div>
And here's a screencast of the Chrome Dev Tools. Note how in the Accessibility panel we're able to refer to the password control.

As none of the so-far given answers cover the topic completely, I'll try to do it here.
You have at least three possibilities:
A checkbox;
A toggle button;
A button with changing text.
Checkbox
This is the easiest solution.
<label><input id="showPwd" type="checkbox"> Show Password</label>
And then you add some JavaScript to change your password input type from password when the check box is cleared to text when it is checked.
From the user perspective this solution is also the most obvious: both screen reader users and users of other assistive technologies usually easily perceive the state of the check box. Another benefit of this approach is that the status is seen immediately with no need to re-check it with additional commands.
Toggle Button
This involves some ARIA, not much, though.
<button id="showPwd" aria-pressed="false">Show password</button>
This way you will need to change both the button CSS styling and the value of the aria-pressed attribute in your JavaScript (and, of course, change the type of your password input accordingly).
From the user perspective, this approach has both advantages and drawbacks. the main advantage for screen reader users is that when the button is pressed, the user will hear "Show Password button pressed" vs. "Show password button" which would help to spot the status of the button for users with hearing and/or cognitive issues better and faster.
Button with Changing Text
An easy, but kind of oldish solution. You basically have a <button> that says "Show Password", and when the password is revealed, the button would say "Hide Password".
This is the worst solution from the assistive technology user perspective, since a screen reader would not notify its user automagically when the text on the button changes (unless you add some additional black magic like ARIA alerts, but it's not worth it, I'm sure). Typically when the text changes, the user should re-check the status with a command that announces the current line or object.
There is another drawback that spans both button solutions: screen readers usually have a possibility to navigate by element and to spawn lists of elements of the same type. In this case a confusion may occur as the form contains more buttons (at least the submit one). With check boxes the chance of such confusion is much lower, if the form is not crowded with many check boxes.

How to move placeholder text along with the content of a textbox in HTML?

Suppose this is my textbox:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (e.g. 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?
And I do remember seeing it somewhere too, unless I got my facts wrong.

A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:
http://twitter.github.com/bootstrap/base-css.html#forms

You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});

PDF Form Button border change (Acrobat)

Creating a PDF form in Acrobat X. The form has various selections listed in a grid style, and my client would like when one of the selections is clicked on for a circle or square to be drawn around the selection. I have tried various methods to get this to work, but I keep running into road blocks. Here is where I am so far:
I have figured out that I can place a button on top of the text and set the border and fill of the button to clear, and have no text entered for the label. This basically makes the button a completely transparent box on top of the text.
What I would like to do is: when the transparent button is clicked, change the border color from transparent to black, thus creating a box around the word, and looking like the word is enclosed in the box. In the event that I can get some guidance in how to do this, I would also like for if the button is clicked a second time for the black border to return to transparent (in case the initial click is done in error.)
I am assuming this will need to be done by utilizing the javascript functionality of the PDF and assigning it to a button action Mouse Up. However, I must admit ignorance on what the code would be to accomplish this.
Any help would be appreciated.

I may get back to you on this, but a helpful resource is found at:
http://partners.adobe.com/public/developer/en/acrobat/sdk/pdf/javascript/AcroJSGuide.pdf
This is Adobe's reference on PDF forms, and includes information on Javascript used in their form calculations.
On page 267 of this document is this:
How can I hide an Acrobat form field based on the value of another?
Use the display method of the Global object:
var title = this.getField("title");
if (this.getField("showTitle").value == "Off")
title.display = display.hidden;
else
title.display = display.visible;
Five lines of code that goes somewhere. Maybe in the "calculate" portion of a field.
Line 1: Set a variable called "title" that represents the existing form field named "title"
Line 2: Start "if" statement that queries the value of field called "showTitle"
Line 3: If the value of showTitle is "Off", then set the field "title" to hidden
Line 4,5: Otherwise, default the display value of field "title" to visible
If the field called "title" here is a text box, you can put in some text that will be either hidden or visible. You could have a blank field with a border, maybe, to use as your hidden/visible border, if there is no fill color, I think.
The field "showTitle" can be a check box, where the value on check is "Off".
I hope this helps. I am trying this out myself right now.

Allow onclick inside an onfocus/onblur show/hide textarea

Sorry for the strange title question.
I am wondering how to do the following:
When a user clicks on the blurred out textarea through onfocus, it will display: block the div around it, displaying a "textarea console" and then a "add step" icon beneath the textarea. If you click out, it will blur the textarea along with two extra items.
However, what I would like to add is, if they click either the "textarea console" or the "add step" icon, the div will not blur out.
Here's what I have so far at jsfiddle.net

I've updated the jsFiddle: HERE
I think it was just a few things wrong...you were on the right track.
$("#textareasteinstruc").focusout(function() {
alert('focusout');
$(".textareaconsole").hide();
$("#addPrepStepButtonicon").hide();
The # was missing from focusout function...and classes/IDs were not referenced properly.
It's working the way you want it now I'm thinking :)
UPDATE: I added the $("#addPrepStepButtonicon").show(); to the click event so the 'submit' button will appear again

Check this one http://jsfiddle.net/wAaDz/13/ . Have made changes.

node text editing

in my current scenario i can't us any server controls.
there is an input type button when click on this a span should come and act as water marker
giving some message when you click on the message any where a run time generated text box should come in place of span.
where user can input the value and after entering if he click any where on the form the value should be assigned to new span generated run time .
An example to visualize my scenario is given below i am also making a tree but with the help js,jquery.
http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/nodeediting/defaultcs.aspx

You should have a single container for each button, attach event on button click to add div over the input including the span with the message(position relative and zIndex > button zIndex) and on the newly inserted div attach another click handler which will replace the span with an input (actually the content of the container added so you wont have to worry about positioning) and on window.click you should check in a stored variable if you have any "popup" open and close & save. I trust you are familiar with HTML injection and $().html, $().append, $().click or $().bind since you said you are making a tree with jQuery.
After you give this a go maybe you will come up with more pinpointing questions so we could give you exact answers.