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

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

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

“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 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

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!

Step by step, learning to code with FreeCodeCamp