Icon accessibility within links (aria-hidden) - icons

Suppose I have two arrows on either end of a carousel which when clicked rotate the carousel. I might have markup like:
<a class="carousel-prev" alt="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" alt="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>
In this case, does aria-hidden="true" attribute break accessibility, or is it okay since the outer <a> tag is tabbable and is using alt text?

Why not just have an aria-label on the anchor tag? Should be a simple matter of changing your alt= to aria-label=. No need to have a nested span with a screen reader class.
<a class="carousel-prev" aria-label="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" aria-label="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>
It's valid html. Look at the "Allowed ARIA state and property attributes" section of https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element. All aria tags are allowed.

First, the WAI provides a full example of a working carousel: https://www.w3.org/WAI/tutorials/carousels/
Some personal observations:
You have to ask yourself about the interest of rotating a carousel for a blind user. One way to handle UX for blind users is to make them ignore that what they are browsing is a carousel (switching items automatically as the keyboard focus move for instance).
aria-hidden does not break the accessibility because there's nothing inside the i tag, tag which is not designed to be used as a portmanteau tag (like span).
As pointed out by #DiscoInfiltrator alt is not a valid attribute for links
As a small part of visually impaired users use screenreaders, you should use the title attribute on the a tag in order to make this information accessible for everyone rather than the aria-label which is also a good alternative.

the alt attribute is not a valid attribute for links, so it not only is an accessibility concern but it is also invalid html.
See this stackoverflow post if you want to read more:
Is it correct to use alt tag for an anchor link?
I would recommend removing the alt from the link and instead include a "screenreader-only" class that will allow the text to be read but hidden from the screen. See this link from a11yproject.com on how to implement this:
http://a11yproject.com/posts/how-to-hide-content/
I would recommend altering the code to look like this:
.sr-only {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
<a class="carousel-prev"><span class="sr-only">Previous Item</span><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next"><span class="sr-only">Next Item</span><i class="icon-angle-right" aria-hidden="true"></i></a>

Related

Safari CSS: Background Color Washed Out

I have created a site which looks great in Chrome but in Safari the button's background color looks bleached (silver background with white text). I saw someone say that it's because I am overwriting the bootstrap style. Why would that cause this issue? People have also suggested to avoid the "!important" qualifier. Does that make sense on its face?
The one on the left is how it should look. The right one is what Safari displays.
<a type="button" class="btn-secondary" target="_blank" style="padding: 0.25rem 0.25rem; border-radius: 5px; margin-right: 0.35rem; background-color: #F2A649">
<i class="fas fa-chart-bar"></i>Metrics
</a>
The simple reason was that I accidentally added the type of button to the anchor tag. It seems that Chrome is smart enough to ignore that attribute while Safari does not.

How should I make a divider that doesn't necessarily represent a thematic break <hr> vs <span>,<div>,css etc

I've always liked the <hr> tag as a design divider because it's a concise empty tag and you can use CSS to design it with a theme. I like it better than border-bottom because you can set the width to be smaller than the content above it i.e. 25% of the container width.
I almost feel like there should be an empty tag that serves as an anchor point for css design.
I know I can do this with any tag with CSS:
<div class=divider></div>
works just fine but it's not as concise as <hr>
So to me <hr> seems like the best choice on the surface.
Then I read the HTML5 semantic meaning of <hr> which says it is a thematic break. (That seems a little arbitrary) is a title a different theme than it's content? What about semantic cases where I want to have a featured title for a post with a nice box over an image with the title on top and a divider and the sub-title under it?
I want my content to make sense for syndication and I want it to look good if it's opened in an alternate css liked reader on safari which again seems to say <hr> isn't a good choice.
Should I use <span class=divider></span> that seems wasteful.
I have also considered <svg> or <br> but to me <br> seems like an empty line and possible also semantically like a pause like a comma in a sentence.
What's the best way to have a horizontal divider semantically when the primary reason is design preference and not a thematic break?
I think out of your suggestions I would just go ahead and use the separate custom div <div class="box-divider"></div> it's really not that wasteful if it's an integral part of your structure and gives you the max flexibility in terms of what your divider will look like and positioning. You can honestly do the same to an <hr> tag if you customize it's css you can make it look however you want.
A lot of users have commented about using psuedo elements on the element that needs a divider which is a fine suggestion.
.box {
position: relative;
}
.box:after {
content: '';
display: block;
width: 100%;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background-color: green;
}
If it's as simple as a border line you can just use border-bottom: 1px solid black; for example to the element itself and forgo the need for a separate element all together. Add some padding-bottom to control the positioning.
All in all if it's a tricky/custom divider that you need I would just go for the separate div divider or pseudo elements.

HTML 5, linking with a div

At the moment I have a setup similar to this:
<a href="#">
<div style="width: 50px; height: 20px;">
<span>Blah</span>
</div>
</a>
Which works perfectly well in Chrome. It fails W3C validation, however - IE apparently has issues with it.
I've considered using JavaScript to do it, but I know a lot of older web-users disable JavaScript for security concerns (personally, I'd just stop using old versions of IE. the pains)
But I was wondering, what's the HTML5 approved way to do this?
Before anyone downvotes, I'd like to reiterate that I'm asking specific to HTML 5.
It's perfectly valid HTML5 if you fix the missing quotation mark in your style attribute. Try putting this in the HTML5 validator:
<!DOCTYPE html>
<head><meta charset="utf-8"><title>Something</title></head>
<body><a href="#">
<div style="width: 50px; height: 20px;">
<span>Blah</span>
</div>
</a>
</body>
Just use CSS to make the anchor a block or inline block element so it can be given a height and width. Use either a CSS selector or an inline style attribute to assign display:block or display:inline-block, set the height and width, and get rid of the div.
<a href="#" style="display:block;width: 50px; height: 20px;">
<span>Blah</span>
</a>
If you're not sure about block vs inline-block, there are lots of articles on the web. However, block elements exist on their own line (barring things like float), but may have a height and width (amongst other things). inline-block can also be assigned height and width, but can exist inline with other elements. Caveat, some browsers cougholdversionsofIEcough don't understand inline-block or have bugs with it (there are ways around that). inline (the default for a), technically can't be given a height or width. And obviously the insinuation here is you can make inline elements behave like block elements, and vise versa.
EDIT
As per the comments, here's a CSS hack to make inline-block work reasonably well for proper browsers and also IE7-8.
.my-inline-block-element {
display:inline-block;
zoom:1;
*display:inline;
width: 50px;
height: 20px;
}
Good browsers will see display and use inline-block. IE7-8 will say WTF is that and do something stupid. But it'll see zoom which will trigger hasLayout, and because of a bug, it'll process *display:inline (but other browsers won't because * isn't allowed) and set display back to inline. But since we've got hasLayout, it'll now use the height and width but remain inline. Confused? Annoyed? Good... IE sucks.

