UI Kits
Quality & accessibility

Accessibility Center.

Review component-level accessibility guidance, implementation notes, and release QA checks in one place.

84 components reviewed
Buttons

Primary Button

Open →

Accessibility

  • Use an accessible name that describes the action.
  • Preserve visible keyboard focus.
  • Do not rely on color alone to communicate state.

QA

  • Verify keyboard focus is visible.
  • Check disabled state does not appear actionable.
  • Confirm primary and secondary actions remain distinct.
Buttons

Secondary Button

Open →

Accessibility

  • Use an accessible name that describes the action.
  • Preserve visible keyboard focus.
  • Do not rely on color alone to communicate state.

QA

  • Verify keyboard focus is visible.
  • Check disabled state does not appear actionable.
  • Confirm primary and secondary actions remain distinct.
Buttons

Button Group

Open →

Accessibility

  • Use an accessible name that describes the action.
  • Preserve visible keyboard focus.
  • Do not rely on color alone to communicate state.

QA

  • Verify keyboard focus is visible.
  • Check disabled state does not appear actionable.
  • Confirm primary and secondary actions remain distinct.
Forms

Text Input

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Search Field

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Select Field

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Checkbox Group

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Login Form

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Signup Form

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Cards

Basic Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Cards

Profile Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Cards

Stat Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Cards

Product Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Cards

Feature Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Navigation

Top Navigation

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Navigation

Sidebar Navigation

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Navigation

Breadcrumbs

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Navigation

Tabs

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Navigation

Pagination

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Sections

Site Header

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Hero Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Feature Grid

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Pricing Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Testimonial Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

CTA Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Site Footer

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Tables

Basic Table

Open →

Accessibility

  • Use table headers for column and row relationships.
  • Provide accessible labels for row actions.
  • Offer a responsive alternative if the table becomes unusable on small screens.

QA

  • Check horizontal overflow on narrow screens.
  • Verify column headers are meaningful.
  • Test empty and loading states.
Tables

Users Table

Open →

Accessibility

  • Use table headers for column and row relationships.
  • Provide accessible labels for row actions.
  • Offer a responsive alternative if the table becomes unusable on small screens.

QA

  • Check horizontal overflow on narrow screens.
  • Verify column headers are meaningful.
  • Test empty and loading states.
Tables

Orders Table

Open →

Accessibility

  • Use table headers for column and row relationships.
  • Provide accessible labels for row actions.
  • Offer a responsive alternative if the table becomes unusable on small screens.

QA

  • Check horizontal overflow on narrow screens.
  • Verify column headers are meaningful.
  • Test empty and loading states.
Dashboards

Dashboard Summary

Open →

Accessibility

  • Do not communicate trends with color alone.
  • Provide text labels for charts and metrics.
  • Keep reading order meaningful.

QA

  • Check metric labels remain understandable without color.
  • Verify dense layouts at tablet widths.
  • Test empty, loading, and alert states.
Dashboards

Activity Feed

Open →

Accessibility

  • Do not communicate trends with color alone.
  • Provide text labels for charts and metrics.
  • Keep reading order meaningful.

QA

  • Check metric labels remain understandable without color.
  • Verify dense layouts at tablet widths.
  • Test empty, loading, and alert states.
Dashboards

Analytics Panel

Open →

Accessibility

  • Do not communicate trends with color alone.
  • Provide text labels for charts and metrics.
  • Keep reading order meaningful.

QA

  • Check metric labels remain understandable without color.
  • Verify dense layouts at tablet widths.
  • Test empty, loading, and alert states.
Feedback

Modal Dialog

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Feedback

Success Alert

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Feedback

Warning Alert

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Feedback

Empty State

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Feedback

Accordion

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Productivity

Calendar Event

Open →

Accessibility

  • Support keyboard interaction for repeated workflows.
  • Use status text in addition to icons.
  • Keep controls consistently placed.

QA

  • Test repeated keyboard workflows.
  • Confirm status is communicated with text.
  • Check drag/reorder or selection behavior if applicable.
Productivity

Task Item

Open →

Accessibility

  • Support keyboard interaction for repeated workflows.
  • Use status text in addition to icons.
  • Keep controls consistently placed.

QA

  • Test repeated keyboard workflows.
  • Confirm status is communicated with text.
  • Check drag/reorder or selection behavior if applicable.
Productivity

Contact Row

Open →

Accessibility

  • Support keyboard interaction for repeated workflows.
  • Use status text in addition to icons.
  • Keep controls consistently placed.

QA

  • Test repeated keyboard workflows.
  • Confirm status is communicated with text.
  • Check drag/reorder or selection behavior if applicable.
Buttons

Icon Button

Open →

Accessibility

  • Use an accessible name that describes the action.
  • Preserve visible keyboard focus.
  • Do not rely on color alone to communicate state.

QA

  • Verify keyboard focus is visible.
  • Check disabled state does not appear actionable.
  • Confirm primary and secondary actions remain distinct.
Buttons

Split Button

Open →

Accessibility

  • Use an accessible name that describes the action.
  • Preserve visible keyboard focus.
  • Do not rely on color alone to communicate state.

QA

  • Verify keyboard focus is visible.
  • Check disabled state does not appear actionable.
  • Confirm primary and secondary actions remain distinct.
Forms

Textarea Field

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Toggle Switch

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Radio Group

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

File Upload

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Cards

Notification Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Cards

Team Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Cards

