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 attributespecifies 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.
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.
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.
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 behavior 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>).
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 a 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.
Your browser does not support the video tag. </video>
Note: The default controls cannot be styled with CSS.
5. autocomplete
The autocomplete attributeenables 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.
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.
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.
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.
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 thelang
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 been
.You can also be more specific with the language code and use regional variations. For example, we can add
en-GB
for British English.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 addinghreflang="x-default"
instead of the language code. Lastly, set the value of therel
attribute to"alternate"
for each link in the language switcher to indicate that the linked pages are alternatives to the present page.You can also use
hreflang
it in your language switcher.Sometimes, language switchers use link text in the language they are switching to. You can indicate this by additionally using the
lang
attribute.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.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 behavior 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 (
""
) oryes
for translation andno
to avoid translation.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.This will result in the following reversed list:
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 a 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.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.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.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:
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.Written by Muhammad Talha Waseem
Recent Posts
Recent Posts
🚀 Successfully Integrated Stripe with Java for
Free Tools Every ML Beginner Should Use
Spring Modulith vs Microservices: Understanding the Differences
Archives