Is it true that there are semantically correct & incorrect ways of displaying pictures/icons?
I mean of course it's not very friendly to include all pictures of a newspaper article as background images because that way, screen readers can't read out the alt text, but what about icons or user interface elements? Is it justifiable from a semantic oriented point of view to include these as background-images?
There are some semantically correct and incorrect ways of displaying different kinds of images.
Normal images It's better to use standard <img> tags, because they are often the main content of a site. These should have alt tags to inform users about important parts of content.
Icons are a kind of image which isn't the main content of your site, but they should also be displayed by using <img> tags because it's important for usability to show what specific icons do if it's not displayed correctly.
Not important pictures which make the site nice and are not main content of the site should be displayed as background, because then you do not use unnecessary Nodes in your DOM.
I don't think you should include icons as an separate element just representing that icon; e.g. an img or i.
Instead each icon represents a specific function – therefore you should use an element that could be used for that functionality, e.g. an anchor a or a button. Each of those elements should have a non-graphical content that could be parsed by screen readers and web spiders. You could then beautify those elements by using background images for some graphical icon.
Using separate markup for icons is a semantic error/mistake. The icon itself does nothing. It's just there to memorize the function of the underlying element. But in fact those elements are still there when you remove the icon.
So yes, I always would include icons as background images to an element directly or to a generated pseudo element.
Related
I have web app. For images we are using HTML tag img and we are also using alt attribute for SEO purposes.
Now, we are redesigning our website to improve user experience and our designer suggest to replace the img tags with <div style="background-url(image)"> because using this technique images are no resized and so on. However, I see the big disadvantage that using this approach we loose the alt attribute, and this will directly impact in our SEO.
Any suggestions?
Depending on how much control you require over the image would decide this for me. As you can still resize and control HTML img tags through your CSS.
You do have more control over image cropping, positioning, animation effects etc with background images but if the design only requires the image to resize depending on the screen size then you should still be able to achieve this with HTML img tags.
But, if you would like to know more about the pros and cons of both techniques then try reading this useful thread:
When to use IMG vs. CSS background-image?
You need to look at what is the purpose of the image being used, if it is background image then use background or else image.
What would be worth considering is that a lot of websites give their website title (not talking about the title tag here) in an h1 and then use CSS to hide the text and show a logo image, which also serves the purpose of an alt tag in fact even better because it's wrapped in better markup, like an h1 which gives meaning to the search engine that this is the main header/title (read:brand name) of the website.
Can I make the img tag use the background-image properties? Like for example, I have these two pages here one has img and the other one has background-image tag. Notice in responsive version the img one squeezes the image, while the background-image one adjusts the image according to the size.
Page with IMG tag
Page with background-image tag
You can find both img and background-image in sub-header div ..
This'll sound a bit pedantic, but there are a few reasons for it.
An <img> element represents content on the page, something intrinsically important to see and understand. Background images are fluffy stuff to make the site look pretty but their removal would not impact the message.
You are mixing your use-cases. You should go with a background-imaged header in this case because the image isn't intrinsic to the message or content of the page.
Use an <img> element when you're displaying a graph, a photo someone took, etc.
Why?
The browser intentionally treats them differently, as you've noticed, placing a higher priority on showing the content of an <img> tag for example. It'll attempt to stretch the image to fit by default, while a background will simply be clipped.
When the user goes to print the page, it's much easier to remove background images via CSS media queries then it is to hide (the correct) IMG tags.
Background images also don't take up space in the DOM and cause fewer conflicts with other elements. IMG tags flow in the document and can easily get dislodged from their intended position (creating a lot of extra work to make them stay put).
Right-clicking a background image doesn't do much. Right-clicking an image gives you image related options, such as downloading or opening the image. This goes along with the theme of the <img> tag as content.
There are other reasons, but this all boils down to semantics. This may not seem like a big deal to you, but that's probably because you don't have a vision impairment (so you don't regularly use a screen reader) and aren't really thinking about web crawlers and the many other systems that attempt to extract meaning from the tags you've used.
You will be far better off for many, many reasons if you stop fighting the system and use it the way it was intended. Or, at least, know why you're bucking convention before doing so.
Why do images defined in CSS (like backgrounds, lists marker, ...etc.) not behave in the same way in the browser as HTML images? For example, they can't be selected by the mouse, and you can't right click on them.
Images are generally used in CSS for one thing, backgrounds. Which means they aren't used for the same things HTML images are being used for (displaying the actual image as part of the content).
When an image is part of the content, it can be saved and copied etc, because it
is likely to be considered interesting by the reader. Backgrounds (or list-markers etc) however, are less likely (unless the reader is a developer) to interest the reader enough to want to copy them. Instead, the focus is on the actual content of the element (which the background was applied to).
I guess it is a question for browser vendors why they allow certain behavior only when dealing with <img> tag.
However, you can use dev tools/Firebug/whatever and you can download the image file.
using SharePoint 2010 web editor
I created a (sub-menu) page with title CO<sub>2</sub>. When rendered in browser, the title of the page is: CO<sub>2</sub> whereas the menu item shows CO2.
Apparently it is escaping the HTML tags in page but rendering correctly inside the menu.
How to make the page title looks same as menu item?
No tags are recognized in a title element by HTML rules (and by browser practice); they are indeed rendered as such. In principle, you can use special characters like “₂” SUBSCRIPT TWO U+2082 in a title element. You can even denote them using character references:
<title>CO₂</title>
However, only some fonts support SUBSCRIPT TWO, and it is quite possible that the rendering of title elements e.g. in a browser top bar or tab label uses a font that does not support to it. In that case, a rectangle, vertical bar, space, or other generic indicator of missing glyph probably appears.
Note that the appearance is usually not quite the same as in the menu, since browsers implement sup by reducing font size and putting the glyph in a lower position. Only by accident would this coincide with the design of “₂” in a font. But if the texts are displayed in two different fonts, as they probably are, this is usually not a serious problem.
I ask because my buddy posted a question earlier on How to resolve issue with image path when testing HtmlHelper? and a few of us in the office got talking about how to resolve this.
One of the guys suggested that he wouldn't have this issue (Test crashing because it has a dependency on functionality in IIS) if he was referencing the image from CSS.
His point made perfect sense, but it kind of threw us back because we'd always been referencing images with <img/>. Were we doing it wrong all along? None of us are experts in this area so I thought it was worth putting to the community. What's the best way to reference images?
There are a variety of benefits to using CSS background-image and inline <img /> tags. CSS background images are great for decorative elements (content borders, background patterns, etc.) as they can be repeated with background-repeat. They make a poor choice for content-centric images, though, like product photographs, bio avatars, etc. Here, inline images work best because you can use an ALT attribute, and images are displayed regardless of browser (some older mobile browsers don't support backgrounds in CSS).
The tag is the best way.
It's standards compliant, accessible, and SEO friendly.
Indiscriminately putting all images into CSS background-image properties is a terrible idea in my opinion. Just a few things you deprive yourself of:
You can't stretch and resize images (may sometimes be necessary)
You can't use the ALT attribute (as David already says)
Background images usually won't get printed
they won't get indexed by search engines
they are difficult for the user to store
missing images won't show up with the "broken image" icon in IE
bad browser layout engines may have problems zooming, because the surrounding container could get zoomed apart from the image content (Shouldn't be a problem in FF though)
you always need an additional container to put the background-image in so you can't e.g. do DOM operations with image elements
the <img> tag exists for a reason, and should absolutely be used where appropriate (i.e. where the image is part of the content rather than decoration or background). For the "sort icon" thing I second what David says, it's fine both ways, but if it's a clickable element it should be an img.