Skip to content

Commit

Permalink
Исправляет форматирование
Browse files Browse the repository at this point in the history
  • Loading branch information
TatianaFokina authored Nov 24, 2024
1 parent aa0bbb5 commit c1db8d0
Showing 1 changed file with 8 additions and 20 deletions.
28 changes: 8 additions & 20 deletions a11y/aria-required/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,13 @@
title: "`aria-required`"
description: "ARIA-атрибут, который указывает на обязательность ввода данных в элемент формы."
authors:
- doka-dog
keywords:
- доступность
- ARIA
- ARIA-атрибут
- форма
- juliememe
related:
- a11y/aria-errormessage
- a11y/aria-attrs
- html/required
tags:
- doka
- placeholder
---

## Кратко
Expand Down Expand Up @@ -56,13 +50,12 @@ tags:

`aria-required` можно добавлять не только к полям или чекбоксам, но и к целым группам радиокнопок или к ячейкам сеток.

## Пример

```html
<span id="label">Ваша почта:</span>
<span role="textbox" aria-labelledby="label" id="email" aria-required="true" contenteditable></span>
```
## Еще Пример

Ещё пример:

```html
<form>
Expand All @@ -85,7 +78,6 @@ tags:
</form>
```


## Подсказки

💡 Атрибуты `required` и `aria-required` одинаково интерпретируются скринридерами.
Expand All @@ -98,21 +90,21 @@ tags:

```css
[aria-required="true"] {
border: 2px solid red;
border: 2px solid red;
}
```

Или показать подсказки:

```css
[aria-required="true"]::after {
content: '*';
color: red;
content: '*';
color: red;
}

```

💡 Для поддержки старых браузеров можно использовать одновременно оба атрибута. Современные браузеры в таком случае будут игнорировать `aria-required` и отдадут приоритет нативному `required`.


## На практике

🛠 Чтобы пользователь понял, что поле обязательное используйте текст или символ вместе с [цветом](https://doka.guide/css/required/). Это важно для пользователей с ограничениями по зрению.
Expand All @@ -122,7 +114,3 @@ color: red;
🛠 Если все поля формы обязательны, лучше укажите это в начале формы, а не добавляйте атрибут к каждому полю.

🛠 Для сложных групп элементов, например радиокнопок или чекбоксов, используйте `aria-required`, а валидацию настроите через JavaScript.




0 comments on commit c1db8d0

Please sign in to comment.