Accessibility for disabled attributes in html using tab-index

Question

Hi I am having issues to handle the tab-index for disabled elements as we cannot able to focus elements, screen reader tools is not announcing the elements and skipping directly.

Example:

I do have dashboard having function to view username and email id to user but not give access to update until they press update button.

In these scenario html tag have disable attribute handled it is not focus-able and skipping to update button.

Expectation:

user should able to focus or screen reader should able to access the disable attributes using aria-label.

Answer 1

It's a normal behavior for disabled form fields not to be focusable nor traversed at all when navigating with the tab key. You shouldn't try to change this.

If it makes sense that the field be focused even if it is unmodifiable, better is to set it read only rather than disabled. It's the correct way to go for elements that the user is likely going to copy to the clipboard, for example.

IN that later case, it's also a good practice to select the entire text directly on focus.