Project Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Navigation

Command Menu

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Navigation

Stepper

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Navigation

Mega Menu

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Tables

Comparison Table

Open →

Accessibility

  • Use table headers for column and row relationships.
  • Provide accessible labels for row actions.
  • Offer a responsive alternative if the table becomes unusable on small screens.

QA

  • Check horizontal overflow on narrow screens.
  • Verify column headers are meaningful.
  • Test empty and loading states.
Tables

Invoice Table

Open →

Accessibility

  • Use table headers for column and row relationships.
  • Provide accessible labels for row actions.
  • Offer a responsive alternative if the table becomes unusable on small screens.

QA

  • Check horizontal overflow on narrow screens.
  • Verify column headers are meaningful.
  • Test empty and loading states.
Dashboards

Kanban Board

Open →

Accessibility

  • Do not communicate trends with color alone.
  • Provide text labels for charts and metrics.
  • Keep reading order meaningful.

QA

  • Check metric labels remain understandable without color.
  • Verify dense layouts at tablet widths.
  • Test empty, loading, and alert states.
Dashboards

Progress Panel

Open →

Accessibility

  • Do not communicate trends with color alone.
  • Provide text labels for charts and metrics.
  • Keep reading order meaningful.

QA

  • Check metric labels remain understandable without color.
  • Verify dense layouts at tablet widths.
  • Test empty, loading, and alert states.
Feedback

Toast

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Feedback

Badge Set

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Feedback

Skeleton Loader

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Productivity

Timeline

Open →

Accessibility

  • Support keyboard interaction for repeated workflows.
  • Use status text in addition to icons.
  • Keep controls consistently placed.

QA

  • Test repeated keyboard workflows.
  • Confirm status is communicated with text.
  • Check drag/reorder or selection behavior if applicable.
Productivity

File Row

Open →

Accessibility

  • Support keyboard interaction for repeated workflows.
  • Use status text in addition to icons.
  • Keep controls consistently placed.

QA

  • Test repeated keyboard workflows.
  • Confirm status is communicated with text.
  • Check drag/reorder or selection behavior if applicable.
Productivity

Message Thread

Open →

Accessibility

  • Support keyboard interaction for repeated workflows.
  • Use status text in addition to icons.
  • Keep controls consistently placed.

QA

  • Test repeated keyboard workflows.
  • Confirm status is communicated with text.
  • Check drag/reorder or selection behavior if applicable.
Ecommerce

Checkout Summary

Open →

Accessibility

  • Expose price and status as text.
  • Keep purchase controls keyboard accessible.
  • Use descriptive labels for product imagery.

QA

  • Verify price and availability are clear.
  • Check disabled/out-of-stock state.
  • Test purchase actions at mobile widths.
Ecommerce

Product Gallery

Open →

Accessibility

  • Expose price and status as text.
  • Keep purchase controls keyboard accessible.
  • Use descriptive labels for product imagery.

QA

  • Verify price and availability are clear.
  • Check disabled/out-of-stock state.
  • Test purchase actions at mobile widths.
Sections

Announcement Bar

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Logo Cloud

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

FAQ Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Newsletter Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Contact Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Stats Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Team Section

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Blog List

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Sections

Article Header

Open →

Accessibility

  • Maintain heading hierarchy.
  • Keep text contrast readable.
  • Do not hide essential content at narrow breakpoints.

QA

  • Check heading hierarchy.
  • Test content stacking on mobile.
  • Confirm spacing remains consistent between adjacent sections.
Forms

Settings Panel

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Profile Form

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Forms

Billing Panel

Open →

Accessibility

  • Associate every input with a visible label.
  • Expose validation errors in text.
  • Maintain logical keyboard order and sufficient touch target size.

QA

  • Verify labels remain visible after entry.
  • Check keyboard tab order.
  • Test validation and error-message placement.
  • Confirm touch targets are large enough.
Cards

Invoice Summary

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Cards

Support Card

Open →

Accessibility

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.

QA

  • Check text wrapping at narrow widths.
  • Avoid nested click targets that conflict.
  • Verify card actions remain reachable by keyboard.
Dashboards

Metric Row

Open →

Accessibility

  • Do not communicate trends with color alone.
  • Provide text labels for charts and metrics.
  • Keep reading order meaningful.

QA

  • Check metric labels remain understandable without color.
  • Verify dense layouts at tablet widths.
  • Test empty, loading, and alert states.
Navigation

Filter Toolbar

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Navigation

Data Toolbar

Open →

Accessibility

  • Use semantic nav landmarks where appropriate.
  • Indicate current page or active state.
  • Support keyboard and screen-reader navigation.

QA

  • Test current-page state.
  • Verify mobile collapse/expansion.
  • Confirm keyboard focus order is logical.
Feedback

Notification Center

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Feedback

Error State

Open →

Accessibility

  • Use role/status semantics where appropriate.
  • Do not make transient messages disappear too quickly.
  • Include a clear recovery action for errors.

QA

  • Verify message text explains what happened.
  • Check contrast in all feedback colors.
  • Provide recovery action for errors when possible.
Tables

Permission Table

Open →

Accessibility

  • Use table headers for column and row relationships.
  • Provide accessible labels for row actions.
  • Offer a responsive alternative if the table becomes unusable on small screens.

QA

  • Check horizontal overflow on narrow screens.
  • Verify column headers are meaningful.
  • Test empty and loading states.