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.
Related
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.
I'm in a JSF2.0 application which has many jsf files, each page could has inputs + some selectMenu . I want a concrete solution on how to display a warning message (as a Modal) when the user makes some changes in this current page (filling some inputs for example) and decide to visit other pages or close the current tabs.
So there's a few parts to this.
First of all to create the modal you need a hidden div. You then need some JQuery that will detect any changes made to then pop this modal up.
You can do this by having a div looking like this with the CSS below as well:
HTML
<div class="modal hide">
<p>Content here...</p>
<button class="close">Close</button>
</div>
CSS
.hide{
display: none;
}
.modal{
position: fixed;
width: 50%;
height: 100px;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
background-color: red;
color: white;
text-align: center;
}
Then add a class to anything that needs to be alerted when changed. If it's an input that has to be filled out just add the required attribute shown below For example:
<input type="text" name="example" class="change" required>
Then you can use JQuery to detect any changes and display the modal:
JQuery
$(".change").on("change", function(){
$(".modal").removeClass("hide");
});
$(".close").on("click", function(){
$(".modal").addClass("hide");
});
This then shows the modal with a button that gives the option to close it.
In regards to on leaving the page this is much more complex as you could end up giving a warning upon the user successfully submitting a form. Not to mention the user experience issues. Please refer to this answer here: Detect browser or tab closing
I've also put together a working JSFiddle for you here - https://jsfiddle.net/Rockhopper92/vsmLkqLm/
I'm a beginner in html's world. I'm playing this game: https://dragonbound.net
I'd enter to the "shop". and I'm wondering me about the html code of this. So I went to "inspect element" of the web and I realized that there is no form or href in the buttons.
How these buttons works and Why I can access to the container of the middle that has the items?
For example, this is one of the "buttons"
#buttonShopEyes {
left: 407px;
top: 495px;
width: 33px;
height: 31px;
background-position: -72px -204px;
}
<div id="buttonShopEyes" class="opacity_button NoSelect shopButton"><div class="Alt" style="display: none;">G</div></div>
When i go to the source, i can see:
<div id="buttonShopEyes" class="opacity_button NoSelect shopButton"><div class="Alt">G</div></div>
Many HTML elements can behavior like buttons. For instance: a, divs, spans, p, etc. However, if you want to develop a consistent code, you should pay attention to the semantic. If you need a button, create a button element. You can change all style properties for the button if you want. If you create a Some place element, you should redirect the user to another place, (i.e. another page, or another anchor, in the same page). Avoid using <a href="javascript:void(null)"> or <a href="#">, instead, use a button in that cases.
HTML is free to use of many ways, you should be aware of the best practices.
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>
So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click