I have an error :
Links do not have a discernible name Link text (and alternate text for
images, when used as links) that is discernible, unique, and focusable
improves the navigation experience for screen reader users. Learn
more.
I tried to include an aria-label but it doesn't work. This makes an error:
<a href="https://...../demo/index.php/Products/Description/Apple-Cinema-27/products_id-1" c="Apple Cinema 27">
<img src="images/products/130_61ajN-dgGxL._SL1000_.jpg"
alt="Apple Cinema 27"
title="Apple Cinema 27"
width="130"
height="130"
class="media-object img-fluid">
</a>
Thanks
Try use aria-label="...." - this is alternative text for image.
<a
href="https://...../demo/index.php/Products/Description/Apple-Cinema-27/products_id-1"
data-c="Apple Cinema 27"
aria-label="yourdescription">
Perhaps the alt attribute just needs a slight modification. The alt attribute should identify the destination or purpose of the link. Here is a very simplified example:
<a href="contact.html">
<img src="contact.png" alt="Return to the contact page">
</a>
You may not therefore need an aria-label attribute.
Related
Hey yall I'm using a real estate website editor called Real Geeks. They have a field to insert custom CSS and I just copy and paste code we have for round buttons. Problem is that occasionally the buttons will stack vertically as opposed to horizontally after an update.
<section class="three-widgets">
<ul class="small-block-grid-1 medium-block-grid-3 text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/plantationrealtygroup/home_page/Round_7001_Legare.png" alt="Advanced Search" width="300" height="300" /></a>
<h3>Advanced Search</h3>
<p>Find your perfect neighborhood</p>
</li>
<li><a title="Interactive Map Search" href="/map_search/results/wc5/#/?city=all&list_price_max=all&baths_min=all&beds_min=all&type=res&list_price_min=all&page=1&per_page=20&latitude_min=33.661507&longitude_min=-78.91471&latitude_max=33.708143&longitude_max=-78.84948"><img src="https://u.realgeeks.media/plantationrealtygroup/home_page/Push_Pin_Map.png" alt="Interactive Map Search" width="300" height="300" /></a>
<h3>Map Search</h3>
<p>Use our interactive map search tool</p>
</li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/" rel="noopener noreferrer"><img src="https://u.realgeeks.media/plantationrealtygroup/home_page/Round_152_Regency.png" alt="Home Value" width="300" height="300" /></a>
<h3>Home Valuation</h3>
<p>Get an INSTANT, accurate home valuation</p>
</li>
I'm not a code wizard (I don't code at all, only use Webflow) but even I can see that the code we're copying and pasting isn't using updated stuff like div boxes I typically use in Webflow. Any clue on how to make this work properly, what might be causing an issue, or rewriting the code to be cleaner/not mess up? I noticed there isn't much documentation on the custom code field anywhere on the Real Geeks support page either besides this.
Honestly I would appreciate insight onto why CSS UI elements from online libraries don't work on their custom code box. I reached out to support but got no useful answer.
My professor in an assignment wants us to list our education by colleges/highschools. He specifically states "Enclose the above <h3> inside of an <a> element with the fully qualified URL of the school’s main website as the href and set the target attribute to _blank. By enclose, I mean place the <a> tag immediately before the <h3> and the </a> immediately after the </h3>." I do exactly as stated and it does not work, and creates a "target ="_blank" text below two other <a> elements in <nav>. This line of code is written in <main>.
I expected a <h3> that is hyperlinked to my University homepage, that displays my University name on it.
Did you do it like this?
<a href="https://github.com/" target="_blank">
<h3>GitHub</h3>
</a>
<a href="https://stackoverflow.com/" target="_blank">
<h3>Stack Overflow</h3>
</a>
<a href="https://www.linkedin.com/feed/" target="_blank">
<h3>LinkedIn</h3>
</a>
I've tested and it worked; if that's not it, please provide more details and i'll try to help you.
Here is the alt text I am trying to verify:
<a class="module-List-module-link—CtkbR—" href="/first/2041" alt="text">sample text (ABC)</a>
The original html snippet is:
<a class="module-List-module-link—CtkbR—" href="/first/2041">sample text (ABC)</a>
I only added the alt="text" to make it 508 compliant. My question is: Is that valid?
I am taking my cue from:
<article>
<a href="news.html">
<h3>Budget Debate Continues in Parliament</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
<p>Read more</p>
</a>
</article>
reference: the WCAG section
When i scan the page using Compliance Sheriff, i get an issue:
Anchor element does not have alternative text which describes purpose of the link
for :
<a class="module-List-module-link—CtkbR—" href="/first/2041">sample text (ABC)</a>
There is no correct usage of the alt attribute for an <a> element.
alt is used for images when the image cannot be loaded or understood by a user (e.g. because the image file didn't load, the browser is text only, or the user is blind).
I know it's technically possible to have a single hyperlink contain both text and an image:
<a href="http://example.com/user/profile">
Joe Bloggs
<img src="http://example.org/decorative-image.png">
</a>
Is there a reason (HTML spec, accessibility etc) why links shouldn't contain both text and images together? I'm wondering if it would be better to output the image after the hyperlink:
<a href="http://example.com/user/profile">
Joe Bloggs
</a>
<img src="http://example.org/decorative-image.png">
In my case, the decorative image is just a green circle which indicates the user is online right now.
Putting the image inside the link is better because it represents the relationship between the decorative image and the link more accurately.
It also increases the size of the click target, which is good for users with motor control issues.
That being said, you must add an empty (null) alt attribute to the image tag to communicate that it is decorative to the assistive technologies.
<a href="http://example.com/user/profile">
Joe Bloggs
<img alt="" src="http://example.org/decorative-image.png">
</a>
An alternative would be
<a href="http://example.com/user/profile">
Joe Bloggs
<img src="http://example.org/decorative-image.png" role="presentation">
</a>
You are perfectly ok to wrap a link tag around text and images.
I have two logo's in my site header.
I like the solution here: Replacing H1 text with a logo image: best method for SEO and accessibility? :
Solution:
According to Matt Cuts (and some other comments) the best solution is to use an image with alt and title attributes. The alt attribute is for SEO and the title attribute is for accessibility. Using an image also makes sense for semantic markup. A company logo is actually an important piece of content.
<h1>
<a href="http://stackoverflow.com">
<img src="logo.png" alt="Stack Overflow" title="Click to return to Stack Overflow homepage" />
</a>
</h1>
How to have this with 2 logo's?
<h1>
<a href="http://stackoverflow.com">
<img src="logo1.png" title="Click to return to Stack Overflow homepage" alt="logo1 " />
</a>
<a href="http://stackoverflow.com">
<img src="logo2.png" title="Click to return to Stack Overflow homepage" alt="logo2" />
</a>
</h1>
would the h1 then be: logo1 logo2?
You shouldn't use h1 as logo, as explained by Harry Roberts (http://csswizardry.com/2013/01/your-logo-is-still-an-image-and-so-is-mine/).
If you want to use two logos, just use two links.
In the case of the two logos, it depends on the context. Are you using two images because they are two different things, ie
<h2>Our Sponsors</h2>
<a><img src="" alt="Google"/></a> <a><img src="" alt="MS"/></a>
<a><img src="" alt="Adobe"/></a>
Or something like:
<a><img src="" alt="Toyota"/><img src="" alt="Corolla"/></a>
If it is th second, you should do:
<a><img src="" alt="Toyota Corolla"/><img src="" alt=""/></a>
For assistive technology, the first Toyota Corolla example will read as:
Link image toyota image corolla
and the second way:
Link image Toyota corolla.
Some say using null alts (alt="") is bad for accessibility and/or SEO. This is false. If an image is used for decorative purposes, a null alt attribute should be used, because all it does is add unneeded chatter. Once upon a time, search engines used to ding people for using null alt, but not anymore.