Please address the in-accessibility of this app

[brichwin]

Any chance you could fix the accessibility issues with this app? We can't link to it because it surprisingly was not created with accessibility in mind.

[r12a]

Which app are you referring to?

[brichwin]

Hi, @r12a - Sorry, I thought the issues went specifically to app. I'm referring to the BCP47 language subtag lookup app that is linked to from the Choosing a Language Tag page on the w3.org Internationalization site.

The following is not meant to be an exhaustive punch list, but provided in case examples are needed:

The page frequently simply makes text look like headings instead using proper headings <h1>...<h6> and instead. For example:

<strong class="task">Find</strong>

Heading elements appear to be being misused to style text, or inappropriately in place of a more semantic summary/details widget. The app should be keyboard accessible. But these "clickable" <h3 title="Click to view or hide details" style="cursor: pointer;"> elements do not get keyboard focus. The accessible name (textContent) as a structural heading has too much content to be practical (the title is not available to assistive technologies - see the accessible name computation algorithm:

<h3 title="Click to view or hide details" style="cursor: pointer;">
  <span class="sil">
    <a target="_blank" href="https://en.wikipedia.org/w/index.php?search=Spanish, Castilian">
      <img src="images/wiki_grn.png" title="Look up in Wikipedia." alt="Look up in Wikipedia.">
    </a>
  </span> &nbsp; <span class="sil">
    <a target="_blank" href="http://www.ethnologue.com/show_language.asp?code=spa">
      <img src="images/ethn.png" title="Look up in the SIL Ethnologue." alt="Look up in the SIL Ethnologue.">
    </a>
  </span>
  <span class="sil">
    <a target="_blank" href="../app-charuse/?language=es">
      <img src="images/charuse.png" title="Look up in the Character Usage app." alt="Look up in the Character Usage app.">
    </a>
  </span> &nbsp; <span class="st">es</span>
  <span class="desc">Spanish, Castilian</span>
</h3>

Consider using headings and landmarks/regions to appropriately describe the application's functional areas.

Input fields are not labeled. For example:

<p><strong class="task">Find</strong> <br>
        a subtag by searching for text in the descriptions <a href="#note2" class="explanation">See note&nbsp;2.</a> <br>
        <input type="text" name="find" id="findinput" onchange="find(document.getElementById('findinput').value.toLowerCase()); displayResults('find');">
        <input onclick="find(document.getElementById('findinput').value.toLowerCase()); displayResults('find');" type="submit" value="Find">
      </p>

Link text is often not meaningful. For example, here is a search result with a link that searches wikipedia for "Spanish, Castilian" but the link text ambiguously says "Look up in Wikipedia":

<span class="sil"><a target="_blank" href="https://en.wikipedia.org/w/index.php?search=Spanish, Castilian"><img src="images/wiki_grn.png" title="Look up in Wikipedia." alt="Look up in Wikipedia."></a></span>

Lists should be real lists and not simply have the appearance of a list. For example, a css class "notenumber" and other visual only formatting is used to make basic use instructions visually appear as a list:

Instructions should not depend on the reader having vision. For example, "Click on the results with a coloured background...". Non-visual users may wonder if the coloured background results are different than other results without a coloured background. What clues besides background colour can be used to find these results?:

<p><strong><span class="notenumber">1</span> Raw data. </strong>Click on the results with a coloured background to see the raw IANA data for a subtag.</p>