AI Prompts for Add Accessibility Features to UI

Analyze the last generated component and extract all ARIA attributes and role attributes. For each attribute, identify any missing labels or roles that are essential for ensuring accessibility compliance. Provide a detailed report that includes the specific attributes found, the missing elements, and recommendations for how to address these accessibility issues.

Please analyze the following UI component code for accessibility issues: [CODE SNIPPET]. Specifically, identify any missing ARIA labels and evaluate the keyboard navigation support. Provide a detailed report outlining the issues found and suggest improvements to enhance accessibility compliance.

Please interpret the accessibility requirements I provided, focusing on the need for ARIA labels and keyboard navigation. Explain your understanding of how these elements enhance accessibility for users with disabilities. Additionally, provide examples of how you would implement ARIA labels and ensure effective keyboard navigation in a web application. Format your response in a structured way, detailing each aspect clearly.

Identify the expected accessibility features for the last generated component compared to what was actually produced. Please provide a detailed comparison that includes specific information about any missing ARIA labels, keyboard navigation issues, and other accessibility shortcomings. Format the output in a table with columns for "Feature," "Expected," and "Actual," and include a summary of the implications of these discrepancies on user experience.

Please analyze the last output for any violations of accessibility guidelines. Identify the specific rules that were not followed, particularly focusing on ARIA labels and keyboard navigation. Quote the relevant sections from the guidelines that pertain to these aspects, and provide a brief explanation of how each violation affects accessibility.

Please modify the last generated component by adding ARIA labels to each interactive element. Ensure that the labels accurately describe the function of the elements to enhance accessibility. Provide the updated code snippet with comments explaining the purpose of each ARIA label added.

Please rewrite the last generated component to include the necessary role attributes for all interactive elements. Make sure to follow accessibility standards and provide a brief explanation of how these attributes enhance usability for individuals with disabilities. Format the output to clearly highlight the changes made and the specific role attributes added.

Please update the last generated component to ensure it fully supports keyboard navigation. Make certain that all interactive elements can be accessed and operated using keyboard controls. Additionally, provide a brief summary of the changes made and how they improve accessibility for users relying on keyboard navigation.

Identify the specific section of the last generated component that lacks ARIA attributes. Provide a detailed list of the necessary accessibility features that need to be added. Then, make the appropriate changes to that section, ensuring that all required ARIA attributes are correctly implemented to enhance accessibility. Format your response by first listing the identified issues, followed by the revised code snippet with the added attributes.

Please review the ARIA attributes in the last generated component to ensure they follow the correct format. Validate that each attribute is syntactically correct and properly applied according to accessibility standards. Provide a detailed report highlighting any errors found, along with suggested corrections for each attribute.

Conduct an accessibility audit on the modified component to verify that all ARIA labels and keyboard navigation features are correctly implemented. Please provide a detailed report of your findings, including any issues identified, recommendations for improvements, and a summary of compliance with accessibility standards. Format the report with sections for each type of issue found, along with suggested fixes.

Please display the differences in the changes made to the last generated component. Specifically, highlight the additions of ARIA labels and keyboard navigation support. Format the output to clearly show what was added, removed, or modified, and ensure that the changes are easy to understand for someone reviewing the accessibility improvements.

Re-run the original accessibility test for the component that previously failed due to missing accessibility features. Please provide a detailed report confirming whether the modified component now passes all accessibility checks. Include specific information on which accessibility criteria were met, any remaining issues, and suggestions for further improvements if necessary.

Please verify the keyboard navigation functionality of the modified component. Ensure that all interactive elements can be accessed using keyboard controls. Document any issues you encounter, including specific elements that are not navigable and suggestions for improvement. Format your findings in a clear report with sections for each issue identified and recommended solutions.

Verify the output state of the modified component to ensure that all required ARIA labels and role attributes are correctly applied. Please provide a detailed report that includes a checklist of the ARIA labels and roles used, any discrepancies found, and suggestions for correcting any issues. Additionally, summarize how these attributes enhance accessibility for users with disabilities.

Create a prompt template that ensures accessibility compliance for all generated components. Specify that each component must include ARIA labels and support keyboard navigation. Format the output as a checklist that can be reused for future projects, detailing the importance of these requirements and providing examples of how to implement them effectively.

Create a detailed component specification snippet for UI components that outlines the necessary accessibility features. Include specific ARIA attributes that should be implemented, as well as the requirements for keyboard navigation to ensure compliance with accessibility standards. Format the output as a structured list, detailing each feature and its purpose, along with examples where applicable.

Define a style constraint for UI components that ensures the inclusion of accessibility features. The phrase should clearly state: 'All components must adhere to accessibility standards, including [SPECIFIC ACCESSIBILITY FEATURES] such as ARIA labels and keyboard navigation.' Additionally, provide examples of how these features can be implemented in different UI components to enhance usability for all users.

Draft a detailed configuration note for shadcn/ui that outlines the importance of incorporating ARIA attributes and ensuring keyboard navigation support in all generated components. Include specific examples of ARIA attributes that should be used, guidelines for implementing keyboard navigation, and the potential impact on user experience and accessibility compliance. Format the note into sections for clarity, such as "Introduction," "ARIA Attributes," "Keyboard Navigation," and "Conclusion.

Before generating any user interface (UI), please create a context-reload prompt that emphasizes the importance of accessibility. The prompt should state: "Ensure that all components include ARIA labels and support keyboard navigation." Additionally, provide a brief explanation of why these accessibility features are crucial for user experience and compliance with accessibility standards.