accessible-html icon indicating copy to clipboard operation
accessible-html copied to clipboard

Anchor tags require href specified

Open tryzniak opened this issue 5 years ago • 3 comments

Hello! This PR follows an example of img. With this change anchor tags require the href attribute to be specified. I think it doesn't make sense to have something like<a href="">stuff</a>. So now people have to write code like so:

a "/hello" [ class "blah-blah"] [ text "see hello" ]

tryzniak avatar Sep 21 '19 07:09 tryzniak

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

...

Example:

If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an a element:

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

I’ve read somewhere that one use case for this is that you can use selectors like nav a to style those links, and not having to do something like nav a, nav span.current. ¯\_(ツ)_/¯

Side note: AFAIK, omitting the href wasn’t even valid before HTML5.

lydell avatar Sep 26 '19 20:09 lydell

@lydell Thank you for the provided link! To be honest I didn't realize people did that thing with navigation and links. Maybe this isn't the best practice anymore? Because most blog posts about a11y recommend to always set href. There's aria-current, which helps indicate a current page link. Other than that, simply hiding a link with aria-hidden could do the trick in some cases, VO just won't announce anything.

tryzniak avatar Sep 30 '19 17:09 tryzniak

Thanks for the discussion here! (Sorry it took me literal years to respond 😓)

I recently came across this post by Scott O'Hara on "disabling" links, which shows a pattern that requires not setting the href. Without the href attribute, the a becomes a placeholder, as @lydell mentioned.

... at least, the href-less anchor becomes a placeholder in theory. In Elm, if you happen to be using Browser.application, you will encounter a pretty broken behavior -- the url will be changed to the root of your application https://github.com/elm/browser/issues/34

Perhaps it makes sense to have a : String -> List (Attribute Never) -> List (Html msg) -> Html msg, requiring an href, and have a separate placeholderA that doesn't take an href string?

I worry about making that change before https://github.com/elm/browser/issues/34 is fixed though... might confuse people! 🤔

tesk9 avatar May 26 '22 16:05 tesk9