Вы делаете акцент на начальном элементе?Если это так, вы можете добавить дополнительный невидимый текст для чтения с экрана, который будет читаться вместе с элементом, который имеет фокус.Как уже упоминали другие, выполните поиск в Google для класса "sr-only" или посмотрите это: Что такое sr-only в Bootstrap 3? .Возможно, что-то вроде этого:
<button>
I'm the first focusable element
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>
Если у вас нет начального фокуса, тогда вы можете сделать первый элемент в DOM tabindex="0", который содержит скрытый текст, чтобы при чтении с экранапользователь начинает вкладывать текст в интерфейс, первым делом он услышит текст, но это менее желательное решение, поскольку обычно не требуется, чтобы неинтерактивный элемент имел tabindex="0".Примерно так:
<html>
<body>
<span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
<!-- the rest of your real code -->
</body>
</html>
Возможное третье решение, аналогичное первому, состоит в том, чтобы добавить дополнительный текст, связанный с вашим первым заголовком или основным элементом, и сфокусироваться на этом элементе, используя tabindex="-1".«-1» означает, что пользователь не может использовать клавишу Tab для доступа к нему.Что-то вроде:
<html>
<script>
function myload() {
document.getElementById("myid").focus();
}
</script>
<body onload="myload()">
<h1 id="myid" tabindex="-1">
Welcome to my site
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</h1>
</body>
</html>