https://www.htmhell.dev/adventcalendar/2023/4/

Skip to content

 1. Hell
 2. Heaven
 3. Newsletter
 4. Advent Calendar
 5. HTMHell on Twitter
 6. HTMHell homepage

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:

 1. Cookies
 2. Crema Catalana
 3. Tiramisu
 4. Pastel de Nata
 5. 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

More articles

 1.  
    Previous day (3)
    The Form Attribute - Enhancing Form Layout Flexibility

built with eleventy and [?] in Vienna by @mmatuzo

 1. About
 2. Contribution
 3. Github
 4. Feed