Instantly share code, notes, and snippets.

Embed
What would you like to do?

DOM events

Performance

  • Always use a DocumentFragment when appending children to the main DOM tree.
    • Further reading: mdn

Animation

  • Apply will-change to inform browsers what types of optimizations will be needed ahead of time.

Hyperlink

  • Use tel: for a telephone hyperlink.
  • Use rel="noopener" for a external (_blank) hyperlink.

CSS

  • Use currentColor to keep the CSS as short as possible
  • Use :empty selector to hide empty HTML elements
  • Use "quantity queries" to select a quantity of elements

Accessability

  • Use inert to make the element and it children not focusable

Form

  • Use FormData to easily construct a set of key/value pairs representing form fields and their values.
    • Further reading: mdn
  • Use the correct input type attribute.
  • Use the correct input autocomplete attribute.
  • Use the Constraint Validation API, if possible, for validation.

Image

ARIA

aria-invalid

The aria-invalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.

Example

<form>
    <label for="first-name">First name</label>
    <input type="text" id="first-name" name="first-name" aria-invalid="true">
</form>

Further reading: mdn

aria-describedby

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them.

Further reading: mdn

role

The role attribute defines what the general type of object is (such as an article, alert, or slider).

Example

<form>
    <label for="first-name">First name</label>
    <input type="text" id="first-name" name="first-name" aria-invalid="true" aria-describedby="first-name-error">
    <p id="first-name-error" role="alert">Error message</p>
</form>

* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/alerts

Further reading: mdn, wikipedia

aria-live

This attribute notifies the screen readers when content has changed

Example

Loading products

<div aria-live="assertive" role="alert">
    Please wait. Loading.
</div>

Products succesfully loaded

<div aria-live="assertive" role="alert">
    Loading complete.
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment