Any accessability importance to link fragment's target IDs?

Question

Ive made some tabs that work with javascript and now im trying to think about improving accessibility.

This was my first solution. With no javascript all content is visible on the page:

<ul>
 <li>Contact us</li>
 <li>Find us</li>
</ul>

<h2>Contact us</h2>
<p>Text about how to contact us</p>

<h2>Find us</h2>
<p>Text about how to find us</p>

The list items have no meaning without the javascrit so ive added link fragments:

<ul>
 <li>
  <a href="#one">Contact us</a>
 </li>
 <li>
  <a href="#two">Find us</a>
 </li>

<h2 id="one">Contact us</h2>
<p>Text about how to contact us</p>

<h2 id="two">Find us</h2>
<p>Text about how to find us</p>

Does it matter that the ID of the link fragment's target has no semantic meaning? Are there any other accessibility / usability issues with my code?

Answer 1

A) In HTML5 you could distinguish between those two unrelated areas with a <section> tag, which can include its own <h1> tag for better grouping and semanticness (is this a word ?)..

B) As far as id are concerned, i do not believe it is SEO relevant, but you might want to make them more semantic for maintainability reasons..

Also (not sure if it was an oversight in the question) but when linking inside the pages you should use hashes in the links # so that

1. the browser will scroll you to the right place once you click
2. the search engines and browsers will not follow the link and try to find a page/folder with that name.

C) You could also improve the link group by defining it as a navigation area (use of the <nav> tag)

<nav>
    <ul>
        <li><a href="#contact-us">Contact us</a></li>
        <li><a href="#find-us">Find us</a></li>
    </ul>
</nav>

<section id="contact-us">
    <h1>Contact us</h1>
    <p>Text about how to contact us</p>
</section>

<section id="find-us">
    <h1>Find us</h1>
    <p>Text about how to find us</p>
</section>