Guideline 1.1 – Text Alternatives - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

[ecureuill]

• [x] 1.1.1 - Non-text

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

• Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
• Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
• Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
• Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
• CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
• Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

[ecureuill]

• [x] Score meter:

  <div role="meter" 
    aria-valuetext="0 pontos" 
    aria-valuenow="0" 
    aria-valuemin="0" 
    aria-valuemax="7" 
    aria-label="player-1">

• [x] Arrow denoting the current player The image is ignored by assistive technology <img alt='' />and the information that the image represents is announced to assistive technology as status

<div role="status" 
    aria-atomic="true" 
    aria-live="assertive" 
    class="visually-hidden">
    <span>It's player 1 turn</span>
</div>

• [x] Cards (back) It's an icon button with aria-label

  <button
   ...
   aria-label='card 1'
  >
  <img src={deck.back.image} alt={''}/>
  </button>

• [x] Cards (front) It's an image with alt

  <img src='...' alt='css'/>

• [x] Matching status It's announced to assistive technology as a status

  <div role='status' aria-live='assertive' className='visually-hidden'>
  Card css was turned over
  </div>