I'm using images inside div containers with css(background images). Not just for presentation, they have meanings. I want to provide alternatives to users with disabilities, but not sure how to do this right. I also use them inside links sometimes, this is also needed to be addressed somehow.
With case one(images inside div with css, but without link), I thought of using hidden text inside of div, but not sure if I should specify that this is the image and not just a text. Because when text alternative provided for images, disabled user will see that this text is belong to the image(with aria-labelledby for example), so how should this be done with div and css image?
With the second case, I also not sure how to make it right. I want to use title for the link, so the normal users will also benefit from this by hovering mouse for icons, for example, but I'm not really sure if title will suffice for disabled people.
That's clearly what role=img is for:
<a href="...">
<div role="img" class="css_classename"
aria-label="This information is provided to a screen reader"
title="This is a tooltip">
</div>
</a>
Related
I made style for a tag in my wordpress as a bottom-dotted border, so that I can tell users there's a clickable link.
However, in Wordpress, an image in post is inside a tag, which means that a border would show in the bottom of an image. This can't be changed in edit mode since the p which encloses a is automatically generated.
<p>
<a href="">
<img src="">
</a>
</p>
Is there a better way to deal with this? Maybe it's Javascript code to take the dotted border off from a, but I wonder if there's a better way.
You'll need Javascript because you want to search for a tags which are parent to img tag and in CSS, there are no parent selectors.
The code I need to work on looks like this:
<p>
<a href="http://creativecommons.org/publicdomain/mark/1.0/" rel="license">
<img alt="Public Domain Mark" src="http://i.creativecommons.org/p/mark/1.0/88x31.png" style=""></a>
<br> This work is free of known copyright restrictions...
</p>
It displays an image and then some text after the image. I need neither to display.
This works fine to get rid of the image:
a[rel="license"] {display:none;}
However, I need a way to get rid of the text after the <br> (and its unclosed tag if possible) and can't lose the closing </p> tag.
I am grabbing the HTML from a remote site and have no control over the markup there.
Thanks in advance for your help!
There's no way to hide this text using CSS, without adding a tag aground it- depending on how you're grabbing the site, your best bet would be to attempt to find "This work is free of known copyright restrictions..." and replace it with the same text surrounded by <span></span>; or simply deleting it altogether.
I realize this is an old question, but I found it interesting. I'm wondering if it wouldn't work to fiddle with the box model of the <p> tag, so that you hide what you want to "get rid of", even though it's still there?
For instance, say I wanted to display the image, but not the non-element text following. (I realize you want to eliminate the image as well, but for demonstration purposes having some visible content inside the <p> is helpful.) Since I know the image is 31px tall, I might just go with something like:
p {
height: 31px;
overflow: hidden;
}
Et voilà. Whether or not that would work for your specific need, I feel like we don't have enough context to determine. What you're asking for is to be left with an empty paragraph containing an invisible link, which absent larger context has no obvious purpose.
Come to think of it, though… if I then wanted to also hide the image, I'd just use a slight modification of your style above, and append:
a[rel="license"] { visibility: hidden; }
(You don't want to use display: none, as that will affect the dimensions of the <p> CSS box.)
This certainly has unfortunate implications for screen readers and the like, but for certain quick-and-dirty display needs it might suffice.
I am looking for a purely CSS way to center an image within a paragraph of text so the text wraps on both sides of the image.
Ideely the image |-----| would be placed
before or after |-img-| the text within
the code structure|-----| and the text
would wrap around the image.
Found an answer that works quite well available at:
http://www.alistapart.com/articles/crosscolumn/
IE10 Platform Preview supposedly (according to this article) has a new feature called positioned floats that seem to accomplish what you're looking for.
For now, though, I think you're screwed :/
I don't think it's possible:
<p> Text that goes here and image <img src="img.jpg"/> continues text</p>
As far as I know browsers treat <p>content as belonging to a line, thus when the browser parses your p-tag which contains the image it will automatically make that line as high as the image.
Maybe it's possible with css3 though...
There is currently no way to do this. I have looked far and wide.
The other answers here don't address the question as it is asked. This link (A List Apart) requires the use of two paragraphs of text, and you can't do it dynamically because you have to be careful to match up the text on both sides of the image.
The other, IE10's positioned floats (Microsoft calls them exclusions), does sort of work, but with a list of caveats:
It's IE-only.
You have to specify things like the number of columns, rather than an offset.
It doesn't work well when the window is resized. Other content gets overlapped, and the container maintains a minimum size.
I want to use iconography in a web UI, while retaining the context language of what clicking on the link will achieve, but possibly not displaying the text and crowding UI space. For example using CRUD screens, I want to display a plus icon for adding an item, a minus icon for deleting, it, a pencil icon for editing it, and a magnifying glass to search for a different item. There are a couple of ways to achieve this.
Render an img element inside of the anchor. The img alt attribute will describe what the icon represents (alt="pencil icon"), and the title attribute will describe the intended consequence (i.e. "Click here to edit this widget").
Render an anchor tag only, and use css to display the image as a background. In this case, the anchor's content should describe the intended consequence, however it needs to be wrapped in a span element so that its display style can be set to none. The anchor should also contain a title attribute matching the content (without a surrounding span of course).
It seems to me like option #2 is easier to implement in an asp.net mvc app. Since the icon is a design concern and not a markup concern, it makes sense to define the image in CSS. It also makes things easier from a code maintenance perspective... changing the img src location would only necessitate changes in the CSS file and no view files. Removing the CSS would cause the application to fall back to full text accessibility too.
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css. Another thing is, if I use the :hover selector to swap the image and provide a rollover / rollout effect, the images seem to take longer to swap out than when done with javascript.
Am I missing anything here?
We frequently use option #2, but in a different fashion. Instead of wrapping the anchor content in a span, use CSS to style the anchor as display: block or inline-block, then set its text-indent to -1000em (or similar, just pick a big value). I think you also have to set overflow to hidden.
If you do the background image as a sprite (a single image with both the non-hover and hover states in it) and use :hover to reposition the background, you should avoid the flicker/delay that you might be seeing now. That also results in one less separate request hitting your web server.
Note that this also requires explicitly setting the width and height of the anchor in your CSS to match your icon size.
If the icon conveys information that does not duplicate information already in the document, then it should be a real <img>.
However, the alt attribute should contain an alternative to the image, not a description of it.
alt="Edit this widget"
The title attribute should only be used to provide advisory information (think "optional extras") and you should avoid using implementation specific terminology (such as "Click here").
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css
If you do go down the route of putting content in background images and hiding real text, at least negative text-indent it out of sight instead of display: noneing it and making it invisible to screen readers.
Basically I'm having some problems with Z-Index. Although I'm not amazing at CSS I would reckon I was reasonably good, but really can't work this out.
You'll see at the URL...
http://howcode.com/code/
... that my problem is that links in the returned 'Popular' results aren't clickable or anything. I've concluded this is due to their Z-Index being messed up. I had to fiddle and tweak with Z-Index to get the tabs - Popular, Top Rated, Featured etc. - to show above the codebg div.
When I adjusted the Z-Index so that the results were definitely on top, they acted as normal - text could be selected, the ratings images hovered, etc. etc. However the downside to this was that my Popular, Top Rated, Featured tabs were all placed BENEATH the background image for the returned results.
If anyone can post a workaround or alteration to my CSS that would be much appreciated.
Please don't forget this is a test site and design and any other URLs are likely not to work, I haven't uploaded any database configs yet or whatever!
Attached are a couple of screenshots to clarify what I mean:
This is what I WANT to happen (not that in actual fact in this screenshots link aren't clickable, just to demo my point though):
This is what DOES happen when I adjust the Z-Index properties (I don't want this!):
Thanks y'all!
You need to remove this:
z-index: -1 !important;
From your .codebg class, which will result in your #2 screenshot above. (As a side note the children can't have a higher z-index than their parent, so everything inside .codbg is -1, behind the page) Then, you need to fix the tab images :) The problem is not that they're behind the background, it's that they're transparent, and look darker on top of a darker background. Here's the image (may change in this answer once you update it, pointing directly to it):
alt text http://howcode.com/images/tabs.png
They look fine here because of the white background, but if you open them up in an editor, you'll see they're transparent, just make the the three tabs fully (or at least more) opaque since that seems to be what you're after.
not the best solution but here it goes.
inside the content div move tabs div after codebg so this
<div id="content">
<div id="tabs">
</div>
<div id="codebg">
</div>
</div
becomes this
<div id="content">
<div id="codebg">
</div>
<div id="tabs">
</div>
</div
then add to #tabs
position:absolute; top:232px;
to #content
padding-top:53px;
this is a quick and dirty fix. otherwise you have to rethink your whole layout
You could also put your background-image from code-bg on content instead, and adjust content's width and border-radius