Span Inside Anchor or Anchor Inside Span or Doesn't Matter

Why I have space between anchor tag and span inside

The issue is in your code, elementMyAccountText class have position: absolute;.

If you want to display TEXT in left align with the center of the box then You can use display: flex to the ul and li and align-items: center; to the li.

If you want full box clickable then

Remove height from elementMyAccount class and add below code

ul li a{
width: 100%;
display: block;
padding: 20px 0;
}

.listElementMyAccount {  margin-top: 50px;}
.listElementMyAccount ul { margin-left: -8px; display: flex;}
.elementMyAccount { border-radius: 7px; border: 1px solid black; height: 60px; width: 240px; margin-left: 8px; margin-top: 8px; display: flex; align-items: center;}

/*.elementMyAccountText{ font-size: 15px; position: absolute; margin-left : 5px; line-height:60px; width:240px; height:60px;
}*/
.elementMyAccountImg { margin-left: 5px; opacity: 0.75; margin-right: 10px; vertical-align: middle;}
.adressDescription { display: block; position: absolute; font-size: 11px; text-decoration: none; line-height: 15px; display: block;}
<div class="listElementMyAccount">  <ul>
<li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT1 </a> </li> <li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT2 </a> </li> <li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT3 </a> </li> <li class="elementMyAccount"> <a href="" class="elementMyAccountText"> TEXT4 <span class="adressDescription" >(text4)</span> </a> </li>
</ul>

</div>

Is a span tag with a href attribute considered valid?

Well, that is pretty clear…

But if you want it to behave like a link, you can wrap it in an anchor tag, such as

<a href="http://www.example.com"><span>My span is a link !</span></a>

Absolute anchor tag vs anchor tag with absolute span

From an accessibility perspective, the main difference I could pick up between using an absolute anchor tag versus using an absolute span tag is the visible focus rectangle that appears when either element has focus.

For the absolute anchor card, the visible focus rectangle covers the entire card:
Card using absolute link styling

For the absolute span card, the visible focus rectangle doesn't appear (Chrome), or is very small (Firefox):
Card using absolute span styling

It's a requirement to have a visible focus rectangle for an element that has focus in order to satisfy WCAG 2 (see guideline 2.4.7: Focus Visible).

I tested both card examples with JAWS 2022 and it correctly announced the link in either case.

On a side note, the colour contrast ratio of the blue link text against the green background is too low to satisfy WCAG 2, so you'll need to increase the contrast ratio to at least 4.5:1 to make it accessible. I'm sure it's just that way right now for the example but thought it's worth a mention since you're asking about accessibility.

Remove underline on span in anchor tag

You need to add display:inline-block to span

.link {  text-decoration: none;}
.link:hover { text-decoration: underline;}
.link:hover .inside-text{ text-decoration: none; display:inline-block;}
<a href="#" class="link">Hi <span class="inside-text">there</span> dude.</a>

Add span inside anchor output using PHP's ob_get_contents function

try,

wp_logout_url ( string $redirect = '' ) function instead of wp_loginout('index.php')

example,

    ob_start();
wp_logout_url('index.php');
$logoutlink= ob_get_contents();
ob_end_clean();

$items .= '<a href="'.$logoutlink.'"'><span></span></a>;

use is_user_logged_in() to check weather user logged in or not.

ob_start();
if (is_user_logged_in()) {
wp_logout_url('index.php');
} else {
site_url('index.php')
}


Related Topics



Leave a reply



Submit