H1 image replace alternative

I'm looking to add an h1 element to my header, however I am using tags in the header (not background images) that replace each other when the screen resolution changes.
I've looked at the technique
<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>
h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}
...but since my layout is fluid, the background can be seen when the image changes.
Is it even necessary to replace the h1 with an image? couldn't I just do something like:
<h1 class="headerhone">kb-k bwf-kb</h1>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/720.jpg" class="show-on-phones"/>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/980_full.jpg" class="hide-on-phones"alt=""/>
(ignore the php)
and then give h1 a height of zero:
h1.headerhone{
height:0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
} /*this was suggested to me as an alternative to the -9999px; thing.*/
would this work? Would it have any negative SEO implications or usability issues?
In the second solution, on a screen reader, your h1 content will be "kb-k bwf-kb" and the screen reader won't understand the alt property of the following image is in fact your h1.
For Google, this second solution'll seem you want to hide content in h1 tag : bad.
A visual example would be useful, I don't understand all you want to achieve.
Google has never had anything positive to say about hiding text and using images in <h1> tags so I always hesitate to recommend that as a solution. Your last technique would almost certainly fall under serving up different content to search engines so I also recommend against it.
Your second idea is on the right track though. What you want to do is use responsive design to determine the width of your layout and adjust the image accordingly. In fact, Google has been writing a lot about it in their blog lately. I highly recommend learning how to do it.

Make a div into a link

