Accessibility Issue : The title attribute is used to provide alternate text to images or actionable graphics

[Developer-BHN]

Description
The title attribute has been used to provide alternate text to images, or accessible name to actionable graphics.

The title attribute must not be used as a technique to deliver alternate text to images, or accessible name to actionable graphics. The title attribute is poorly supported depending on the browser and screen reader combination. In some cases it is announced as well as actual text or alternate text. In some cases it is overriding actual text or alternate text. And sometimes it is ignored altogether. Screen reader users or voice input users may not be able to determine the image's purpose or to activate an actionable graphic.

Issue Code

<div class="uc-file-actions">
  <button type="button" class="uc-edit-btn uc-mini-btn" title="Edit button">
    <uc-icon name="edit-file">
      <svg xmlns="http://www.w3.org/2000/svg">
        <title></title>
        <use href="#uc-icon-edit-file"></use>
      </svg>
    </uc-icon>
  </button>
  <button type="button" class="uc-remove-btn uc-mini-btn" title="Remove button">
    <uc-icon name="remove-file">
      <svg xmlns="http://www.w3.org/2000/svg">
        <title></title>
        <use href="#uc-icon-remove-file"></use>
      </svg>
    </uc-icon>
  </button>
</div>

Recommended Code

<div class="uc-file-actions">
  <button type="button" class="uc-edit-btn uc-mini-btn" aria-label="Edit image">
    <uc-icon name="edit-file" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg">
        <title></title>
        <use href="#uc-icon-edit-file"></use>
      </svg>
    </uc-icon>
  </button>
  <button type="button" class="uc-remove-btn uc-mini-btn" aria-label="Remove image">
    <uc-icon name="remove-file" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg">
        <title></title>
        <use href="#uc-icon-remove-file"></use>
      </svg>
    </uc-icon>
  </button>
</div>

Screenshots

The edit and remove buttons both use a title attribute for the alternative text for the button. 

Additional, related issues:

1. The file name is repeated in a title attribute for that element. Since the text is already present, the title attribute should be removed.
2. The checkbox over the image has no alternative text and is conveyed to screen readers. Suggested fix:

<div class="uc-thumb"
  style="background-image: url(&quot;https://ucarecdn.com/40a86710-a892-40e6-b85d-e4ad19781ba2/-/crop/1000x633/0,183/-/preview/-/scale_crop/76x76/center/&quot;);">
  <!-- This text may need to be adjusted -->
  <span class="sr-only">Success</span>
  <div class="uc-badge">
    <uc-icon name="badge-success" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg">
        <title></title>
        <use href="#uc-icon-badge-success"></use>
      </svg>
    </uc-icon>
  </div>
</div>

[egordidenko]

Hi, @Developer-BHN

To ensure that the file upload status is properly conveyed, we use aria-live="polite" and aria-atomic="true". This allows assistive technologies to announce whether the file has been successfully uploaded or if an error has occurred.

These improvements help make the upload process more accessible and ensure users receive clear status updates.

Let us know if you have any further suggestions! Thanks again for your valuable feedback! 😊