As the page reloads that is classed as navigation (even if it is the same page with a parameter) so it should be a hyperlink.
Now as for disabling a hyperlink and the associated problems with that, why not just change the element depending on what page you are on?
If you are able just change it to a paragraph with the same styling as a disabled button and add some visually hidden text to say "currently selected".
<p>All Content<span class="visually-hidden">(Currently Selected)</span></p>
If you can't change the element type then I would say just let the page reload if you can and it won't affect things, whatever we do to work around the problem is probably going to be less accessible.
If it will affect things reloading the page and you can't change the item from a hyperlink then maybe you could use e.preventDefault() and then add an accessible notification of "you are already on this page".
Your final option would be to redesign the page to not require the refresh and instead load the data via AJAX. There are loads of accessibility considerations there but at least then <button> elements make sense and the experience will probably be better for everyone.
Rough example, current page is "all content" at the moment.
The only thing to add to the above explanation is the use of an <ul> to let screen reader users know there are 2 items.
Please note:
I have followed your example of underline for active and non-underline for inactive.
In reality you might want to adjust this so that the "current" indicator is to the side instead of underneath, just to avoid confusion as hyperlinks are normally the underlined ones.
A minor point but just something to consider if the design allows.
li{
display: inline-block;
padding: 20px;
}
li p{
text-decoration: underline;
}
li a{
text-decoration: none;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<ul>
<li><p>All Content<span class="visually-hidden">(Currently Selected)</span></p></li>
<li><a href="/?personalized=true">Personalised Content</a></li>
</ul>
