- <!DOCTYPE html>
- <html lang="en">
- <head
- <meta charset="utf-8">
- <title>Page Title</title
- <link rel="stylesheet" href="style.css">
- <script src="script.js"></script>
- </head>
- <body
- <!-- The rest is content -->
- </body>
- </html>
1. It is really a good practice to declare the character set of your document to protect against a serious security risk.
2. With HTML5, there is only one way to indicate the doctype, and it's so simple there is no reason to forget it.
3. The "TYPE" attribute is optional.
4. Always add a heading to explicit sectioning element.
Mainly for accessibility reasons, it's always better to include a heading (a <h1>, <h2>...<h6>) in each sectioning element (<section>, <article>, <nav>, <aside>), but also after the <body> element (called a "sectioning root").
Notice that <body> is also a sectioning element, it's called a "sectioning root", and would also need a heading.
3. The "TYPE" attribute is optional.
4. Always add a heading to explicit sectioning element.
Mainly for accessibility reasons, it's always better to include a heading (a <h1>, <h2>...<h6>) in each sectioning element (<section>, <article>, <nav>, <aside>), but also after the <body> element (called a "sectioning root").
Notice that <body> is also a sectioning element, it's called a "sectioning root", and would also need a heading.
- Always use a heading element after a sectioning element, for example <section><Hx>...</Hx>...</section>, and after <body>, where x can be 1..6,
- Or, use a <header> element, like in <section><header><Hx>...</Hx>.....</header>...</section>
5. TRY NOT TO RELY ON IMPLICIT SECTIONING, USE <SECTION>, <ARTICLE>, ETC. INSTEAD OF JUST <H1>...<H6>
6. BEST PRACTICE 1: In order to NOT display the heading content on screen the recommended technique is described in this article by Steve Faulkner, also see this older article by the same author. Do not use display:none or visibility:hidden in your CSS stylesheet, as in that case the heading content will never be vocalized by screen readers, and more generally by assistive technologies.
7. BEST PRACTICE 2: it is not advised to include interactive content (links, controls etc) that is hidden offscreen (it is in fact a violation of the W3C WCAG 2.0 Guidelines). All interactive content must have a visible focus indicator (and be on screen when focused).
8. Do not use autoplay and add preload="none" if you target mobile devices or if you have multiple audio/video on the same page.
6. BEST PRACTICE 1: In order to NOT display the heading content on screen the recommended technique is described in this article by Steve Faulkner, also see this older article by the same author. Do not use display:none or visibility:hidden in your CSS stylesheet, as in that case the heading content will never be vocalized by screen readers, and more generally by assistive technologies.
7. BEST PRACTICE 2: it is not advised to include interactive content (links, controls etc) that is hidden offscreen (it is in fact a violation of the W3C WCAG 2.0 Guidelines). All interactive content must have a visible focus indicator (and be on screen when focused).
8. Do not use autoplay and add preload="none" if you target mobile devices or if you have multiple audio/video on the same page.
No comments:
Post a Comment