I have three anchor tags, one with text inside and two with images with valid alt text. The anchor tag with text inside works fine with JAWS and is read properly. However, for some reason, with the anchors with the image inside, a tabIndex of -1 is being applied, which means they are being skipped over.
This is being tested in IE 9. Is there any reason why this should be occurring? Is there a way to prevent it?
I had a similar issue with JAWS setting the tabindex of links to -1. This was with IE9 with JAWS 14.0
The problem ended up being caused by a setting in JAWS under "Web / HTML / PDFs" -> "Links" called "Filter Consecutive Duplicate Links". JAWS describes the feature as follows:
This option controls whether consecutive links that point to the same location, one graphical and one text, are filtered. When selected, only the text link is announced. This check box is selected by default.
For example, let's say you have a icon / text link pair that both do the same thing:
<a href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
With the setting checked JAWS will remove the image from the tab order leaving only the text link like this:
<a tabindex="-1" href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
From my experience and some basic tests I believe this only applies when an image link is followed by a duplicate text link and not vice versa. Also it applies to any duplicate image link following the image / text pair.
The problem I ran into was that JAWS only seemed to compare the href attribute and did not take into account other attributes such as onclick or onkeydown. Pair this up with the duplicate removal applying to any image links following the initial image / text link pair and you can end up with a case where the an image link following a image/ text link pair gets when it should not. Example:
<a href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
<a href='javascript:void(0)' onclick="dontTest();">
<img src="untitled2.png" title="Test" alt="Test">
</a>
Result:
<a tabindex="-1" href="javascript:void(0)" onclick="test();">
<img src="untitled.png" title="Test" alt="Test">
</a>
TEST
<a tabindex="-1" href='javascript:void(0)' onclick="dontTest();">
<img src="untitled2.png" title="Test" alt="Test">
</a>
Note: the fact that the href is set to javascript:void(0) is purely coincidental. This behavior should be reproducible using any value for the href as long as the value is the same for all the links.
Hope this helps someone.
JAWS automatically add tabindex="-1" to anchor tags which have href="javascript:void(0)". I used href="#" to solve the same problem as yours.
Related
According to the documentation of F6 we can use the accordion container with something else than a ul tag. Or, I can't get it to work with an article tag.
The problem seems to be caused by the fact that .accordion-title isn't the direct child of .accordion-item. Unfortunately, in my use case, I need to wrap the a tag with the .accordion-title class inside an heading tag.
Does anyone would know how to solve that issue?
Thanks,
Here's an example of my use case :
<div class="accordion" enter code here
data-multi-expand="true"
data-allow-all-closed="true"
data-accordion>
<article class="accordion-item" data-accordion-item>
<header>
<h3>
Group Name
</h3>
</header>
<div class="accordion-content" data-tab-content>
<p>Hello World</p>
</div>
</article>
</div>
As you figured out, it doesn't have to do with the <article> tag but rather that a direct child click trigger is needed.
Example of it working with <article>
https://codepen.io/rafibomb/pen/pGKZYg
Without JS modification, it may not work the way you want it to.
Is it possible to open a Foundation 6.3 accordion menu from a regular href link on the same page? I'm using the most current Foundation v6.3.1 and have found some info on doing this but nothing that works in my case.
This post seems to have an ideal solution (Trigger opening of a Zurb Foundation Accordion via URL hash link) but it doesn't seem to jell with the latest release?
Yep, there are some alternative methods and the exact way it's applied is up to what you want to achieve, but basically the answer is: "use JavaScript".
This is my method:
Add a means of identifying the CONTENT of each tab you want to open. Below I have added a new data attribute (data-remote) to .accordion-content.
Create a link that has an id that corresponds to the new data-remote on the tab you want to open with that link. e.g. id="toggleAco1" & data-remote="toggleAco1"
Use the in-built Foundation function to toggle the tab on click (see JS/JQ below)
So all together it is something like this:
HTML
<div class="block">
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content data-remote="toggleAco1">
<p>Panel 1. Lorem ipsum dolor</p>
Nowhere to Go
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content data-remote="toggleAco2">
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content data-remote="toggleAco3">
Pick a date!
<input type="date"></input>
</div>
</li>
</ul>
</div>
<div class="block">
Open accordion tab 1
Open accordion tab 2
Open accordion tab 3
</div>
JS/JQ
$('a').on('click', function() {
var dataTarget = $(this).attr('id');
$('.accordion').foundation('toggle', $('[data-remote="' + dataTarget + '"]'));
});
A simple JSFiddle example
The advanced options from the docs
N.B. What the links will do is linked to the data attributes you include and the same as if you clicked the accordion title for a tab. So if you allow multi-opening then the links will open each and leave it open, if you don't (as in the e.g.) then they will close once a new one is open etc.
I use photobucket to host my imagery for my ebay ads when I sell things, so I copy the html out of photobucket into notepad, and I'm always left the <img> tag being wrapped in photobucket's <a> tag, and I have to go through each line and manually delete each <a></a>, which on 26 lines across multiple items can soon equate too hundreds of "highlight and delete" actions.
I already do a search for the closing tag </a> and just do a "replace" with nothing, thus removing it, but the string I cannot fathom to remove, due to the image file name being different on every line is as the following example demonstrates:
So it's essentially the section of the anchor tag up to and including the > I need to be able to remove on a mass scale - Any help would be greatly appreciated!
<img src="http://i1297.photobucket.com/albums/ag35/eye/Programmes/Yes%20joblot/DSC02424c_zpslt9m0cuu.jpg" border="0" alt=" photo DSC05653_zpslt9m0cuu.jpg"/>
<img src="http://i1297.photobucket.com/albums/ag35/eye/Programmes/Yes%20joblot/DSC04444_zpspkgjw6vf.jpg" border="0" alt=" photo DSC05654_zpspkgjw6vf.jpg"/>
<img src="http://i1297.photobucket.com/albums/ag35/eye/Programmes/Yes%20joblot/DSC05655_zpsxuev7czs.jpg" border="0" alt=" photo DSC05655_zpsxuev7czs.jpg"/>
<img src="http://i1297.photobucket.com/albums/ag35/eye/Programmes/Yes%20joblot/DSC06624_zpsifjidypy.jpg" border="0" alt=" photo DSC05656_zpsifjidypy.jpg"/>
<img src="http://i1297.photobucket.com/albums/ag35/eye/Programmes/Yes%20joblot/DSC07777_zpsacyjrnnr.jpg" border="0" alt=" photo DSC05663_zpsacyjrnnr.jpg"/>
<a href="[^"]+?" target="_blank">
would do what you want, or even more general:
<a href=[^>]+?>
So I'm in a situation that requires parsing raw HTML data as a string, this is unavoidable unfortunately otherwise I wouldn't post this. I only need regex to match the class of a div that has an img tag as a child.
So this is the code example that I'm dealing with:
<div class="summary">
<h3>Example</h3>
<div class="explanation">
<span>This serves as an example for the site.</span>
</div>
<div class="user-details">
mheathershaw<br>
<img src="res/badge522.png"/> <span class="score">522</span>
</div>
<div class="help">
Help
</div>
</div>
And the div that I'd like to retrieve the class from is the div that contains the image. The exact capture from this example that I'd like (optimally) is user-details. The criteria for capturing it is simply if it has <img ... /> as a child.
Anyone able to help? Thanks!
You may try this,
/<div\b[^>]*\bclass="([^"]*)"[^>]*>(?:(?!<\/div>)[\s\S])*?<img\b[^>]*>(?:(?!<\/div>)[\s\S])*?<\/div>/
DEMO
I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.