I'm making a website where the starting page should act as a "gateway" to the rest of the site (it greets the user and a click anywhere links to the main website). This is the code for this:
<template>
<div onclick="window.location.href='#/ordering';" style="cursor:pointer; width:100%; height:100%;">
<div id="textpage"> <h2>XXX </h2>
<h3> {{ uiLabels.welcomeText }} </h3>
</div>
</div>
</template>
The website is constructed so it can be displayed in two languages, where uiLabels.thing fetches "thing" in either language. I now want a button that changes the language. I've done this:
<button v-on:click="switchLang()">{{ uiLabels.language }}</button>
where switchLang() is a method that switches the language variable, and thus will switch the displayed langue on my page. The only problem is that the link "overrides" the button, so when the button is pressed the user is linked to the main part of the website.
I want the button on the bottom left of the page.
If I place the button code in a div before the link div it gets
placed on top of the page, and it looks horrible.
If I place the button in the link div it gets placed right under the
welcome text, but can't be clicked.
If I place it in a div after the link div I get a fail message saying
that I can only have one root element.
One way around this is to place the button outside of the div that links, but if I do that that button can't be moved to where I want it.
The third option is one way to go.
Add a wrapping element around the two elements and make the language button position absolute. Something like this:
<template>
<div class="wrapper">
<div #click="window.location.href='#/ordering';" style="cursor:pointer; width:100%; height:100%;">
<div id="textpage"> <h2>XXX </h2>
<h3> {{ uiLabels.welcomeText }} </h3>
</div>
</div>
<button class="langPicker" #click="switchLang()">{{ uiLabels.language }}</button>
</div>
</template>
And with CSS something like:
.wrapper {
position: realtive;
}
.langPicker {
position: absolute;
bottom: 20px;
right: 20px
}
This is just to give you an idea, you have to adjust it to suit your needs.
Screenreaders will read whatever string is set to the "alt" attribute. The use of this attribute is specifically for image tags.
If I have a div like so:
<div id=myCoolDiv tabindex="0"> 2 <div>
Is there a way to have a screen reader pickup an attribute to read a string the same way an alt tag is used?
So for the div listed below, the screen reader will say ie: "shopping cart items 2"?
I tried using aria-label but the screenreader won't pick it up:
<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>
You can just put a title tag in the div which will do the same as an alt tag like so:
<div title="I AM HELLO WORLD">HELLO WORLD</div>
"I AM HELLO WORLD" will be printed once you move your cursor around it on a browser
There are two ways (which can be combined) to have screen reader to read alternative text:
Anything with ARIA role img can (MUST) have alt attribute. See WAI-ARIA img role.
<div role="img" alt="heart">
♥︎
</div>
UPDATE: In 2017 the WAI-ARIA document was changed and the following text does not apply anymore. See comments below.
However this should be used only in case the element really represent an image (e.g. the heart unicode character).
If an element contain actual text, that just need different reading, you should set ARIA role to text and add aria-label with whatever you want to be read by the screen reader. See WAI-ARIA text role.
<div role="text" aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>
Do not mismatch it with aria-labeledby which should contain ID of an related element.
You can combine the previous two cases into one using two ARIA roles and adding both alt and aria-label:
<div role="img text" alt="heart" aria-label="heart">
♥︎
</div>
When more ARIA roles are defined, browser should use the first one that is supported and process the element with that role.
One last important thing is that you must set page type to HTML5 (which support ARIA by design).
<!DOCTYPE html>
Using HTML4 or XHTML requires special DTD to enable ARIA support.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
Try role="listitem" or role="group" and aria-labelledby="shopping cart items". See Example 1. The 2 is text content which should be read by screen reader already with the attribute read as context to the content. Refer to this section.
UPDATE 2
Add aria-readonly=true role=textbox if you use an input. If there are doubts whether to use aria-label or aria-labelledby, read this article. In the documentation for JAWS and testing it myself supports the fact that aria-label is ignored. Furthermore, semantics are very important when accessibility is your concern. Using a div when you could use an input is not semantically sound and like I said before, JAWS would accept a form element more readily than a div. I assume that this "shopping cart" is a form or part of a form, and if you don't like it's borders, input {border: 0 none transparent} or use <output>* which would be A+ as far as semantics are concerned.
Sorry, #RadekPech reminded me; I forgot to add that using aria-labelledby needs visible text and that the text needs an id which is also listed as the value(s) of aria-labelledby. If you don't want text because of aesthetics, use color: transparent, line-height: 0, or color:<same as background>. That should satisfy visibility as far as the DOM is concerned* and still be invisible to the naked eye. Keep in mind these measures are because JAWS ignores aria-label.
*untested
EXAMPLE 3
<span id="shopping">Shopping</span>
<span id="cart">Cart</span>
<span id="items">Items</span>
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>
UPDATE 1
For JAWS, you probably have to configure it a little:
Click the Utilities menu item.
Then Settings Center.
Speech and Sounds Schemes
Modiy Scheme...
HTML Tab
In this particular dialog box, you can add specific attributes and what is said when an element is tabbed to. JAWS will respond to form elements easier because they can trigger the focus event. You'll have an easier time doing Example 2 instead:
EXAMPLE 1
<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>
EXAMPLE 2
<input id='semantic' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value='2' readonly>
In case you use Bootstrap Framework there is a quick and easy solution. You should use sr-only or sr-only sr-only-focusable Bootstrap's CSS classes in a span element where your screen-reader-only text will be written.
Check the following example, a span element with class glyphicon glyphicon-shopping-cart is also used as cart icon.
<div id="myCoolDiv">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span> 2
<span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span>
</h5>
<div>
Screen Reader Output: "two shopping cart items"
provided by Fangs Screen Reader Emulator Addon for Firefox
You can find the above working example in this: Fiddle
As suggested by Oriol, in case you don't use Bootstrap Framework then simply add the following in your CSS file.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
According to the text alternative computation algorithm of the W3C and the
Accessible Name and Description: Computation and API Mappings 1.1 you definitely should use aria-label.
That being said, it does not work with Jaws. Text alternative is only computed for elements having an ARIA role.
The remaining option is to use a link that will go to your cart page, using both title and aria-label to satisfy anyone:
2
You can also use a transparent 1 pixel option:
2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />
No, there is no equivalent to an alt attribute for <div> elements.
For what you are trying to do, an ARIA-based solution is overkill. Not only are you bumping into screen reader compatibility problems, you are applying ARIA attributes where they are not needed (and arguably do not belong if on something like a <div>).
Instead, consider using an off-screen technique (such as this one from The Paciello Group or this one from WebAIM). Content hidden using this technique will still be read by screen readers but will be visually hidden.
From reading your question, I think this is what you are after.
I made a pen demonstrating this technique. It may be easier to test in the full-page version.
Edit: Added HTML and CSS from the example, but please note that both the specs and browser / assistive technology support change over time, so if you are reading this in a year you should continue to use the links above to verify this CSS is still the current best practice.
HTML
<div tabindex="0">
<span class="offscreen">Items in shopping cart: </span>2
</div>
CSS
.offscreen {
position: absolute;
clip: rect(1px 1px 1px 1px);
/* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
Accessibility (Screen readers) can be achieved through role and aria-label tags on div. This can be very useful while using svg.
<div role="img" aria-label="I can speak the text">
<svg>...</svg>
</div>
Try:
HTML
<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>
CSS
.aria-hidden {
position: absolute;
left: -100000px;
}
This will announce the text inside the span. And the Parent div will not lose visual focus. Aria-hidden class will hide the span from the visible screen area but will read it as its inside the div that has focus.
You can create a class such as screen-reader-text with the following css:
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute !important;
}
Then, in your code, you can just add a <span> with the screenreader text as so:
<div>
I am a div!
<span class="screen-reader-text">This is my screen reader text</span>
</div>
See an example over here: https://jsfiddle.net/zj1zuk9y/
(Source: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/)
Use an image inside the div that has the label as its alt attribute. That way, those without screen readers just see the number and an image, whereas those with readers will hear the whole sentence:
<div>
<img src="http://tny.im/57j" alt="Shopping cart items" />
2
</div>
Seen as:
2
Read as: "Shopping cart items: 2"
The alt attribute exists for images because there is no way to "read aloud" the content of the image, so the provided text is used instead. But for the div, it already contains text and images. Therefore, if you want it to be read by a screen-reader, you need to include the text and alt text in the content of the div.
My question is related I think to jquery, angularjs and bootstrap.
I am rendering information that is coming from the backend and is presented on the front end in the form of several boxes. I am trying to get an "element selection effect" that when someone clicks on one or more of the boxes the entire box gets darker (or preferably blue with some level of transparency) and an ok-checkmark appears on it. The element is actually a bootstrap Well with some content inside.
I currently have an onClick event that colors the background, but it is not enough. Unlike an image, that can be entirely darkened when changing the background color, with a well (or any content box) it just colors the background and the content is still visible. I also want to add that green checked-mark icon inside the box when clicked, but I do not know how to add elements on the fly after onClick event.
Here is my relevant pieces of code (simplified objects, no backend):
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.collections = [
{text:'content collection1'},
{text:'content collection2'}];
$scope.selectBox = function(collection){
collection.isclicked =! collection.isclicked;
$("#well").click(function(){
if (collection.isclicked){
//$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
}
});
}
});
.well:hover{
cursor:pointer;
cursor:hand;
color: #555;
text-decoration: none;
background-color: #C0C0C0;
}
.well {
border-color:#8CC63F;
float:left;
margin-right: 20px;
}
.well-active {
background-color:#3399ff;
}
.well-active:hover {
background-color:#3399ff;
}
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<div>{{collection.text}}</div>
</div>
</div>
</div>
So as I mentioned, the way it works now is that the selected wells change their background color, but that's it. How do I darken/color the entire well, including the content, and how do I add an icon on top of that background (inside the well) after mouse-click?
You could do an ng-show/ng-hide in elements inside of the well div:
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<span ng-hide="collection.isClicked">{{collection.text}}</span>
<i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
This will show the content if the collection is not checked, and a check mark if the collection is checked.
Here is my code, shortened for ease of access;
HTML
<a onclick="showHideDiv('bio')" target='_self'>
bio
<div id="bio" class="shadowScreen" style="display: none;">
<p class="showBio">
Bio!
</p>
</div>
</a>
Javascript:
var curDiv;
function showHideDiv(id){
if (curDiv!==null){
document.getElementById(curDiv).style.display="none";
}
document.getElementById(id).style.display="inline";
curDiv=id;
}
CSS:
.shadowScreen{
-moz-box-shadow: 0 0 30px 5px;
-webkit-box-shadow: 0 0 30px 5px;
}
.showBio{
background-color: white;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
When the 'a' element is clicked "showDiv(div)" is supposed to send a function call to JS which alters "display:none;" to "display:inline;". The HTML will now have the 'div' element which has the class "shadowScreen" which darkens the entire screen. I then have a 'p' element which centers a box on the screen and displays "bio!". But, it's not doing that, and I can't figure out why naht. I'm not the greatest with the Netbeans debugger, so I can't tell exactly what it's saying ;-;
If you need further clarification, just ask! I'll be more than happy to help you help me.
You should remove target and add "#" to href param as suggested.
Bio
Regarding your javascript code, try to initialise your curDiv variable with null.
var curDiv = null;
I think its redirecting because of the a tag.
You should replace:
<a onclick="showHideDiv('bio')" target='_self'>
with
<a href="javascript:void(0);" onclick="showHideDiv('bio')" target='_self'>
Firstly, you'll need to give your anchor tag a href attribute to make it valid. I'd suggest using the ID of the div you're toggling - #bio - or simply just #.
Next, you need to prevent the default action of your anchor tag in order to stop it executing the link you used in the href attribute. To do so, you need to add the following line to the end of your JavaScript function:
return false;
I'd like to implement this situation: user hovers link and on his screen appears div with additional information.
There is no problem, to generate div with absolute position, populate data and display it with jQuery, but the problem is with maintainability. I want to separate logic and view. What if I'd like to change page layout in the future? How programmer will know, that some part of page exist in JavaScript file?
Is it some elegant way to separate view (in my case HTML structure) and logic (data obtained from server in JSON using JS script) and combine them? Is it any ... templating engine or something like that in JavaScript?
You can generate your HTML entries like this
<a>
My Cool Link
<div class="tooltip">
This link is awesome!
</div>
</a>
And use CSS to style the tooltip:
(The important part is a:hover .tooltip and everything except background on .tooltip
a {
display: inline-block;
}
a:hover .tooltip {
visibility: visible;
}
.tooltip {
position: relative;
top: 20px;
left: -50%;
display: inline;
visibility: hidden;
background: #eee;
}
Example: http://jsfiddle.net/4K7sB/
Then you just need to populate the elements with the correct text using JS.
Bootstrap does all this and more: http://getbootstrap.com/javascript/#tooltips
To put it in:
$('#example').tooltip(options)
And the markup being:
<div class="tooltip">
<div class="tooltip-inner">
Tooltip text here!
</div>
<div class="tooltip-arrow"></div>
</div>
Go to the link for a more detailed explanation on how to implement it
You can alter the Title="information" dynamicaly by some program or script and use the following code to display it as a tool tip,found it on net
http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
Just add title attribute in div tag like below code....
<div title="First Div">StackOverFlow StackOverFlow StackOverFlow
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow
StackOverFlow </div>
</div>
<br /><br />
<div title="Second Div">StackOverFlow StackOverFlow StackOverFlow
StackOverFlow StackOverFlow StackOverFlow StackOverFlow StackOverFlow
StackOverFlow </div>
</div>
just copy paste and check.