Develop Reference

Accessibility of inputs with z-index showing in dialog

I have the requirement, to show a dialog, which integrates some inputs from the background (not all), as it enhances their functionality. So I want them to blend through to the dialog and be editable from there. This is not very hard to do with z-index, but the inputs must be outside of the dialog markup. I wonder if this works for a screen reader (my guess is it does not) and if not: Do you have any suggestions how I could make this work, without adjusting every input of the whole form?
Here is an example of what I'd like to accomplish in an accessible way:
function showDialog()
{
document.getElementById("dialog").style.display = 'table';
}
function hideDialog()
{
document.getElementById("dialog").style.display = 'none';
}
form > div
{
margin: 10px;
}
.layer
{
margin: 0;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
.showThrough
{
position: relative;
z-index: 1100;
}
<form>
<div class="showThrough">
<label>Input 1:</label><input/>
</div>
<div>
<label>Input 2:</label><input/>
</div>
<div class="showThrough">
<label>Input 3:</label><input class="showThrough"/>
</div>
<input type="button" onclick="showDialog()" value="Show dialog"/>
<input type="button" value="Submit"/>
<div id="dialog" role="dialog" class="layer" style="display: none;">
<input type="button" value="Close" onclick="hideDialog()"
style="position: absolute; bottom: 15px; right: 15px;"/>
</div>
</form>

Problems you need to think about
The biggest issue I see on most modals is that they allow focus outside of them.
You can't just stop users using the tab key as that is not how most screen reader users navigate the page (they use shortcuts for headings (h1-h6), hyperlinks, form inputs etc.).
For this reason you would then have to add aria-hidden="true" and tabindex="-1" to every element on the page that isn't part of the modal and then remove it again when the modal is dismissed (this can be applied to the containers as all of their children will then not be able to receive focus so it isn't as scary as it sounds).
You would also need to use this method on all of your 'disabled' fields that aren't part of the 'modal' (I put these in quotation marks as they aren't disabled and this isn't actually a modal!).
You also need to make sure the modal can be dismissed with the Esc key as that is expected behaviour.
You also need to ensure that the first <input> is focused programatically when you launch your modal as otherwise when you disable the 'submit' button the focus may not go where you intend.
Why are you doing this, is there a better way?
You haven't stated why this requirement exists, but if it is simply to highlight essential fields you may be better simply using a large thick outline on them that is activated with your button and not interfering with the flow of the document.
Sometimes requirements seem like a good idea but in the example you showed (I know it is stripped back) I found it annoying that the 'close' button was out the way of the document and that it added an extra step in having to close the dialog when I was done (should you not allow submission from within the dialog?).
If this is a required feature and you can't persuade the powers that be that it isn't a good idea (I know what it is like!), you may be better creating an actual modal and then filling the fields in the main form with JavaScript on modal close / inputs updating as this will reduce the amount of things your need to disable on the page.
i.e. you just clone the required fields into your modal and then use tabindex="-1" and aria-hidden="true" on the <header> and <main> on the whole document to manage focus.
This makes the page much more maintainable in the future as you won't have to update your script every time you add a section to the page.
If your form is dynamic (fields change) then you could just use JavaScript to create the form within the modal (i.e. loop through the form fields, find the 'showThrough' items and clone them into the modal.) or do it on the back end.

Hide element, but keep it clickable?

I have a button generated inside an iframe. Unfortunately, I can't change how it looks, as it's delivered by 3rd party library. I thought of a little trick to use my own button and keep the generated one inside:
<button id="my-button">Click Me</button>
This way, I can tell the library to place its buttons inside mine, so the <iframe> would get appended like this:
<button id="my-button">
Click Me
<iframe src="..."></iframe>
</button>
Now, the only thing left is to hide the <iframe>. I can't simply use visibility: hidden, because that way the click event no longer works. Why I did is instead:
#my-button {
overflow: hidden;
position: relative;
}
#my-button > * {
position: absolute;
top: 0;
bottom: 0;
opacity: .0001;
}
It seems to be a good solution, as I don't see the 3rd party button and I can do whatever I want with my own button. I just need to make sure it's not larger that the button inside, which would render part of my own button unclickable.
What I would prefer, would be rendering that other element somewhere else and hiding it with display: none or position: absolute outside of my viewport and then triggering the click inside it. Due to modern CORS policies, as far as I know it's not possible to reach elements inside the <iframe> though - am I right?
Is there any more reliable way to achieve the same effect without so much trickery? I'm not that excited about opacity: .0001, it make me anxious that in some browsers it will leave some visible trace of the other button.

