w3c / w3c-website

W3C Website feedback and bug reports
https://www.w3.org/
245 stars 81 forks source link

Medium Priority - WCAG Level AA - Language of parts (Members listing) #166

Open JuliaSang opened 2 years ago

JuliaSang commented 2 years ago

A heading link is present which contains both English and Chinese but will not be relayed correctly to screen reader users as required language attribute has not been specified.

WCAG Reference: 3.1.2 Language of Parts (Level AA) Understanding Language of Parts | How to Meet Language of Parts

Issue ID: DAC_Language_of_parts_01

URL: https://beta.w3.org/membership/list/ Page title: Current Members & Testimonials Journey 2, Step 1

language of parts

There is a heading link present on the page which contains both English and Chinese; as the language has not been programmatically determined for each part respectively, the Chinese will not be announced correctly by screen reading software.

Current code ref(s): #main > div.member-list > div:nth-child(76) > div > div.not- sidebar.card__text > h2 > a

<div class="l-sidebar card card--member" data-component="card"> <div>
    <div class="not-sidebar card__text">
      <h2 class="card__heading"><a class="card__link"
href="http://www.cesi.cn/page/index.html">China Electronics Standardization Institute(中国电子技术标准化研究院)</a></h2>
    </div>
    <div class="sidebar">
      <div class="logo--member"></div>
    </div>
  </div>
</div>

Solution: Ensure that where links contain alternate language that the language of each part is appropriately indicated via a lang attribute.

Example:

<h2 class="card__heading">
<a class="card__link" href="http://www.cesi.cn/page/index.html">
<span> lang="en">China Electronics Standardization Institute</span>
<span lang="[ISO CODE]">(中国电子技术标准化研究院) </span>
</a>
</h2>
maries24 commented 2 years ago

Hi @vivien, not sure whether this is a content issue or a 'systems' one. I'm assigning it to you so you can reassign to the right person. Thank you.

vivienlacourba commented 2 years ago

Hi @vivien, not sure whether this is a content issue or a 'systems' one. I'm assigning it to you so you can reassign to the right person. Thank you.

Today we unfortunately have only a single field to store the organization name.

Chinese Members nonetheless often have their organization name available both in Chinese and in an international/English version. That is something our Chinese colleagues recently asked us to support, so that we can replicate this page: https://www.chinaw3c.org/china-members.html

cc: @deniak

r12a commented 1 year ago

I wish i'd been aware of these issues earlier. This is problematic not only for screen readers but also for general display. Unless the Chinese text is language-tagged, some browsers will display it using a Chinese font, and others will display it using a Japanese font. Not ideal.

Btw, the suggested fix should use [BCP47 CODE], not [ISO CODE]. And the parentheses should be outside the language declaration, otherwise they will look incorrect.