Accessibility tabbing and enter through link on a span element-CodePudding

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  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.

CodePudding user response：

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>.)

CodePudding user response：

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?