Accessibility problem

Hello, I am working on accessibility with screen readers on my portfolio website. I read about managing focus on this google developers article . It says to give the target element, of an internal link, a focus by calling its focus method. I am doing the same but looks like it isn’t working.
Link to my portfolio website

The google article you linked to was referring to a single page application in which not all of the content is visible at one time and thus when you click on an internal link new content appears. In that case you would definitely need to set the focus on the new content.

But your portfolio page is just one big long page and all of the content is there, so you don’t need to worry about managing focus on internal links.

If you know how to use a screen reader I have put together a very simple page to demonstrate that screen readers will automatically handle internal links properly:

http://kittenandflowerguy.epizy.com/test.html

There is no JS being used on this page. Both NVDA and JAWS jump to the anchored section and begin reading the content. Using the Tab key after the jump sends focus to the appropriate element. Again, this is one big page with all the content showing. If I were hiding sections and then making them appear when you clicked an internal link for them then I would have to actively manage the focus.

No, I don’t know how they work but do use chromevox for accessibility check.

Yes, you are right. The focus does goes, but on the heading not on the whole section. The vox reader just spells out the heading and rest of the content in that section is left unspoken like p elements (except links and button).

Not all screen readers behave exactly the same way so some will read only the heading while others will read the heading and then start reading the rest of the content below the heading. But the main point is that they all handle the internal links automatically so there is nothing extra you need to do to make this work.

1 Like