About This HTML Issue
A link (an <a> with an href) has an aria-selected attribute but no role that supports it.
aria-selected only means something on roles such as tab, option, row and gridcell. A link has the link role, which has no selected state, so the attribute has no defined meaning there. The message lists aria-checked next to role, but role is the one that matters: adding aria-checked only changes the error to one that asks for role. Without an href, the message also asks for href.
Often aria-selected is there to mark the current page in a navigation menu. That job belongs to aria-current="page", which works on plain links and needs no role. Put it on the link to the page the user is on, and leave it off the others.
If the links really are tabs that switch between panels on the same page, give each one role="tab", put them inside an element with role="tablist", and point each tab at a role="tabpanel" element. The validator checks those parts too. Tabs also need scripted keyboard support, as the WAI-ARIA tabs pattern describes.
Invalid example
<nav aria-label="Main">
<ul>
<li><a href="/" aria-selected="true">Home</a></li>
<li><a href="/blog/" aria-selected="false">Blog</a></li>
</ul>
</nav>
Valid example
Navigation links mark the current page with aria-current:
<nav aria-label="Main">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>
Links that work as tabs get the tab roles:
<div role="tablist" aria-label="Account">
<a href="#profile" role="tab" id="tab-profile" aria-controls="profile" aria-selected="true">Profile</a>
<a href="#billing" role="tab" id="tab-billing" aria-controls="billing" aria-selected="false" tabindex="-1">Billing</a>
</div>
<div id="profile" role="tabpanel" aria-labelledby="tab-profile">Profile settings</div>
<div id="billing" role="tabpanel" aria-labelledby="tab-billing" hidden>Billing settings</div>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.