Skip to content

Instantly share code, notes, and snippets.

@KrofDrakula

KrofDrakula/README.md

Last active February 24, 2022 09:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save KrofDrakula/29a3d237f687bc1c0173e8e66e165640 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save KrofDrakula/29a3d237f687bc1c0173e8e66e165640 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. KrofDrakula revised this gist Feb 24, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,4 +19,4 @@ You should apply the least amount of workaround you can get away with, since it

    **🚨 WARNING: this method will impact accessibility for screen readers and other access methods, and copy/pasting this text can result in corrupted text in some apps.** Use as a last resort.

    - split a string by [Unicode code points](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt#looping_with_codepointat) (if not done right, it breaks emojis and compound characters) and join with `\200b` (`​`) on `name`, `placeholder`, `title` attributes
    - split a string by [Unicode code points with surrogates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt#looping_with_codepointat) (if not done right, it breaks emojis and compound characters) and join with `\200b` (`​`) on `name`, `placeholder`, `title` attributes
  2. KrofDrakula created this gist Feb 24, 2022.
    22 changes: 22 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    # Strategies for disabling autofill prompts in browsers

    This document gathers possible mitigation strategies when dealing with browser or extension provided autofill suggestions that impact usability of a given website's UI and UX.

    You should apply the least amount of workaround you can get away with, since it could affect the accessibility of your website when taken too far. Always verify your application with your intended audience in mind.

    ## Disabling autofill with standard HTML attributes

    - [`autocomplete="off"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
    - [`autocomplete="new-password"`](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password)
    - [`aria-autocomplete="off"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete)
    - [`aria-haspopup="true"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)

    ## Vendor-specific overrides

    - **Dashlane**: [`data-form-type="other"`](https://dashlane.github.io/SAWF/#data-form-type-field-value-other)

    ## Obfuscating properties to thwart browser and extension heuristics

    **🚨 WARNING: this method will impact accessibility for screen readers and other access methods, and copy/pasting this text can result in corrupted text in some apps.** Use as a last resort.

    - split a string by [Unicode code points](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt#looping_with_codepointat) (if not done right, it breaks emojis and compound characters) and join with `\200b` (`​`) on `name`, `placeholder`, `title` attributes