8. Link Text

Link anti-patterns:

Using a span as a link and not using an href in an anchor tag

<span class="link" onclick="dosomething()">
    I'm NOT a link!
</span>

<a onclick="changeView()">
    You might think I'm a link, but I'm not either.
</a>

Using a link as a button:

<a href="#" onclick="doSomething()">Do something!</a>

Not having an alt-text on an image with a link around it:

<a href="/">
    <img alt="Udacity" src="logo_wordmark.svg">
</a>

Not having descriptive links:

2.4.9 Link Purpose (link only)

The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone.

<h3> Responsive layouts</h3>
<p> Create flexible, not fixed, layouts that work on mobile, desktop, or any other device. 
    <a href="#">Learn more</a> // here!!!!!!
</p>

This can be fixed by making the heading the link or to change the link text to something like "Learn more about responsive design"

Link patterns:

<a href="#internal">Now I'm a link</a>

• Shows up in links list
• Works with the keyboard
• can be bookmaked

Landmarks:

<header>

    <nav>

    </nav>

</header>

<main>

    <section>

        <article>
            <aside>
            </aside>        
        </article>

        <article>

        </article>

    </section>

    <section>

    </section>

</main>

<footer>

</footer>

<main> main content on a page. Should only have 1 main element on a page.

<header> Either a page header or contains introductory content to a start of a section of a page.

<footer> A footer to either the page itself or the footer to a section that contains foot notes about that section.

<nav> Represents a section that links to other sections. Examples are the top nav bar, or a table of contents.

<article> Self contained sections of content like a news article, blog post, etc. A test to see if the content should be an article is if the content would make sense in another context.

<section> A completely generic tag that just breaks up content into different sections. Since it doesn't provide context, a heading is generally placed inside a section.

<aside> Any content that is tangentially related to the content around it. Examples: a side note, or extra navigation.

9. Quiz: Link Text

'click here' doesn't tell me anything about what's going to happen if I were to click it.

Top Navigation: It's skips over the navigation links up at the top. What's going on, they're spans styled to look like links. Clearly this is an over engineered restaurant website built like a single page web app.

Outro this lesson

1. Make sure to use meaningful headings and link text as well as good pay structure.
2. As a general rule, you shouldn't try to control the experience a screen reader user will have.