New features and components should follow the following accessibility implementation guidelines:

To test your changes use the [Accessibility Insights browser extension](https://accessibilityinsights.io/downloads/)

1. Use the Accesibility Insights extension to perform a FastPass scan to detect major issues.
1. Attempt to use the component with only a keyboard. All interactions available to a user with a mouse should be available when using only a keyboard.
1. Focus accessibility testing on the MGT components and not on the Storybook shell.

## Accessibility guidelines

Where possible use a native html element or corresponding fluent web component for buttons or links. A div with a click handler requires more work than a button to be accessible.  
Html elements have semantic meaning, use this whenever possible to convey intent. e.g. don't use an anchor tag as a button.  
If you are unsure about the accessibility of a feature or change, ask a maintainer for guidance.

### HTML attribute checklist

- [ ] uses `aria-label` correctly | *string*: "Login Button", "Megan Bowen" | - meaningful text should provide identifiable labels for screen readers when additional context is needed over the default content
  
*example call button in mgt-person-card:*

```html
<fluent-button
  class="icon"
  aria-label=${ariaLabel}
  @click=${this.callUser}
>
  ${getSvg(SvgIcon.Call)}
</fluent-button>
```
> An aria-label should not be used if it has the same content as already provided, e.g. a button with only text 



```html
<!-- Don't do this -->
<fluent-button
  class="icon"
  aria-label="Sign out"
  @click=${this.signOut}
>
  Sign out
</fluent-button>

<!-- Do this instead-->
<fluent-button
  class="icon"
  @click=${this.signOut}
>
  Sign out
</fluent-button>
```

- [ ] uses `tab-index/focus` correctly | *string*: "0", "-1" | - components that are interactive should be navigable by `tab` key control and provide visual focus indicators. Where possible use html elements that provide focus and interactivity by default, e.g. button and a tags. The base styles for mgt components provide a default `:focus-visible` selector, you should verify that it is visible and if necessary provide some overrides.

*example a list-item:*

```html
<li
  tabindex="0"
  class="list-item"
  @keydown="${this.onListKeyDown}"
  @focus="${this.onFocusFirstItem}"
  @click=${(e: UIEvent) => this.handleItemSelect(item, e)}>
  ${this.renderItem(item)}
</li>
```
```css
.list-item:focus-within{
  outline-style: dashed;
  outline-offset: -12px;
}
```
> **Note**: if an element has a tab index then it should probably have a click handler.

- [ ] provides `alt` text information | *string*: "person icon" | - any `<img>` tag should contain `alt` text as well. Alt text should be descriptive and may need to be composed using data from Microsoft Graph and a fix string to provide additional context

*example (mgt-person):*

```html
<img
  title="${ifDefined(imageOnly ? titleText : undefined)}"
  alt=${`${this.strings.photoFor} ${personDetailsInternal.displayName}`}
  src=${imageSrc}
  @error=${() => (this._isInvalidImageSrc = true)}
/>
```