SDAIA UI targets WCAG 2.1 level AA. The components handle the hard parts (roles, keyboard support, focus and labels), but a page is only accessible when the content and the way components are combined are accessible too. This page lists what the components do and what you are responsible for.
| Component | Built-in behavior |
|---|---|
| Text Input, Text Area | The label is linked to the field. Helper and error text are linked with aria-describedby. Errors set aria-invalid and are announced. The required asterisk is hidden from screen readers; the field itself is marked required. |
| Select | WAI-ARIA combobox with a listbox. Arrow keys, Home, End, Page Up and Page Down move through options; Enter and Space select; Escape closes; typing jumps to a matching option. In multi-select, each chip has a named remove button. |
| Modal | role="dialog" with aria-modal, named by its title. Focus moves into the dialog, Tab stays inside it, Escape closes it and focus returns to the button that opened it. The page behind does not scroll. |
| Date Picker |
| The month is a grid. Arrow keys move by day and week, Home and End go to the start and end of the week, Page Up and Page Down change the month (with Shift, the year). Today is marked with aria-current, and month changes are announced. |
| Checkbox, Radio Button, Switch | Native inputs, so they work with the keyboard and with forms. Switch uses role="switch". The switch track meets 3:1 contrast when it is off. |
| Progress Bar, Progress Circle, File Uploader | role="progressbar" with the current value. File Uploader names each progress bar with the file name and status. |
| Chip, Help Icon | No nested interactive controls. The help trigger has a name (default "Help") and its tooltip closes with Escape. |
| DgaIcon | Hidden from screen readers unless you give it a title. |
These behaviors are checked automatically. Every component demo is scanned with axe in light and dark themes and in right-to-left, and keyboard tests cover Select, Modal, Date Picker and the text fields.
label. A placeholder is not a label.aria-label. Button does not add one for you.aria-label or aria-labelledby when there is no visible label next to them.title, even a short one, so the dialog has a name.h1 per page and keep heading levels in order.labels to translate the built-in names of buttons and regions. Many components have a labels prop (for example Select, Date Picker, File Uploader, Table, the media players and the charts). Without it, those names are in English.<TextInput label="National ID" helperText="10 digits, starting with 1 or 2" error={idError} // linked with aria-describedby, sets aria-invalid required // native required by default validationBehavior="aria" // or: announce required without blocking submit />
| Content | Minimum contrast |
|---|---|
| Body text and labels | 4.5:1 |
| Large text (24px, or 18.66px bold, and up) | 3:1 |
| Icons, input borders, focus rings and other UI parts you need to see | 3:1 |
| Disabled controls and decorative elements | No minimum, but don't hide information in them |
text-*, bg-*, border-*). They are tuned to meet these ratios in the light and dark themes and in every brand.tabIndex. Use tabIndex={0} only on custom controls that need it.focus-visible).button for actions, a for navigation, input for data.lang="ar" for Arabic pages, lang="en" for English.Animated components respect the operating system's "reduce motion" setting (prefers-reduced-motion): animations and transitions are removed or shortened. Keep this in your own code:
motion-safe: or remove them with motion-reduce:.Accessibility has to hold in every combination of theme and direction. Switch them on the <html> element:
<!-- Dark theme: add theme-dark to <html> --> <html lang="en" class="theme-dark"> <!-- Arabic: set both dir and lang on <html> --> <html lang="ar" dir="rtl">
theme-dark to <html>. All components and semantic tokens switch.dir="rtl" and lang="ar" on <html>. Set both. dir mirrors the layout; lang gives screen readers the Arabic voice and lets the CSS apply Arabic rules.Tab through the page: every control is reachable, in order, with a visible focus ring.
Every field, button and icon-only control has a name.
Errors are announced and linked to their field.
axe (or Lighthouse) shows no violations.
Text and UI contrast pass in the light and dark themes.
The page works in Arabic with dir="rtl" and lang="ar".
The page works at 200% zoom and with reduced motion turned on.
Checked with a screen reader.
Found an accessibility problem in a component? Report it with the component name, the browser, the assistive technology and the steps to reproduce it.