Review interface copy for assumptions about disability, gender, or culture. Suggest neutral wording, clearer instructions, and constructive error messages that guide people through problems without blaming them or relying on culturally specific expressions.
- Reviewing interface copy for exclusionary language
- Rewriting error messages that blame users
- Replacing gender assumptions with neutral wording
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review web page headings for skipped levels and unclear hierarchy. Identify specific elements to adjust, explain how heading structure supports screen reader navigation, and describe how to verify the revised page with accessibility tools.
- Checking heading levels across a web page
- Reviewing heading structure in shared components
- Improving navigation through screen reader heading lists
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Find links that use identical text but lead to different URLs. Review the rendered page and suggest distinct labels or consistent destinations so readers, including people using screen readers, can understand where each link goes.
- Find identical link text with different destinations
- Improve labels in screen reader link lists
- Review links in shared components
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review iframe and frame titles so screen reader users can identify embedded content before entering it. Find missing or empty title attributes, add meaningful descriptions, and verify the changes with browser accessibility tools or assistive technology.
- Checking titles on embedded advertisements and social media widgets
- Reviewing missing or empty iframe title attributes
- Verifying frame identification with a screen reader
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review decorative images and icons to prevent unnecessary screen reader announcements. Check empty alt text, aria-hidden, and relevant keyboard behavior, then suggest fixes for concrete accessibility issues without flagging decorative assets solely because they exist.
- Checking decorative images for unnecessary announcements
- Reviewing accessibility of SVGs and icons
- Checking shared decorative component patterns
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Find empty headings or headings containing only whitespace in rendered web pages. Guide fixes by adding descriptive text or removing unnecessary heading tags, helping screen reader users navigate a meaningful document structure.
- Find empty headings in web pages
- Review components that use headings only for styling
- Check heading navigation with a screen reader
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review HTML lists of terms and descriptions, finding dt and dd elements used without a containing dl. Help correct the structure so assistive technologies can associate each term with its description, and explain how to verify the fix.
- Check HTML structure in a glossary
- Review lists of metadata labels and values
- Fix dt and dd elements missing a containing dl
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review GIFs, videos, and CSS animations for rapid flashing that may trigger seizures in photosensitive users. Check flash frequency and screen area, then suggest removing or slowing effects or replacing them with fades or static content.
- Checking flashing effects in animated GIFs
- Reviewing rapid flashing in videos and CSS animations
- Replacing flashing effects with fades or static content
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Find empty links, unlabeled icon links, and broken destinations. Add descriptive text or labels that screen readers can announce, and fix or remove broken links so users can understand where each link leads.
- Finding empty links across a page
- Adding destination labels to icon links
- Reviewing and fixing broken link destinations
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review keyboard focus, the element currently selected for interaction, to check that Tab navigation follows the page’s visual order. Identify HTML ordering issues and verify focus stays within dialogs and returns to their triggers.
- Auditing a page’s Tab navigation order
- Checking focus when dialogs open and close
- Reviewing HTML order and tabindex values
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Check HTML definition lists, which pair terms with descriptions, for structural problems. Identify invalid child elements and unclear relationships, suggest markup fixes, and explain how to verify that screen readers group the information correctly.
- Reviewing HTML structure in glossaries
- Checking term and description relationships
- Fixing definition lists that confuse screen readers
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review where keyboard focus, the current target for keyboard input, moves when dialogs open, views change, or content updates. Identify misplaced or lost focus and propose changes that help keyboard and screen reader users continue navigating.
- Checking focus when dialogs open and close
- Reviewing focus after SPA navigation
- Keeping keyboard navigation usable during content updates
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review links, buttons, and form fields for duplicate HTML IDs. Identify affected controls, suggest unique IDs, and explain how to verify keyboard navigation, focus movement, and screen reader behavior after the fix.
- Checking HTML IDs in forms
- Investigating unexpected keyboard focus
- Reviewing shared interactive components
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review rendered HTML for duplicate IDs used by ARIA attributes, which connect elements to labels and descriptions for assistive technology. Identify ambiguous references, correct IDs and their links, and explain how to verify the changes.
- Investigating incorrect labels read by screen readers
- Checking repeated components for duplicate IDs
- Reviewing ARIA references in a design system
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review buttons for missing or unclear names, including controls that contain only icons. Add text or labels that explain each action to screen reader users, and replace buttons used for page navigation with links.
- Finding buttons without descriptive names
- Labeling icon-only buttons for screen readers
- Checking whether navigation controls should be links
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
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.
- Reviewing links and buttons inside text containers
- Investigating controls missing from screen reader output
- Checking accessibility in design system components
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
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.
- Checking hidden regions for focusable controls
- Investigating silent focus during keyboard navigation
- Reviewing accessibility in shared UI components
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Check whether aria-hidden on the document body hides an entire page from screen readers, tools that read content aloud. Identify problematic states and suggest limiting hiding to specific background containers.
- Checking accessibility when a modal opens
- Investigating why a page is missing from screen readers
- Reviewing body attributes across UI state changes
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
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-Checklist☆ 74.5KUpdated Oct 6, 2026
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-Checklist☆ 74.5KUpdated Oct 6, 2026
Review HTML for deprecated ARIA roles, which describe elements to assistive technology, and abstract roles that should not appear in markup. Suggest recommended replacements or native HTML elements and explain potential browser and screen reader compatibility issues.
- Find deprecated ARIA roles in existing code
- Review whether native HTML can replace custom roles
- Inspect role usage in shared UI components
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Review dynamic page updates so screen reader users hear status changes without moving focus. Check ARIA live regions, areas that announce updates, choose suitable announcement urgency, and identify markup or interaction issues to verify with accessibility tools.
- Checking announcements of form results and errors
- Making cart updates audible to screen reader users
- Reviewing loading and status announcements
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
Check whether ARIA attributes, which describe interface elements to assistive technology, are supported by each element’s role. Review rendered HTML and interactive states, identify invalid combinations, and suggest removals or corrections to support accurate screen reader interpretation.
- Checking ARIA attributes in shared components
- Reviewing accessibility in a design system
- Investigating incorrect screen reader output
thedaviddias/Front-End-Checklist☆ 74.5KUpdated Oct 6, 2026
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-Checklist☆ 74.5KUpdated Oct 6, 2026