[]

Frontend

The best skills for engineering-related work, like building, testing, reviewing and shipping software.

  • figure-figcaption

    Wrap captioned images in figure and figcaption elements for valid markup

    ★74.6K
  • file-upload-accessibility

    Make file upload inputs and drop zones usable with keyboard and screen readers

    ★74.6K
  • flashing-content

    Prevent flashing content that could trigger seizures in sensitive users

    ★74.6K
  • flexbox-patterns

    Apply Flexbox patterns for alignment, spacing and one dimensional layouts

    ★74.6K
  • focus-management

    Move and restore focus during dialogs, route changes and dynamic updates

    ★74.6K
  • focus-not-obscured

    Make sure sticky headers and banners never hide the focused element

    ★74.6K
  • focus-order

    Check that keyboard focus moves through the page in a logical order

    ★74.6K
  • focus-styles

    Add visible custom focus indicators so keyboard users see where they are

    ★74.6K
  • form-field-multiple-labels

    Give each form field a single label so screen readers announce it once

    ★74.6K
  • form-labels

    Attach a visible label to every form control with label for or wrapping

    ★74.6K
  • form-validation

    Validate forms accessibly with clear messages that screen readers announce

    ★74.6K
  • frame-title

    Give iframes and frames a title so screen readers say what they contain

    ★74.6K
  • has-selector

    Replace JavaScript class toggling on parents with the CSS :has selector

    ★74.6K
  • heading-hierarchy

    Use a logical heading hierarchy from h1 down so structure is clear to readers

    ★74.6K
  • heading-order

    Keep heading levels in order so no level is skipped in the outline

    ★74.6K
  • horizontal-scroll

    Stop horizontal scrolling at 320px width and 400% zoom for WCAG reflow

    ★74.6K
  • html-xml-lang-mismatch

    Keep lang and xml:lang in sync for XHTML and polyglot documents

    ★74.6K
  • html5-semantic-elements

    Use header, nav, main, article and footer elements for page structure

    ★74.6K
  • identical-links-same-purpose

    Make links with the same text and purpose point to the same destination

    ★74.6K
  • image-redundant-alt

    Remove redundant alt text that repeats nearby captions or link names

    ★74.6K
  • immutable-patterns

    Prefer immutable data updates that avoid hidden mutations in JavaScript

    ★74.6K
  • input-image-alt

    Give image buttons alt text that says what the button does

    ★74.6K
  • input-types

    Use semantic input type values like email, tel and date for better input

    ★74.6K
  • javascript-inline

    Move inline JavaScript out of HTML attributes and into script files

    ★74.6K
  • js-redirects

    Replace JavaScript redirects with server side redirects that crawlers can follow

    ★74.6K
  • json-safety

    Parse JSON safely with error handling so bad input does not crash scripts

    ★74.6K
  • keyboard-navigation

    Make every interactive element reachable and usable with the keyboard alone

    ★74.6K
  • label-content-name-mismatch

    Make visible labels match accessible names so voice control users can use them

    ★74.6K
  • landmark-one-main

    Include exactly one main landmark so screen reader users can jump to content

    ★74.6K
  • landmark-regions

    Wrap page regions in proper landmarks so assistive tech can navigate by section

    ★74.6K
  • lang-attribute

    Set a valid lang attribute on html and on foreign language passages

    ★74.6K
  • link-text

    Write descriptive link text so each link makes sense out of context

    ★74.6K
  • list-structure

    Use correct ul, ol and li structure so lists are announced as lists

    ★74.6K
  • listitem

    Make sure every li sits inside a ul or ol and ARIA listitem has a list parent

    ★74.6K
  • loading-indicators

    Show loading indicators so users know when content is still on its way

    ★74.6K
  • logical-properties

    Use CSS logical properties so layouts flip correctly for right to left text

    ★74.6K
  • meta-refresh

    Replace meta refresh redirects with real server side redirects

    ★74.6K
  • modal-accessibility

    Make modal dialogs keyboard accessible with focus trapping and Escape to close

    ★74.6K
  • modern-array-methods

    Use modern array and object methods like map, filter and Object.entries

    ★74.6K
  • naming-conventions

    Keep CSS class names consistent with one naming convention across components

    ★74.6K
  • navigation-landmark

    Mark up site navigation with nav landmarks that screen readers can jump to

    ★74.6K
  • noscript-tag

    Add noscript fallback content so pages still work without JavaScript

    ★74.6K
  • object-alt

    Provide alternative text for object and embed elements that show content

    ★74.6K
  • offline-fallback

    Add an offline fallback page so users on flaky networks still see something

    ★74.6K
  • orientation

    Test layouts in portrait and landscape and remove needless orientation locks

    ★74.6K
  • pagination-accessibility

    Make pagination controls accessible with clear labels and current page state

    ★74.6K
  • paste-inputs

    Allow pasting into all form inputs, including password and code fields

    ★74.6K
  • pluralization

    Handle plural forms correctly for every locale instead of simple count strings

    ★74.6K
  • pwa-installability

    Make a web app installable as a PWA and ready for PWA Builder store submission

    ★74.6K
  • reduced-motion

    Respect reduced motion preferences so animations can be turned down

    ★74.6K