Use validator http://validator.w3.org/nu/.
See:
- https://developers.google.com/speed/pagespeed/insights/
- https://developers.google.com/web/tools/lighthouse/
See https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector
<a href="evil.com" rel="noopener" target="_blank">
Click Me!
</a>
For instance regular style.
<link rel="preload" href="rubik-regular-latin.woff2"
as="font" type="font/woff2"
crossorigin>
@font-face {
font-family: 'DIN Condensed';
font-display: swap;
src: url('din.woff2') format('woff2'),
url('din.woff') format('woff');
}
See
- https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
- soflyy/oxygen-bugs-and-features#337
See https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
See:
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
For instance, some prices or IDs can be confused with the phone number.
<meta name="format-detection" content="telephone=no">
You should have total control of phone number detection by using the protocol tel:
for the tag <a>
.
<a href="tel:79999999999999">
Call me!
</a>
Prompts the user to save the linked URL instead of navigating to it. For instance:
<a href="document.pdf" download>
Save me as document.pdf
</a>
<a href="1h24v9lj.jpg" download="other-document">
Save me as other-document.jpg
</a>
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
http:
/https:
— Opens a hyperlink.mailto:
— Opens default mail program, creates a new message with theTo
field already filled out. AdditionalGET
-parameters for the link:subject
— theSubject
field filled out,cc
— theCarbon Copy
field filled out,bcc
— theBlind Carbon Copy
field filled out,body
— theBody
field filled out.
tel:
— Opens the calling interface on a phone.skype:
— Opens Skype if it is registered.slack:
— Opens Slack if it is registered.- ...
For instance:
Get in touch by
<a href="tel:79999999999999">
Phone
</a>
<a href="skype:examplecom">
Skype
</a>
<a href="mailto:[email protected][email protected],[email protected]&[email protected]&subject=I%20want%20to%20subscribe&body=I%20want%20to%20subscribe">
Email
</a>
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href
Prevents of 300ms delaying after a tap on touch devices.
See https://developer.mozilla.org/ru/docs/Web/CSS/touch-action#manipulation
Underlines and overlines are only drawn where they do not touch or closely approach a glyph.
See https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink