You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/angular/src/content/en/components/themes/accessibility.mdx
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,11 +3,13 @@ title: Accessibility
3
3
description: How the Ignite UI for Angular theming engine supports accessibility - automatic text contrast, relative text scaling, and a color-vision-deficiency chart palette.
description: "Ignite UI for Angular calculates readable text colors at runtime, keeps every type scale relative, and ships an opt-in color-vision-deficiency chart palette."
9
9
---
10
10
11
+
{/*Twin topic: docs/xplat/src/content/en/components/themes/accessibility.mdx covers React, Web Components and Blazor. The two are near-identical by design; apply substantive edits to both.*/}
@@ -64,11 +66,11 @@ The theming engine exposes these Sass functions and mixins for the accessibility
64
66
65
67
| Tool | Signature | What it does |
66
68
|---|---|---|
67
-
|`contrast-color()`|`contrast-color($palette, $color, $variant, $opacity)`| Returns a readable foreground color for a palette color. |
69
+
|`contrast-color()`|`contrast-color($palette: null, $color: primary, $variant: 500, $opacity: null)`| Returns a readable foreground color for a palette color. Every argument is optional; omit `$palette` to resolve the shade through its CSS variable. |
68
70
|`adaptive-contrast()`|`adaptive-contrast($color)`| Returns a readable foreground color for any color you pass, including one held in a CSS variable. |
69
71
|`contrast()`|`contrast($background, $foreground)`| Returns the WCAG contrast ratio between two colors. |
70
72
|`luminance()`|`luminance($color)`| Returns a color's relative luminance, from `0` (black) to `1` (white). |
71
-
|`configure-colors()`|`configure-colors($enhanced-accessibility)`| Switches chart themes to the color-vision-deficiency palette. |
73
+
|`configure-colors()`|`configure-colors($enhanced-accessibility: null)`| Switches chart themes to the color-vision-deficiency palette. |
72
74
|`hide-default()`|`@include hide-default()`| Hides a native input visually while keeping it in the accessibility tree. |
description: "Accessibility support in {ProductName} - the standards we target, per-component keyboard and screen reader status, and how to report an accessibility issue."
description: "Accessibility support in {ProductName}: the conformance standards targeted, the per-component keyboard and screen-reader documentation index, required configuration, and the channel for reporting accessibility issues."
@@ -68,27 +68,27 @@ WCAG conformance is claimed against individual **success criteria**, not against
68
68
69
69
## Component Support
70
70
71
-
This index records what each component's documentation covers today. **Not yet verified** means the behavior has not been assessed in the current review cycle — it is not a statement that the component fails.
71
+
This index records what each component's documentation covers today. **Not documented yet** means the component's own documentation does not describe this behavior — it is a statement about the documentation, not about the component.
72
72
73
73
| Status | Meaning |
74
74
|---|---|
75
75
|**Documented**| The behavior is described in the component's own documentation, linked in the row. |
76
76
|**Requires configuration**| Available once the setting named in [Configuration Required](#configuration-required) is applied. |
77
-
|**Not yet verified**|Not assessed in the current review cycle. |
77
+
|**Not documented yet**|The component's documentation does not yet describe this behavior. |
|[Calendar](../scheduling/calendar.mdx#keyboard-navigation)| Documented | Not yet verified | See the topic's Keyboard Navigation section |
145
140
|[Card](../layouts/card.mdx)| Not yet verified | Not yet verified | — |
146
141
|[Carousel](../layouts/carousel.mdx#accessibility)| Documented | Documented | See the topic's Accessibility section |
147
-
|[Checkbox](../inputs/checkbox.mdx)| Not yet verified | Not yet verified| — |
148
-
|[Chip](../inputs/chip.mdx)| Not yet verified | Not yet verified| — |
149
-
|[Circular Progress](../inputs/circular-progress.mdx)| Not yet verified | Not yet verified| — |
150
-
|[Combo](../inputs/combo/overview.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
151
-
|[Date Time Input](../inputs/date-time-input.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
152
-
|[Date Picker](../scheduling/date-picker.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
153
-
|[Dialog](../notifications/dialog.mdx)| Not yet verified | Not yet verified| — |
154
-
|[Divider](../layouts/divider.mdx)| Not yet verified | Not yet verified| — |
155
-
|[Dock Manager](../layouts/dock-manager.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
156
-
|[Dropdown](../inputs/dropdown.mdx)| Not yet verified | Not yet verified| — |
157
-
|[Expansion Panel](../layouts/expansion-panel.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
142
+
|[Checkbox](../inputs/checkbox.mdx)| Not documented yet | Not documented yet| — |
143
+
|[Chip](../inputs/chip.mdx)| Not documented yet | Not documented yet| — |
144
+
|[Circular Progress](../inputs/circular-progress.mdx)| Not documented yet | Not documented yet| — |
145
+
|[Combo](../inputs/combo/overview.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
146
+
|[Date Time Input](../inputs/date-time-input.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
147
+
|[Date Picker](../scheduling/date-picker.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
148
+
|[Dialog](../notifications/dialog.mdx)| Not documented yet | Not documented yet| — |
149
+
|[Divider](../layouts/divider.mdx)| Not documented yet | Not documented yet| — |
150
+
|[Dock Manager](../layouts/dock-manager.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
151
+
|[Dropdown](../inputs/dropdown.mdx)| Not documented yet | Not documented yet| — |
152
+
|[Expansion Panel](../layouts/expansion-panel.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
158
153
| File Input | Documented | Documented | Available on Web Components; see the component topic |
159
-
|[Icon](../layouts/icon.mdx)| Not yet verified | Not yet verified| — |
160
-
|[Icon Button](../inputs/icon-button.mdx)| Not yet verified | Not yet verified| — |
161
-
|[Input](../inputs/input.mdx)| Not yet verified | Not yet verified| — |
162
-
|[Linear Progress](../inputs/linear-progress.mdx)| Not yet verified | Not yet verified| — |
163
-
|[Navbar](../menus/navbar.mdx)| Not yet verified | Not yet verified| — |
164
-
|[Navigation Drawer](../menus/navigation-drawer.mdx)| Not yet verified | Not yet verified| — |
165
-
|[Radio](../inputs/radio.mdx)| Not yet verified | Not yet verified| — |
166
-
|[Rating](../inputs/rating.mdx)| Not yet verified | Not yet verified| — |
167
-
|[Select](../inputs/select.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
168
-
|[Slider](../inputs/slider.mdx)| Not yet verified | Not yet verified| — |
169
-
|[Snackbar](../notifications/snackbar.mdx)| Not yet verified | Not yet verified| — |
170
-
|[Stepper](../layouts/stepper.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
171
-
|[Switch](../inputs/switch.mdx)| Not yet verified | Not yet verified| — |
172
-
|[Tabs](../layouts/tabs.mdx#keyboard-navigation)| Documented | Not yet verified| See the topic's Keyboard Navigation section |
173
-
|[Text Area](../inputs/text-area.mdx)| Not yet verified | Not yet verified| — |
174
-
|[Toast](../notifications/toast.mdx)| Not yet verified | Not yet verified| — |
154
+
|[Icon](../layouts/icon.mdx)| Not documented yet | Not documented yet| — |
155
+
|[Icon Button](../inputs/icon-button.mdx)| Not documented yet | Not documented yet| — |
156
+
|[Input](../inputs/input.mdx)| Not documented yet | Not documented yet| — |
157
+
|[Linear Progress](../inputs/linear-progress.mdx)| Not documented yet | Not documented yet| — |
158
+
|[Navbar](../menus/navbar.mdx)| Not documented yet | Not documented yet| — |
159
+
|[Navigation Drawer](../menus/navigation-drawer.mdx)| Not documented yet | Not documented yet| — |
160
+
|[Radio](../inputs/radio.mdx)| Not documented yet | Not documented yet| — |
161
+
|[Rating](../inputs/rating.mdx)| Not documented yet | Not documented yet| — |
162
+
|[Select](../inputs/select.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
163
+
|[Slider](../inputs/slider.mdx)| Not documented yet | Not documented yet| — |
164
+
|[Snackbar](../notifications/snackbar.mdx)| Not documented yet | Not documented yet| — |
165
+
|[Stepper](../layouts/stepper.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
166
+
|[Switch](../inputs/switch.mdx)| Not documented yet | Not documented yet| — |
167
+
|[Tabs](../layouts/tabs.mdx#keyboard-navigation)| Documented | Not documented yet| See the topic's Keyboard Navigation section |
168
+
|[Text Area](../inputs/text-area.mdx)| Not documented yet | Not documented yet| — |
169
+
|[Toast](../notifications/toast.mdx)| Not documented yet | Not documented yet| — |
175
170
|[Tooltip](../inputs/tooltip.mdx#accessibility--aria-support)| Documented | Documented | See the topic's Accessibility section |
176
171
177
172
</PlatformBlock>
178
173
179
174
<DocsAsidetype="warning">
180
-
Rows marked **Not yet verified** are a gap in this documentation, not a known defect. If you need a conformance answer for a specific component before the next review cycle, [open an issue](#reporting-an-accessibility-issue) and ask.
175
+
Rows marked **Not documented yet** are a gap in this documentation, not a known defect. If you need a conformance answer for a specific component before the next review cycle, [open an issue](#reporting-an-accessibility-issue) and ask.
181
176
</DocsAside>
182
177
183
178
## Configuration Required
@@ -208,6 +203,16 @@ The remaining items apply to every platform.
208
203
| Color contrast after theming | <ahref="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"target="_blank"rel="noopener noreferrer">1.4.3 Contrast (Minimum)</a> | Set foreground colors with `contrast-color()` or `adaptive-contrast()` rather than fixed values. See [Theming Accessibility](../themes/accessibility.mdx). |
209
204
| Accessible names on icon-only controls | <ahref="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html"target="_blank"rel="noopener noreferrer">4.1.2 Name, Role, Value</a> | Supply an accessible name in your own markup. A control showing only an icon has no name until you give it one. |
210
205
206
+
## Formal Conformance Documentation
207
+
208
+
This page is a documentation index, not a conformance claim. It records what our own documentation covers; it does not certify any component against a standard.
209
+
210
+
For procurement, contract, or audit purposes — where a traceable, per-criterion conformance statement is required — request the current accessibility conformance report (VPAT) through your account manager or Infragistics support. Cite the product, version, and the standard the report must address (WCAG 2.1 Level AA, Section 508, or EN 301 549).
211
+
212
+
<DocsAsidetype="note">
213
+
Earlier revisions of this page carried per-component conformance matrices. Those tables asserted a level of conformance that was not backed by a traceable, per-criterion assessment, and have been removed rather than restated. The conformance report is the authoritative source for that information.
214
+
</DocsAside>
215
+
211
216
## Reporting an Accessibility Issue
212
217
213
218
If you find an accessibility problem in a component, report it on the product issue tracker.
@@ -244,6 +249,7 @@ Include the component, the assistive technology and browser you used, the expect
244
249
- <ahref="https://www.w3.org/WAI/WCAG21/quickref/"target="_blank"rel="noopener noreferrer">WCAG 2.1 Quick Reference</a> — all success criteria with techniques.
245
250
- <ahref="https://www.w3.org/WAI/ARIA/apg/patterns/"target="_blank"rel="noopener noreferrer">WAI-ARIA Authoring Practices</a> — expected keyboard and ARIA behavior per interaction pattern.
246
251
- <ahref="https://www.section508.gov/"target="_blank"rel="noopener noreferrer">Section 508</a> — United States federal procurement requirements.
252
+
-[Formal Conformance Documentation](#formal-conformance-documentation) — how to request a conformance report (VPAT) for procurement.
247
253
248
254
## FAQ
249
255
@@ -253,7 +259,7 @@ Include the component, the assistive technology and browser you used, the expect
253
259
</FaqItem>
254
260
255
261
<FaqItemquestion="Why do some components say "Not yet verified"?"indicatorPosition="end">
256
-
That status means the behavior has not been assessed in the current review cycle. It is not a statement that the component fails a criterion. It is recorded honestly so you can tell the difference between a verified result and one that has not been reviewed.
262
+
That status means the behavior has not been assessed in the current review cycle. It is not a statement that the component fails a criterion. It is recorded honestly so you can tell the difference between a verified result and an unreviewed one.
257
263
</FaqItem>
258
264
259
265
<FaqItemquestion="Does Section 508 still have its own separate rules?"indicatorPosition="end">
0 commit comments