Saptak's Blog Posts
What is Progressive Enhancement?
Progressive enhancement is the idea of making a very simple, baseline foundation for a website that is accessible and usable by all users irrespective of their input/output devices, browsers (or user-agents), or the technology they are using. Then, once you have done that, you sprinkle more fancy animations and custom UI on top that might make it look more beautiful for users with the ideal devices.
So how to do this Progressive Enhancement?
If you saw the video by Heydon, I am sure you are starting to get some idea. Here I am going to reference another video titled Visual Styling vs. Semantic Meaning, which was created by Manuel Matuzović. I love how, in this video Manuel shares the idea of building first semantically and then visually styling it.
So I think a good way to do progressive enhancement according to me is:
Start with HTML - This is a very good place to start, because not only does this ensure that almost all browsers and user devices can render this, but also it helps you think semantically instead of based on the visual design. That already starts making your website not only good for different browsers, but also for screen reader and assistive technology users.
Add basic layout CSS progressively - This is the step where you start applying visual designs. But only the basic layouts. This progressively enhances the visual look of the website, and also you can add things like better focus styles, etc. Be careful and check caniuse.com to add CSS features that are well supported across most browsers in different versions. Remember what Heydon said? "A basic Layout is not a broken layout".
Add fancy CSS progressively - Add more recent CSS features for layouting and to progressively enhance the visual styling of your website. Here you can add much more newer features that make the design look even more perfect.
Anyone who has dealt with
<form> tag in HTML might have come across the
autocomplete attribute. Most developers just put
autocomplete="off" based on whether they want users to be able to autocomplete the form fields or not. But there's much more in the
autocomplete attribute than many folks may know.
Most widely used browsers (Firefox, Chrome, Safari, etc.), by default, remember information that is submitted using a form. When the user later tries to fill another form, browsers look at the
type attribute of the form field, and then offer to autocomplete or autofill based on the saved information from previous form submissions. I am assuming many of you might have experienced these autocompletion suggestions while filling up forms. Some browsers, like Firefox, look at the
id attribute and sometimes even the value of the
<label> associated with the input field.
Autofill detail tokens
For a long time, the only valid values for the
autocomplete attribute were
"off" based on whether the website developer wanted to allow the browser to automatically complete the input. However, in the case of
"on", it was left entirely to the browser how they determine which value is expected by the input form. Now, for some time, the
autocomplete tag allows for some other values, which are collectively as a group called autofill detail tokens.
<div> <label for="organization">Enter your credit card number</label> <input name="organization" id="organization" autocomplete="organization"> </div>
These values help tell the browser exactly what the input field expects without needing the browser to guess it. There is a big list of autofill detail tokens. Some of the common ones are
"cc-number", and so on. Check the WHATWG Standard for autofill detail tokens to understand what are the valid values, and how they are determined.
There are two different autofill detail tokens associated with passwords which have some interesting features apart from the autocompletion:
- "new-password" - This is supposed to be used for "new password field"s or for "confirm new password field"s. This helps separate a current password field from a new password field. Most browsers and most password managers, when they see this in
autocompleteattribute, will avoid accidentaly filling existing passwords. Some even suggest a new randomly generated password for the field if
- "current-password" - This is used by browsers and password managers to autofill or suggest autocompletion with the current saved password for that email/username for that website.
The above two tokens really help in intentionally separating new password fields from login password fields. Otherwise, the browsers and password managers don't have much to separate between the two different fields and may guess it wrong.
Now, all of the above points might already be giving privacy and security nightmares to many of you. Firstly, the above scenario works only if you are on the same computer, using the same accounts, and the same browsers. But there are a few things you can do to avoid autocompletion, or saving of the data when filling up the form.
- Use the browser in privacy/incognito mode. Most browsers will not save the form data submitted to a website when opened in incognito mode. They will, however still suggest autocompletion, based on the saved information from normal mode.
- If you already have autocomplete information saved from before, but want to remove now, you can. Most browsers allow you to clear form and search history from the browser.
- If you want to disable autofill and autocomplete, you can do that as well from browser settings. This will also tell the browsers to never remember the values entered into the form fields.
You can find the related information for different browsers here:
- Chrome: https://support.google.com/chrome/answer/142893?hl=en&co=GENIE.Platform%3DDesktop&oco=0
- Firefox: https://support.mozilla.org/en-US/kb/control-whether-firefox-automatically-fills-forms
- Safari: You need to uncheck the different options mentioned here to disable
Now, if you are a privacy-focused developer like me, you might be wondering, "Can't I as a developer help protect privacy?". Yes, we can! That's exactly what
autocomplete="off" is still there for. We can still add that attribute to an entire
<form> which will disable both remembering and autocompletion of all form data in that form. We can also add
autocomplete="off" individually to specific
<select> to disabled the remembering and autocompletion of specific fields instead of the entire form.
PS: Even with
autocomplete="off", most browsers still offer to remember username and password. This is actually done for the same reason digital security trainers ask to use password managers: so that users don't use the same simple passwords everywhere because they have to remember. As a digital security trainer, I would still recommend not using your browser's save password feature, and instead using a password manager. The password managers actually follow the same rule of remembering and auto-filling even with
autocomplete="off" for username and password fields.
So, as a privacy-focused developer, you might be wondering, "Well, I should just use
autocomplete="off" in every
<form> I write from today". Well, that raises some huge accessibility concerns. If you love standards, then look specifically at Understanding Success Criterion 1.3.5: Identify Input Purpose.
There are folks with different disabilities who really benefit from the
autocomplete tag, which makes it super important for accessibility:
- People with disabilities related to memory, language or decision-making benefit immensely from the auto-filling of data and not need to remember every time to fill up a form
- People with disabilities who prefer images/icons for communication can use assistive technology to add icons associated with various different input fields. A lot of them can benefit from proper autocomplete values, if the
nameattribute is not eligible.
- People with motor disabilities benefit from not needing to manually input forms every time.
So, given that almost all browsers have settings to disable these features, it might be okay to not always use
autocomplete="off". But, if there are fields that are essentially super sensitive, that you would never want the browser to save information about (e.g., government id, one time pin, credit card security code, etc.), you should use
autocomplete="off" on the individual fields instead of the entire
<form>. Even if you really really think that the entire form is super sensitive and you need to apply
autocomplete="off" on the entire
<form> element to protect your user's privacy, you should still at least use autofill detail tokens for the individual fields. This will ensure that the browser doesn't remember the data entered or suggest autofills, but will still help assistive technologies to programmatically determine the purpose of the fields.
Recommended further readings: