From e1971602fb8742d8f6f8b5fe0c95d03e3dd44cb6 Mon Sep 17 00:00:00 2001 From: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 12 Jul 2023 11:42:53 -0400 Subject: [PATCH] chore(docs): add a11y considerations for accessible name (#3640) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- src/pages/components/data-table/accessibility.mdx | 3 +++ src/pages/components/form/accessibility.mdx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/pages/components/data-table/accessibility.mdx b/src/pages/components/data-table/accessibility.mdx index 9ddd283194b..c087f6737a4 100644 --- a/src/pages/components/data-table/accessibility.mdx +++ b/src/pages/components/data-table/accessibility.mdx @@ -98,6 +98,9 @@ Annotate if a table is sortable. Keep this in mind if you are modifying Carbon or creating a custom component: - Column sorting indicators are matched programmatically using `aria-sort` +- Remember to supply an `aria-label`, `aria-labelledby` or `title` to the + `Table` component to comply with + [accessible naming](https://able.ibm.com/rules/archives/latest/doc/en-US/aria_accessiblename_exists.html) - See the [ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/#table) for more considerations diff --git a/src/pages/components/form/accessibility.mdx b/src/pages/components/form/accessibility.mdx index b9b69d66107..4cdaa0de6a3 100644 --- a/src/pages/components/form/accessibility.mdx +++ b/src/pages/components/form/accessibility.mdx @@ -114,6 +114,9 @@ creating a custom form or input component. - A form must be wrapped in a `
` element. - Required fields must be identified programmatically, either via the label or with `aria-required`. +- Remember to supply an `aria-label`, `aria-labelledby` or `title` to the + component to comply with + [accessible naming](https://able.ibm.com/rules/archives/latest/doc/en-US/aria_accessiblename_exists.html) - Helper text and other instructions should be surfaced to users via `aria-describedby` or other accessible techniques. See [Programmatically associate inputs with labels](https://www.ibm.com/able/toolkit/develop/user-input/#inputs).