Html 具有复杂自定义组件的可访问性

可访问性指南是在组件发布之前发明的，所以他们总是说标签用于标识表单控件，如

或

，等等。当我有一个复杂的角度/反应/。。。像表单控件一样工作的组件

想象一个呈现输入并向列表中添加项目的

。生成的html如下所示：

当我在输入中键入某个内容并按enter键时，它会将该条目添加到列表中并再次呈现输入，如：

我键入的内容

当然，如果我在输入中键入其他内容并按enter键，则会将其添加到列表中：

我键入的内容
别的

如果我们想在表单中使用此自定义组件，我们希望像其他表单项目一样为其添加标签，例如：

Foo
选择一个国家

这是有效的吗？Wave tool会抱怨一个孤儿标签，而axe什么也没说。那么，我们可以使用普通的

标签
来标记自定义组件以便于访问吗？我们需要一个标签放在那里的一致性，但需要是可访问的

如果我可以这样做，
customselect
也在呈现输入。该输入需要自己的标签或aria标签，对吗？
是的，输入需要被标记

是否有任何理由让组件不管理此项？接受标签文本，然后为标签和输入对呈现正确的可访问HTML

因此，在反应中：

<CustomSelect labelText="Enter your destination" />



组件正在执行以下操作：

const id = generatedUniqueId() // This will need to be memoized in the real implementation to avoid creating new id's with every render.

...

<>
<label for={id}>{labelText}</label>
<input id={id} />
</>



const id=generatedUniqueId（）//这需要在实际实现中进行记录，以避免在每次渲染时创建新id。
...
{labelText}
至少在角度上：您可以像以下那样保留1Y：

// Custom Input HTML (Using Angular Material for eg);

// You can import the label inside the custom component and bind it to the 
input field so that you can always have a new ID to every custom input

<mat-form-field [attr.aria-labelledby]="customAriaLabelledByIDs">
  <mat-label *ngIf="label" [for]="customId">{{ label }}</mat-label>
  <input matInput [id]="customId" />
</mat-form-field>


// In your component.ts file, 
@Input() customId: string;
@Input() customAriaLabelledByIDs: string[];
combinedAriaLabelledByIDs: string;

ngOnInit() {
if (this.customAriaLabelledByIDs) {
      this.combinedAriaLabelledByIDs = 
        this.customAriaLabelledByIDs.length === 1
          ? this.customAriaLabelledByIDs[0]
          : this.customAriaLabelledByIDs.join(' ');
    }
}



/// Wherever you use, now you will have something like this: 

<your-custom-selector
     [customAriaLabelledByIDs]="['id-1', 'id-2', 'id-3']"
     [customId]="first-name-ID"
></your-custom-selector>


<your-custom-selector
     [customAriaLabelledByIDs]="['id-4', 'id-5', 'id-6']"
     [customId]="second-name-ID"
></your-custom-selector>

etc.,


//自定义输入HTML（使用角度材质作为eg）；
//可以在自定义组件内导入标签并将其绑定到
输入字段，以便您可以始终为每个自定义输入设置一个新ID
{{label}}
//在component.ts文件中，
@Input（）customId:string；
@Input（）CustomAriaLabelledById:string[]；
CombinedAriaLabelledByds：字符串；
恩戈尼尼特（）{
if（此.customarialabledbyds）{
此.combinedAriaLabelledByIDs=
this.CustomAriaLabelledByDS.length==1
？此.customariabledbyids[0]
：this.customariabledbyids.join（“”）；
}
}
///无论您在何处使用，现在您都可以使用以下内容：
等

您可以将多个aria属性添加到@Input（）中，并从自定义组件使用它，如aria标签、角色、aria扩展等

如果你需要更多关于我上面提到的任何事情的解释，请告诉我。我很乐意帮忙
 据我所知，真正的问题不是如何将标签附加到输入上。这很清楚。真正的问题是如何保存外部