I have a toolbar with various buttons with dropdown list. In some cases the button has a label and in other cases it uses an image.

我有一个工具栏与各种按钮的列表。在某些情况下，按钮有一个标签，在其他情况下，它使用图像。

Both are generated to have an aria-labelledby to a containing div that has a title attribute. The screen readers (NVDA, Narrator tested) work fine with the image case, but won't take the aria-labelledby when the button has a label.

两者都被生成为具有到包含div的aria-Labelledby，该div具有标题属性。屏幕阅读器(NVDA，叙述者测试)在图像情况下工作得很好，但当按钮有标签时，不能接受咏叹调标签。

But if I switch to aria-label, then it works. In my case that is problematic has the title text is not known yet when the content is first constructed.

但如果我换成咏叹调，它就行了。在我的情况下，这是有问题的，因为当内容第一次构造时，标题文本还不知道。

Here is an example, ugly since no CSS but it demonstrates the issue.

下面是一个例子，它很难看，因为没有css，但它演示了这个问题。

<button name="dd-selected-button" type="button" class="dd-selected" aria-haspopup="listbox" aria-expanded="false" aria-controls="dd-options-ID_1694283703078" aria-labelledby="fontSizeDropDown">
  <label class="dd-selected-text">10</label>
</button>

and the working one with image:

和带图像的工作的那个：

<button name="dd-selected-button" type="button" class="dd-selected" aria-haspopup="listbox" aria-expanded="false" aria-controls="dd-options-ID_1694283703042" aria-labelledby="fontDropDown">
   <img class="dd-selected-image" src="../images/fonts/arial.png">
</button>

Fiddle labelledby: https://jsfiddle.net/alpic80/9t827xq3/1/
and with label: https://jsfiddle.net/alpic80/0fakL7po/1/

小提琴标签：https://jsfiddle.net/alpic80/9t827xq3/1/，标签：https://jsfiddle.net/alpic80/0fakL7po/1/

Your example works with the JAWS screen reader on a PC and with VoiceOver on iOS.

你的例子适用于PC上的JAWS屏幕阅读器和iOS上的VoiceOver。

I inspected the "accessible name" as defined in the "Accessible Name and Description Computation 1.1" and the accessibility tree seems to show the right information.

我检查了“可访问名称和描述计算1.1”中定义的“可访问名称”，可访问性树似乎显示了正确的信息。

However, your code has some unusual coding practices and the aria-label and aria-labelledby are sort of a red herring and have nothing to do with the issue. It's more about trying to compute the accessible name of the <div>.

然而，您的代码有一些不寻常的编码实践，aria-Label和aria-Labeldby在某种程度上是在转移注意力，与该问题无关。它更多地是关于尝试计算

The name computation has a precedence order. The most "important" or highest precedence attribute is aria-labelledby. It trumps all other attributes. If an aria-labelledby is not found, the next important attribute is aria-label. After that is an element that can provide a name, such as the <label> element. At the very bottom of the precedence tree is the "tooltip" attribute, which is the title attribute.

名称计算具有优先顺序。最“重要”或优先级最高的属性是aria-Labeldby。它凌驾于所有其他属性之上。如果找不到aria-labelledby，则下一个重要属性是aria-Label。后面是可以提供名称的元素，例如元素。在优先顺序树的最底部是“工具提示”属性，这是标题属性。

Your first <div> has a <label> descendant (embedded in the <button>) whereas the other <div> doesn't. So the first <div> is getting its accessible name from the <label> instead of the title because title has the lowest precedence.

您的第一个

<div title="select the font">
  <div>
    <button>
      <label>10</label>
    </button>
  </div>
</div>

If your <div> had an aria-label instead of a title, then that would trump the embedded <label>, but then you might run into a situation where the aria-label of a <div> is ignored unless the <div> also has a role. See the third last bullet point on 2.10 Practical Support: aria-label, aria-labelledby and aria-describedby

如果您的

Don't use aria-label or aria-labelledby on a span or div unless its given a role.

However, even given all that and if you could get your button to be labelled by the containing <div>, you'd be creating an accessibility issue because of WCAG 2.5.3 Label in Name. That guideline says that the visible label of the button must be contained in the accessible name of the button. The accessible name can contain other text but at a minimum just contain the visible label of the button. In your example, the button displays a "10" but you're trying to get the accessible name of the button to be "select a font...". That would fail. For example, a speech interface user (such as Dragon Naturally Speaking) will see a "10" button but if they say, "click 10", it won't work. They'd have to say, "click select a font" because "select a font" is the accessible name of the button.

然而，即便如此，如果您可以让您的按钮被包含的