![\"Accessibility](\"./media/hand-intuit-logo.png\"){kind=logo}
\n accessibility-snippets
\n \n\n[](#contributors)\n\n\nVScode Snippets created to help developers write accessible code.
\nVScode Snippets created to help developers write accessible code.
\n\n## Features\n\n### Css snippet\n\n- reduced motion - adds a reduced motion snippet with prefix `transition`\n\n### React Aria Snippets\n\n- **alert** - Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live=\"assertive\" and aria-atomic=\"true\".\n\n- **alertDialog** - Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls.\n\n- **article** - Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed.\n\n- **button** - Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse.\n\n- **checkbox** - Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.\n\n- **combobox** - Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.\n\n- **dialog** - Add `role='dialog'` to a window separate from the rest of the webpage like a modal.\n\n- **feed** - Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.\n\n- **link** - Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.\n\n- **radio** - Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.\n\n- **slider** - Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.\n\n- **switch** - Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.\n\n- **textbox** - Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.\n\n## Rules of ARIA\n\n- The **first rule** of ARIA is try to `use native HTML elements` instead of aria attributes whenever possible.\n\n- The **second rule** of ARIA is do not change native HTML semantics, unless you really have to.\n\n Avoid:\n\n ```\nVScode Snippets created to help developers write accessible code.
\n\n## Features\n\n### Css snippet\n\n- reduced motion - adds a reduced motion snippet with prefix `transition`\n\n### React Aria Snippets\n\n- **alert** - Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live=\"assertive\" and aria-atomic=\"true\".\n\n- **alertDialog** - Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls.\n\n- **article** - Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed.\n\n- **button** - Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse.\n\n- **checkbox** - Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.\n\n- **combobox** - Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.\n\n- **dialog** - Add `role='dialog'` to a window separate from the rest of the webpage like a modal.\n\n- **feed** - Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.\n\n- **link** - Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.\n\n- **radio** - Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.\n\n- **slider** - Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.\n\n- **switch** - Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.\n\n- **textbox** - Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.\n\n## Rules of ARIA\n\n- The **first rule** of ARIA is try to `use native HTML elements` instead of aria attributes whenever possible.\n\n- The **second rule** of ARIA is do not change native HTML semantics, unless you really have to.\n\n Avoid:\n\n ```\nVScode Snippets created to help developers write accessible code.
\n\n## Features\n\n### Css snippet\n\n- reduced motion - adds a reduced motion snippet with prefix `transition`\n\n### React Aria Snippets\n\n- **alert** - Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live=\"assertive\" and aria-atomic=\"true\".\n\n- **alertDialog** - Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls.\n\n- **article** - Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed.\n\n- **button** - Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse.\n\n- **checkbox** - Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.\n\n- **combobox** - Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.\n\n- **dialog** - Add `role='dialog'` to a window separate from the rest of the webpage like a modal.\n\n- **feed** - Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.\n\n- **link** - Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.\n\n- **radio** - Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.\n\n- **slider** - Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.\n\n- **switch** - Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.\n\n- **textbox** - Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.\n\n## Rules of ARIA\n\n- The **first rule** of ARIA is try to `use native HTML elements` instead of aria attributes whenever possible.\n\n- The **second rule** of ARIA is do not change native HTML semantics, unless you really have to.\n\n Avoid:\n\n ```\nVScode Snippets created to help developers write accessible code.
\n\n## Features\n\n### Css snippet\n\n- reduced motion - adds a reduced motion snippet with prefix `transition`\n\n### React Aria Snippets\n\n- **alert** - Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live=\"assertive\" and aria-atomic=\"true\".\n\n- **alertDialog** - Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls.\n\n- **article** - Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed.\n\n- **button** - Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse.\n\n- **checkbox** - Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.\n\n- **combobox** - Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.\n\n- **dialog** - Add `role='dialog'` to a window separate from the rest of the webpage like a modal.\n\n- **feed** - Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.\n\n- **link** - Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.\n\n- **radio** - Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.\n\n- **slider** - Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.\n\n- **switch** - Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.\n\n- **textbox** - Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.\n\n## Rules of ARIA\n\n- The **first rule** of ARIA is try to `use native HTML elements` instead of aria attributes whenever possible.\n\n- The **second rule** of ARIA is do not change native HTML semantics, unless you really have to.\n\n Avoid:\n\n ```\nVScode Snippets created to help developers write accessible code.
\n\n## Features\n\n### Css snippet\n\n- reduced motion - adds a reduced motion snippet with prefix `transition`\n\n### React Aria Snippets\n\n- **alert** - Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live=\"assertive\" and aria-atomic=\"true\".\n\n- **alertDialog** - Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls.\n\n- **article** - Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed.\n\n- **button** - Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse.\n\n- **checkbox** - Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.\n\n- **combobox** - Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.\n\n- **dialog** - Add `role='dialog'` to a window separate from the rest of the webpage like a modal.\n\n- **feed** - Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.\n\n- **link** - Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.\n\n- **radio** - Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.\n\n- **slider** - Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.\n\n- **switch** - Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.\n\n- **textbox** - Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.\n\n## Rules of ARIA\n\n- The **first rule** of ARIA is try to `use native HTML elements` instead of aria attributes whenever possible.\n\n- The **second rule** of ARIA is do not change native HTML semantics, unless you really have to.\n\n Avoid:\n\n ```\nVScode Snippets created to help developers write accessible code.
\n\n## Features\n\n### Css snippet\n\n- reduced motion - adds a reduced motion snippet with prefix `transition`\n\n### React Aria Snippets\n\n- **AlertAria** - Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live=\"assertive\" and aria-atomic=\"true\".\n\n- **AlertDialogAria** - Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls.\n\n- **ArticleAria** - Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed.\n\n- **ButtonAria** - Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse.\n\n- **CheckboxAria** - Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.\n\n- **ComboboxAria** - Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.\n\n- **DialogAria** - Add `role='dialog'` to a window separate from the rest of the webpage like a modal.\n\n- **FeedAria** - Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.\n\n- **LinkAria** - Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.\n\n- **RadioAria** - Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.\n\n- **SliderAria** - Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.\n\n- **SwitchAria** - Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.\n\n- **TextboxAria** - Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.\n\n## Rules of ARIA\n\n- The **first rule** of ARIA is try to `use native HTML elements` instead of aria attributes whenever possible.\n\n- The **second rule** of ARIA is do not change native HTML semantics, unless you really have to.\n\n Avoid:\n\n ```\n\n VScode Snippets created to help developers write accessible code.
\n![\"\"/](\"https://avatars3.githubusercontent.com/u/15275462?v=4?s=100\") Kendall Gassner ๐ป ๐ ๐ค ๐ | \n
\n VScode Snippets created to help developers write accessible code.
\nKendall Gassner ๐ป ๐ ๐ค ๐ | \n ![\"\"/](\"https://avatars.githubusercontent.com/u/24794756?v=4?s=100\") Kelly Harrop ๐ | \n
\n VScode Snippets created to help developers write accessible code.
\n![\"\"/](\"https://avatars.githubusercontent.com/u/65999534?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/21354238?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/17627376?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/55211974?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/20996426?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/43980170?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/38788938?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/56428237?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/59070723?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/46354272?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/10150263?v=4?s=100\")
![\"\"/](\"https://avatars.githubusercontent.com/u/35532678?v=4?s=100\")