## Accessibility (website)

### Instructions

Choose a website you find particularly accessible. Find at least 3 concrete examples of accessible measures and explain how they ease the reading or perception of visual content.

### Deliverables

- A 3-page Figma file with 3 different elements from a website (it can be from 3 different websites) that are accessible. The 3 measures must be different.

Don't forget to:

- Upload the Figma file on Github, labeled as follows: “Name_FirstName_DeliverableName_Date_VersionNumber”. For example, it can be labeled as “Doe_John_MidFiPrototype_05242024_V1”.
- Add a title within the file.

**Tips:**

- Pay attention to the global aspect of the file. It must be clear, simple and easy to read. You can get inspiration [canva](https://www.canva.com/) but don’t overload your design with too much details!

**Resources:**

- [What accessibility is and why it’s so important](https://uxdesign.cc/what-accessibility-is-and-why-its-so-important-9c56e033ff26)
- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
- [Accessibility testing — W3C Wik](https://www.w3.org/wiki/Accessibility_testing)i
- [UX Myth: Accessibility is expensive and difficult](https://uxmyths.com/post/654091803/myth-5-accessibility-is-expensive-and-difficult)
- [Salesforce UX - 7 tips every designer needs to know about accessibility](https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b)
- [Why prioritze web accessibility](https://blog.hubspot.com/service/why-prioritize-web-accessibility)

**Criteria:**

- Examples of measures
  - Color contrast.
  - Highlighted or enlarged text when hovering.
  - Links color that is different from the body text's.
  - Breadcrumbs to indicate where you are in terms of navigation.
  - In forms, the title of the case should be above the text zone.
  - Error states.
  - etc.