I've got a basic contact form (not currently "live"; it won't actually submit), which has a small area of the page as a description of "how to contact us". In this section, I reference the contact form as "The contact form on the right", but on mobile devices the contact form is below, so I have 2 span
s that are hidden/shown based on the size of the screen. If you shrink the screen, the text will change to "The contact form below" and provide a link to the contact form element.
How do I mark this up correctly, namely for users who are using a screenreader/SEO? I am aware that I could simply change the text to "The contact form on this page", but I also provide a link to the contact form for mobile users, meaning it should also add to the usability. If my idea of 2 different pieces of text in span
s is absurd and I should just use a single "on this page" type option, I will accept that as an answer, but I would like to look in to the mixed option.