Back to Basics: 5 HTML attributes for improved accessibility and user experience

by Daniela Kubesch published on Dec 04, 2023

In the fast-paced world of web development, it's easy to get caught up in the latest frameworks, libraries and cutting-edge technologies. But sometimes, the most impactful improvements come from revisiting the fundamentals.

In this blog post, I'll guide you through five HTML attributes that not only improve accessibility but also enhance the overall user experience. Whether you are an experienced developer or just starting, let's explore the potential of these elements to create a more inclusive web experience.

1. hreflang

The hreflang attribute specifies the language of a linked resource on an <a> or <link> element. It works like the lang attribute but is specifically used for links.

Why use `hreflang`?

You can improve the user experience and SEO by using hreflang for both internal and external site links.
Using hreflang on internal website links provides a way to tell search engines about different variations of a page for other languages or regions. This means that English speakers would receive the English version of the site, while Swedish speakers would receive the Swedish version. There is no need for manual switching on the user's end, resulting in a smoother experience.

How to use `hreflang`

Add the hreflang attribute with the needed ISO language code to your <a> element. For an English website, this would be en.

<a href="https://example.com" hreflang="en">English Website</a>

You can also be more specific with the language code and use regional variations. For example, we can add en-GB for British English.

<a href="https://example.at" hreflang="en-GB">English Website</a>

If your website is available in multiple languages, you can use hreflang to specify the language and region of a document associated with a specific URL. Adding the attribute will help search engines understand the language and regional targeting of different web page versions.

Add hreflang with the required language code to each link. One link should act as the default fallback version, identifiable by adding hreflang="x-default" instead of the language code. Lastly, set the value of the rel attribute to "alternate" for each link in the language switcher to indicate that the linked pages are alternatives to the present page.

<link href="https://example.com" rel="alternate" hreflang="x-default" />
<link href="https://example.com/de" rel="alternate" hreflang="de" />

You can also use hreflang in your language switcher.

<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de">German</a>

Sometimes, language switchers use link text in the language they are switching to. You can indicate this by additionally using the lang attribute.

<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de" lang="de">Deutsch</a>

Note: Adding the lang attribute is particularly important for assistive technology users. For instance, screen readers alter their voice and pronunciation based on the language attribute.

An additional way to enhance accessibility is to include aria-current="true" to the presently active link.

<a href="https://example.com" hreflang="x-default" aria-current="true">English</a>
<a href="https://example.com/de" hreflang="de" lang="de">Deutsch</a>

2. translate

The translate attribute is used to indicate whether an element should be translated or not.

Why use `translate`?

Most website text is translatable by default (with some exceptions such as text on images or within SVGs). Translation tools, such as Google Translate, may suggest translation of page contents if the site's defined language differs from the browser's default language. However, there may be instances where this behaviour is unwanted.
Specific terms like company names, e-mail addresses or code examples should generally not be translated to avoid confusion. Automated translations are not always completely accurate, particularly with niche or technical words.

How to use `translate`

You can use translate on any HTML element. Assign an empty string ("") or yes for translation and no to avoid translation.

<!-- Original German text -->
<p>
  <span>Wien<span> 
  ist (wieder) die lebenswerteste Stadt der Welt!
</p>
<p>
  <span translate="no">Wien<span> 
  ist (wieder) die lebenswerteste Stadt der Welt!
</p>

<!-- What it would look like translated into English -->
<p>
  <span>Vienna<span> 
  named world's most liveable city (again)!
</p>
<p>
  <span translate="no">Wien<span> 
  named world's most liveable city (again)!
</p>

3. reversed

The reversed attribute is used to reverse ordered lists (<ol>) in the opposite order.

Why use `reversed`?

Using the reversed attribute keeps the order of visual and semantic list items the same, but they are numbered from highest to lowest. This means adding this attribute to your ordered list (<ol>) will not reverse the list items but only the list numbers. For instance, this behaviour is helpful if you want to count down your top five desserts. However, the reversed attribute does not affect unordered lists (<ul>).

Note: The reversed attribute does not affect unordered lists (<ul>).

How to use `reversed`

Add the reversed attribute to your list element.

<ol reversed>
  <li>Cookies</li>
  <li>Crema Catalana</li>
  <li>Tiramisu</li>
  <li>Pastel de Nata</li>
  <li>Sacher cake</li>
