NV Elements Catalog Starters Repo System Themes About Getting Started Changelog Metrics Support Accessibility Contributions Requests Migration Deprecations Integrations Installation MCP CLI Lint Angular Bundles Extensions Go Hugo Import Maps Lit NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue Foundations Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Panel Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Accessibility

The following document outlines the accessibility standards and guidelines for the Elements system. The goal is to provide an inclusive and accessible user experience for all users.

Guidelines

The World Wide Web Consortium (W3C) provides guidelines for making web content more accessible to people with disabilities. The following are the guidelines that the system aims to follow:

  • WCAG 2.1 AA: This is the latest set of guidelines, which builds upon the previous versions and provides more recommendations for improving accessibility.
  • ARIA Authoring Practices Guide: This guide describes how to apply accessibility semantics to common design patterns and widgets. It provides design patterns and functional examples complemented by in-depth guidance for fundamental practices.
  • WCAG Legal Guidance: Conformance with WCAG is a best practice for legal compliance. WCAG is the universally accepted set of technical standards that, when followed, make digital experiences more accessible. As the global standard, many laws, including the Americans with Disabilities Act and the Accessibility for Ontarians with Disabilities Act, reference conformance with WCAG.

Automated Testing

All components in the library's light theme undergo accessibility testing with axe-core. This automated accessibility testing tool identifies and addresses accessibility issues. But this automates only up to ~60% of test cases and the remaining test cases need manual testing. The team tracks known issues and calls them out on the component documentation page.

Component Specs

All component target to meet a pre-defined and established ARIA Pattern or existing Web Standard Spec. This is to ensure that the component is accessible by default follow well established UX patterns. You can find the spec of each component at the top of its given documentation page.

Expectations

The system has the following expectations for designers and developers:

  • Ensure that all interactive elements are accessible via keyboard navigation.
  • Follow WCAG guidelines for color contrast, layout, and other accessibility-related factors.
  • Conduct regular accessibility audits to identify and address any issues or areas of improvement.
  • Work with stakeholders and users to gather feedback and ensure that the system meets the needs of all users.

Resources