I actually want to accomplish the opposite of:
To avoid screen-reader text inside the button
For WCAG compliance, any HTML control (i.e. button) that opens a new browser window needs the screen reader to say so when the button gets focus. However, I certainly don't want:
<button>Get Help ,opens in a new browser window</button>
The button text should just be "Get Help", but I need JAWS to verbalize more... any workable approaches out there for this?
Many thanks, -Pete
(FYI to moderators: The existing "JAWS" tag refers to "Java API for WordNet Searching"... not the screen reader "Job Access With Speech". We could probably use a new tag out there - I don't think I currently have the "stack overflow cred" to do that. Thanks!)
Essentially you want to include the text but hide it from view.
<button>Get Help<span class="at">, opens in a new browser window</span></button>
"at" for "access technology".
With associated CSS of either:
.at {
position:absolute;
left: -9999px;
}
or, if you are concerned with horizontal scroll-bars in right-to-left languages or performance on mobile then you can use:
.at {
position: absolute;
clip: rect(1px,1px,1px,1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
display: block;
}
Read more at: http://webaim.org/techniques/css/invisiblecontent/
I should point out, people with other disabilities should be able to tell it opens in a new window as well. Perhaps consider adding a 'new window' icon?
I believe you need to use ABBR tag do add a description. You can see something here
How about simply using aria-haspopup="true" as per the W3C?
Basically:
<button aria-haspopup="true">Get help</button>
Related
I have my website here and I discovered a small issue regarding its CSS.
If you hover "Existing Account Client", in Payment method section (at the bottom), it's cutting the left side of the description.
You need to input some fake info and click on "See Price" then select any vehicle.
Existing Account Client
How do I fix it?
You can add 'position: relative;' into this section:
#payment_selectors label, #payment_selectors label a{
position: relative;
}
It will display whole tool tip. However I spot another problem - this tool tip window is flashing. You can try shift position of tool tip by adding left: 20px; or padding-left: 20px; or something similar.
As well please change: to fix flashing issue.
.custom-tooltip {
background: none !important;
top: -80px!important;
}
I setup a static html landing page; displays perfectly in Chorme, Safari, and Firefox. However, I cannot get the embeded MailChimp contact form name and email fields to display when I use the zoom property; as soon as I remove it, the inputs show up too large and out of place which is why I used the zoom property in the first place.
Why would this cause an error? Is there anyway to rememdy this odd problem?
url: http://comingsoon.veteranbrewingcompany.com/
TIA
You really need to address why the form is so large. Various styles are causing it to be so, such as
#mc_embed_signup .mc-field-group input {
font-size: 40px;
}
#mc_embed_signup .button {
background: url("http://themicroscopeguy.com/wp-content/uploads/2013/05/submit2.png");
width: 207px;
height: 92px;
}
So, you have big font sizes set, and the submit button is quite a large image. You can address all that via CSS. You don't need an image for the subbmit button, as you can easily style a normal button with CSS.
I'm trying to figure out what CSS I must change to fix this problem: If you visit my site http://www.derekbeck.com/1775/ and click the topmost Facebook like or send, the popup that comes up is cut off and so one cannot see part of it. I want the popup to appear in the normal facebook default width, whatever that is, probably something like 300px or so.
Thanks,
Derek
Change this iframe.fb_ltr at line 557 of a css file, it's 180px.
iframe.fb_ltr {
width: 180px !important;
}
Just to add something since any solution i have found online wasnt working...
Once you click the like button a class is being added to the iframe...
that is great and mean you can style the popup only and leave your like button as is.
Here is the class being added:
.fb_iframe_widget_lift {
}
For example & since my button was in a static footer i added:
.fb_iframe_widget_lift {
overflow: visible !important;
width: 475px !important;
margin-top: -249px;
margin-right: -220px !important;
background: #000;
padding: 10px;
height: 237px !important;
}
Using this you can customize the popup as you wish.
Best regards, Sagive.
Make sure that when you load FB JavaScript it has APP ID!
For example
//connect.facebook.net/en_US/all.js#xfbml=1&appId=77777777777
If you will not have appId at the end it won't load scripts that expand comment box.
I'm building a single page, offline html5 web application using jquery mobile, backbone, underscore and tbd templating engine.
I'd like to create a lockscreen that looks similar to the native iPhone lockscreen. Before I go reinvent the wheel has anyone seen anything like this before? I haven't been able to find an example of this.
Thanks!
Edit: Oh no, it's an old question!
Add a fixed-position, hidden div to your page. When you need to activate the lock screen, use jQuery to programmatically show it:
CSS
div#lockscreen {
width: 0;
height: 0;
position: fixed;
top: 0;
left: 0;
display: none;
}
jQuery
$(document).ready(function() {
//hypothetical activation control
$("#lock").click(function() {
$("#lockscreen").css("width", "100%");
$("#lockscreen").css("height", "100%");
$("#lockscreen").css("z-index", "1000");
//or dynamically generate z-index value
$("#lockscreen").fadeIn();
});
});
Well it's been dredged up now, so I might aswell add this. Use <input type="text" pattern="[0-9]*" /> on a text field to get a numeric input. Not quite the same, but easier than using a full keyboard, and easier than coding the whole keypad yourself.
This is all being done in an ASP.NET web forms application:
I need a modal popup that will show the user a preview of images that match a search criteria (e.g. they search for "dog" and the popup shows them all dog-related pictures). The search results shouldn't be too long, but the popup should support the ability to scroll if necessary. I also need to capture which image they selected and send that info back to the calling page.
I've taken a look at some of the options out there and am having a hard time deciding on which one to use. Any suggestions?
i prefer the use of jquery because it doesnt require the use of any server-side computations. also if the app ever ported to another technology other than asp.net it will still most likely work.
I'm happy with jqModal, the plugin it's really minimalistic (basically 2.97kb of JS, and 496bytes of css) and works great...
don't use any modal plugins, create your own.
<div id="modal"></div>
modal { position: absolute; top: 200px; left: 200px; z-index: 12; width: 200px; height: 100px; background: red; color: blue; }
Then you can have some javascript on it, I recommend jquery's draggable, and then put some element that you can click on it so it disappears.
Voilà!!!
I've been quite happy with the jQuery plug-in Simple Modal.
I'd say go with ours; Ajax Calendar Starter-Kit (click the button to the lower left corner) but then again I am definitely biased...