Accessibility Issue : Neutral markup is used where purpose-specific semantic markup is available

[Developer-BHN]

Description
Content has neutral markup plus styling to convey presentation that is not semantically described.

Information, structure, and relationships conveyed through presentation must be able to be programmatically determined. Using semantic markup for its intended purpose allows user agents including assistive technology to present content both visually and in alternative formats. Using neutral markup to control visual presentation may not allow assistive technology to correctly convey the intended effect. For example, using uppercase to emphasize text may mean a screen reader announces each letter, where using <em> produces a visual emphasis and is correctly announced.

Issue Code

<uc-source-list wrap="">
  <uc-source-btn type="local">
    <button type="button">
      <uc-icon name="local">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-local"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">From device</div>
    </button>
  </uc-source-btn>
  <uc-source-btn type="camera">
    <button type="button">
      <uc-icon name="camera">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-camera"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">Camera</div>
    </button>
  </uc-source-btn>
  <uc-source-btn type="gphotos">
    <button type="button">
      <uc-icon name="gphotos">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-gphotos"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">Google Photos</div>
    </button>
  </uc-source-btn>
  <uc-source-btn type="facebook">
    <button type="button">
      <uc-icon name="facebook">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-facebook"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">Facebook</div>
    </button>
  </uc-source-btn><uc-source-btn type="instagram">
    <button type="button">
      <uc-icon name="instagram">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-instagram"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">Instagram</div>
    </button>
  </uc-source-btn>
  <uc-source-btn type="gdrive">
    <button type="button">
      <uc-icon name="gdrive">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-gdrive"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">Google Drive</div>
    </button>
  </uc-source-btn>
  <uc-source-btn type="dropbox">
    <button type="button">
      <uc-icon name="dropbox">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-dropbox"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">Dropbox</div>
    </button>
  </uc-source-btn><uc-source-btn type="flickr">
    <button type="button">
      <uc-icon name="flickr">
        <svg xmlns="http://www.w3.org/2000/svg">
          <title></title>
          <use href="#uc-icon-flickr"></use>
        </svg>
      </uc-icon>
      <div class="uc-txt">Flickr</div>
    </button>
  </uc-source-btn>
</uc-source-list>

Recommended Code

<uc-source-list wrap="">
  <ul role="list">
    <li>
      <uc-source-btn type="local">
        <button type="button">
          <uc-icon name="local" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-local"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">From device</div>
        </button>
      </uc-source-btn>
    </li>
    <li>
      <uc-source-btn type="camera">
        <button type="button">
          <uc-icon name="camera" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-camera"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">Camera</div>
        </button>
      </uc-source-btn>
    </li>
    <li>
      <uc-source-btn type="gphotos">
        <button type="button">
          <uc-icon name="gphotos" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-gphotos"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">Google Photos</div>
        </button>
      </uc-source-btn>
    </li>
    <li>
      <uc-source-btn type="facebook">
        <button type="button">
          <uc-icon name="facebook" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-facebook"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">Facebook</div>
        </button>
      </uc-source-btn>
    </li>
    <li>
      <uc-source-btn type="instagram">
        <button type="button">
          <uc-icon name="instagram" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-instagram"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">Instagram</div>
        </button>
      </uc-source-btn>
    </li>
    <li>
      <uc-source-btn type="gdrive">
        <button type="button">
          <uc-icon name="gdrive" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-gdrive"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">Google Drive</div>
        </button>
      </uc-source-btn>
    </li>
    <li>
      <uc-source-btn type="dropbox">
        <button type="button">
          <uc-icon name="dropbox" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-dropbox"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">Dropbox</div>
        </button>
      </uc-source-btn>
    </li>
    <li>
      <uc-source-btn type="flickr">
        <button type="button">
          <uc-icon name="flickr" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg">
              <title></title>
              <use href="#uc-icon-flickr"></use>
            </svg>
          </uc-icon>
          <div class="uc-txt">Flickr</div>
        </button>
      </uc-source-btn>
    </li>
  </ul>
</uc-source-list>

Screenshots

Issue Metadata
Applicable Standards:

1.3.1 Info and Relationships (Level A)

Content Type:

error

Impacted Populations

Blind (Severity: 2)Low Vision (Severity: 2)Cognitively Impaired (Severity: 2)

Issue Key:

56

[egordidenko]

Hi @Developer-BHN,

Thank you so much for diving deep into the accessibility aspects of File Uploader. We truly appreciate your contribution, as we strive to make our product accessible and user-friendly for everyone.

You’re absolutely right—improving semantics will help assistive technologies interpret the structure correctly. In this case, instead of using <ul>/<li>, we plan to add role="list" to <uc-source-list> and role="listitem" to <uc-source-btn>. This approach allows us to maintain the flexibility of our markup without altering its visual or functional behavior while ensuring proper list recognition by assistive technologies.

We’ll be working on a PR to implement these changes soon.

Thanks again for your valuable input! 😊