То есть кнопка, на которую можно вкладывать вкладки, которая доступна для программ чтения с экрана и не подразумевает семантической ссылки на другой документ
Да, и, как ни странно, это называется просто: <button>. Или <input type="button">, если вам нужен только текстовый контент. Затем вы можете добавить к нему загрузку CSS, чтобы он выглядел как кнопка формы по умолчанию, если хотите.
Единственной проблемой является IE, который добавляет лишнюю пару пикселей несменяемого отступа к виджетам кнопок и перемещает содержимое кнопки вниз и вправо на один пиксель при нажатии. Часто это не имеет значения. Если вам не нужно заполнение нулями, вы также можете компенсировать это, добавив отступ во всех браузерах, кроме IE.
Другая семантически обоснованная возможность - использовать <input type="image">, хотя для этого, очевидно, требуется, чтобы контент был изображением. Вместо этого использование альтернативного текста не работает из-за рендеринга IE неработающих изображений.
В то время как кнопки семантически являются наиболее подходящим элементом, если вы не хотите, чтобы эта проблема с оформлением была, вы можете продолжать использовать диапазон или другой бессмысленный элемент (как это делает SO), но, по крайней мере, улучшить доступность клавиатуры, предоставив ей tabindex значение. Затем он будет фокусироваться как ссылка, хотя, к сожалению, вам понадобятся дополнительные сценарии, если вы хотите сделать его активируемым с клавиатуры (перехватывайте хотя бы коды нажатия клавиш 13 и 32). Вы также можете пометить такой элемент как кнопку с помощью ARIA для обеспечения доступности, хотя, честно говоря, я не уверен, что это действительно что-то очень полезное для современного набора инструментов.
Иногда, когда действие связано с другим элементом на странице, например с предложенной кнопкой «открыть / скрыть», мне кажется законным использовать внутреннюю ссылку на этот элемент. (Однако с назначенным JS onclick, а не с любым встроенным JS или ужасными javascript: псевдо-URL.)
.hidden { display: none; }
<a href="#foo" class="toggler">open/hide</a>
<div id="foo"> blah </div>
for (var i= document.links.length; i-->0;)
if (document.links[i].className==='toggler')
document.links[i].onclick= toggle;
function toggle() {
var el= document.getElementById(this.hash.substring(1));
el.className= el.className==='hidden'? 'hidden' : '';
}
или похожая идиома в выбранной вами библиотеке. Это сделает что-то полезное в не-JavaScript браузерах; Вы также можете добавить правило для проверки хэша текущего местоположения, чтобы, если кто-то откроет вашу ссылку для показа на новой вкладке, этот документ будет отображать соответствующий элемент.