Applied Accessibility

Use alt attribute of <img> tag to describe the content of an image. Know that you do not need to always use it, for example when the image is decorative or is already described by other text ex. caption. But you must always have it, just leave it blank.

The image bellow has an incorrect url so the contents of alt attribute is displayed instead

The main element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.

article is another one of the new HTML5 elements that adds semantic meaning to your markup. article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.

The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.

The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.

header tag is used to wrap introductory information or navigation links for its parent tag and works well around content that's repeated at the top on multiple pages. footer is primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.

HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing.

<figure>
    <figcaption>Listen to the T-Rex:</figcaption>
        <audio
            controls
                src="/media/examples/t-rex-roar.mp3">
                    Your browser does not support the
                    <code>audio</code> element.
    </audio>
</figure>

HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure.

<figure>
    <img src="/media/examples/elephant-660-480.jpg"
        alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.

<form>
    <label for="example-name">Name:</label>
    <input type="text" id="example-name" name="name">
</form>

The HTML fieldset element is used to group several controls as well as labels (label) within a web form. The fieldset tag surrounds the entire grouping of control elements and labels to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.

<form>
    <fieldset>
        <legend>Choose one of these three items:</legend>
        <input id="one" type="radio" name="items" value="one">
        <label for="one">Choice One</label><br>
        <input id="two" type="radio" name="items" value="two">
        <label for="two">Choice Two</label><br>
        <input id="three" type="radio" name="items" value="three">
        <label for="three">Choice Three</label>
    </fieldset>
</form>                      

input elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.

HTML5 also introduced the time element along with a datetime attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the datetime attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.

The Cure will be celebrating their 40th anniversary on July 7 in London's Hyde Park.

<time datetime="2018-07-07">July 7</time>

The concert starts at 20:00 and you'll be able to enjoy the band for at least 2h 30m.

<time datetime="20:00">20:00</time>
<time datetime="PT2H30M">2h 30m</time>

The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast.

Background color

Foreground color

Contrast ratio: 8.66:1

The five boxing wizards jump quickly

Background color

Foreground color

Contrast ratio: 1.45:1

The five boxing wizards jump quickly

Background color

Foreground color

Contrast ratio: 6.03:1

The five boxing wizards jump quickly

In practice, the 4.5:1 contrast ratio can be reached by shading (adding black to) the darker color and tinting (adding white to) the lighter color. Darker shades on the color wheel are considered to be shades of blues, violets, magentas, and reds, whereas lighter tinted colors are oranges, yellows, greens, and blue-greens.

Background color

Foreground color

Contrast ratio: 7.1:1

The five boxing wizards jump quickly

HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users. HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.

<button accesskey="b">Important Button</button>

In firefox: shift+alt+[accesskey]

The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior. Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex="0" attribute on them.

<div tabindex="0">I need keyboard focus!</div>