Make the accessibility checkers happy (#129)

* Make the accessibility checkers happy
* Include a lang specification in the `<html>` tag.
* reorder `<h#>` header tags.
The `<Aside` to from `<h1>`, `<h2>` to be `<h2>`, `<h3>`. This is because trusswork's `<Footer>` uses and `<h4>` and the accessibility checkers complain it was skipping from `<h2>` -> `<h4>`
* Change `<aria-details>` to `<aria-label>` for milestone list
* Update J40Header.tsx 80 column line
This commit is contained in:
TomNUSDS 2021-06-14 19:35:35 -07:00 committed by GitHub
commit 9155326775
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 39 deletions

View file

@ -35,7 +35,7 @@ const IndexPage = ({location}: IndexPageProps) => {
];
return (<Layout location={location}>
<h2>About Justice40</h2>
<h1>About Justice40</h1>
<p>
In an effort to address historical environmental injustices,
President Biden created the Justice40 Initiative on January
@ -71,7 +71,7 @@ const IndexPage = ({location}: IndexPageProps) => {
Abroad.</a>
</p>
<h3>Areas of Focus</h3>
<h2>Areas of Focus</h2>
<div className={'grid-row grid-gap'}>
<div className={'j40-two-column-confine'}>
<ul className={'usa-icon-list j40-two-column'}>
@ -97,7 +97,7 @@ const IndexPage = ({location}: IndexPageProps) => {
</div>
<h3>A Transparent, Community-First Approach</h3>
<h2>A Transparent, Community-First Approach</h2>
<p>
Successful initiatives are guided by direct input from the
@ -136,6 +136,7 @@ const IndexPage = ({location}: IndexPageProps) => {
being built and the processes for stakeholder and public
engagement.
</p>
</Layout>
);
};

View file

@ -10,8 +10,8 @@ interface TimelinePageProps {
const TimelinePage = ({location}: TimelinePageProps) => {
return (<Layout location={location}>
<h2>Timeline</h2>
<h3>Throughout the Process</h3>
<h1>Timeline</h1>
<h2>Throughout the Process</h2>
<div className="grid-col">
<div className="grid-row grid-gap-lg">
<div className="grid-col-1">
@ -30,34 +30,27 @@ const TimelinePage = ({location}: TimelinePageProps) => {
</div>
</div>
<h3>Milestones</h3>
<h2>Milestones</h2>
<ol className={'usa-process-list'}>
<li
className={'j40-usa-process-list__item--complete ' +
'usa-process-list__item padding-bottom-4 '}
aria-details={'milestone 1 done'}>
<h4
className={'usa-process-list__heading'}
>Milestone 1</h4>
aria-label={'milestone 1 done'}>
<h4 className={'usa-process-list__heading'}>Milestone 1</h4>
<p className={'margin-top-05'}>
Publish data principles on this site by June 2021.</p>
Publish data principles on this site by June 2021.</p>
</li>
<li
className={'usa-process-list__item padding-bottom-4'}
aria-details={'milestone 2 next'}>
<h4
className={'usa-process-list__heading'}
>Milestone 2</h4>
<p>Make the first version of a screening tool available
by
July 2021.</p>
aria-label={'milestone 2 next'}>
<h4 className={'usa-process-list__heading'}>Milestone 2</h4>
<p>Make the first version of a screening tool
available by July 2021.</p>
</li>
<li
className={'usa-process-list__item padding-bottom-4'}
aria-details={'milestone 3'}>
<h4
className={'usa-process-list__heading'}
>Milestone 3</h4>
aria-label={'milestone 3'}>
<h4 className={'usa-process-list__heading'}>Milestone 3</h4>
<p>Create a public scorecard to ensure accountability of
investments by February 2022.</p>
</li>