Learning to Code: Day 19 — Applied Accessibility Part 1

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.

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=“ ”.

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:

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.

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp