<article>do a much better job of explaining the content that is contained within the element than
<div>. This does not mean that we do not use
<div>s in our markup, only that we prefer the right tool (or in this case semantic element) for the job.
@includeour grid column sizes as well as media queries to modify the behavior at different sizes so that styles live separately from markup.
<div>s for everything, we can use HTML5 elements like
<article>. They work the same way, in that they’re all block level elements, but improve readability and thus maintainability.
<section>. The element represents a generic document or application section and should contain a heading.
<figure>element can only be used for images. In fact, it can be used to mark up diagrams, SVG charts, photos, and code samples.
<nav>element is primarily intended for sections that consist of major navigation blocks.
<label>. The label element, along with the
forattribute, can help explicitly associate a label to a form element adding readability for screen readers and assistive technology.
<fieldset>element. Grouped form elements can be helpful for users who depend on screen readers or those with cognitive disabilities.
<body>tag so that they are discovered and announced as early as possible.
screen-reader-textclass of some kind. This CSS is used to position the links off the screen then use
:focusstyles to make the link visible for sighted keyboard users.
npm install pa11y --save-devand can be added into a
package.jsonfile as a separate npm script as to not collide with other build processes that may be running on a project:
svg-defs.svg) has the benefit of helping limit HTTP requests within a document that contains multiple icons. An SVG sprite file can be embedded within a document and referenced within the template source with a
<use>element. The creation of this icon system should be automated through the build process. Read Icon Systems with SVG Sprites for more information.
alt=""can be used:
<img alt="">, or
aria-labelif the SVG is linked and has no supporting text.