---
id: 61fd67a656743144844941cb
title: Step 4
challengeType: 0
dashedName: step-4
---
# --description--
I lettori di schermo leggono gli elementi HTML in base al flusso del documento. Vogliamo che, alla fine, il bilancio abbia il titolo "Balance Sheet" e il sottotitolo "AcmeWidgetCorp". Tuttavia, questo ordine non ha senso se letto da un lettore di schermo.
Dai all'elemento `span` esistente l'attributo `class` impostato su `flex` e aggiungi due elementi `span` al suo interno. Dai al primo il testo `AcmeWidgetCorp`. Dare al secondo il testo `Balance Sheet`. Utilizzerai il CSS per invertire l'ordine del testo sulla pagina, ma l'ordine HTML avrà più senso per il lettore di schermo.
# --hints--
L'elemento span esistente dovrebbe avere l'attributo `class` impostato su `flex`.
```js
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
```
L'elemento `span` esistente dovrebbe avere due nuovi elementi `span` al suo interno.
```js
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
```
I nuovi elementi `span` non dovrebbe avere un attributo `class`.
```js
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
```
Il primo nuovo elemento `span` dovrebbe avere il testo `AcmeWidgetCorp`.
```js
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
```
Il secondo nuovo elemento `span` dovrebbe avere il testo `Balance Sheet`.
```js
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
```
# --seed--
## --seed-contents--
```html
Balance Sheet