Suppose I want to replace a link > with a fancy image arrow. For that I want to use a CSS sprite.
In many articles, for example in a recent (2012) article in Smashing Magazine, the recommended method is something like this:
HTML:
>
CSS: hide text and specify sprite as background
However this method is problematic concerning accessibility: If images are disabled but CSS is interpreted, then the above link will be invisible.
Interestingly, I found an old (2010) article by Paciello Group that proposes what looks like a good solution. The idea is to place a <span> next to the text to be replaced. The <span> has a background image and is positioned on top of the text. If the image loads, it replaces the text, otherwise the text is still visible.
Why is this method not widely employed? Are there issues with that solution?
The main disadvantage is showing the text to users with no special accessibility needs, before your CSS sprite loads. In terms of code, it is also perhaps not as semantically clean as using an aria-label solution (explained below).
You could consider using an ARIA label for the element:
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
I quickly checked how Gmail and Facebook approach this problem (buttons without text):
In Gmail the 'previous' button has an aria-label of 'Older'
in Facebook the 'cog' icon in top right has some text 'Account Settings' indented -5000em
Related
On Wordpress, when I click the text that drops down a list (done using the detail tag), a blue rectangular box forms around the text. Is there any way, using only html, to prevent this from happening? (I don't have the availability of CSS on my Wordpress.com blog.) Thanks
I think that Wordpress allows inline css by default. So, depending on your settings, the following might work:
<details>
<summary style="outline:none";>Alabama</summary>
<p>Domino's</p>
<p>Donatos</p>
</details>
http://clarkwp.wordpress.com/2013/11/07/inline-css-styling-in-wordpress/
I'm developing a desktop software application which looks for errors in web pages and can highlight them in the browser. Highlighted areas are somewhat arbitrary. They could be one word in a p tag, an entire a tag or an img.
In the past I've done this by rewriting the html and adding styled span tags around the highlighted area. The downside is that quite often the highlights can be obscured. For example where in image is in a div exactly its size with no overflow, any applied border, background etc. will be obscured.
What's the best way to approach this? Are there any good examples of this being done in popular software / webapps?
Limitations: I can't use JS (files are local and browsers often block this). I can however user the latest standards. The output doesn't have to validate, as long as it works on common modern browsers.
Since background colors and borders can't be used, I think you'll need to place something on top of the offending element or text. Perhaps you can use an absolute or fixed position <div> element with a partially transparent background.
Of course, this could get tricky with getting the coordinates. But you might be able to use the same thing you used to do with the span and add some dummy elements within it to trick it into thinking that 0,0 is right where your span element is.
I'm designing a site where I'd like to use white text on different colored backgrounds. Unfortunately 2 of these backgrounds do not provide enough contrast to be WCAG 2.0 AA compliant.
The text is a "read more" link.
My question is - if the link has a title attribute does this make the text accessible hence WCAG AA complaint?
Further to this there will also be a small chevron image with alt tag enclosed in the tag, does this redundancy work favourably for AA compliancy?
Thanks!
It sounds like you are hitting two issues:
Colour contrast of text on the background.
Not describing links.
Unfortunately title cannot be relied upon to convey information as some users cannot access it (for example people using the keyboard but can see the screen).
There are a few potential adjustments for the contrast issue:
Applying an effect on the image (e.g. fading to black) on the section where text is.
Applying an effect to the text, for example drop-shadow that increases the contrast.
Choosing a different colour for text on the different images.
Otherwise you get into the situation of having to provide a style-switcher or personalisation options for increased contrast (assuming you want to meet WCAG2-AA).
I can't tell for sure the links don't describe their target, as if there is a heading above them that would provide context. However, 'read more' links does ring alarm bells.
If the chevron image has alt-text that is specific to the target page, that would help. For example:
<img src="file.gif" alt="Specific page title ">Read more
NB: As alt text is read like inline text, include a space at the end.
Or if the order is the other way around:
Read more<img src="file.gif" alt=" about specific page title ">
Overall, if your box has a heading that describes the target page, I would make that a link and use a script to make the rest of the box clickable. (For example, the central boxes on http://ukwindsurfing.com/ )
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
To make my web site XHTML compliant, I have added a title attribute to all of my IMG tags.
However, when you mouseover an image, the text from my title attribute displays as a small popup. I don't want that text to be viewable.
Question: How do I prevent the browser from displaying the title attribute text as a popup while still keeping the title attribute present?
<img src="..." title="text that gets displayed as a popup but I don't want it to" />
You don't have to have a title to be compliant, you need an alt.
The behaviour you are seeing is the correct implementation by the UA of title so is hard/impossible to override.
This is browser specific. Some browsers choose to display the title attribute, some choose not to display anything, and some even choose to display the alt attribute instead. Though lately this has become more uniform across browsers, with most of them leaning to the title attribute..
Title is meant to be shown, if you want an image description that does not show except for screen readers, use the alt attribute which is only shown if the image cannot be displayed (=> Screen readers).
Use ALT and TITLE together. Put your nice, helpful text in the alt tag and then nothing in the title tag like so:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"o
alt="Goooooooogle!"
title="" />
If ALT is no longer "valid" (is it?!), I suggest that any solution around this slight validation annoyance will be far worse than ignoring it.
I don't think this is a great solution, living with the tooltip is better, but if you set an absolutely positioned div with a solid background set to very low opacity (1%) and a higher z-index then your image, you should not get a tooltip.
<img style="position:absolute;
top:0;left:0;width:200px;height:200px;"
src="yourImage.gif" alt="the text you don't want to show"
title="the text you don't want to show"/>
<div style="position:absolute;
top:0;left:0;height:200px;width:200px;
z-index:1000;filter:alpha(opacity=01);
-moz-opacity:0.01;background-color:gray;">
</div>
Again, I don't suggest this, but this is just to show that there is a way...
It has been a while since this post, but I figure for all those who wander here from Google, here's my 2 cents:
The alt tag is fully valid--required even. The last solution works in nearly every browser, and where it doesn't work, a tiny rectangular tooltip will be shown with no text. The title tag overrides the alt tag and forces a specific tooltip to be shown. I don't know why people voted this down, considering it's the best solution here.
For those of you who see this as a bad markup: for a general website, yes, this isn't good practice. This is a modern age of the web, however, and you have to also consider web applications and very obscure one-off situations where this might be the best possible solution given the markup options we have to work with. We all know web 2.0 is only MOSTLY there. ;)
PROPOSED ALTERNATIVE:
Personally, I would suggest creating a div the size of the image and setting its background-image to the src that you want to use. There is DEFINITELY no tooltip this way, regardless of browser, and it's 100% compliant with everything. This will not work if it's an inline image, but it's pretty rare to use an image inline with text and not want a tooltip (an icon beside links, for instance, a great tooltip might be "External Link", or for a mailto:, "Send an email to:", etc.)