Link tags are allowed to have missing or empty href attributes in the case that their resulting action would be not allowed. The idea is that the page would consist of dynamic content, but the link is left in as an effective placeholder. Assistive tech following the spec will ignore these links, but they're still perfectly valid. The links are, effectively, in a disabled state.
Might also be worth considering the 3 <input> button types: button, submit, and reset.
Also, while lesser used, there are other patterns that apply button styles to elements, such as <label>s attached to radio buttons and checkboxes, with the corresponding role and aria- attributes added for better accessibility. These sorts of markups are infrequently used, but they're still valid.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Some great points here, I will see about adjusting the article and examples to account for these and downgrade them to warnings rather than errors.
I can’t see a valid use case for applying button styles to labels though as those would effectively be custom controls at that stage (so I would argue a separate class for clarity - even if it does go against DRY principles?) what do you think?
My point about the <a> without an href attribute wasn't about anchors, but still links. Imagine something like this:
<a>You can find your purchased download here.</a>
This would create the link as a placeholder, which might be useful for visual reasons, but it wouldn't yet be an active control. Then, based on some sort of event, you could make it active by giving it a valid href value using Javascript.
It's not a common pattern, but it's a completely one.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I used "anchors" for all <a> elements, perhaps the wording wasn't clear but I was talking about <a name="" would then be a warning in addition to allowing for <a>some text</a> to be a warning rather than an error (just in case you did want to do something like you suggest).
I did not know that href may be left out to let anchor elements behave as placeholders, thank you! I should definitely read the specs more instead of relying on tools' complaints (i.e. Lighthouse lead me to believe that missing the href attribute is invalid or inaccessible HTML).
Lighthouse is not really that good for accessibility testing, it misses a lot and throws up a fair few false positives. The a11y tool in Firefox is better, but better than both of those is the aXe tool, which is available as a plugin for all the major browsers.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Link tags are allowed to have missing or empty
hrefattributes in the case that their resulting action would be not allowed. The idea is that the page would consist of dynamic content, but the link is left in as an effective placeholder. Assistive tech following the spec will ignore these links, but they're still perfectly valid. The links are, effectively, in a disabled state.Might also be worth considering the 3
<input>button types:button,submit, andreset.Also, while lesser used, there are other patterns that apply button styles to elements, such as
<label>s attached to radio buttons and checkboxes, with the correspondingroleandaria-attributes added for better accessibility. These sorts of markups are infrequently used, but they're still valid.Some great points here, I will see about adjusting the article and examples to account for these and downgrade them to warnings rather than errors.
I can’t see a valid use case for applying button styles to labels though as those would effectively be custom controls at that stage (so I would argue a separate class for clarity - even if it does go against DRY principles?) what do you think?
Update
I added a new section to account for the items mentioned here.
See if you think that covers it well enough or if there is anything else to add, I will work on updating the fiddles to incorporate that.
Thanks for the suggestions! ❤
My point about the
<a>without anhrefattribute wasn't about anchors, but still links. Imagine something like this:This would create the link as a placeholder, which might be useful for visual reasons, but it wouldn't yet be an active control. Then, based on some sort of event, you could make it active by giving it a valid
hrefvalue using Javascript.It's not a common pattern, but it's a completely one.
I used "anchors" for all
<a>elements, perhaps the wording wasn't clear but I was talking about<a name=""would then be a warning in addition to allowing for<a>some text</a>to be a warning rather than an error (just in case you did want to do something like you suggest).I think we are in agreement! lol!
I did not know that
hrefmay be left out to let anchor elements behave as placeholders, thank you! I should definitely read the specs more instead of relying on tools' complaints (i.e. Lighthouse lead me to believe that missing thehrefattribute is invalid or inaccessible HTML).Lighthouse is not really that good for accessibility testing, it misses a lot and throws up a fair few false positives. The a11y tool in Firefox is better, but better than both of those is the aXe tool, which is available as a plugin for all the major browsers.