Learning to Code: Day 19 — Applied Accessibility Part 1

Gooood evenin’ ya’ll. Today we start on in a new direction looking at the accessibility side to browser content and general keyboard-friendly experiences for the users. Let’s jump right into this! All lessons provided as always by FreeCodeCamp.

A Python stands on a stage in front of a crowd of HTMLs. He says, “How is everybody doing tonight? Lemme tell ya. Ha. Man, this syntax error is really starting to bug me!” *ba-doom-tish*

—

Adding Text to Images for Visually Impaired Accessibility

Remember way back we looked at creating an img tag, which always came with a source (src) and alt attribute? Well the alt attribute is a way of providing information for the user when the image doesn't load or when it can’t be seen by the user. It is used by search engines to describe the contents of the image for search results. It is also useful as a text-alternative.

For people with visual impairments, they rely on these with screen readers to convert the text into an audio interface. It is now considered mandatory in HTML5 to include the alt attribute with a suitable description.

When not to use Alt Attribute

At times there may be text content or a caption in the <p> tags which already covers what the image it’s referring to is, so therefore we can leave the alt attribute as an empty string: alt=“ ”.

It’s good practise to write the alt attribute regardless if the image already has a caption, as the alt is useful for search engines to read, as previously stated.

Using Headings to Indicate Hierarchical Relationships of Content

Headings, also known as workhorse tags, which range from h1 (largest) to h6 (smallest) provide structure and labelling to content in the browser. Screen readers can be set to only read the headings so the user has a summary of the page. Therefore it is important that the headings have semantic meaning:

“the tag you use around content indicates the type of information it contains” (FreeCodeCamp)

..and are not merely chosen because of their size values. In summary: Each header needs to be defined in order and indicate the hierarchical structure of the content.

It’s also good practise to use one and only one h1 tag, and then each header thereafter has a smaller header tag for it’s subsections to indicate the child-parent relationship between the headers, and give semantic meaning to the content. For example, using h2 tags for all titles and h3 tags for the subsections for those titles.

Jump to Specific Content with the Main Element

When incorporating accessibility features in HTML5, developers have several element options at hand including header, footer, nav, main, article and section among others. These are rendered into the browser much like the div tags, but, if used creatively, they provide additional meaning in your markup as you go.

When better navigational information is given to the user, the assistive technologies can read this information because it holds clear semantic meaning to that content. For example, elements such as main clearly indicate what kind of information they will hold. If you’ve ever been lost down in a jumble of sub-content and seen “jump to main” in a page, it’s likely that it will take the user to the main element, which is, you guessed it, the main content of the page.

Wrapping Content in the Article Element

The article element is a relatively new element introduced into HTML5 and is used to wrap around independent contents of a page. It’s something you could imagine useful for blogging, forums, news sites and so on.

An article element is for stand-alone content, unlike the section element which is used for “grouping thematically related content” (FreeCodeCamp).

As FreeCodeCamp puts it, if the book is the article, the chapters are the section. If there’s no relationship between the content groups, then use the good old div.

Here’s an example of a main, an article and a header in sequential hierarchical order:

<main>

<article>

<h2>Header Sentence</h2>

<p>Blah blah…blah blah blah…</p>

</article>

</main>

Makes sense right? It’s pleasing to the eye and nice tidy code.

—

Aaaand let’s pick this up tomorrow.

Thanks guys, this has been fun and nice to know that we are learning how to tidy up our code, provide keyboard-friendly navigation and useful information for screen readers and the like. Cheers!