Здесь может быть некоторая путаница между атрибутом id, который, как ожидается, будет иметь уникальное значение внутри HTML-страницы, и атрибутом role, который определяет тип компонентов пользовательского интерфейса.
Если у вас есть значки SVG, которые функционируют как кнопки , то role="button" является правильным, независимо от того, сколько таких кнопок у вас на странице.Нет правила, согласно которому на веб-странице может быть только одна кнопка.Напротив;если вы хотите сделать доступным каждый значок SVG, который функционирует как кнопка, то вы должны назначить им role="button" и сделать их доступными для клавиатуры.
Хотя список значений роли ARIA равен Строго говоря, ненормативный с точки зрения спецификации HTML5, создание собственных значений ролей не имеет особого смысла.WAI-ARIA разработала «роль таксономии» на основе того, какие типы компонентов пользовательского интерфейса поддерживаются в существующих API доступа.Это фон для сопоставления между WAI-ARIA и API-интерфейсами специальных возможностей в Руководстве по внедрению пользовательского агента WAI-ARIA 1.0.«Кнопка» - это тип компонента пользовательского интерфейса, который обычно поддерживают специальные API.«button1», «button2» не являются компонентами пользовательского интерфейса, которые поддерживают API-интерфейсы специальных возможностей.
Короче говоря, предоставление атрибутов значков SVG, таких как role="button1", role="button2", - плохая идея;используйте role="button" для каждого такого значка, который функционирует как кнопка.