Accessibility in Web development & Angular

What is Accessibility and why? 😡😡#

It ensures equal access of information to people with disabilities, promotes inclusivity, and improves overall user experience, while also enhancing reputation and compliance with laws and regulations.

Accessible websites benefit people with disabilities, older adults, and everyone, regardless of abilities or environment. By prioritizing accessibility, organizations can create more inclusive and usable websites that reach a wider audience and drive better conversion rates.

Ways to achieve that in our website

1.Use semantic HTML:
- Use HTML elements that provide meaning to the structure of a web page, such as header, nav, main, section, article, aside, footer, etc.

- Example: `<header>...</header>`

2.Provide alternative text for images:
- Use the alt attribute to provide a text description of images, which can be read by screen readers.

- Example: `<img src="image.jpg" alt="Image description">`

3.Use ARIA attributes:
- Use ARIA attributes to provide additional information about dynamic content, such as aria-label, aria-describedby, aria-expanded, etc.
It can be read by screen readers so would be helpful for special group of people.

- Example: `<button aria-label="Close">X</button>`

4.Ensure keyboard navigation:
- Ensure that all interactive elements can be accessed using a keyboard, and that the tab order is logical.

- Example: Use tabindex attribute to specify the tab order: <button tabindex="1">...</button>

5.Use high contrast colors:
- Ensure that the color scheme has sufficient contrast between background and foreground colors, making it easier for users with visual impairments to read.
- Example: Use a tool like Snook's Color Contrast Checker to ensure sufficient contrast.

6.Provide closed captions for audio and video content:
- Provide closed captions for audio and video content, which can be read by users who are not able to listen or hard of hearing.

- Example: `<video> <track kind="captions" src="captions.vtt" srclang="en"> </video>`

7.Use Angular's built-in accessibility features:
- Use Angular's built-in accessibility features, such as the AccessibilityModule, to improve the accessibility of your application.

- Example: `import { AccessibilityModule } from '@angular/cdk/a11y';`

// Here's a full code example of using Angular's built-in accessibility features:

app.module.ts

app.component.html

In this example, we're using Angular's built-in accessibility features by:

• Importing the A11yModule from @angular/cdk/a11y in our module.
• Using ARIA attributes (aria-expanded, aria-label, aria-labelledby, aria-live, aria-atomic, aria-describedby) to provide additional information about dynamic content and interactive elements.
• Using the role attributeto define the role of elements (e.g., menu, menuitem, tooltip).