feat: DAYL-95 > Improve a11y docn (#6406)

* Add a11y section and add a11y tag to property descriptions

* Update components/inputs/docs/input-color.md

Co-authored-by: Dave Lockhart <dlockhart@users.noreply.github.com>

* Update input-color.md

---------

Co-authored-by: Dave Lockhart <dlockhart@users.noreply.github.com>

Author: geurts

components/inputs/docs/input-color.md

@@ -55,11 +55,12 @@ input.addEventListener('change', (e) => {
 * `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
-### Accessibility Properties
+## Accessibility
 
-To make your usage of `d2l-input-color` accessible, use the following properties when applicable:
+At its core, the color input is a button, so it relies on standard button semantics and adheres to [W3C's Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button) to ensure a smooth experience for all assistive technologies, but there are a few interesting details to note:
 
-| Attribute | Description |
-|---|---|
-| `label` | **REQUIRED** when type is `custom`. [Acts as a primary label for the button](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
-| `label-hidden` | Use if label should be visually hidden. |
+ * `label` is required if `type` is `custom`, since it acts as a primary label for the button
+   * However, if `type` is set to `background` or `foreground` a simple default will be used if `label` is left empty
+ * `label-hidden` can be used to hide the label when there is sufficient visual context for sighted users; the label will remain available to screen reader users who may lack the visual context
+ * `associated-value` allows you to set a hex color against which the input's color contrast will be measured, which ensures end users will get appropriate warnings if they choose inaccessible color combinations
+ * The color input remains focusable even when `disabled` or in `read-only` mode, so that users can access the tooltip giving the current value

components/inputs/input-color.js

@@ -91,7 +91,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 	static get properties() {
 		return {
 			/**
-			 * Value of an associated color as a HEX which will be used for color contrast analysis
+			 * ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis
 			 * @type {string}
 			 */
 			associatedValue: { attribute: 'associated-value', type: String },
@@ -106,7 +106,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 			 */
 			disallowNone: { attribute: 'disallow-none', type: Boolean },
 			/**
-			 * REQUIRED: Label for the input, comes with a default value for background & foreground types.
+			 * ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.
 			 * @type {string}
 			 */
 			label: {