</ol>

This will result in the following reversed list:

Cookies
Crema Catalana
Tiramisu
Pastel de Nata
Sacher cake

Note: Screen readers announce the list in DOM order along with the correct number: "5. Cookies, 4. Crema Catalana, etc.".

4. controls

The controls attribute instructs the browser to show the standard video or audio controls.

Why use `controls`?

Including playback controls on your video and audio content is essential for optimal user experience, accessibility and usability. These controls enable users to stop or adjust video/sound playback and assist those who may experience motion sickness or distraction while browsing your website.
The default controls include the playback essentials such as play, pause, seek (moving position) and volume, as well as fullscreen toggle, captions/subtitles and track for video content only.

Note: The browser controls provided as defaults should be used with caution. Sometimes keyboard-based navigation can cause problems, such as loss of focus, forcing the user to reposition themselves. Consider implementing custom controls or integrating an external media player equipped with accessibility features. However, it is still preferable to include controls than not to.

How to use `controls`

You can add the controls attribute to the <video> or <audio> element.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />

  Your browser does not support the video tag.
</video>

Note: The default controls cannot be styled with CSS.

5. autocomplete

The autocomplete attribute enables the browser to complete form values automatically and can be applied to the <form>, <input>, <select>, and <textarea> elements.

Why use `autocomplete`?

With the autocomplete attribute present, a browser can suggest a previous user's input for a form field's value, meaning a user does not have to remember or manually enter personal information. This results in significant benefits for individuals with cognitive impairments, reduced mobility, attention deficits, low vision, or blindness. Some people may find reduced manual input in forms particularly beneficial by lowering the need for extensive typing.

The autocomplete attribute improves the usability and efficiency of an HTML form for users by informing browsers and assistive technologies about the intended use of a specific form field. Screen readers use these autocomplete values to understand the nature of input fields and help users enter information more efficiently. For example, if a user's browser has saved information for a particular field (such as their name or e-mail), the screen reader will prompt them to fill in that information automatically.

How to use `autocomplete`

You can assign different values to autocomplete.

If you choose off, the browser cannot automatically enter or select a value for this field.

<label for="email">E-Mail</label>
<input name="email" id="email" type="email" autocomplete="off" />

Note: Many password managers may still prompt the user to save information or use previously stored data.

If you choose on, the browser will complete the input automatically. However, since no further information concerning the expected data is given, the browser may use its own judgement.

<form action="/" autocomplete="on">
  <label for="firstname">First Name</label>
  <input type="text" name="firstname" id="firstname" />

  <label for="lastname">Last Name</label>
  <input type="text" name="lastname" id="lastname" />

  <label for="email">Email</label>
  <input type="email" name="email" id="email" />
</form>

The optimal solution is to specify distinct values for the required data by opting for the corresponding value from a list of available input purposes.

Your form could look like this:

<form action="/" autocomplete="on">
  <label for="firstName">First Name</label>
  <input autocomplete="given-name" name="firstName" id="firstName" type="text" />
  
  <label for="lastName">Last Name</label>
  <input autocomplete="family-name" name="lastName" id="lastName" type="text" />
  
  <label for="email">Email</label>
  <input autocomplete="email" name="email" id="email" type="email" />
</form>

Note: The absence or incorrect use of an autocomplete attribute in an input field can cause inconvenience to users, particularly those with cognitive disabilities. Browsers cannot suggest accurate values, making it difficult for individuals to provide the expected input. Please make sure you choose the correct value.

Conclusion

I hope the exploration of these attributes has sparked your interest. When you embark on your next project, remember the significance of prioritising usability, accessibility and simplicity.

About Daniela Kubesch

Daniela Kubesch is a frontend developer and designer who is passionate about accessibility and inclusive design. She strongly believes in equality and inclusion and is committed to making digital services accessible. Daniela is also a co-creator of a11yphant.com, a platform that teaches the basics of web accessibility.

Website/Blog: dnikub.dev
Mastodon: front-end.social/@dnikub
Twitter: @dnikub
LinkedIn: danikubesch

Back to Basics: 5 HTML attributes for improved accessibility and user experience

1. hreflang

Why use hreflang?

How to use hreflang

2. translate

Why use translate?

How to use translate