---
id: 61fd67a656743144844941cb
title: Крок 4
challengeType: 0
dashedName: step-4
---

# --description--

Читачі екрана повідомляють про елементи HTML на основі потоку документа. Зрештою, ми хочемо, щоб бухгалтерський баланс мав заголовок «Balance Sheet» та підзаголовок «AcmeWidgetCorp». Однак такий порядок не має сенсу, якщо його озвучує читач екрана.

Надайте наявному `span` атрибут `class` зі значенням `flex` та додайте в нього два елементи `span`. Надайте першому текст `AcmeWidgetCorp`. Надайте другому текст `Balance Sheet`. Ви використовуватимете CSS для зміни порядку тексту на сторінці, але порядок HTML матиме більше сенсу для читачів екрана.

# --hints--

Ваш наявний елемент `span` повинен мати атрибут `class` зі значенням `flex`.

```js
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
```

Ваш наявний елемент `span` повинен мати два нових елементи `span`.

```js
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
```

Ваші нові елементи `span` не повинні мати атрибут `class`.

```js
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
```

Ваш перший новий елемент `span` повинен мати текст `AcmeWidgetCorp`.

```js
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
```

Ваш другий новий елемент `span` повинен мати текст `Balance Sheet`.

```js
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <main>
      <section>
        <h1>
--fcc-editable-region--
          <span>
          </span>
--fcc-editable-region--
        </h1>
      </section>
    </main>
  </body>
</html>
```

```css

```
