@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
Review rotating slideshows for accessibility and guide fixes to pause controls, keyboard navigation, and screen reader announcements. Check the rendered HTML and ensure the carousel respects users who request reduced motion in their device settings.
Check whether production CSS is minified, meaning unnecessary spaces, comments, and verbose syntax are removed to reduce file size. Review build settings and rendered layouts, then suggest suitable minification tools or framework settings.
Review component styles to find where CSS containment, which isolates rendering work, can limit layout recalculation and repainting. Identify suitable components and off-screen list items, then check their appearance across screen sizes and interaction states.
Check whether HTML, JavaScript, and CSS are delivered with Gzip or Brotli compression. Use measured loading problems and response headers to guide server or CDN changes that reduce the amount of data downloaded.
Review the loading order of CSS and JavaScript to address rendering delays and flashes of unstyled content. Suggest changes to the document head, script loading, and critical styles, while checking layouts across screen sizes and interaction states.
Find broken or fragile image references in markup, styles, and components. Correct paths, restore missing assets, and add fallback images, then verify how the page behaves when image requests fail.
Review images needed when a page first opens, checking file size, display dimensions, and loading priority. Identify changes to preload settings and lazy loading that help the main visual content appear sooner.
Audit canonical URLs, which tell search engines the preferred page address, for redirects. The skill checks rendered HTML and HTTP responses, identifies affected routes or templates, and guides updates that point directly to the final URL returning 200 OK.
Audit slow page loads by measuring how static files, such as images and scripts, are delivered. Check CDN usage, a network of distributed servers, and identify caching or delivery settings that need improvement.
Review layouts that need alignment across both rows and columns, and suggest CSS Grid changes. Check rendered behavior at different screen widths and explain sizing, named areas, and grids that adapt to their content.
Review same-page links for accessible scrolling. Check that reduced-motion preferences disable animated scrolling, provide guidance for instant navigation, and verify that keyboard focus moves to the destination so users can continue navigating there.
Inspect hidden page regions for links, buttons, or inputs that still receive keyboard focus. Identify elements that screen readers cannot announce, suggest focus handling changes, and explain how to verify the resulting keyboard behavior.
Review buttons, links, and menu items to check whether screen readers announce their purpose. Identify missing accessible names, meaning labels available to assistive technology, and suggest fixes using text or ARIA attributes, with guidance for verification.
Review forms for autofocus that moves users past introductory content when a page loads. Suggest removing it or moving focus after user interaction, while considering exceptions for login pages and pages dedicated to search.
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.
Review rendered HTML for links, buttons, or inputs inside role="text" containers. Identify controls hidden from screen readers, suggest markup changes, and explain how to check keyboard access and screen reader output after fixing them.
Review and add automated accessibility checks for components, pages, and continuous integration workflows. Use axe-based tools to detect structural and attribute issues, while identifying checks that still need keyboard or screen reader testing.
Review collapsible accordion sections for keyboard and screen reader access. Check button triggers, expanded-state attributes, panel links, and heading structure, then guide fixes using the HTML actually delivered to the browser.
Check buttons, links, and other controls for clear accessible names, the labels used by assistive technology. Identify missing or vague names and suggest descriptive text or aria-label attributes that explain each action or destination.
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.
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.
Check image alt attributes, the text screen readers use to explain images. Identify missing or vague descriptions, distinguish decorative and linked images, and improve text alternatives for images containing words, charts, and other complex information.
Review author information in structured data, a machine-readable description of page content. Check names, profile links, and connections to articles or pages, then identify corrections using the rendered HTML and HTTP response.
Review ARIA attributes, which describe interface elements to assistive technology, for invalid values and missing ID references. Get specific corrections and guidance for checking that element states and labels are communicated correctly.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)