---
id: 61fd67a656743144844941cb
title: ステップ 4
challengeType: 0
dashedName: step-4
---

# --description--

スクリーンリーダーはドキュメントフローに従って HTML 要素を読み上げます。 最終的にこのバランスシートの見出しを「Balance Sheet」、サブ見出しを「AcmeWidgetCorp」にしようと思っています。 しかし、この順序でスクリーンリーダーに読み上げられても (英語では) 意味を成しません。

今ある `span` の `class` 属性を `flex` に設定し、その中に `span` 要素を 2 つ追加してください。 1 つ目のテキストは `AcmeWidgetCorp` にしてください。 2 つ目のテキストは `Balance Sheet` にしてください。 表示上のテキストの順序は後ほど CSS を使って入れ替えますが、HTML の順序はこれで、スクリーンリーダーで読み上げられた時に意味のあるものになります。

# --hints--

既存の `span` 要素の `class` 属性を `flex` に設定する必要があります。

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

既存の `span` 要素内に `span` 要素が新たに 2 つ必要です。

```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);
```

1 つ目の新しい `span` 要素には `AcmeWidgetCorp` というテキストが必要です。

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

2 つ目の新しい `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

```
