Social media buttons are not links even though the code shows proper linked objects:
<li class="facebook" title="" data-placement="bottom" data-toggle="tooltip" data-original-title="Facebook">
</li>
You should really read the "How to ask" page first.
Ok so, This link it's not outputting noting, because you didn't specified nothing inside of it to be outputted, at least one letter should be inside of it
A
This will output the letter A as a link. Anything you want to be linked should be inside of the <a> tag. Another example using an image as a link:
<a href="https://www.facebook.com/FacebookDevelopers">
<img src="random-image.png" alt="test" height="50" width="100">
</a>
Learn more about a tag here
Related
Hi I have the following question in regards to accessibility, I'm using JAWS screen reader software to test my code and I have the following issue:
JAWS reads out the heading label for the category, but it doesn’t represent the category and its repeating twice. The software says "Create case dash link";"Create case dash link".
The software should read should be Ask a question"
Please advise, my HTML is below
<div class="col-12 col-sm-6 col-md-4">
<article class="icon-feature icon-feature--first">
<a class="icon-feature__link" href="/support/create-case/"></a>
<div class="icon-feature__icon bg--blue-primary" style="height: 150px;">
<a class="icon-feature__link" href="/support/create-case/">
<span class="icon icon--signs"></span>
<div class="imghoveropacity">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
</div>
<a class="icon-feature__link" href="/support/create-case/">
<h3 class="icon-feature__title">Ask a question</h3>
</a>
<p class="icon-feature__excerpt">Submit an enquiry</p>
</article></div>
JAWS is right, there's nothing to read from its perspective. Well, almost nothing.
If you want JAWS with default settings to read your links, they should have either A) link text, i.e., something meaningful between <a> and </a>, or B) The aria-label attribute that should not be empty.
You have here:
<a class="icon-feature__link" href="/support/create-case/"></a>
This link contains nothing to JAWS' eyes. I mean, nada. The easiest way to fix this is to add an aria-label attribute, like this:
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question"></a>
Then JAWS would know what to read when the focus lands on that link. Otherwise, as it is a link, so a priority piece of data that must be announced somehow, it tries to get at least something and reads the (relative) URL, that's why you hear "Create Case".
The other link is a more cumbersome case. You have a link, a div inside it, and an img inside that div. Here JAWS is also confused because the link text is blank again, so it probably should read the alt attribute of the image, but this image is in another div, so it is not sure if the div should be read as the link contents. Oh yes, and there is an empty span also, and it is the first element of the link, so even more confusion arises.
If I were you, I'd also simply add an aria-label if you need that link to be read, too. And if the span is not needed and is only for decoration purposes, hide it from JAWS' view, otherwise you also will get some hard-to-notice troubles. After that, if you hear "Ask Question" twice on that link, hide the div with the image, you don't need it anymore (this last point is to be discussed, needs to be tested more thoroughly):
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question">
<span class="icon icon--signs" aria-hidden="true"></span>
<div class="imghoveropacity" aria-hidden="true">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
I'm trying to parse a html code for specific content, but the problem I'm running into is that certain websites require you to click a "Show more" button.
When I grab the URL there's no way to tell it I want the full code with the "Show more" button clicked. Is there a way to grab the full source code of the page, because it keeps getting cut off after a point.
Example website: https://play.google.com/store/search?q=fm%20radio&c=apps&hl=en
The source code gets cut off at the "Radio hungary" app, which is the last app that loads automatically.
This even happens when I load everything and then try to view the pages source code.
It ends in:
style="display:none"> Show More </button> <div class="bottom-loading" style="display:none"></div> <div class="footer"> <div class="footer-links-container"> <span class="copyright"> ©2016 Google</span> <a class="footer-link id-no-nav" href="https://play.google.com/intl/en_us/about/play-terms.html" target="_blank"> Site Terms of Service</a> <a class="footer-link id-no-nav" href="http://www.google.com/intl/en_us/policies/privacy/" target="_blank"> Privacy Policy</a> <a class="footer-link id-no-nav" href="http://developer.android.com/index.html" target="_blank"> Developers</a> <a class="footer-link id-no-nav" href="https://play.google.com/artists" target="_blank"> Artists</a> <a class="footer-link id-no-nav" href="https://support.google.com/googleplay/?p=about_play" target="_blank"> About Google</a> </div> </div> </div></div><div class="loading" jscontroller="EgJAl" jsaction="rcuQ6b:rcuQ6b" id="page-load-indicator"></div><div id="instrument-manager-parent"></div><script src="https://wallet.google.com/inapp/lib/buy.js"></script><script
Even if I click the show more button.
The purpose of this is to grab all the URL's of the images, and I can't do this by hand because well.. we have thousands of images.
I believe if you just take advantage of the Javascript HTML DOM methods you can accomplish what you want to achieve.
This will help: http://www.w3schools.com/js/js_htmldom_methods.asp
By using this, you can target specific elements/ids/classes and pull or modify the information you want.
Jquery will also help you a lot with this.
You can solve it using Javascript dom,steps to do are
keep your content in a div element
set its default height as a fixed value
on clicking the show more link execute a javascript function to make the div element height to auto
in this way you can show content excerpt with javascript
If you go for server side, you can create a new page for showing the content.
My website: cultpops.com
I'm trying to get the top left logo on my site to link to the 'about' portion on my page. As per another stackoverflow topic, I placed [a href="#about"][/a] around said logo and [a id="about"][/a] around said portion. What am I missing here?
I see you really put [a id=”about”] in your code. This is not an html tag. html tags always are like this <htmltag> and not with square brackets
If you want to link to an anchor you just need to give an id to the html element you want (doesn't have to be an <a> tag).
The easiest way to do this is for example on the image above your about section.
Set your editor to text instead of visual and add an id to your image or the a tag around it. It will look like this.
<a href="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" id="about">
<img class="alignnone size-full wp-image-97" src="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" alt="logo2" width="97" height="133">
</a>
Place the following around the "img src="example.com/image.png" tag:
<a href="http://example.com/youraboutpage">
<img src="example.com/image.png">
</a>
I can see you are using wordpress -the logo image tag is in your header.php file available in Appearance>Editor
Hope this helps
Admin Alex
I want to extract link of an image but only in case if this picture does not contain word "thumb" in its name.
<a title="" rev="http://insales.ru/images/ large.jpeg" href="http://insales.ru/images/T001.jpeg" class="TestClass">
<img src="http://insales.ru/images/thumb.jpeg" class="productimage">
</a>
So I want to extract "http://insales.ru/images/thumb.jpeg" line from <img> tag if only picture name does not have "thumb" keyword.
I am trying to do like that:
//a[#class='TestClass']//img[not(contains(#src, 'thumb'))]
Not working. Because I am loosing data from <a> now.
Sometimes I extract links directly from <a> tag. From rev or href. But sometimes from <img> child of <a>.
How to specify xpath that will allow to extract links from parent or its child. But there is a condition for child.
In details:
I am parsing data from online store. To be specific I am trying to get images of a product. The code I provided represents one image of a product. I need only big version of picture. Not small thumbnail picture. The problem is that sometimes link to big picture presented in rev attribute of <a> tag. Sometimes it is presented in src attribute of <img> tag.
Case 1 (link I need presented in <a> tag and rev attribute
<li class='product-item'>
<a title="" rev="http://insales.ru/images/ large.jpeg" href="http://insales.ru/images/T001.jpeg" class="MagicThumb-swap">
<img src="http://insales.ru/images/thumb_T001" class="productimage" title=" Tissot">
</a>
</li>
In that case I need to extract http://insales.ru/images/large.jpeg line. I dont need http://insales.ru/images/thumb_T001 that is in <img> tag.
Case 2 (link I need presented in <img> tag and src attribute)
<div class='item'>
<a title="" id="Zoomer" class="MagicZoomPlus jqzoom modal" href="http:// insales.ru/images/thumbi14.jpg" >
<img src="http://insales.ru/images/large_i14.jpg" title="Orient” class="productimage">
</a>
</div>
In this second case I need to extract http://insales.ru/images/large_i14.jpg line. And I dont need http:// insales.ru/images/thumbi14.jpg that is in <a> tag.
I know how to extract link in each of these two cases. But I don’t know how to make universal xpath that will allow getting links to big pictures in both scenarios. Thata why i am trying to make a condition based on picture name in link. If there is a 'thumb' keyword in link im trying to filter it out.
If I have understood correctly now, the correct path expression is
//a/#rev[not(contains(.,'thumb'))] | //img/#src[not(contains(.,'thumb'))]
where | is the union operator that combines sets of nodes.
Assuming an input document like
<html>
<li class='product-item'>
<a title="" rev="http://insales.ru/images/ large.jpeg" href="http://insales.ru/images/T001.jpeg" class="MagicThumb-swap">
<img src="http://insales.ru/images/thumb_T001" class="productimage" title=" Tissot"/>
</a>
</li>
<div class='item'>
<a title="" id="Zoomer" class="MagicZoomPlus jqzoom modal" href="http:// insales.ru/images/thumbi14.jpg" >
<img src="http://insales.ru/images/large_i14.jpg" title="Orient" class="productimage"/>
</a>
</div>
</html>
the result will be (individual results separated by -----------):
rev="http://insales.ru/images/ large.jpeg"
-----------------------
src="http://insales.ru/images/large_i14.jpg"
And in case you need to include the class attribute of a:
//a[#class='TestClass']/#rev[not(contains(.,'thumb'))] | //a[#class='TestClass']/img/#src[not(contains(.,'thumb'))]
However, you did not mention that in your "detailed" description.
I'm trying to get a table cell that is one big href to contain two things - an icon that opens a popup (at location A), and some text that follows the cell's href (to location B). However I can't quite get it working.
Here's the HTML I have that only works for the icon/popup:
<table><tr><td>
<a href="http://www.google.com>
<span>
<a onclick="window.open('http://www.yahoo.com', location=no,scrollbars=no,menubar=no,toolbar=no,status=no,resizable=yes')">
<img src="smiley.png" />
</a>
</span>
Go to Google
</a>
</td></tr></table>
This works fine for clicking on the smiley icon and opening the yahoo popup, but clicking on "Go to Google" doesn't do anything.
Here's the HTML I have that works for following the href:
<table><tr><td>
<a href="http://www.google.com>
<img src="smiley.png" />
Go to Google
</a>
</td></tr></table>
This follows the href no matter what I click on in the cell (which makes sense, there's only one href).
I also tried this, but clicking on the icon would both open the popup and follow the href:
<table><tr><td>
<a href="http://www.google.com>
<img src="smiley.png" onclick="window.open('http://www.yahoo.com', location=no,scrollbars=no,menubar=no,toolbar=no,status=no,resizable=yes')"/>
Go to Google
</a>
</td></tr></table>
Any help?
You can't just have a link contain another link. Have two links, but separated. Use CSS to make them fill the cell if you have to.