---
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

```
