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 fundamentals.
In this blog post, I'm going to introduce you to five HTML attributes that not only improve accessibility but also enhance the overall user experience. Whether you're a seasoned developer or just starting out, let's explore the potential of these elements together to create a more inclusive web experience.
1. hreflang
The hreflang attribute specifies <a>or <link>the language in which the resource is linked on the element. It works similarly to the lang attribute, but specifically for links.
Why use hreflang?
You can improve user experience and SEO by using hreflang in your internal and external website links. Using hreflang on internal site links provides a way to tell search engines about different variations of pages in other languages or regions. This means that English speakers will receive the English version of the site, while Swedish speakers will receive the Swedish version. There is no need to manually switch between the user side, and the experience is smoother.
How to use hreflang
Add the hreflang attribute with the desired ISO language code <a>to the element. For English sites, it's en.
<a href="https://example.com" hreflang="en">English Website</a> You can also use more specific language codes 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 the document associated with a specific URL. Adding this attribute will help search engines understand the language and regional targeting of different versions of the page.
Add hreflang with the desired language code to each link. A link should be identified as a default fallback, by adding hreflang="x-default" instead of the language code. Finally, for each link in the language switcher, set the value of the rel property to "alternate" to indicate that the linked page is an alternate page to the current 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 the 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 linked text in the language they switch 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 especially important for assistive technology users. For example, a screen reader changes its sound and pronunciation based on language attributes.
Another way to enhance accessibility is to include aria-current="true" in the currently 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?
By default, most website text is translatable (with some exceptions, such as text on images or in SVG). If the site's definition language is different from the browser's default language, a translation tool such as Google Translate may suggest translating the page content.
However, there may be situations where such behavior is not required. Specific terms such as company names, email addresses, or code samples should generally not be translated to avoid confusion. Automatic translation is not always completely accurate, especially for niche or technical terms.
How to use Translate
You can use translate on any HTML element. Specify an empty string ("") or yes for translation and no for avoiding translation.
<!-- 德语原文 -->
<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>
<!-- 翻译后 -->
<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 the ordered list () in reverse order<ol>.
Why use reversed?
Use the reversed attribute to keep the visual and semantic list items in the same order, but they are numbered from highest to lowest. This means that adding this property to your ordered list(<ol>) does not invert the list items, but only the list number. For example, if you want to count down your five favorite desserts, this behavior is helpful. However, the reversed attribute does not affect unordered listings (<ul>).
How to use reversed
Add the reversed attribute to the 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 inverted list:
5. Cookies
4. Catalan Cream
3. Tiramisu
2. Pastel de Nata
1. The rise of the
4. controls
The controls property instructs the browser to display standard video or audio controls.
Why use controls?
Including playback controls in your video and audio content is critical to optimizing user experience, accessibility, and usability. These controls enable users to stop or adjust video/sound playback and help those who may experience motion sickness or distraction while browsing your site. Default controls include playback elements such as play, pause, search (move location), and volume, as well as full-screen switching, subtitles/subtitles, and tracking for video content only.
Note: Browser controls provided as defaults should be used with caution. Sometimes keyboard-based navigation can cause problems, such as a loss of focus, forcing the user to reorient themselves. Consider implementing custom controls or integrating an external media player with accessibility features. It's better to have control than no control, though.
How to use Controls
You can add the controls attribute to <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: Default controls cannot be styled with CSS.
5. autocomplete
The autocomplete attribute enables the browser to autocomplete form values and can be applied to <form>, <input><select>,<textarea>
Why use autocomplete?
With the autocomplete property, the browser can suggest values that were previously entered by the user in the form field, meaning the user doesn't have to remember or manually enter personal information. This has significant benefits for people with cognitive impairment, mobility issues, attention deficits, low vision, or blindness. Some people may find it particularly beneficial to reduce manual input in forms because it reduces the need for a lot of typing.
The autocomplete attribute improves the usability and efficiency of HTML forms for users by informing browsers and assistive technologies about the intended use of specific form fields. Screen readers use these autocomplete values to understand the nature of input fields and help users enter information more effectively. For example, if a user's browser already has saved information for a specific field, such as their name or email, a screen reader will prompt them to autofill that information.
How to use autocomplete
You can specify different values for autocomplete.
If you select OFF, the browser will not be able to automatically enter or select the value for this field.
<label for="email">E-Mail</label>
<input name="email" id="email" type="email" autocomplete="off" /> If you select ON, the browser will automatically complete the input. However, as no further information is provided about the expected data, the browser may make its own judgment.
<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 best solution is to specify a different value for the desired data by selecting the appropriate value from the list of available input goals.
Your form might look something 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: Missing or incorrect use of the autocomplete attribute in the input field can be inconvenient for users, especially those with cognitive impairments. Browsers are unable to provide accurate values, which makes it difficult for individuals to provide the expected input. Make sure you select the correct value.
summary
Hopefully, this discussion of these features will spark your interest. When you start your next project, remember the importance of prioritizing usability, accessibility, and simplicity.