Code an Accessible Website in HTML & CSS

Once your page structure is complete, and your users can navigate from page to page, you can focus on what makes your site unique: its content.

The content of your page can include:

• Text (such as the course material you're currently reading 😉 ).

• The structure of your page created by your heading hierarchy. 

• Images and icons, either informative or decorative. 

• Other content such as videos, forms, etc.   

In this chapter, we will focus on the text content and its hierarchy, as well as images.

Design Content With a Good Heading Structure

The proper integration of headings enables good SEO results and allows assistive technologies to communicate your page's structure correctly. It also allows assistive technology users to navigate the page content more efficiently by jumping from heading to heading.

As you might remember, HTML headings are used with the  h  tag for levels ranging from  h1  (the most important title) to  h6. It is important to maintain logic in the hierarchy of your page. So you should not skip tags by going from an  h2  tag to an  h4  tag.

In some cases, the first heading on the page may not be an h1 level heading. For example, when a page has a mega menu with navigation items grouped under headings, these headings may be h2 level headings, but appear before the first h1 level heading in the page structure.

Ideally, your page should contain a single h1 level heading that should identify the page's overall topic, and all subsequent headings should be nested hierarchically.

Use the Correct Image Format

Images in many formats are everywhere on the web, whether they provide information or decorate a page.

The most common image formats are:

• PNG - most often a design or an illustration.

• JPG - primarily a photo format.

• GIF - used for animated images.

• SVG - a scalable vector format, which is gradually replacing PNG for logos and other images.

Let’s start by focusing on the role of images and when they must be integrated using HTML or CSS.

Differentiate Decorative Images From Informative Images

If you compare the two images below, which do you think is informative and which is decorative? 
 

The first image is in the background of our navigation menu. It does not provide any information to the user. In general, try to integrate decorative images using CSS. It helps to avoid overloading HTML with images that have no informative value. Bear in mind that the image will not be perceptible to assistive technologies when integrated with CSS, so only use it for decorative visuals.

We’ll add the second image using HTML so that we can include an alt attribute.

The "alt" attribute

This brings us to the accessibility of images. The good news is that when you embed an image on your site using the  img  tag, the  alt  attribute is enough for accessibility. You do not need to add additional ARIA attributes.

There are a few things you should keep in mind when it comes to the  alt  attribute:

• If the image is decorative, and you have no choice but to embed it using HTML, you should leave the  alt  attribute blank (alt="").

• If the image is informative and, for example, is a photo of a cat playing with a ball of yarn, you do not have to add the words "photo of" or "image of": assistive technologies already know this from the  img  tag. You can simply enter:  alt ="cat playing with a ball of yarn".

• If the image is a link that leads to the homepage, this information needs to be included in the alt text. For instance, alt="W3C - Home page"; the destination of the link is more important than what’s shown in the image.

• Finally, the description of the image must be short, so keep it concise (no more than 250 characters).

Describe Your Icons and SVGs

Before we put things to practice, let’s discuss icons and the SVG format.

Icons 

Icons are commonly used, both on smartphone and computer. They must also be integrated accessibly.

Icons are often purely decorative. If the icon is purely decorative and does not contain links, you can hide it from assistive technologies using the  aria-hidden=true  attribute.

<a href="/search">
    <!-- Here the icon will be read by the screen reader -->
    <i class="fas fa-search" aria-hidden="true"></i>
</a>

But if your icon performs a function, you should add a text description. You can use a  span  tag or add an  aria-label , as discussed in the previous chapter.

<i class="fas fa-coffee" aria-hidden="true"></i>
<!-- Here the span is read by the screen reader -->
<span class="screenreader-text">Consumption of coffee:</span>

The  span  tag won't be displayed visually on the page, so only assistive technology users will perceive its content.

SVG Format

The SVG format is primarily used for icons and logos and is increasingly replacing PNG for designs.

SVG is very powerful and practical. Requiring less memory than a conventional image, it is also well optimized for the web and makes it possible to reduce the number of HTTP requests.

Finally, SVG can be animated, and colors can be modified using HTML and CSS.

Unlike PNG and JPG, you cannot use SVG with the img tag, which means you can’t use the alt attribute. 

Instead of the alt attribute, you can use the following tags and attributes:

• title - Use the title tag to describe the SVG. If it is a shopping cart (in an e-commerce site), you can write:  <title>Shopping cart</title>.

• desc- In addition to the  title  tag, you can use the desc tag that will allow you to add an additional description. For example,  <desc>a supermarket shopping cart</desc>.

• aria-describeby- You can also use the aria-describeby attribute and link it to an id attribute. You can find an example in the implementation below.

• role=img  - Finally, you can add  role=img to the SVG allowing allow assistive technologies to indicate that the element is an image.

<svg
    aria-describedby="title description"
    clip-rule="evenodd"
    fill-rule="evenodd"
    role="img"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-miterlimit="1.5"
    viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
>
    <title id="title">
        Coeur
    </title>
    <desc id="description">
        The shape of a red heart
    </desc>
    <path d="M50 (...) 8.585z" fill="#dc0000" stroke="#dc0000"/>
</svg>

Tonight in Gotham: Integrate Content Into the Project

Good news! Our project has several images. Some of them are decorative, while others bring meaning to the document. The project also includes a few different image formats (PNG, SVG).

All these cases will allow you to understand how to integrate images. 😊

Header Content

Let’s start with the Batman logo located in the project’s header. This logo is an SVG and directly integrated into the HTML so that the browser will read it. The image serves as a link, so its function is more important than the appearance, which is what we want to communicate to the user. To do this, we’ve added an aria-label=”Tonight in Gotham”, since that’s the destination of the link. We then gave the svg role=”none”, and aria-hidden=”true” so assistive technology users will only hear the link and its label.

The other image in the header is purely decorative, so it’s displayed via the CSS:

.header-wrapper {
    background-image: url('../images/header-bg.jpg');
    height: 300px;
}

Therefore, it will not be perceived by assistive technologies.

Images in the Main Content

Now let's look at the content of the project in the  main  tag:

• You can see that it has several heading levels whose size is expressed in  em  (we will come back to this in the chapter dedicated to CSS).

• Each link is clearly identified by highlighting and bold font.

• The second Batman icon image is integrated via SVG in the HTML, just like the header icon, but this time it doesn’t serve a function or provide any information. It is purely decorative, so we want assistive technologies to ignore it. Once again, if this were an  img  element, we could give it a blank alt attribute (alt=””), but because it is an SVG we can accomplish the same thing by giving it role=”none” and aria-hidden=”true”. This way, assistive technology users will skip the decorative element. 

Content in the Footer

Finally, the footer’s navigation links are highlighted, and the social media icons have an opacity that changes if they are in focus or hovered over.

You can also see that each social network has a  span  with the name of the social network. This name is displayed only to assistive technologies and hidden via CSS (we will come back to this in the section dedicated to CSS).

Lastly, the Gotham Police logo is a PNG image directly integrated into the HTML. The image is informative, so we want to make sure it includes an alternative text description (alt=” City of Gotham Police Department”).

Let’s Recap!

• Set up a suitable heading hierarchy at a very early stage.

• Images can be either informative or decorative. Try as much as possible to integrate decorative images using CSS.

• Add alternative text descriptions to images using an  alt  text attribute if you are using an  img  tag, and an  aria-label  or hidden  span  element if you’re using  svg . 

• If you’re using an SVG, give the  svg  element a  role=”img” , add a  title  attribute, and point to their content using  aria-describedby  or  aria-labelledby . You can also use a  desc  attribute to provide additional information about the image. 

• If you have a decorative SVG and want assistive technologies to ignore it, you can give it a  role=”none”  and  aria-hidden=”true” . 

• You can use SVG and icons as long as you follow the accessibility rules.

Next, let’s have a look at tables and how to make them accessible.