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