From e4be16acd5105252d47581ad91f3f83c7228d7cf Mon Sep 17 00:00:00 2001 From: Karsa Date: Thu, 10 Sep 2026 16:07:18 +0200 Subject: [PATCH] feat(docs): added "How to use Lucide icons" section to resources (#4829) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(docs): replace missing LucideIcon icon names in guides * feat(docs): add How to use Lucide icons section to resources * feat(docs): update accessibility guide links * fix(docs): fix dead link in guide.md * fix(docs): fix color in example image * fix(docs): fix overlay color in example images * fix(how-to): added caution guidance type & rework some guidance rules relating to compact interfaces * fix(how-to): replaced caution items, what the heck, when did I reorder these 😅 * fix(how-to): fix colors --------- Co-authored-by: Eric Fennis --- docs/.vitepress/config.ts | 1 + docs/.vitepress/markdown/example.ts | 33 ++- docs/.vitepress/sidebar/angular.ts | 2 +- docs/.vitepress/sidebar/astro.ts | 2 +- docs/.vitepress/sidebar/index.ts | 1 + docs/.vitepress/sidebar/lucide.ts | 2 +- docs/.vitepress/sidebar/preact.ts | 2 +- docs/.vitepress/sidebar/react.ts | 2 +- docs/.vitepress/sidebar/resources.ts | 19 ++ docs/.vitepress/sidebar/solid.ts | 2 +- docs/.vitepress/sidebar/static.ts | 2 +- docs/.vitepress/sidebar/svelte.ts | 2 +- docs/.vitepress/sidebar/vue.ts | 2 +- docs/.vitepress/theme/style.css | 4 + docs/contribute/icons/index.md | 2 +- docs/guide/accessibility.md | 237 --------------- docs/guide/angular/advanced/accessibility.md | 2 +- docs/guide/astro/advanced/accessibility.md | 2 +- docs/guide/index.md | 2 +- docs/guide/lucide/advanced/accessibility.md | 2 +- docs/guide/preact/advanced/accessibility.md | 2 +- docs/guide/react/advanced/accessibility.md | 2 +- docs/guide/solid/advanced/accessibility.md | 2 +- docs/guide/svelte/advanced/accessibility.md | 2 +- docs/guide/version-1.md | 2 +- docs/guide/vue/advanced/accessibility.md | 2 +- docs/how-to/accessibility.md | 271 ++++++++++++++++++ docs/how-to/icon-guide.md | 190 ++++++++++++ docs/how-to/index.md | 29 ++ docs/images/a11y/alttext-buttons.svg | 33 --- docs/images/a11y/alttext-iconbuttons.svg | 44 --- docs/images/a11y/alttext-standalone.svg | 92 ------ docs/images/a11y/consistency.svg | 40 --- docs/images/a11y/contrast.svg | 20 -- docs/images/a11y/contrast_do.svg | 5 + docs/images/a11y/contrast_dont.svg | 5 + docs/images/a11y/decorative_icons_do.svg | 14 + docs/images/a11y/decorative_icons_dont.svg | 14 + docs/images/a11y/distinct_use_case_do.svg | 16 ++ docs/images/a11y/distinct_use_case_dont.svg | 15 + docs/images/a11y/functional_icons_do.svg | 35 +++ docs/images/a11y/functional_icons_dont.svg | 39 +++ docs/images/a11y/icon_button_do.svg | 14 + docs/images/a11y/icon_button_dont.svg | 14 + docs/images/a11y/interactive_icons_do.svg | 8 + docs/images/a11y/interactive_icons_dont.svg | 5 + docs/images/a11y/interactivity.svg | 18 -- docs/images/a11y/meaningfulness.svg | 94 ------ docs/images/a11y/same_use_case_do.svg | 16 ++ docs/images/a11y/same_use_case_dont.svg | 16 ++ docs/images/a11y/state_do.svg | 46 +++ docs/images/a11y/state_dont.svg | 21 ++ docs/images/a11y/target-size.svg | 49 ---- docs/images/a11y/target_size_do.svg | 22 ++ docs/images/a11y/target_size_dont.svg | 22 ++ docs/images/a11y/use-of-color.svg | 191 ------------ docs/images/a11y/visible-labels.svg | 23 -- docs/images/how-to/appropriate_context_do.svg | 16 ++ .../how-to/appropriate_context_dont.svg | 18 ++ .../how-to/compact_interfaces_caution_1.svg | 41 +++ .../how-to/compact_interfaces_caution_2.svg | 40 +++ docs/images/how-to/compact_interfaces_do.svg | 45 +++ .../images/how-to/compact_interfaces_dont.svg | 39 +++ .../how-to/compact_interfaces_labels_do.svg | 29 ++ .../how-to/compact_interfaces_labels_dont.svg | 60 ++++ .../how-to/consistent_icon_function_do.svg | 27 ++ .../how-to/consistent_icon_function_dont.svg | 24 ++ .../how-to/consistent_icon_meaning_do.svg | 19 ++ .../how-to/consistent_icon_meaning_dont.svg | 21 ++ docs/images/how-to/native_ui_elements_do.svg | 47 +++ .../images/how-to/native_ui_elements_dont.svg | 9 + docs/images/how-to/repeated_status_do.svg | 15 + docs/images/how-to/repeated_status_dont.svg | 15 + docs/images/how-to/state_do.svg | 46 +++ docs/images/how-to/visual_anchor_do.svg | 17 ++ docs/images/how-to/visual_anchor_dont.svg | 22 ++ docs/vercel.json | 7 +- 77 files changed, 1442 insertions(+), 871 deletions(-) delete mode 100644 docs/guide/accessibility.md create mode 100644 docs/how-to/accessibility.md create mode 100644 docs/how-to/icon-guide.md create mode 100644 docs/how-to/index.md delete mode 100644 docs/images/a11y/alttext-buttons.svg delete mode 100644 docs/images/a11y/alttext-iconbuttons.svg delete mode 100644 docs/images/a11y/alttext-standalone.svg delete mode 100644 docs/images/a11y/consistency.svg delete mode 100644 docs/images/a11y/contrast.svg create mode 100644 docs/images/a11y/contrast_do.svg create mode 100644 docs/images/a11y/contrast_dont.svg create mode 100644 docs/images/a11y/decorative_icons_do.svg create mode 100644 docs/images/a11y/decorative_icons_dont.svg create mode 100644 docs/images/a11y/distinct_use_case_do.svg create mode 100644 docs/images/a11y/distinct_use_case_dont.svg create mode 100644 docs/images/a11y/functional_icons_do.svg create mode 100644 docs/images/a11y/functional_icons_dont.svg create mode 100644 docs/images/a11y/icon_button_do.svg create mode 100644 docs/images/a11y/icon_button_dont.svg create mode 100644 docs/images/a11y/interactive_icons_do.svg create mode 100644 docs/images/a11y/interactive_icons_dont.svg delete mode 100644 docs/images/a11y/interactivity.svg delete mode 100644 docs/images/a11y/meaningfulness.svg create mode 100644 docs/images/a11y/same_use_case_do.svg create mode 100644 docs/images/a11y/same_use_case_dont.svg create mode 100644 docs/images/a11y/state_do.svg create mode 100644 docs/images/a11y/state_dont.svg delete mode 100644 docs/images/a11y/target-size.svg create mode 100644 docs/images/a11y/target_size_do.svg create mode 100644 docs/images/a11y/target_size_dont.svg delete mode 100644 docs/images/a11y/use-of-color.svg delete mode 100644 docs/images/a11y/visible-labels.svg create mode 100644 docs/images/how-to/appropriate_context_do.svg create mode 100644 docs/images/how-to/appropriate_context_dont.svg create mode 100644 docs/images/how-to/compact_interfaces_caution_1.svg create mode 100644 docs/images/how-to/compact_interfaces_caution_2.svg create mode 100644 docs/images/how-to/compact_interfaces_do.svg create mode 100644 docs/images/how-to/compact_interfaces_dont.svg create mode 100644 docs/images/how-to/compact_interfaces_labels_do.svg create mode 100644 docs/images/how-to/compact_interfaces_labels_dont.svg create mode 100644 docs/images/how-to/consistent_icon_function_do.svg create mode 100644 docs/images/how-to/consistent_icon_function_dont.svg create mode 100644 docs/images/how-to/consistent_icon_meaning_do.svg create mode 100644 docs/images/how-to/consistent_icon_meaning_dont.svg create mode 100644 docs/images/how-to/native_ui_elements_do.svg create mode 100644 docs/images/how-to/native_ui_elements_dont.svg create mode 100644 docs/images/how-to/repeated_status_do.svg create mode 100644 docs/images/how-to/repeated_status_dont.svg create mode 100644 docs/images/how-to/state_do.svg create mode 100644 docs/images/how-to/visual_anchor_do.svg create mode 100644 docs/images/how-to/visual_anchor_dont.svg diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 5ca18f1a2..175fa5066 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -98,6 +98,7 @@ export default defineConfig({ text: 'Resources', items: [ ...resourcesSidebar[0].items, + { text: 'How to use icons', link: '/how-to/' }, { text: 'Contributing icons', link: '/contribute/icons/' }, ], }, diff --git a/docs/.vitepress/markdown/example.ts b/docs/.vitepress/markdown/example.ts index a5f3c18ab..8f1527a25 100644 --- a/docs/.vitepress/markdown/example.ts +++ b/docs/.vitepress/markdown/example.ts @@ -5,6 +5,17 @@ import type { RenderRule } from 'markdown-it/lib/renderer.mjs'; import container from 'markdown-it-container'; type ContainerArgs = [typeof container, string, { render: RenderRule }]; +type GuidanceType = 'do' | 'dont' | 'caution'; + +const isGuidanceOpenToken = (type: string) => + type === 'container_do_open' || + type === 'container_dont_open' || + type === 'container_caution_open'; + +const isGuidanceCloseToken = (type: string) => + type === 'container_do_close' || + type === 'container_dont_close' || + type === 'container_caution_close'; const parseInfo = (info: string, marker: string) => info.trim().slice(marker.length).trim(); @@ -81,12 +92,12 @@ const hasTopLevelContent = (tokens: Parameters[0], index: number) => return false; } - if (token.type === 'container_do_open' || token.type === 'container_dont_open') { + if (isGuidanceOpenToken(token.type)) { guidanceDepth += 1; continue; } - if (token.type === 'container_do_close' || token.type === 'container_dont_close') { + if (isGuidanceCloseToken(token.type)) { guidanceDepth -= 1; continue; } @@ -107,7 +118,7 @@ const hasGuidance = (tokens: Parameters[0], index: number) => { return false; } - if (token.type === 'container_do_open' || token.type === 'container_dont_open') { + if (isGuidanceOpenToken(token.type)) { return true; } } @@ -123,7 +134,7 @@ const isFirstGuidance = (tokens: Parameters[0], index: number) => { return true; } - if (token.type === 'container_do_open' || token.type === 'container_dont_open') { + if (isGuidanceOpenToken(token.type)) { return false; } } @@ -141,6 +152,12 @@ const getExampleOpenIndex = (tokens: Parameters[0], index: number) = return index; }; +const labels: Record = { + do: ` Do`, + dont: ` Don't`, + caution: ` Caution`, +}; + export default function examplePlugin(md: MarkdownIt) { const escapeHtml = md.utils.escapeHtml; @@ -170,7 +187,7 @@ export default function examplePlugin(md: MarkdownIt) { }, ]; - const createGuidanceContainer = (type: 'do' | 'dont'): ContainerArgs => [ + const createGuidanceContainer = (type: GuidanceType): ContainerArgs => [ container, type, { @@ -185,10 +202,7 @@ export default function examplePlugin(md: MarkdownIt) { hasTopLevelContent(tokens, exampleOpenIndex) && isFirstGuidance(tokens, idx) ? '\n' : ''; - const label = - type === 'do' - ? ` Do` - : ` Don't`; + const label = labels[type]; return `${contentClose}
${media}
${label}
\n`; } @@ -201,4 +215,5 @@ export default function examplePlugin(md: MarkdownIt) { md.use(...createExampleContainer()); md.use(...createGuidanceContainer('do')); md.use(...createGuidanceContainer('dont')); + md.use(...createGuidanceContainer('caution')); } diff --git a/docs/.vitepress/sidebar/angular.ts b/docs/.vitepress/sidebar/angular.ts index df244e363..a0be89660 100644 --- a/docs/.vitepress/sidebar/angular.ts +++ b/docs/.vitepress/sidebar/angular.ts @@ -94,7 +94,7 @@ export const angularSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/sidebar/astro.ts b/docs/.vitepress/sidebar/astro.ts index 4aaa77c69..e5b1e22e4 100644 --- a/docs/.vitepress/sidebar/astro.ts +++ b/docs/.vitepress/sidebar/astro.ts @@ -69,7 +69,7 @@ export const astroSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/sidebar/index.ts b/docs/.vitepress/sidebar/index.ts index aaa1905f5..62fa9d001 100644 --- a/docs/.vitepress/sidebar/index.ts +++ b/docs/.vitepress/sidebar/index.ts @@ -36,6 +36,7 @@ const sidebar: Sidebar = { '/guide/react-native/': reactNativeSidebar, '/guide/angular/': angularSidebar, '/guide/static/': lucideStaticSidebar, + '/how-to': resourcesSidebar, '/community': resourcesSidebar, '/contribute': resourcesSidebar, '/license': resourcesSidebar, diff --git a/docs/.vitepress/sidebar/lucide.ts b/docs/.vitepress/sidebar/lucide.ts index b61c2d6f1..9bc14d3a5 100644 --- a/docs/.vitepress/sidebar/lucide.ts +++ b/docs/.vitepress/sidebar/lucide.ts @@ -79,7 +79,7 @@ export const lucideSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, ], diff --git a/docs/.vitepress/sidebar/preact.ts b/docs/.vitepress/sidebar/preact.ts index 7ecf24fc6..dc3936e1a 100644 --- a/docs/.vitepress/sidebar/preact.ts +++ b/docs/.vitepress/sidebar/preact.ts @@ -89,7 +89,7 @@ export const preactSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/sidebar/react.ts b/docs/.vitepress/sidebar/react.ts index 5d85386ea..97987f46f 100644 --- a/docs/.vitepress/sidebar/react.ts +++ b/docs/.vitepress/sidebar/react.ts @@ -100,7 +100,7 @@ export const reactSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/sidebar/resources.ts b/docs/.vitepress/sidebar/resources.ts index 6e0530ec9..4706233f3 100644 --- a/docs/.vitepress/sidebar/resources.ts +++ b/docs/.vitepress/sidebar/resources.ts @@ -29,6 +29,25 @@ export const resourcesSidebar = [ }, ], }, + { + text: 'How to use Lucide icons', + items: [ + { + text: 'Getting started', + link: '/how-to/', + }, + { + text: 'Accessibility guide', + link: '/how-to/accessibility', + desc: 'Learn how to make icons readable, understandable, and usable with assistive technology.', + }, + { + text: 'How to pick the right icon', + link: '/how-to/icon-guide', + desc: 'Learn how to decide when icons belong in an interface and how to pick symbols people are likely to recognize.', + }, + ], + }, { text: 'Contributing icons', items: [ diff --git a/docs/.vitepress/sidebar/solid.ts b/docs/.vitepress/sidebar/solid.ts index 78f1855a2..6943891ab 100644 --- a/docs/.vitepress/sidebar/solid.ts +++ b/docs/.vitepress/sidebar/solid.ts @@ -90,7 +90,7 @@ export const solidSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/sidebar/static.ts b/docs/.vitepress/sidebar/static.ts index 6628623a6..d21a30e2a 100644 --- a/docs/.vitepress/sidebar/static.ts +++ b/docs/.vitepress/sidebar/static.ts @@ -75,7 +75,7 @@ export const lucideStaticSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/sidebar/svelte.ts b/docs/.vitepress/sidebar/svelte.ts index 80dbf365f..a12fca40d 100644 --- a/docs/.vitepress/sidebar/svelte.ts +++ b/docs/.vitepress/sidebar/svelte.ts @@ -79,7 +79,7 @@ export const svelteSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/sidebar/vue.ts b/docs/.vitepress/sidebar/vue.ts index 3840ef7bd..00452d6c7 100644 --- a/docs/.vitepress/sidebar/vue.ts +++ b/docs/.vitepress/sidebar/vue.ts @@ -85,7 +85,7 @@ export const vueSidebar = [ items: [ { text: 'Accessibility in depth', - link: '/guide/accessibility', + link: '/how-to/accessibility', desc: 'Accessibility best practices', }, { diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index f67aed77e..950950f4b 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -286,6 +286,10 @@ html { --example-guidance-label-bg: var(--vp-c-danger-1); } +.example-guidance--caution { + --example-guidance-label-bg: var(--vp-c-warning-1); +} + @media (min-width: 640px) { .example-block { display: grid; diff --git a/docs/contribute/icons/index.md b/docs/contribute/icons/index.md index 0f5fb6624..6ff34f856 100644 --- a/docs/contribute/icons/index.md +++ b/docs/contribute/icons/index.md @@ -17,7 +17,7 @@ This guide explains how to design and prepare icons for Lucide. ## What this guide covers - + ## Use your preferred design tool diff --git a/docs/guide/accessibility.md b/docs/guide/accessibility.md deleted file mode 100644 index 55268b1e9..000000000 --- a/docs/guide/accessibility.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Accessibility -description: Learn how to make your icons accessible to all users, including those with disabilities. ---- - -# Accessibility in depth - -Icons are pictures that show what something means without using words. They can be very helpful -because they can quickly give information. - -However, not everyone can understand them easily. When using icons it is very important to consider -the following aspects of accessibility. - -::: info -By default, we hide icons from screen readers using `aria-hidden="true"`. -You can make them accessible yourself by following the guidelines below. -::: - -## Provide visible labels - -Icons are a helpful tool to improve perception, but they aren't a replacement for text. - -In most cases, it is probably a good idea to also provide a textual representation of your icon's -function. - - - -## Contrast - -Ensure there's enough contrast between the icon and its background so that it's visible to people -with low vision or color vision deficiencies. - -We recommend -following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). - - - -## Use of color - -Avoid relying solely on color to convey meaning in icons, as some users may have color blindness. -Instead, use additional visual cues like shape, shading or text. - - - -## Interactivity - -Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when -activated. - - - -In most cases this is easily done by wrapping them in icon buttons. - -## Minimum target size - -Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it -should have a minimum target size of 44×44 pixels. - - - -In practice, this doesn't necessarily mean that the icon itself should be this large, only its -interactive wrapper element. - -## Meaningfulness - -Icons should represent concepts or actions in a universally understandable way. Avoid using abstract -or ambiguous, or culture-specific symbols that might confuse some users. - - - -## Consistency - -Maintain consistency in icon design and usage across your interface to help users learn and -understand their meanings more easily. - - - -## Text Alternatives - -You may have to provide text labels or alternative text descriptions for icons, especially for -screen readers used by people with visual impairments. - -However: descriptions should only be provided to standalone icons that aren't purely decorative, as -providing accessible names to non-functional elements only increases clutter when using screen -readers. - -### On standalone icons - -Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper -element. In most cases they will be part of a badge, button (including icon buttons), navigation -item or other interactive UI element. - -::: warning -In case some of your icons stand alone, and they serve a non-decorative function, make sure to -provide the appropriate accessible label for them. -::: - - - -In general try to avoid using functional icons with no interactivity, we recommend that: - -1) you either add a visible description next to them, or -2) place them in badges, labels or on buttons, and at least add a tooltip to them. - -In any such case, it is preferred that the accessible name be provided for these interactive -elements (badges, buttons, nav items etc.) only, _not_ the icons themselves. - -### On buttons - -Do not provide an accessible label to icons when used on a button, as this label will be read out by -screen readers, leading to nonsensical text. - - - - -::: details Code examples - -```tsx -// Don't do this - - -// Do this, just leave it - -``` - -::: - -### On icon buttons - -Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of -the close button of a dialog for example). - -As previously stated, you should provide your accessible label on the icon button itself, not the -contained icon. - - - -::: details Code examples - -```tsx -// Don't do this - - -// Don't do this either - - -// This works but might not be the best solution, see below - - -// Do this instead - -``` - -::: - -## A note on `aria-label` - -Although you could provide accessible labels to your elements via the `aria-label` attribute, we -generally recommend avoiding this and instead suggest that you use your chosen CSS framework's " -visually hidden" utility whenever possible. You can -[read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/). - -### Example - Radix UI - -Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon). - -```tsx -import { ArrowRightIcon } from 'lucide-react'; -import { AccessibleIcon } from '@radix-ui/react-accessible-icon'; - - - - -``` - -### Example - Bootstrap - -```html - -
- - -
-``` - -### Example - Tailwind CSS - -```html - -
- - Phone number -
-``` - -If you're not sure, you may consider learning more -about [how to hide content.](https://www.a11yproject.com/posts/how-to-hide-content/) - -## Further resources - -We also recommend checking out the following resources about accessibility: - -- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) -- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) -- [Learn accessibility on web.dev](https://web.dev/learn/accessibility) -- [Inclusive Components](https://inclusive-components.design/) -- [A11yTalks](https://www.a11ytalks.com/) -- [A11y automation tracker](https://a11y-automation.dev/) -- [The A11Y Project](https://www.a11yproject.com/) - - diff --git a/docs/guide/angular/advanced/accessibility.md b/docs/guide/angular/advanced/accessibility.md index 22d16710f..bd370726a 100644 --- a/docs/guide/angular/advanced/accessibility.md +++ b/docs/guide/angular/advanced/accessibility.md @@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Angular. diff --git a/docs/guide/astro/advanced/accessibility.md b/docs/guide/astro/advanced/accessibility.md index 04caa2752..4b13d4645 100644 --- a/docs/guide/astro/advanced/accessibility.md +++ b/docs/guide/astro/advanced/accessibility.md @@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Astro. diff --git a/docs/guide/index.md b/docs/guide/index.md index 23d43cc29..ffe370308 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -26,7 +26,7 @@ In addition to design, code is also important. Assets like icons can significant Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information. -However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](./accessibility.md). +However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](../how-to/accessibility.md). ## Official Packages diff --git a/docs/guide/lucide/advanced/accessibility.md b/docs/guide/lucide/advanced/accessibility.md index c02cc8f3e..290868039 100644 --- a/docs/guide/lucide/advanced/accessibility.md +++ b/docs/guide/lucide/advanced/accessibility.md @@ -16,7 +16,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in your app. diff --git a/docs/guide/preact/advanced/accessibility.md b/docs/guide/preact/advanced/accessibility.md index f7f99d347..18ee27981 100644 --- a/docs/guide/preact/advanced/accessibility.md +++ b/docs/guide/preact/advanced/accessibility.md @@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Preact. diff --git a/docs/guide/react/advanced/accessibility.md b/docs/guide/react/advanced/accessibility.md index c7e92d84e..e42436021 100644 --- a/docs/guide/react/advanced/accessibility.md +++ b/docs/guide/react/advanced/accessibility.md @@ -16,7 +16,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in React. diff --git a/docs/guide/solid/advanced/accessibility.md b/docs/guide/solid/advanced/accessibility.md index c76a1c14f..39a224f55 100644 --- a/docs/guide/solid/advanced/accessibility.md +++ b/docs/guide/solid/advanced/accessibility.md @@ -16,7 +16,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Solid. diff --git a/docs/guide/svelte/advanced/accessibility.md b/docs/guide/svelte/advanced/accessibility.md index 5bd626f89..73747093b 100644 --- a/docs/guide/svelte/advanced/accessibility.md +++ b/docs/guide/svelte/advanced/accessibility.md @@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Svelte. diff --git a/docs/guide/version-1.md b/docs/guide/version-1.md index def423ff0..e16babd6f 100644 --- a/docs/guide/version-1.md +++ b/docs/guide/version-1.md @@ -63,7 +63,7 @@ Also, a `llms.txt` is now available for LLMs to use. We have improved the accessibility of our icons by setting `aria-hidden` to `true` by default. This change ensures that screen readers will ignore icons that are purely decorative, improving the overall accessibility of your applications. If you need to make an icon accessible, you can provide an appropriate `aria-label` or add a `title` attribute to the icon element. -See our [accessibility in-depth guide](/guide/accessibility) for more details and best practices on making your icons accessible. +See our [accessibility in-depth guide](/how-to/accessibility) for more details and best practices on making your icons accessible. ## Removed UMD build, only ESM and CJS now diff --git a/docs/guide/vue/advanced/accessibility.md b/docs/guide/vue/advanced/accessibility.md index 7302344e6..e7808bb13 100644 --- a/docs/guide/vue/advanced/accessibility.md +++ b/docs/guide/vue/advanced/accessibility.md @@ -17,7 +17,7 @@ Most of the time, icons are used purely for decoration or visual reinforcement. For a broader explanation of this, and other best practices on how to use icons accessibly in your application, please refer to our detailed guide on accessibility: - + Only if an icon **conveys essential meaning on its own** should it be made accessible. The sections below explain how to do that in Vue. diff --git a/docs/how-to/accessibility.md b/docs/how-to/accessibility.md new file mode 100644 index 000000000..441944045 --- /dev/null +++ b/docs/how-to/accessibility.md @@ -0,0 +1,271 @@ +--- +title: Accessibility +description: Learn how to make your icons accessible to all users, including those with disabilities. +--- + + + +# Accessibility in depth + +Icons are pictures that convey meaning without using words. + +They can help people scan an interface, recognize actions, and understand status quickly. + +Not everyone understands icons easily. Use the following accessibility rules when you add icons to an interface. + +::: tip +Lucide icons are hidden from screen readers by default with `aria-hidden="true"`. + +Add accessible labels when icons carry meaning or act as controls. +::: + +## Provide visible labels + +Icons can improve scanning, but they aren't a replacement for text. + +Text helps people understand actions and navigation more reliably than icons alone. + +:::: example +::: do +Provide a written description of your interactive elements. +::: +::: dont +Don't rely on icons alone to communicate what elements do. +::: +:::: + +## Provide enough contrast + +Use enough contrast between an icon and its background. Low contrast makes icons harder to see for people with low vision or color vision deficiencies. + +Follow [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) when contrast requirements apply. + +:::: example +::: do ../images/a11y/contrast_do.svg?raw=true +Use a contrast ratio of at least 4.5:1. +::: +::: dont ../images/a11y/contrast_dont.svg?raw=true +Don't use low contrast. +::: +:::: + +## Do not rely on color alone + +Use non-color cues like shape, shading, or text to mark state, status, and validity. Color can support meaning, but it must not be the only cue. + +:::: example +::: do ../images/a11y/state_do.svg?raw=true +Mark state with non-color visual cues too. +::: +::: dont ../images/a11y/state_dont.svg?raw=true +Don't mark state only with color. +::: +:::: + +## Make interactive icons focusable + +Wrap interactive icons in semantic elements. Icons that perform actions need keyboard access and clear feedback when activated. + +:::: example +::: do ../images/a11y/interactive_icons_do.svg?raw=true +Wrap interactive icons in semantic elements, such as buttons, so they are focusable. +::: +::: dont ../images/a11y/interactive_icons_dont.svg?raw=true +Don't leave interactive icons unable to be focused. +::: +:::: + +## Use a large enough target size + +Use a large enough target size for interactive icon controls. Small targets can be difficult to click or tap. + +:::: example +::: do ../images/a11y/target_size_do.svg?raw=true +Keep the target size at a minimum of 44 by 44 pixels. +::: +::: dont ../images/a11y/target_size_dont.svg?raw=true +Don't make the target size smaller than 44 by 44 pixels. +::: +:::: + +The icon itself does not need to be 44 by 44 pixels. The interactive wrapper needs to meet the target size. + +## Choose universal symbols when possible + +Choose icons that are widely recognized for your use case. Avoid icons that only make sense to a narrow audience. + +:::: example +::: do +Pick icons that are universal symbols for your use case. +::: +::: dont +Don't pick icons that are not universally recognizable for your use case. +::: +:::: + +## Avoid cultural or linguistic shortcuts + +Choose icons with a clear connection to the concept. Puns, idioms, and culture-specific references can be difficult to understand or translate. + +:::: example +::: do +Pick icons with a clear connection to the concept you want to represent. +::: +::: dont +Don't pick icons based on puns or other cultural or linguistic cues. +::: +:::: + +## Use different icons for different meanings + +Use different icons for different meanings. Reusing one icon for unrelated concepts makes the interface harder to learn. + +:::: example +::: do ../images/a11y/distinct_use_case_do.svg?raw=true +Use different icons for distinct purposes or meanings. +::: +::: dont ../images/a11y/distinct_use_case_dont.svg?raw=true +Don't use the same icon for multiple distinct purposes or meanings, especially in the same context. +::: +:::: + +## Use the same icon for the same meaning + +Use the same icon for the same meaning. Consistent icon use helps people recognize familiar actions across an interface. + +:::: example +::: do ../images/a11y/same_use_case_do.svg?raw=true +Use the same icon for the same purpose or function. +::: +::: dont ../images/a11y/same_use_case_dont.svg?raw=true +Don't use different icons for the same purpose or function. +::: +:::: + +## Hide decorative icons from assistive technology + +Keep decorative icons hidden from screen readers. Decorative icons repeat nearby text or add visual styling without adding meaning. + +:::: example +::: do ../images/a11y/decorative_icons_do.svg?raw=true +Omit `aria-label` on decorative icons. +::: +::: dont ../images/a11y/decorative_icons_dont.svg?raw=true +Don't provide accessible labels to decorative icons. +::: +:::: + +## Label functional standalone icons carefully + +Avoid standalone functional icons when possible. If an icon carries meaning without nearby text or an interactive wrapper, give that icon an accessible label. + +:::: example +::: do ../images/a11y/functional_icons_do.svg?raw=true +Provide an accessible label for functional icons, but avoid standalone functional icons when possible. +::: +::: dont ../images/a11y/functional_icons_dont.svg?raw=true +Don't provide an accessible label for purely decorative icons. +::: +:::: + +In many cases, add visible text, place the icon inside a badge or button, or add a tooltip to the meaningful wrapper instead. + +## Label icon buttons on the button + +Give icon buttons an accessible name. Put the name on the button or in visually hidden text inside the button, not on the icon. + +:::: example +::: do ../images/a11y/icon_button_do.svg?raw=true +Provide the accessible label for icon buttons themselves. +::: +::: dont ../images/a11y/icon_button_dont.svg?raw=true +Don't provide the accessible label for icons on icon buttons. +::: +:::: + +::: details Code examples + +```tsx +// Don't do this + + +// Don't do this either + + +// This works, but visually hidden text is usually more reliable + + +// Prefer this + +``` + +::: + +## A note on `aria-label` + +You can provide accessible labels with `aria-label`, but visually hidden text is often more reliable. + +Read [why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/) for more context. + +### Radix UI + +Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon). + +```tsx +import { ArrowRightIcon } from 'lucide-react'; +import { AccessibleIcon } from '@radix-ui/react-accessible-icon'; + + + +; +``` + +### Bootstrap + +```html +
+ + +
+``` + +### Tailwind CSS + +```html +
+ + Phone number +
+``` + +If you are not sure which hiding technique to use, read [how to hide content](https://www.a11yproject.com/posts/how-to-hide-content/). + +## Further resources + +Use these accessibility resources: + +- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) +- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) +- [Learn accessibility on web.dev](https://web.dev/learn/accessibility) +- [Inclusive Components](https://inclusive-components.design/) +- [A11yTalks](https://www.a11ytalks.com/) +- [A11y automation tracker](https://a11y-automation.dev/) +- [The A11Y Project](https://www.a11yproject.com/) diff --git a/docs/how-to/icon-guide.md b/docs/how-to/icon-guide.md new file mode 100644 index 000000000..bc6f48a26 --- /dev/null +++ b/docs/how-to/icon-guide.md @@ -0,0 +1,190 @@ +--- +title: How to pick the right icon +description: Learn when to use icons, when to avoid them, and how to choose icons that make interfaces easier to understand. +--- + + + +# How to pick the right icon + +Icons can make an interface easier to scan. They work best when people already understand the symbol or when the icon appears with a clear text label. + +Use text instead of an icon when the meaning is complex, abstract, or easy to misunderstand. + +## Match the interface style + +Use icons with the same visual language in the same interface. Mixed styles can make related controls look unrelated. + +:::: example +::: do +Use one icon style for related controls. +::: +::: dont +Don't mix unrelated icon styles in the same interface. +::: +:::: + +## Use familiar icons for familiar actions + +Icons work well for common actions and destinations that people already recognize from other interfaces. + +:::: example +::: do +Use icons for common actions with widely understood symbols. +::: +::: dont "strategy", "optimize", "synergy", "innovation" +Don't use icons alone for abstract concepts with no common symbol. +::: +:::: + +## Use icons as visual anchors + +Icons can help people scan lists, menus, cards, and repeated controls. The icon needs to support the text, not compete with it. + +:::: example +::: do ../images/how-to/visual_anchor_do.svg?raw=true +Use icons to make associated options easier to scan. +::: +::: dont ../images/how-to/visual_anchor_dont.svg?raw=true +Don't add icons to every line when they only create visual clutter. +::: +:::: + +## Use icons in compact interfaces + +Icons can help in tight spaces, such as mobile navigation, toolbars, tables, and compact controls. Keep labels when the icon is not obvious. + +:::: example +::: do ../images/how-to/compact_interfaces_labels_do.svg?raw=true +Keep labels in all layout variants when space allows. +::: +::: caution ../images/how-to/compact_interfaces_labels_dont.svg?raw=true +Use icon-only controls only when a visible label does not fit. + +In these cases, make sure that the label is accessible via hover, focus, or tap. +::: +:::: + +:::: example +::: do ../images/how-to/compact_interfaces_do.svg?raw=true +Keep text labels next to icons in compact layouts, even when space is sparse. +::: +::: dont ../images/how-to/compact_interfaces_dont.svg?raw=true +Don't remove labels in compact layouts when the meaning without them is unclear. +::: +:::: + +:::: example +::: caution ../images/how-to/compact_interfaces_caution_1.svg?raw=true +Use icon-only controls only when the icon represents a widely understood action. +::: +::: caution ../images/how-to/compact_interfaces_caution_2.svg?raw=true +Use icon-only controls only when the label is available on hover, focus, or tap. +::: +:::: + +## Choose the clearest symbol + +Use a familiar symbol when one exists. Novel symbols make people stop and interpret the interface. + +:::: example +::: do `trash`
for deleting an image +Use a familiar symbol for a familiar action. +::: +::: dont `image-off`
for deleting an image +Don't make people learn a new symbol for a common action. +::: +:::: + +## Match the context, not every detail + +Choose the icon that makes the action clearest in context. A more specific icon is better only when the extra detail helps people understand the action. + +:::: example +::: do ../images/how-to/appropriate_context_do.svg?raw=true +Use clear action icons when the surrounding interface already provides the object context. +::: +::: dont ../images/how-to/appropriate_context_dont.svg?raw=true +Don't add object details when the context already makes the object clear. +::: +:::: + +## Keep icon meaning consistent + +Use the same icon for the same meaning, and use different icons for different meanings. + +:::: example +::: do ../images/how-to/consistent_icon_meaning_do.svg?raw=true +Use different icons for distinct purposes or meanings. +::: +::: dont ../images/how-to/consistent_icon_meaning_dont.svg?raw=true +Don't use the same icon for multiple distinct purposes or meanings. +::: +:::: + +:::: example +::: do ../images/how-to/consistent_icon_function_do.svg?raw=true +Use the same icon for the same purpose or function. +::: +::: dont ../images/how-to/consistent_icon_function_dont.svg?raw=true +Don't use different icons for the same purpose or function. +::: +:::: + +## Do not iconize repeated status decoration + +Avoid adding an icon to every repeated status marker when color, weight, text, or layout already communicates the state. Repeated status icons can turn useful list structure into visual noise. + +:::: example +::: do ../images/how-to/repeated_status_do.svg?raw=true +Use the lightest cue that makes the status clear. +::: +::: dont ../images/how-to/repeated_status_dont.svg?raw=true +Don't add repeated status icons when they only restate what the list already shows. +::: +:::: + +## Do not replace built-in control cues + +Do not add icons to controls that already show people how they work. Native controls are easier to recognize when they behave and look familiar. + +:::: example +::: do ../images/how-to/native_ui_elements_do.svg?raw=true +Use the built-in visual cue when the control already communicates its behavior. +::: +::: dont ../images/how-to/native_ui_elements_dont.svg?raw=true +Don't replace native controls with similarly themed interactive icons. +::: +:::: + + diff --git a/docs/how-to/index.md b/docs/how-to/index.md new file mode 100644 index 000000000..176eb27a8 --- /dev/null +++ b/docs/how-to/index.md @@ -0,0 +1,29 @@ +--- +title: How to use Lucide icons +description: Learn how to use icons in an accessible, user-friendly way +--- + + + +# How to use Lucide icons + +Icons can make an interface easier to scan, but they only help when their meaning is clear. These guides explain how to choose icons that support the interface, when to pair icons with text, and when the best icon to use is no icon at all. + +Use the accessibility guide to make icons readable, understandable, and usable with assistive technology. Use the icon guide to decide when icons belong in an interface and how to pick symbols people are likely to recognize. + +## What this guide covers + + + + + +## Further resources + +- [The no-bullshit guide to icon design and usage](https://erik-engheim.medium.com/the-no-bullshit-guide-to-icon-design-and-usage-40948878dbbb) by Erik Engheim +- [On icons](https://ia.net/topics/on-icons/) by iA +- [How to use icons in UI and UX design](https://blog.thenounproject.com/how-to-use-icons-in-ui-and-ux-design-best-practices/) by The Noun Project +- [UX Myth: Icons enhance usability](https://uxmyths.com/post/715009009/myth-icons-enhance-usability) by UX Myths diff --git a/docs/images/a11y/alttext-buttons.svg b/docs/images/a11y/alttext-buttons.svg deleted file mode 100644 index 51874f8b3..000000000 --- a/docs/images/a11y/alttext-buttons.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - Don't provide accessible labels to - decorative icons. - - - - - - - - - - - - - - - Do omit aria-label on decorative icons. - - - - - - - - diff --git a/docs/images/a11y/alttext-iconbuttons.svg b/docs/images/a11y/alttext-iconbuttons.svg deleted file mode 100644 index f715e9842..000000000 --- a/docs/images/a11y/alttext-iconbuttons.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - Don't provide accessible labels for - icons on icon buttons. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/images/a11y/alttext-standalone.svg b/docs/images/a11y/alttext-standalone.svg deleted file mode 100644 index 23e90bbf9..000000000 --- a/docs/images/a11y/alttext-standalone.svg +++ /dev/null @@ -1,92 +0,0 @@ - - In short: provide accessible label for semantic icons, but not for decorative icons. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/images/a11y/consistency.svg b/docs/images/a11y/consistency.svg deleted file mode 100644 index db303455d..000000000 --- a/docs/images/a11y/consistency.svg +++ /dev/null @@ -1,40 +0,0 @@ - - - For example: Don’t use the same icon for multiple distinct purposes or meanings. Don’t use different icons for the same purpose or function. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/images/a11y/contrast.svg b/docs/images/a11y/contrast.svg deleted file mode 100644 index b361a03ec..000000000 --- a/docs/images/a11y/contrast.svg +++ /dev/null @@ -1,20 +0,0 @@ - - In short: use a contrast ratio of at least 4.5:1 - - - - - - - - Don't use low contrast. - - - - - - - - Do use a contrast ratio of at least 4.5:1. - - diff --git a/docs/images/a11y/contrast_do.svg b/docs/images/a11y/contrast_do.svg new file mode 100644 index 000000000..052e7368a --- /dev/null +++ b/docs/images/a11y/contrast_do.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/images/a11y/contrast_dont.svg b/docs/images/a11y/contrast_dont.svg new file mode 100644 index 000000000..1a9326c5e --- /dev/null +++ b/docs/images/a11y/contrast_dont.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/images/a11y/decorative_icons_do.svg b/docs/images/a11y/decorative_icons_do.svg new file mode 100644 index 000000000..e290fc74a --- /dev/null +++ b/docs/images/a11y/decorative_icons_do.svg @@ -0,0 +1,14 @@ + + + + +
 + + + + + + + + + diff --git a/docs/images/a11y/decorative_icons_dont.svg b/docs/images/a11y/decorative_icons_dont.svg new file mode 100644 index 000000000..6be329360 --- /dev/null +++ b/docs/images/a11y/decorative_icons_dont.svg @@ -0,0 +1,14 @@ + + + + +
 + + + + + + + + + diff --git a/docs/images/a11y/distinct_use_case_do.svg b/docs/images/a11y/distinct_use_case_do.svg new file mode 100644 index 000000000..1680ede4f --- /dev/null +++ b/docs/images/a11y/distinct_use_case_do.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/distinct_use_case_dont.svg b/docs/images/a11y/distinct_use_case_dont.svg new file mode 100644 index 000000000..f2577e5ac --- /dev/null +++ b/docs/images/a11y/distinct_use_case_dont.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/functional_icons_do.svg b/docs/images/a11y/functional_icons_do.svg new file mode 100644 index 000000000..0e7df67a7 --- /dev/null +++ b/docs/images/a11y/functional_icons_do.svg @@ -0,0 +1,35 @@ + + +
 + + + + + + + + + + +
 + + + + + + + + + +
 + + + + + + + + + + + diff --git a/docs/images/a11y/functional_icons_dont.svg b/docs/images/a11y/functional_icons_dont.svg new file mode 100644 index 000000000..6f42c2505 --- /dev/null +++ b/docs/images/a11y/functional_icons_dont.svg @@ -0,0 +1,39 @@ + + + + +
 + + + + + + + + + + +
 + + + + + + + + + + + +
 + + + + + + + + + + + diff --git a/docs/images/a11y/icon_button_do.svg b/docs/images/a11y/icon_button_do.svg new file mode 100644 index 000000000..7720a4665 --- /dev/null +++ b/docs/images/a11y/icon_button_do.svg @@ -0,0 +1,14 @@ + + + + + +
 + + + + + + + + diff --git a/docs/images/a11y/icon_button_dont.svg b/docs/images/a11y/icon_button_dont.svg new file mode 100644 index 000000000..faa496837 --- /dev/null +++ b/docs/images/a11y/icon_button_dont.svg @@ -0,0 +1,14 @@ + + +
 + + + + + + + + + + + diff --git a/docs/images/a11y/interactive_icons_do.svg b/docs/images/a11y/interactive_icons_do.svg new file mode 100644 index 000000000..3cb98c59b --- /dev/null +++ b/docs/images/a11y/interactive_icons_do.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/images/a11y/interactive_icons_dont.svg b/docs/images/a11y/interactive_icons_dont.svg new file mode 100644 index 000000000..e12f1248b --- /dev/null +++ b/docs/images/a11y/interactive_icons_dont.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/images/a11y/interactivity.svg b/docs/images/a11y/interactivity.svg deleted file mode 100644 index bf338f345..000000000 --- a/docs/images/a11y/interactivity.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/docs/images/a11y/meaningfulness.svg b/docs/images/a11y/meaningfulness.svg deleted file mode 100644 index 647d3c487..000000000 --- a/docs/images/a11y/meaningfulness.svg +++ /dev/null @@ -1,94 +0,0 @@ - - For example: Use universally understandable symbols and don't base your choice of icon on puns. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/images/a11y/same_use_case_do.svg b/docs/images/a11y/same_use_case_do.svg new file mode 100644 index 000000000..c81443da4 --- /dev/null +++ b/docs/images/a11y/same_use_case_do.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/same_use_case_dont.svg b/docs/images/a11y/same_use_case_dont.svg new file mode 100644 index 000000000..f2c56ee94 --- /dev/null +++ b/docs/images/a11y/same_use_case_dont.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/state_do.svg b/docs/images/a11y/state_do.svg new file mode 100644 index 000000000..e28747e22 --- /dev/null +++ b/docs/images/a11y/state_do.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/state_dont.svg b/docs/images/a11y/state_dont.svg new file mode 100644 index 000000000..0c8825b0b --- /dev/null +++ b/docs/images/a11y/state_dont.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/target-size.svg b/docs/images/a11y/target-size.svg deleted file mode 100644 index e5a5951d4..000000000 --- a/docs/images/a11y/target-size.svg +++ /dev/null @@ -1,49 +0,0 @@ - - Example of using target size correctly - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/images/a11y/target_size_do.svg b/docs/images/a11y/target_size_do.svg new file mode 100644 index 000000000..51329578a --- /dev/null +++ b/docs/images/a11y/target_size_do.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/target_size_dont.svg b/docs/images/a11y/target_size_dont.svg new file mode 100644 index 000000000..b9d95dd87 --- /dev/null +++ b/docs/images/a11y/target_size_dont.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/a11y/use-of-color.svg b/docs/images/a11y/use-of-color.svg deleted file mode 100644 index 573c44d65..000000000 --- a/docs/images/a11y/use-of-color.svg +++ /dev/null @@ -1,191 +0,0 @@ - - For example: Don’t mark state with color, mark it with distinct visuals. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/images/a11y/visible-labels.svg b/docs/images/a11y/visible-labels.svg deleted file mode 100644 index fbbf54d19..000000000 --- a/docs/images/a11y/visible-labels.svg +++ /dev/null @@ -1,23 +0,0 @@ - - In short: Don’t rely on communicating the function of elements by icons alone. Do also provide a written description of the your interactive elements. For example: write out "On this page" on your on-page navigation element. - - - - - - - - Don't rely on communicating the - function of elements by icons alone. - - - - - - - - - Do also provide a written description - of your interacive elements. - - diff --git a/docs/images/how-to/appropriate_context_do.svg b/docs/images/how-to/appropriate_context_do.svg new file mode 100644 index 000000000..68b5b16f8 --- /dev/null +++ b/docs/images/how-to/appropriate_context_do.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/appropriate_context_dont.svg b/docs/images/how-to/appropriate_context_dont.svg new file mode 100644 index 000000000..84c6267c3 --- /dev/null +++ b/docs/images/how-to/appropriate_context_dont.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/compact_interfaces_caution_1.svg b/docs/images/how-to/compact_interfaces_caution_1.svg new file mode 100644 index 000000000..a93edbe3c --- /dev/null +++ b/docs/images/how-to/compact_interfaces_caution_1.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/compact_interfaces_caution_2.svg b/docs/images/how-to/compact_interfaces_caution_2.svg new file mode 100644 index 000000000..086a3332c --- /dev/null +++ b/docs/images/how-to/compact_interfaces_caution_2.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/compact_interfaces_do.svg b/docs/images/how-to/compact_interfaces_do.svg new file mode 100644 index 000000000..da01c7c1d --- /dev/null +++ b/docs/images/how-to/compact_interfaces_do.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/compact_interfaces_dont.svg b/docs/images/how-to/compact_interfaces_dont.svg new file mode 100644 index 000000000..7559fd14e --- /dev/null +++ b/docs/images/how-to/compact_interfaces_dont.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/compact_interfaces_labels_do.svg b/docs/images/how-to/compact_interfaces_labels_do.svg new file mode 100644 index 000000000..53641c505 --- /dev/null +++ b/docs/images/how-to/compact_interfaces_labels_do.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/compact_interfaces_labels_dont.svg b/docs/images/how-to/compact_interfaces_labels_dont.svg new file mode 100644 index 000000000..6b2e2c7b5 --- /dev/null +++ b/docs/images/how-to/compact_interfaces_labels_dont.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/consistent_icon_function_do.svg b/docs/images/how-to/consistent_icon_function_do.svg new file mode 100644 index 000000000..2a5bb7009 --- /dev/null +++ b/docs/images/how-to/consistent_icon_function_do.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/consistent_icon_function_dont.svg b/docs/images/how-to/consistent_icon_function_dont.svg new file mode 100644 index 000000000..a72d9e961 --- /dev/null +++ b/docs/images/how-to/consistent_icon_function_dont.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/consistent_icon_meaning_do.svg b/docs/images/how-to/consistent_icon_meaning_do.svg new file mode 100644 index 000000000..70cbfa1cc --- /dev/null +++ b/docs/images/how-to/consistent_icon_meaning_do.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/consistent_icon_meaning_dont.svg b/docs/images/how-to/consistent_icon_meaning_dont.svg new file mode 100644 index 000000000..80a25908d --- /dev/null +++ b/docs/images/how-to/consistent_icon_meaning_dont.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/native_ui_elements_do.svg b/docs/images/how-to/native_ui_elements_do.svg new file mode 100644 index 000000000..f2e5ab9d4 --- /dev/null +++ b/docs/images/how-to/native_ui_elements_do.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/native_ui_elements_dont.svg b/docs/images/how-to/native_ui_elements_dont.svg new file mode 100644 index 000000000..4e01e9dda --- /dev/null +++ b/docs/images/how-to/native_ui_elements_dont.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/docs/images/how-to/repeated_status_do.svg b/docs/images/how-to/repeated_status_do.svg new file mode 100644 index 000000000..cddd1e7e2 --- /dev/null +++ b/docs/images/how-to/repeated_status_do.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/repeated_status_dont.svg b/docs/images/how-to/repeated_status_dont.svg new file mode 100644 index 000000000..4d1402dc4 --- /dev/null +++ b/docs/images/how-to/repeated_status_dont.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/state_do.svg b/docs/images/how-to/state_do.svg new file mode 100644 index 000000000..5d605ff96 --- /dev/null +++ b/docs/images/how-to/state_do.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/visual_anchor_do.svg b/docs/images/how-to/visual_anchor_do.svg new file mode 100644 index 000000000..9253d0f63 --- /dev/null +++ b/docs/images/how-to/visual_anchor_do.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/docs/images/how-to/visual_anchor_dont.svg b/docs/images/how-to/visual_anchor_dont.svg new file mode 100644 index 000000000..f0cc50c9e --- /dev/null +++ b/docs/images/how-to/visual_anchor_dont.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/vercel.json b/docs/vercel.json index b67281451..268595d6c 100644 --- a/docs/vercel.json +++ b/docs/vercel.json @@ -42,9 +42,14 @@ "destination": "/guide/react/basics", "permanent": true }, + { + "source": "/guide/accessibility", + "destination": "/how-to/accessibility", + "permanent": true + }, { "source": "/guide/advanced/accessibility", - "destination": "/guide/accessibility", + "destination": "/how-to/accessibility", "permanent": true }, {