0

So I have an image of a flowchart and have created a written narrative of the image separate from the flowchart. I plan to hide the text off-screen for a screen reader using something like the following code:

.hidden{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

My question is, if there are anchor links within the text, how will this affect (1) the user with the screen reader (will they be able to jump around within the text with those links), and (2) will the presence of these links cause the visible portion of the document to behave erratically for other users who will only see the image and be unaware of the written narrative?

Please note that I am not very technically savvy. I know just enough to mess things up pretty well.

Jeff West
  • 1
  • 1

1 Answers1

0

You shouldn't use the off-screen method for screen reader only text. You should be using "clip." Please read this page for details on properly formatting text for screen readers only: https://webaim.org/techniques/css/invisiblecontent/

There should be a "Title" attribute to every link, including anchor links. For example: 

<a title="learn more about widgets" href="my-widgets">Widgets</a>
You should also consider learning more about Aria Attributes: https://webaim.org/techniques/aria/
Lisa Baird
  • 33
  • 7
  • I should also note that this is NOT for a webpage. This would be for a standardized test, delivered using HTML. The addition of the written narrative would provide too much information for a sighted user, but the flowchart itself would be an image that would not work for a non-sighted user. – Jeff West Jun 23 '20 at 18:14