It isn’t possible to have an element of the parent trigger a click on a button (or any other element) within an iFrame for security reasons.

Accessibility: 2 links with same text and different HREF

In a web application I have lists of things with the following structure:
As you can see, when we list items (users, roles or anything basically), we have some associated actions on the right, highlighted on yellow. In this case all items have a Delete option.
However, if I run a ADA compliance tool, I get a warning saying:
Warn: Ensure that links that point to different HREFs use different
link text.
What would be correct way to fix this as all the Delete links obviously point to a different link (for example: javascript:Delete(123)). I know it's just a warning I could ignore, but it might be good to fix it.
I don't want to change the link text to Delete XYZ as it would be way redundant and it might not fit in the screen either.
I'm using the Firefox's Accessibility Evaluation Toolbar for the test.
Edit: When using a screen reader, the tab order is Administrator, Delete, Advisor, Delete, Instructor, Delete, ... as the items are also links that take you to the details/edit of each of those items. I'm not an expert on accessibility, but it looks redundant since it's already reading the item before each Delete.

Use a screenreader only class on a more descriptive element if you don't want to put the proper text labels in.
Bootstrap has a really handy little style .sr-only you can add to your stylesheet for elements you only want screenreaders to see:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Just put the style on a more verbose version of the 'delete' div/span:
<div class="sr-only">Delete Administrator</div>

Similar to staypuftman's suggestion, I would also use Bootstrap's .sr-only class but I would assign it to a span surrounding the extra words only so that you only see "Delete" in the button while the accessibly hidden text is part of the button semantically and will be read when the button has focus.
Like so:
<button type="button" id="deleteAdvisor">
Delete
<span class="sr-only"> Advisor</span>
</button>

Cannot position Google +1 button with CSS?

I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?

When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}

After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.

Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)

Add a red dot and a title to an image

I've got a html-page with a picture on it and would like allow the user to click on the image to add a red dot and a title to the red dot. After adding some dots he should be able to save or print it.
What's the best way to implement this with ruby on rails, html, css and (or without) javascript.

For a very simple thing, I would put there a <div style="position: relative; top: ?px; left: ?px"><img src="red dot.jpg">Dot title</div> wherever user clicked. onclick event in the background to do the trigger, and here is how to get the Cursor Position.
position: relative assuming that the whole thing is inside a <div> block. Take a look at document.createElement and appendChild, you will need them.
Maybe you want also to save the plottings under the hood to dispatch what's user doing to the server.

To save doing round trips to the server, what you could do is to draw the dot and title on the image directly in the browser.
It can be achieved with the HTML5 <canvas> element, SVG, or Flash etc. Canvas has very good browser support, I'd use that.

Is it a matter of showing a gallery of pictures and selecting which ones to print or save?
It might be more straightforward to embed a table of images in a form, and use checkboxes to make selections.

One possibility would be the following:
Create the view containing the image with Rails
Handle the click events with jQuery.
When the user clicks show a Javascript dialog asking for the title
When the user clicks OK, send an Ajax request to your Rails controller notifying your application about a new dot.
The controller then should add that information to a database or the session and update the picture, i.e. actually add the dot with some image library, like ImageMagick for example.
Then re-load the picture after the Ajax request is completed.

You could possibly create this with CSS.
<div class="image">
<div class="permalink">Click here.</div>
<img src="#" />
</div>
Then, your CSS should look like this:
.image .permalink { display: none; position: absolute; top: 0px; left: 0px; }
.image:hover .permalink { display: block; }
.image .permalink { background: url(red-dot.gif) no-repeat; }