accessible-html
accessible-html copied to clipboard
Anchor tags require href specified
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" ]
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
If the
a
element has anhref
attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.If the
a
element has nohref
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 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.
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! 🤔