Как указать программам чтения с экрана, что контент доступен для редактирования?

В моем продукте есть область, в которой мы хотим отобразить значение по умолчанию (скажем, название страницы документа), но когда пользователь фокусируется на ней и нажимает пробел, она становится редактируемым полем. Мы пытаемся написать доступный код, и мне интересно, есть ли у кого-нибудь руководство о том, как указать кому-то, использующему программу чтения с экрана, что этот контент доступен для редактирования?

То, как мы в настоящее время обрабатываем это в коде, состоит в том, чтобы иметь div с именем, и когда пользователь щелкает (или фокусируется и нажимает пробел), он превращается в ввод. (Они могут нажать Enter или кнопку для сохранения.) Существуют ли значения ARIA, которые мы могли бы использовать для этого или какого-либо другого собственного решения?

По умолчанию:

<div>Page title <button>Click to edit page title</button></div>

При редактировании:

<input maxlength="500" value="Page title" />

У нас сейчас нет кнопки для сохранения. Вы нажимаете ввод или снимаете фокус с ввода, и он автоматически обновляется.


html accessibility inline-editing screen-readers
person caraclarke    schedule 27.11.2019    source источник
comment
почему люди должны щелкать / нажимать пробел, чтобы редактировать? Есть ли вариант использования для этого или вы могли бы просто сделать его входным стилем в одном направлении, когда он не сфокусирован (так что он просто выглядит как текст с тонким намеком на то, что он доступен для редактирования) и стилизовать его по-другому, когда он сфокусирован (с сохранением фокуса потерян или через ввод), что устранит множество обходных путей доступности, а также сделает его более приятным для всех.   -  person Graham Ritchie    schedule 27.11.2019
comment
Согласитесь с @GrahamRitchie, сделав его элементом input с самого начала, вам не нужно ничего делать, кроме стилизации, что было бы хорошей практикой с точки зрения доступности.   -  person jcruz    schedule 27.11.2019
comment
Имеет смысл, я посмотрю, смогу ли я изменить стиль ввода, чтобы он соответствовал спецификациям дизайна, которые они запрашивают. Спасибо   -  person caraclarke    schedule 28.11.2019

Ответы (1)


arrow_upward
3
arrow_downward

В документе ARIA в HTML "Элемент с атрибутом contenteditable" определяется как имеющий неявный атрибут aria-readonly="false". Это свойство доступно только для некоторых ролей ARIA согласно документации ARIA и роль textbox больше подходит в вашем случае. В этом случае кнопка не нужна.

Если ваш редактируемый раздел не содержит HTML-кода (например, ссылки), кажется бесполезным использовать раздел contenteditable, и вместо этого вы должны использовать стандартные элементы input или textarea с соответствующим дизайном CSS, соблюдая стандарты WCAG (т. е. редактируемые поля должны отличаться от текст)

Если редактируемый раздел содержит HTML-код, вам придется использовать атрибут contenteditable. Вы должны идентифицировать раздел как элемент role=textbox, и он должен быть сфокусирован с помощью атрибута tabindex=0. Это можно сделать при загрузке страницы (без кнопки) или после нажатия кнопки вне раздела (если вам нужно, например, иметь возможность активировать внутренние ссылки в обычном контексте чтения).

person Adam    schedule 28.11.2019