I have a question about web accessibility. In the case of SPA(single page app), blurring navigation links on click is proper or not?
Proper: Replacing contents via AJAX in SPA is same as moving page in traditional web page. In other words, the context of page is changed, therefore, the navigation links SHOULD be blurred when they are clicked.
Improper: You know the reasons. Removal of the focus ring leads to serious accessibility issues for users who navigate and interact with interactive content using the keyboard, as W3C and WHATWG said.
Then, what do you think? Which one is proper?
One more, this is not about the focus ring or the visual effect. Only what I concerned about is the "meaning".
It depends on the context.
If you have a link "next page" and the link stays there, you can just notify the user with an aria-live region that the main content has been modified. And the user expects one other click to go to the "next page" again without having to scroll down to the same link.
If the link itself disappears and was part of the old content, yes of course, you this.blur() it if necessary, as if the page were normally changed.
If this is a navigation link to go to a specific page, then the user has no reason to click again on it, then you can induce a normal page change and this.blur() this link.
Note: I used the this.blur() verb because "blurring" was really blurring my mind, but you can use any javascript alternative like focusing on other part of the page