Frontend
The best skills for engineering-related work, like building, testing, reviewing and shipping software.
aria-toggle-field-namethedaviddias/Front-End-ChecklistName toggle fields such as checkboxes, radios and switches for screen readers★74.6K
aria-toggle-field-nameName toggle fields such as checkboxes, radios and switches for screen readers
aria-tooltip-namethedaviddias/Front-End-ChecklistGive tooltips accessible names so their text is announced with the trigger★74.6K
aria-tooltip-nameGive tooltips accessible names so their text is announced with the trigger
aria-treeitem-namethedaviddias/Front-End-ChecklistBuild custom tree widgets with correct treeitem and group roles and names★74.6K
aria-treeitem-nameBuild custom tree widgets with correct treeitem and group roles and names
aria-valid-attrthedaviddias/Front-End-ChecklistFind and remove ARIA attributes that do not exist in the ARIA spec★74.6K
aria-valid-attrFind and remove ARIA attributes that do not exist in the ARIA spec
aria-valid-attr-valuethedaviddias/Front-End-ChecklistCheck that ARIA attributes use values the spec allows, like true or mixed★74.6K
aria-valid-attr-valueCheck that ARIA attributes use values the spec allows, like true or mixed
audio-descriptionsthedaviddias/Front-End-ChecklistAdd audio description tracks so blind and low vision viewers follow video content★74.6K
audio-descriptionsAdd audio description tracks so blind and low vision viewers follow video content
autofocus-avoidancethedaviddias/Front-End-ChecklistRemove autofocus from form fields so screen reader users are not interrupted★74.6K
autofocus-avoidanceRemove autofocus from form fields so screen reader users are not interrupted
autoplay-mediathedaviddias/Front-End-ChecklistStop autoplaying audio and video that surprises users and hurts accessibility★74.6K
autoplay-mediaStop autoplaying audio and video that surprises users and hurts accessibility
blocked-linksthedaviddias/Front-End-ChecklistFind links and resource URLs that common ad blocker lists will block★74.6K
blocked-linksFind links and resource URLs that common ad blocker lists will block
breadcrumb-navigationthedaviddias/Front-End-ChecklistBuild breadcrumb navigation with landmark and current page markup for screen readers★74.6K
breadcrumb-navigationBuild breadcrumb navigation with landmark and current page markup for screen readers
broken-htmlthedaviddias/Front-End-ChecklistFix malformed HTML such as unclosed tags and nested elements in invalid places★74.6K
broken-htmlFix malformed HTML such as unclosed tags and nested elements in invalid places
broken-imagesthedaviddias/Front-End-ChecklistFind and fix broken image references on pages and in templates★74.6K
broken-imagesFind and fix broken image references on pages and in templates
button-namethedaviddias/Front-End-ChecklistGive icon-only and empty buttons accessible names for screen readers★74.6K
button-nameGive icon-only and empty buttons accessible names for screen readers
carousel-accessibilitythedaviddias/Front-End-ChecklistMake image carousels keyboard operable with pause controls and labeled slides★74.6K
carousel-accessibilityMake image carousels keyboard operable with pause controls and labeled slides
cascade-layersthedaviddias/Front-End-ChecklistOrganize CSS with cascade layers to fix specificity fights in large codebases★74.6K
cascade-layersOrganize CSS with cascade layers to fix specificity fights in large codebases
charsetthedaviddias/Front-End-ChecklistDeclare UTF-8 charset in HTML so text renders correctly across browsers★74.6K
charsetDeclare UTF-8 charset in HTML so text renders correctly across browsers
clean-up-commentsthedaviddias/Front-End-ChecklistStrip HTML comments and debug code from production templates and builds★74.6K
clean-up-commentsStrip HTML comments and debug code from production templates and builds
console-cleanupthedaviddias/Front-End-ChecklistRemove console.log calls from production bundles so logs do not leak data★74.6K
console-cleanupRemove console.log calls from production bundles so logs do not leak data
const-letthedaviddias/Front-End-ChecklistReplace var with const and let to avoid hoisting and scope bugs in JavaScript★74.6K
const-letReplace var with const and let to avoid hoisting and scope bugs in JavaScript
container-queriesthedaviddias/Front-End-ChecklistUse container queries so components adapt to their own width, not the viewport★74.6K
container-queriesUse container queries so components adapt to their own width, not the viewport
content-without-cssthedaviddias/Front-End-ChecklistCheck that page meaning and reading order still work with CSS turned off★74.6K
content-without-cssCheck that page meaning and reading order still work with CSS turned off
css-at-propertythedaviddias/Front-End-ChecklistUse CSS @property to animate custom properties and type design tokens★74.6K
css-at-propertyUse CSS @property to animate custom properties and type design tokens
css-containmentthedaviddias/Front-End-ChecklistApply CSS containment to limit repaints to the parts of the page that change★74.6K
css-containmentApply CSS containment to limit repaints to the parts of the page that change
css-custom-propertiesthedaviddias/Front-End-ChecklistUse CSS custom properties as design tokens for colors, spacing and type★74.6K
css-custom-propertiesUse CSS custom properties as design tokens for colors, spacing and type
css-gridthedaviddias/Front-End-ChecklistUse CSS Grid for two-dimensional page and component layouts★74.6K
css-orderthedaviddias/Front-End-ChecklistOrder stylesheets so cascade rules resolve in the intended sequence★74.6K
css-orderOrder stylesheets so cascade rules resolve in the intended sequence
css-printthedaviddias/Front-End-ChecklistAdd a print stylesheet so pages print cleanly without navigation or ads★74.6K
css-printAdd a print stylesheet so pages print cleanly without navigation or ads
currency-formattingthedaviddias/Front-End-ChecklistFormat prices, numbers and dates with Intl APIs instead of hand-built strings★74.6K
currency-formattingFormat prices, numbers and dates with Intl APIs instead of hand-built strings
custom-element-accessibilitythedaviddias/Front-End-ChecklistMake Web Components handle ARIA, keyboard input and form association correctly★74.6K
custom-element-accessibilityMake Web Components handle ARIA, keyboard input and form association correctly
dark-mode-cssthedaviddias/Front-End-ChecklistSupport dark mode with prefers-color-scheme in your stylesheets★74.6K
dark-mode-cssSupport dark mode with prefers-color-scheme in your stylesheets
decorative-elementsthedaviddias/Front-End-ChecklistHide decorative images and icons from screen readers so they do not add noise★74.6K
decorative-elementsHide decorative images and icons from screen readers so they do not add noise
defer-asyncthedaviddias/Front-End-ChecklistLoad scripts with defer, async or type module so HTML parsing is not blocked★74.6K
defer-asyncLoad scripts with defer, async or type module so HTML parsing is not blocked
definition-listthedaviddias/Front-End-ChecklistStructure term and definition pairs with correct dl, dt and dd markup★74.6K
definition-listStructure term and definition pairs with correct dl, dt and dd markup
dimensionsthedaviddias/Front-End-ChecklistSet explicit width and height on images to stop layout shift during load★74.6K
dimensionsSet explicit width and height on images to stop layout shift during load
direction-attributethedaviddias/Front-End-ChecklistSet the dir attribute so right to left languages render in the correct direction★74.6K
direction-attributeSet the dir attribute so right to left languages render in the correct direction
dlitemthedaviddias/Front-End-ChecklistWrap definition items in a dl list so their structure is valid HTML★74.6K
dlitemWrap definition items in a dl list so their structure is valid HTML
doctypethedaviddias/Front-End-ChecklistCheck that every HTML document starts with a valid doctype declaration★74.6K
doctypeCheck that every HTML document starts with a valid doctype declaration
draggable-accessibilitythedaviddias/Front-End-ChecklistGive drag and drop interfaces keyboard and screen reader alternatives★74.6K
draggable-accessibilityGive drag and drop interfaces keyboard and screen reader alternatives
duplicate-id-activethedaviddias/Front-End-ChecklistKeep IDs unique on interactive elements so labels and events hit the right node★74.6K
duplicate-id-activeKeep IDs unique on interactive elements so labels and events hit the right node
duplicate-id-ariathedaviddias/Front-End-ChecklistKeep IDs unique for elements that ARIA attributes reference★74.6K
duplicate-id-ariaKeep IDs unique for elements that ARIA attributes reference
element-hidingthedaviddias/Front-End-ChecklistFind layout breaks caused by ad blocker rules that hide common class names★74.6K
element-hidingFind layout breaks caused by ad blocker rules that hide common class names
embedded-or-inline-cssthedaviddias/Front-End-ChecklistMove embedded and inline styles into external stylesheets for easier caching★74.6K
embedded-or-inline-cssMove embedded and inline styles into external stylesheets for easier caching
empty-headingthedaviddias/Front-End-ChecklistMake sure every heading contains text so screen readers announce a title★74.6K
empty-headingMake sure every heading contains text so screen readers announce a title
empty-linksthedaviddias/Front-End-ChecklistFix empty and broken links that have no text or destination for users★74.6K
empty-linksFix empty and broken links that have no text or destination for users
error-handlingthedaviddias/Front-End-ChecklistAdd error handling to client scripts so failures do not break the whole page★74.6K
error-handlingAdd error handling to client scripts so failures do not break the whole page
error-imagesthedaviddias/Front-End-ChecklistShow a fallback when images fail to load instead of a broken icon★74.6K
error-imagesShow a fallback when images fail to load instead of a broken icon
es-modulesthedaviddias/Front-End-ChecklistUse ES module import and export syntax to structure JavaScript code★74.6K
es-modulesUse ES module import and export syntax to structure JavaScript code
event-delegationthedaviddias/Front-End-ChecklistAttach one event listener to a parent for dynamic child elements★74.6K
event-delegationAttach one event listener to a parent for dynamic child elements
faviconthedaviddias/Front-End-ChecklistSet up a correct favicon link in the head for browser tabs and bookmarks★74.6K
faviconSet up a correct favicon link in the head for browser tabs and bookmarks
faviconsthedaviddias/Front-End-ChecklistProvide favicons for every device, from touch icons to Android and Windows★74.6K
faviconsProvide favicons for every device, from touch icons to Android and Windows