CODEWITHSUNDEEP
htmlaccessibilitysingle-page-applicationw3c
chatoo2412
chatoo2412

Reputation: 128

Blurring navigation links on click and web accessibility

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

Upvotes: 2

Views: 1535

Answers (3)

AlastairC
AlastairC

Reputation: 3297

I'm not clear what you mean by blur in this context, but in an SPA keyboard focus-management is a requirement.

Simply applying an on-blur to links when clicked could be quite harmful as screenreaders may send an onclick JS event when selecting a link.

For both visual keyboard users and screenreader users, when a link is selected and the content updated by JS, the focus (as in JS .focus() ) should be moved to the top of the new content. That content element may need tabindex="-1" in order to make it focusable.

For example, if you have a main content area that is updated with new content when a link is selected, move the focus to the top of the new content when it has loaded.

If you are also having an issue with focus outlines onclick, the best option is to remove any CSS which changes the outline due to :focus. See my article Fixing outlines on click for that and an another option.

See also this answer to the general issues for SPAs.

Upvotes: 4

Mnf Gl
Mnf Gl

Reputation: 87

The question is not clear, so i am responding based on what I understood;

If you want to inform users about the change on page, you need to use ARIA tags such as live regions etc. Using css effects will not have effect on screen readers. Thus, you need a method to inform screen reader that certain part of the page has been updated.

Upvotes: 0

Adam
Adam

Reputation: 18855

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

Upvotes: 1

Related Questions