so as the title says. Maybe this is just not possible the way I have it structured, but I want to make sure this works for accessibility. I have a grid of logo images that are positioned in a styled span. The logo has a link to that company's website. I can tab through the individual items by adding tabindex="0" but I cannot hit enter or space to trigger link to be visited. What am I missing here? If I change the <span> to a <button> it works but that seems sloppy to me?
Here is how my code is structured:
<span class="grid_item" role="link" tabindex="0">
<a href="<?= $url ?>" aria-label="Go to <?= $logo_title ?> website" tabindex="0">
<img alt="<?= $logo_title ?>" src="<?= $image['url'] ?>">
</a>
</span>
I've tried changing the span to a <div> and a <ul> with line items but still all same issue with no click through. I would love any input on this, to not only solve this but also for me to have a better understanding of the way accessibility works.
Usually you can create an accessible solution using all native HTML and not need tabindex or any ARIA attributes. In fact, the first rule of ARIA use is to not use ARIA.
In your original code, having a tabindex="0" on the <span> and having a nested <a> will cause two tab stops. And it will be even more confusing because both tab stops will announce the element as a "link" - the <span> has role="link" and the <a> is natively a link.
Keep it simple. You shouldn't need any accessibility related attributes on the <span>. Just let the span be the container for the link and do whatever styling you want to do (remove tabindex and role). Then let the <a> do its thing and be a native tab stop and natively allow the enter to trigger it. (space is not natively supported on a <a>.)
Ok so I think I resolved this. I am not sure if this is the correct way, but I wrapped the entire span in the <a> tag. Is this semantic?
Related
What is wrong with my code here, when I click on the ending tag in this bit of html it doesnt light up as having a partner. I think its probably related to the PHP in the code but I am not sure. The link does work in safari and chrome but has trouble in other browsers. Please let me know what you think
<td class="stat">
<a data-ajax="false" href="following.php?id=<?php echo $row['id_user']?>">
<div class="statnum"><?php echo $row2['COUNT(username)']?></div>
<div class="statlabel">FOLLOWING</div>
</a>
In HTML 4.x, an <a> element cannot contain a <div> element.
This changed in HTML 5, but:
Some browsers have issues with it, especially if you do not explicitly set display: block on the <a>
Your editor's syntax highlighter may not have caught up with that change
Having trouble with jQuery $('#tabs').tabs(); As seen here JSFIDDLE the content that contains an external php file
<li class="files">
Compose Message
</li>
is constantly being shown even when other tabs are hovered upon.I want to eventually change all the anchor tags and link them to other php files. I would like to understand why this fixed content is so and how to eliminate this problem as well as an other tips one may have. I'd greatly appreciate it.
Replace
event:'mouseover'
With
event:'click'
Demo - http://jsfiddle.net/qTXnN/5/
Update
Thats because <a href="msg_inbox.php"> should be <a href="#one">
I know this code isn't correct, but I would like to inject the HTML and PHP into the title of the below tag.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
I am using a jQuery tooltip plugin (http://flowplayer.org/tools/tooltip/index.html) that grabs content from the title tag and displays it as the tooltip content. I have Advanced Custom Fields setup (WordPress plugin) that allows me to publish custom field content. In effect, the content I post in these custom fields will end up in the tooltip.
My goal is to produce a tooltip when the user hovers over "Related Articles", that displays a link that is clickable. Again, the above jQuery tooltip plugin grabs the content from the title, which is why this is causing difficulty
Ok, as we understand what you are trying to do. Lets get some things clear.
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>"Related Articles</p>
Is SO wrong on so many levels. First of all things, its not valid in any way. Second of all, you are not ending your <a>. You are also missing one echo and target="", inside title="" was not escaped: target=\"\".
So in a nutshell to straight up answer your question, this maybe will work (maybe, because its seriously uncommon and nonstandard)
<p class="related_articles" title="<?php echo the_field(related_articles_1_title); ?>">Related Articles</p>
Also, as one of the users already mentioned. If your server server enables short open tags, then you could make the <?php echo $foo; ?> shorter: <?= $foo ?>. So in your codes case it would look like:
<p class="related_articles" title="<?= the_field(related_articles_1_title) ?>">Related Articles</p>
However, as probably mentioned already. This is not recommended method and may produce all sort of issues. I recommend to research for a better solution.
Use the short form if your server supports it:
<?=the_field(related_articles_1_link)?>
or else, you should echo it:
<?php echo the_field(related_articles_1_link); ?>
<p class="related_articles" title="<?php echo htmlspecialchars(''. the_field(related_articles_1_title) .''); ?>">Related Articles</p>
While this should work, I am not sure if your mentioned jQuery plugin is able to interpret the given html in a title attribute as HTML (you need to test it). Most likely this will be interpreted as text and all tags will be visible to the end user, but this is not what you want.
I found an example of how to implement this in a different manner: http://flowplayer.org/tools/demos/tooltip/any-html.html
Is it possible that this is what you want?
<p class="related_articles">
Related Articles:
<a href="<?php echo the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
</p>
Now that you've clarified that your question was regarding the jQuery Tooltip plugin, you should do the following:
<p class="related_articles">Related Articles</p>
<a class="tooltip" href="<?php the_field(related_articles_1_link); ?>" target="_blank">
<?php echo the_field(related_articles_1_title); ?>
</a>
Javascript:
$('.related_articles').tooltip();
The reason this works:
The tooltip plugin looks at the element right after the one which .tooltip() was applied to. If that next element has a class name of tooltip, it'll use that as the contents of the tooltip (instead of the title attribute).
Given that you are placing html content inside an HTML property it should be escaped. As mentioned by #Karolis do this:
<p class="related_articles" title="<?php echo htmlentities(''.the_field(related_articles_1_title).''); ?>">Related Articles</p>
This should generate a tooltip with the link in it. If you see stuff like "& lt;a href="... & gt;" on the tooltip then the plugin is not unescaping html values. You could unescape the values but unfortunately javascript has no function. For this you can check out php.js
which provides php's functions in js but that seems kinda overkill. You could instead replace the troublesome characters like this:
<?php
// Generate complete tootltip content
$tootltipContent = ''.the_field(related_articles_link_1).'';
// Search for these
$search = array('<','>','"');
// And replace them with these
$replacements = array('##','##','\"');
$tooltipContent = str_replace($search,$replacements,$tooltipContent);
?>
<p class="related_articles" title="<?php echo $tooltipContent; ?>">Related Stuff</p>
Then look for the line in the plugin where the title is extracted from the element. (tip: on the plugin source code do a search for 'title'. There should be one place where the value is being extracted) It may look something like this tooltipContent = $(someVar).attr('title'); Now run the inverse replacement in js:
tooltipContent = tooltipContent.replace('##','<').replace('##','>').replace('\"','"');
I have a navigation on my page with elements, about us, what we do, clients, contact us and so on..... all these are images only. not text. i can recognize which page is selected based on the value of $selected. When $selected==about, then i want the default image of about us to be something like about_selected.png and likewise for everything else. how can i achieve this? i tried javascript but could no get it right. here is a sample code from my page:
<a href="about.php" class="<?php if($selected =="about"){echo 'selected';}?>" onmouseover="document.about.src='images/About_over.png'" onmouseout="document.about.src='images/About.png'" ><img src="images/About.png" alt="about us" name="about" /></a></li>
<li><a href="we_do.php" class="<?php if($selected =="do"){echo 'selected';}?>" onmouseover="document.wedo.src='images/Wedo_over.png'" onmouseout="document.wedo.src='images/Wedo.png'" ><img src="images/Wedo.png" alt="what we do" name="wedo"/></a></li>
The solution is in your own code.
<img src="images/About<?php if($selected =="about"){echo '_selected';}?>.png"
You might want to consider CSS for these mouseover effects instead of the inline JavaScript you are using here. A List Apart has some useful information on that.
The 'selected' class can be used to trigger a third 'active' state on the background image. I do suggest that you put a text in between the tags to make sure search engines can index your navigation. You can use CSS again to make the actual text not visible (negative text-indent usually is the way to go)
i need to open a div (or somethings other, dunno what) when mouse go on a link. But this div doesnt move other div. It must open OVER the others div (like this website...when there are the "popup/error" div over others div. How can do it? Transparent? Or somethings like it?
for example, if i write somethings into title field in a link statement, there is a small windows that show to me what i wrote. somethings like it, but with a div, or somethings other when i can put text, image, ecc.
as another example, on facebook when i go on the main wall and i go with mouse on the name of the users, it show me a small windows with more details. the same when i open the chat box :)
code :
<div class="playerDetailsOff">
Name : Marco<br />
Surname : Daghine
</div>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id1?>');return false" onmouseout="viewPlayerOff();return false">link 1</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id2?>');return false" onmouseout="viewPlayerOff();return false">link 2</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id3?>');return false" onmouseout="viewPlayerOff();return false">link 3</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id4?>');return false" onmouseout="viewPlayerOff();return false">link 4</a>
function viewPlayerOn(val) {
$('.playerDetailsOff').removeClass().addClass('playerDetailsOn');
}
function viewPlayerOff() {
$('.playerDetailsOn').removeClass().addClass('playerDetailsOff');
}
.playerDetailsOn{width:200px; height:100px; position:fixed;}
.playerDetailsOff{display:none;}
Basically what you want is an overlay or a lightbox (both terms are easy to google). Just as Felix Kling pointed out you will want absolute positioning - or you can look at z-index (highest z-index is on top).
Just to make it easy on you there was a similar question with example code which should definitely get you started: jQuery - How Do I Place a DIV On Overlay?
You want overLIB. Check out their homepage to see features and documentation.
Regards, Alin
You can use this one: http://www.leigeber.com/2008/06/javascript-tooltip/. It is a lightweight javascript if you don't want to use JQuery.