Skip to content

Commit 63db90d

Browse files
committed
Update banner markup
1 parent 0f9b5cb commit 63db90d

1 file changed

Lines changed: 23 additions & 19 deletions

File tree

_includes/uswds/banner.html

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,38 @@
1-
<section class="usa-banner" aria-label="Official government website">
1+
<section
2+
class="usa-banner"
3+
aria-label="Official website of the United States government"
4+
>
25
<div class="usa-accordion">
36
<header class="usa-banner__header">
47
<div class="usa-banner__inner">
58
<div class="grid-col-auto">
69
<img
10+
aria-hidden="true"
711
class="usa-banner__header-flag"
812
src="{{ site.baseurl }}/assets/img/us_flag_small.png"
9-
alt="U.S. flag"
13+
alt=""
1014
/>
1115
</div>
12-
<div class="grid-col-fill tablet:grid-col-auto">
16+
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
1317
<p class="usa-banner__header-text">
1418
An official website of the United States government
1519
</p>
16-
<p class="usa-banner__header-action" aria-hidden="true">
17-
Here’s how you know
18-
</p>
20+
<p class="usa-banner__header-action">Here’s how you know</p>
1921
</div>
2022
<button
23+
type="button"
2124
class="usa-accordion__button usa-banner__button"
2225
aria-expanded="false"
23-
aria-controls="gov-banner-default"
26+
aria-controls="gov-banner-default-default"
2427
>
2528
<span class="usa-banner__button-text">Here’s how you know</span>
2629
</button>
2730
</div>
2831
</header>
29-
<div class="usa-banner__content usa-accordion__content" id="gov-banner-default">
32+
<div
33+
class="usa-banner__content usa-accordion__content"
34+
id="gov-banner-default-default"
35+
>
3036
<div class="grid-row grid-gap-lg">
3137
<div class="usa-banner__guidance tablet:grid-col-6">
3238
<img
@@ -38,9 +44,8 @@
3844
/>
3945
<div class="usa-media-block__body">
4046
<p>
41-
<strong> Official websites use .gov </strong>
42-
<br />
43-
A <strong>.gov</strong> website belongs to an official government
47+
<strong>Official websites use .gov</strong><br />A
48+
<strong>.gov</strong> website belongs to an official government
4449
organization in the United States.
4550
</p>
4651
</div>
@@ -55,9 +60,8 @@
5560
/>
5661
<div class="usa-media-block__body">
5762
<p>
58-
<strong> Secure .gov websites use HTTPS </strong>
59-
<br />
60-
A <strong>lock</strong> (
63+
<strong>Secure .gov websites use HTTPS</strong><br />A
64+
<strong>lock</strong> (
6165
<span class="icon-lock"
6266
><svg
6367
xmlns="http://www.w3.org/2000/svg"
@@ -66,18 +70,18 @@
6670
viewBox="0 0 52 64"
6771
class="usa-banner__lock-image"
6872
role="img"
69-
aria-labelledby="banner-lock-title-default banner-lock-description-default"
73+
aria-labelledby="banner-lock-description-default"
7074
focusable="false"
7175
>
7276
<title id="banner-lock-title-default">Lock</title>
73-
<desc id="banner-lock-description-default">A locked padlock</desc>
77+
<desc id="banner-lock-description-default">Locked padlock icon</desc>
7478
<path
7579
fill="#000000"
7680
fill-rule="evenodd"
7781
d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
78-
/></svg
79-
></span>
80-
) or <strong>https://</strong> means you’ve safely connected to
82+
/>
83+
</svg> </span
84+
>) or <strong>https://</strong> means you’ve safely connected to
8185
the .gov website. Share sensitive information only on official,
8286
secure websites.
8387
</p>

0 commit comments

Comments
 (0)