I am using a CMS for images which is by default not generating alt attributes in image tags unless the alt text is provided.
I can provide an empty space " " into the alt tag to produce :
<img src="../.." alt=" "/>
Would this be a problem with screen readers, and web accessibility ?
There are three ways that HTML authors can write ALT text on their images:
With no ALT attribute given
With an ALT attribute that doesn't contain any readable characters
With an ALT attribute that can be read
These are handled in different ways.
In the case of an image that lacks an ALT attribute, like this:
<img src="fruit.png" width="100" height="100" />
... the default screen reader behavior is read the SRC attribute aloud. So, assuming that this image was hosted in the images folder on example.com, the screen reader would say: Graphic: h ttp://www.example.com/images/fruit.png. Omitting the ALT attribute is bad practice, because blind visitors wind up having to wade through tons of irrelevant gibberish.
In the case of an image that has an ALT attribute which does not contain any readable information, like either of these two:
<img src="fruit.png" width="100" height="100" alt="" />
<img src="fruit.png" width="100" height="100" alt=" " />
... the default behavior is to silently pass over that image. The screen reader cannot pronounce a space or an empty string; and so it says nothing. This is the correct way to suppress the announcement of purely decorative images. Note, however, that the most recent WebAIM screen reader usage survey found that most blind users want to know an image is there even if it doesn't convey much to them. So be judicious in suppressing images with empty alt text; use it only when there really is zero information conveyed by the image.
Lastly, of course, is regular alt text:
<img src="fruit.png" width="100" height="100" alt="Photo of apples." />
In this case the screen reader will say "Graphic: Photo of apples." Putting a period in makes the screen reader pause at the end of the ALT text.
Picking good ALT text is important, and can be hard. In general, if your image contains a picture of text, then you should reproduce that text (or a suitable abbreviation of it) in your ALT text. If it is illustrative or photographic, your ALT text should be a concise description of the photo's contents. If it's a complex image like a diagram, well, you may need to use the ALT text to direct the user to a more complete description elsewhere in the page. (The LONGDESC attribute was designed for this purpose, but isn't widely supported by screen readers.)
If your image is also a link, it's absolutely vital to have sensible ALT text; otherwise your blind visitors won't have any idea what the link does.
I recommend getting a screen reader (such as NVDA, which is open source) and testing with it. It can be -- excuse the bad pun -- an eye-opener.
If you are not using an alt text, you can go without the alt attribute. It won't validate, but it won't change a thing, it will work exactly the same. You are just pleasing the validator.
Using a space shouldn't bring any problems.
only problem is the customer wants the site to state that it is XHTML compliant - so we need the pages to validate :(
Related
I am frequently tasked with displaying a grid of thumbnails for work, such as on a posts/articles page, with each thumbnail linking to a separate post/article, but I have never really been sure of the best way to format these for screen readers/accessibility. More specifically, I have never been sure whether to use the <article> or <figure> tag for this purpose, or neither, or something else entirely. Does anyone know? These are the three methods I am debating between:
<a>
<article>
<img />
<div></div>
</article>
</a>
<a>
<figure>
<img />
<figcaption></figcaption>
</figure>
</a>
<a>
<img />
<div></div>
</a>
The documentation for the article tag says that it "represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable". I don't know what that means in this context, but it seems like it could be intended for this purpose, or it could be meant to be used once on the actual article pages and not the overall "articles" list page.
The documentation for the figure tag says that it "represents self-contained content, potentially with an optional caption". It seems like it would work quite well here, except my intuition says that it might be intended more for figures that are inline with the text of articles, so I have my doubts.
The 3rd option is to use neither the article or the figure tag in an effort to just simplify the html as much as possible so that screen readers do not have to look at and interpret as many nested tags.
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
From an accessibility perspective, I have not found much benefit to using an <article>. On iOS and Mac, Safari incorrectly treats an <article> as a landmark even though the definition of an article role specifically says it isn't.
An article is not a navigational landmark, but may be nested to form a discussion where assistive technologies could pay attention to article nesting to assist the user in following the discussion.
Notice that it says AT could pay attention to the article element but other than the aforementioned treatment as a landmark in Safari, I have not found NVDA, JAWS, or Voiceover to do anything special with an <article>.
If you plan on having a caption below the image, then you could use <figcaption>. It's just a handy way to visually display text below an image. But if the thumbnail doesn't have text below it but rather has a heading or link to the article, then <figcaption> isn't needed.
Your last example, the simplest, is the most common way to code what you want and works just fine for accessibility. I know your code snippets were just minimal code but make sure your <img> uses the alt attribute.
If your image is inside your link (as in your example) and there's other text containing the title of the article within the link, then the image can have an empty alt="" (or even just alt with no value). But if there isn't any visible text in the link, then make sure the image has an appropriate alt attribute value.
For some reason the titles of my featured images are being appended to their links. I can't figure out why it's happening.. any ideas?
"Test image" is the text that appears next to the image.
<a href="http://localhost/mysite/test/" class="post-thumbnail" aria-hidden="true">
<img src="http://localhost/mysite/wp-content/uploads/ds/2017/12/sample2-1080xauto-c-default.jpg" class="featured-image tease-featured-image " alt="<span itemprop=" name"="">Test Image" />
</a>
And it's the post title, not the image title that's displaying. Removing the image title doesn't do anything. Changing the title of the post changes the text.
Why would you have a span inside your alt?
The alt is for people who can't see images -
Normally the rules for alts is :
No special characters. This includes UTF-8 characters such as unencoded curly quotes, as well as HTML Character Entities.
No HTML.
No more than 125 characters.
Just identify the picture. No need to refer to it (“This is a picture
of…”).
Read more at: https://html.com/attributes/img-alt/
Also - the span created is not closed properly.
I’m trying to make a search result list more accessible.
Lets say I have a list of search results that are structured in the following way:
<article>
<h2>Name of the author</h2>
<h1><a>Name of the book</a></h1>
<div class="seperator">
<div class="availability-status status1" title="available"></div>
<div class="icon icon-book" title="Book"></div>
<div class="result-button-group">
Sharing
…
</div>
</div>
<p class="imprint">Publishing house (Year)</p>
<p class="series">Part of: name of the series</p>
</article>
The name of the book is a link to another page, while the other elements around it are additional information for the corresponding item.
Visually it looks like this:
How do I structure the markup semantically correct so that users with screen readers can make sense of the result item?
When they navigate on a link to link basis they land on the name of the book, but might miss the author field that is above the title, right? Can I achieve this with aria-attributes? Or is this structured enough to make sense of regardless?
I played around with VoiceOver myself to try to make sense of it but I’m far from an expert. So any input is appreciated.
Outline
You should not use a h2 for the author name. This heading would become the heading for the article element (as it’s the first one), and the heading for the book title would create another section on the same level.
Instead, use only one heading (the book title would make the most sense) and group it with the author name (for which you could use a cite element) in a header element.
<article>
<header>
<cite>Name of the author</cite>
<h1><cite>Name of the book</cite></h1>
</header>
<!-- … -->
</article>
Link
When they navigate on a link to link basis they land on the name of the book, but might miss the author field that is above the title, right?
Yes. But that’s not a problem, it’s exactly what the screen reader user expects/wants to do (finding links, not anything else).
You could, however, consider adding the author name to the link/heading, too:
<h1><cite>Name of the author</cite>: <cite>Name of the book</cite></h1>
Font icons
Note that this is likely inaccessible (details), because the element has no content (the generated image is useless for user agents without CSS, blind users, etc., and the meaning that it conveys is not represented in an alternative way in addition):
<div class="availability-status status1" title="available"></div>
The title attribute is not sufficient. Either use an img (with alt), or add alternative text (and visually hide it).
And this seems to be pure decoration, so there’s no need for a title attribute (and it would be inaccessible to many users anyway, because the element has no content):
<div class="icon icon-book" title="Book"></div>
(But if the information that it’s a book is important, e.g. because there are magazine etc. too, then you should provide an alternative, just like in the case above.)
I am retrieving the latest news articles from cnn.com website, and wrote a simple Nokogiri script to do this:
url = "http://edition.cnn.com/?refresh=1"
doc = Nokogiri::HTML(open(url))
puts doc.at_css("title").text
doc.css("#cnn_maintt2bul div+ div a").each do |headline|
article = headline.text
puts "#{article}"
end
The problem is, CNN posts a mixture of articles and links to videos. Now I am only interested in articles not videos. When I run this script it retrieves all articles but leaves a space when an article links to a video, for example.
Pakistan airstrikes kill dozens
Could U.S. leave Afghanistan?
Editor's stabbing draws outrage
Ukrainian city fears uprising
U.S. hate groups in decline
This would mean that Ukrainian city fears uprising would actually link to a video. It would do this until it retrieves the last article.
I discovered that the articles have a selector called .cnnVideoIcon. Any ideas about how I could eliminate this such that articles linking to videos are removed from my results?
How would I eliminate such links when am parsing? They could appear anywhere.
I looked at the HTML source code of the CNN site and found that the "li" tag of a video headline has four child elements, and only three child elements with text headlines.
<li class="c_hpbullet3" data-vr-contentbox="">
<span class="cnnPreWOOL"></span>
Ukrainian politics remain in flux
<span class="cnnPostWOOL"></span>
<img class="cnnVideoIcon" width="16" height="10" border="0" alt="Ukrainian politics remain in flux" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/icons/video_icon.gif">
</li>
So, we can use the XPath syntax below:
doc.xpath("//div[#id='cnn_maintt2bul']/div/div/ul/li[count(*)=3]/a").each do |headline|
article = headline.text
puts "#{article}"
end
If you look at the source code of the blocks you're scraping from http://edition.cnn.com/?refresh=1, you will notice that videos are a link with a video icon (and no text), like so:
<a href="/video/data/...">
<img class="cnnVideoIcon" alt="Ukrainian city fears uprising" ...
height="10" width="16">
</a>
This explains why you get some empty lines.
You could skip those links using a more refined selector like:
#cnn_maintt2bul div + div a:empty
Using a:empty, you will only retrieve links without images or other elements inside, or, in other words, all links with a description text only.
Another (less optimized) approach is to simply skip the empty lines with an if statement:
doc.css("#cnn_maintt2bul div + div a").each do |headline|
article = headline.text
if (article != "")
puts "#{article}"
...
You should use something else than the CSS attributes to find the desired tags. Use search instead of css and give it an XPath that only selects the elements that don't have the link to a video as child.
I will update the answer with a designated XPath when you provide a real URL to the site you want to fetch information from.
our site is giving out 'badges' to our authors. they can post these on their personal blogs and they will serve as incoming links to our site.
We want to give out the best possible code for SEO without doing anything that would get us flagged.
i would like to know what you're thoughts are on the following snippet of code and if anyone has any DEFINITE advice on dos and donts with it. Also, let me know if any of it is redundant or not worth it for SEO purposes.
i've kept the css inline since some of the writers would not have access to add link to external css
i've changed the real values, but title, alt etc would be descriptive keywords similar to our page titles etc (no overloading keywords or any of that)
<div id="writer" style="width:100px;height:50px;>
<h1><strong style="float:left;text-indent:-9999px;overflow:hidden;margin:0;padding:0;">articles on x,y,z</strong>
<a href="http://www.site.com/link-to-author" title="site description">
<img style="border:none" src="http://www.site.com/images/badge.png" alt="description of articles" title="View my published work on site.com"/>
</a>
</h1></div>
thanks
Using H1 to enclose your "badge" is a really bad idea—not in so much as it'll negatively affect SEO for your site, but it will very likely ruin the accessibility (and thus SEO) of the author site. H1-H6 are used to provide document structure by semantically delimiting document headings. Random use of heading tags can confuse screen readers and webcrawlers. There's not much you can do in terms of legitimate SEO aside from making correct use of semantic HTML markup.
Edit:
Something like this would be the safest bet:
<div id="writer-badge" style="width: 100px; height: 50px;">
<strong>
Articles on x,y,z
</strong>
<br />
<a href="..." title="site description" rel="profile">
<img style="border: none" src="..." alt="..."
longdesc="http://site.com/badges-explained"
/>
</a>
</div>
I put a line-break between the text and image to treat the text as sort of a badge title. If it's not meant to be displayed that way, then I would omit the <strong> tags altogether (there's no semantic value in encapsulating the text that way, and any styling could be done using the DIV or a weight-neutral SPAN element).
IMO there's really no reason for a achievement badge to have a heading of its own (it's really not even part of the document, just a flourish in the layout), but if you absolutely must, then H6 would be more appropriate and safer to use than H1.
As far as keyword proximity, that is sorta venturing into the grey-hat area of SEO (similar to keyword stuffing), and I wouldn't know anything about that. I've yet to come across any reliable info on how Google or other search engines treat keyword placement. I think if you properly use tag attributes like alt, title, longdesc, rel, rev, etc. in images and links, you'll be alright.
I don't think there is any issue with this code except your <h1> tag. I would probably change it to <h2> simply because pages are supposed to have only 1 <h1> tag per page.
You could also use an iFrame instead if you wanted. That is what SO does but I know you will not get as much linky goodness.