I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link.
I'm looking for something like <div> … </div>, but that is valid XHTML 1.1.
Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.
For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.
In essence it's this:
Build your panel using normal CSS techniques and valid HTML.
Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
Inside that link, put an empty span tag (<span></span>, not <span /> - thanks #Campey)
give the panel position:relative
apply the following CSS to the empty span:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
/* fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
It will now cover the panel, and as it's inside an <A> tag, it's a clickable link
give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link
You can't make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.
a {
display: block;
}
You can then set the width and height on it.
This is an ancient question, but I thought I'd answer it since everyone here has some crazy solutions. It's actually very very simple...
An anchor tag works like this -
EVERYTHING IN HERE TURNS INTO A LINK
Sooo...
<div id="thediv" />
Although I'm not sure if this is valid. If that's the reasoning behind spoken solutions, then I apologise...
Requires a little javascript.
But, your div would be clickable.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
This option doesn’t require an empty.gif as in the most upvoted answer:
HTML:
<div class="feature">
</div>
CSS:
div.feature {
position: relative;
}
div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
As proposed at http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/
This is a "valid" solution to achieving what you want.
<style type="text/css">
.myspan {
display: block;
}
</style>
<span class="myspan">text</span>
But most-likely what you really want is to have an <a> tag displayed as a block level element.
I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation, which is ultimately to promote accessibility (publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers).
It would be preferable to publish a web page that does not validate, but renders and functions properly on all browsers, including ones with JavaScript disabled. Furthermore, using onclick does not provide the semantic information for a screen reader to determine that the div is functioning as a link.
The cleanest way would be to use jQuery with the data-tags introduced in HTML. With this solution you can create a link on every tag you want. First define the tag (e.g. div) with a data-link tag:
<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>
Now you can style the div however you want. And you have to create also the style for the "link"-alike behavior:
[data-link] {
cursor: pointer;
}
And at last put this jQuery call to the page:
$(document).ready(function() {
$("[data-link]").click(function() {
window.location.href = $(this).attr("data-link");
return false;
});
});
With this code jQuery applys a click listener to every tag on the page which has a "data-link" attribute and redirects to the URL which is in the data-link attribute.
Not sure if this is valid but it worked for me.
The code :
<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
<p style='display:inline;color:#ffffff;float:left;'> Whatever </p>
<a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>
To make thepeer's answer work in IE 7 and forward, it needs a few tweaks.
IE will not honour z-index if the element is has no background-color, so the link will not overlap parts of the containig div that has content, only the blank parts. To fix this a background is added with opacity 0.
For some reason IE7 and various compatibility modes completely fail when using the span in a link approach. However if the link itself is given the style it works just fine.
.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
<div style="position:relative">
<some content>
<a href="somepage" class="blockLink" />
<div>
you could also try by wrapping an anchor, then turning its height and width to be the same with its parent. This works for me perfectly.
<div id="css_ID">
</div>
An option that hasn't been mentioned is using flex. By applying flex: 1 to the a tag, it expands to fit the container.
div {
height: 100px;
width: 100px;
display: flex;
border: 1px solid;
}
a {
flex: 1;
}
<div>
Link
</div>
This worked for me:
HTML:
<div>
WHATEVER YOU WANT
<a href="YOUR LINK HERE">
<span class="span-link"></span>
</a>
</div>
CSS:
.span-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 9999;
}
This adds an invisible element (the span), which covers your entire div, and is above your whole div on the z-index, so when someone clicks on that div, the click is essentially intercepted by your invisible "span" layer, which is linked.
Note: If you're already using z-indexes for other elements, just make sure the value of this z-index is higher than anything you want it to rest "on top" of.
why not? use <div></div> works fine in HTML5
This example worked for me:
<div style="position: relative; width:191px; height:83px;">
</div>
This post is Old I know but I just had to fix the same issue because simply writing a normal link tag with the display set to block does not make the whole div clickable in IE. so to fix this issue far simpler than having to use JQuery.
Firstly let us understand why this happens: IE wont make an empty div clickable it only make the text/image within that div/a tag clickable.
Solution: Fill the div with a bakground image and hide it from the viewer.
How?
You ask good questions, now listen up.
add this backround style to the a tag
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
And there you have it the whole div is now clickable. This was the best way for me cause Im using it for my Photo Gallery to let the user clik on one half of the image to move left/right and then place a small image as well just for visual effects. so for me I used the left and right images as background images anyway!
Just have the link in the block and enhance it with jquery. It degrades 100% gracefully for anyone without javascript. Doing this with html isn't really the best solution imho.
For example:
<div id="div_link">
<h2>The Link and Headline</h2>
<p>Some more stuff and maybe another link.</p>
</div>
Then use jquery to make the block clickable (via web designer wall):
$(document).ready(function(){
$("#div_link").click(function(){
window.location=$(this).find("a").attr("href"); return false;
});
});
Then all you have to do is add cursor styles to the div
#div_link:hover {cursor: pointer;}
For bonus points only apply these styles if javascript is enabled by adding a 'js_enabled' class to the div, or the body, or whatever.
This is the best way to do it as used on the BBC website and the Guardian:
I found the technique here:
http://codepen.io/IschaGast/pen/Qjxpxo
heres the html
<div class="highlight block-link">
<h2>I am an example header</h2>
<p>This entire box links somewhere, thanks to faux block links. I am some example text with a custom link that sits within the block</p>
</div>
heres the CSS
/**
* Block Link
*
* A Faux block-level link. Used for when you need a block-level link with
* clickable areas within it as directly nesting a tags breaks things.
*/
.block-link {
position: relative;
}
.block-link a {
position: relative;
z-index: 1;
}
.block-link .block-link__overlay-link {
position: static;
&:before {
bottom: 0;
content: "";
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 0;
}
&:hover,
&:focus {
&:before {
background: rgba(255,255,0, .2);
}
}
}
<div> … </div>
Actually you need to include the JavaScript code at the moment,
check this tutorial to do so.
but there is a tricky way to achieve this using a CSS code
you must nest an anchor tag inside your div tag and you must apply this property to it,
display:block;
when you've done that,it will make the whole width area clickable (but within the height of the anchor tag),if you want to cover the whole div area you must set the height of the anchor tag exactly to the height of the div tag,for example:
height:60px;
this is gonna make the whole area clickable,then you can apply text-indent:-9999px to anchor tag to achieve the goal.
this is really tricky and simple and it's just created using CSS code.
here is an example: http://jsfiddle.net/hbirjand/RG8wW/
This work for me:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
You can give a link to your div by following method:
<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
cursor:pointer;
width:200px;
height:200px;
background-color:#FF0000;
color:#fff;
text-align:center;
font:13px/17px Arial, Helvetica, sans-serif;
}
</style>
You can make surround the element with a href tags or you can use jquery and use
$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
This is the simplest way.
Say, this is the div block I want to make clickable:
<div class="inner_headL"></div>
So put a href as follows:
<a href="#">
<div class="inner_headL"></div>
</a>
Just consider the div block as a normal html element and enable the usual a href tag.
It works on FF at least.
I pulled in a variable because some values in my link will change depending on what record the user is coming from.
This worked for testing :
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
and this works too :
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
While I don't recommend doing this under any circumstance, here is some code that makes a DIV into a link (note: this example uses jQuery and certain markup is removed for simplicity):
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[href]").click(function () {
window.location = $(this).attr("href");
});
});
</script>
<div href="http://www.google.com">
My Div Link
</div>
If you can use bootstrap, one simple solution is to use bootstrap .stretched-link.
https://getbootstrap.com/docs/4.3/utilities/stretched-link/
Sample Code
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
Soviut's answer was not sufficient for me. I had to use
a { display: inline-flex; }
to remove baseline artifacts, when using just a img in the a.
Enclosing your div inside an anchor tag <a href></a> works like charm:
<a href="">
<div>anything goes here will turn into a link</div>
</a>
My smarty pants answer:
"Evasive answer to: "How to make block level element a hyperlink and validate in XHTML 1.1"
Just use HTML5 DOCTYPE DTD."
Didn't actually hold true for ie7
onclick="location.href='page.html';"
Works IE7-9, Chrome, Safari, Firefox,
if just everything could be this simple...
#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}
#logo a {padding-top:48px; display:block;}
<div id="logo"></div>
just think a little outside the box ;-)

Resources