Skip to content
cccskills

David Dias

@thedaviddias

Staff Front-End Engineer | Front-End Architecture, Design Systems & Accessibility | Creator of the Front-End Checklist (74K+ ⭐) and serving 100K+ devs

467 skills6 repositories 75.2K

Skills (467)

Refine in search

aria-tooltip-name

FreeSummaryAI rating 100

Review tooltips so their extra information is available to screen reader users. Check accessible names, meaning labels available to assistive technology, and links to the elements that trigger them, then suggest fixes and verification steps.

  • Checking whether tooltip information can be read aloud
  • Reviewing links between tooltips and their triggers
  • Auditing shared tooltip components
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

ai-content

FreeSummaryAI rating 90

Audit AI-generated articles for factual accuracy, original value, and a natural voice. Suggest revisions grounded in original research or experience, and inspect rendered HTML, metadata, and response headers to identify issues in search-facing pages.

  • Checking facts in AI-generated articles
  • Adding original research and experience
  • Aligning article tone with a brand
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

audio-descriptions

FreeSummaryAI rating 100

Review videos for information conveyed only through images, such as actions, expressions, and on-screen text. Identify missing audio descriptions and outline options for a separate description track, an extended version, or descriptions within the main narration.

  • Checking product demos for information missing from the audio
  • Planning audio descriptions for actions and on-screen text
  • Reviewing video description markup and player interactions
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

aria-dialog-name

FreeSummaryAI rating 100

Review dialogs to check whether screen readers can announce their purpose when they open. Identify missing or unclear labels, suggest title or label associations, and explain how to verify the changes with accessibility tools.

  • Checking names on modal dialogs
  • Reviewing labels on alert dialogs
  • Auditing shared dialog components
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

aria-toggle-field-name

FreeSummaryAI rating 100

Check checkboxes, radio buttons, and switches for descriptive names that screen readers can announce. Identify missing or unclear labels, suggest appropriate HTML or ARIA labeling, and explain how to verify the changes with accessibility tools.

  • Checking labels on checkboxes and radio buttons
  • Reviewing whether switch names explain their purpose
  • Fixing missing or unclear accessible names
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

blocked-links

FreeSummaryAI rating 80

Review links and external resources for domains that ad blockers commonly block. Find navigation and loading failures, test behavior with uBlock Origin, and suggest direct links, self-hosted scripts, or server-side forwarding where appropriate.

  • Investigate links that fail with ad blockers enabled
  • Check loading of external scripts and images
  • Review tracking redirects in navigation links
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

aria-roles

FreeSummaryAI rating 100

Review ARIA roles, labels that tell assistive technology what page elements do, and correct invalid values. Prefer standard HTML controls where suitable, then check keyboard behavior, focus movement, and screen reader output to verify the changes.

  • Finding invalid or misspelled ARIA role values
  • Replacing custom widgets with standard HTML controls
  • Reviewing accessibility in shared UI components
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

aria-required-parent

FreeSummaryAI rating 90

Review whether ARIA roles, which describe interface elements to assistive technology, have the required parent roles. Find misplaced menu items, tabs, or list items, suggest suitable containers, and explain how to verify the corrected structure.

  • Checking parent roles for menu items
  • Reviewing tab and list structures
  • Auditing design-system components
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

accesskeys

FreeSummaryAI rating 90

Check a page for duplicate accesskey values, which define keyboard shortcuts for elements. Identify conflicting assignments, suggest unique values or removal, and describe how to verify keyboard behavior with browser accessibility tools or assistive technology.

  • Finding duplicate keyboard shortcut assignments
  • Reviewing keyboard access to interactive elements
  • Checking accessibility after shortcut changes
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

about-page

FreeSummaryAI rating 90

Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.

  • Reviewing a website’s About page
  • Creating a page about the organization and its mission
  • Checking how operator information appears in rendered output
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

aria-progressbar-name

FreeSummaryAI rating 100

Review progress bars to ensure screen reader users can tell which task they represent. Add descriptive accessible names, check progress semantics, and verify value attributes when the current progress is known.

  • Check progress bars for missing accessible names
  • Label loading indicators with their task
  • Review progress values and ranges
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

aria-required-children

FreeSummaryAI rating 100

Review custom tabs, menus, lists, and similar controls for required ARIA child roles, which describe interface elements to assistive technology. Identify missing roles and structural wrappers that prevent screen readers from recognizing the items.

  • Reviewing the structure of custom tabs and menus
  • Investigating items missing from screen reader output
  • Checking lists and selectors built with div or span elements
thedaviddias/Front-End-Checklist74.5KUpdated Oct 6, 2026

Use when implementing provide additional context on hover or focus.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when you need to organize and structure site navigation.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when implementing secure password entry with feedback.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when you need to search through content efficiently.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when implementing show completion status of an operation.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when implementing password recovery and reset flows.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when implementing navigate through multiple pages of content.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when implementing enter time in a structured format.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when implementing real-time AI response streaming.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when you need to display focused content or actions.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when you need to organize and structure site navigation.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Use when implementing product display cards for e-commerce.

The English summary is being prepared. Showing the original description.

thedaviddias/ux-patterns-for-developers266Updated Oct 5, 2026

Is this your account? Link GitHub to bring it onto your creator page (Japanese)