Merge pull request #94 from BuildingEnergyTools/accessibility

Accessibility Updates
BuildingEnergyTools · Sep 9, 2024 · 3349e9b · 3349e9b
2 parents f39dc27 + 7a8c1f3
commit 3349e9b
Show file tree

Hide file tree

Showing 74 changed files with 326 additions and 208 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -74,6 +74,7 @@ const routes: Routes = [{
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     scrollPositionRestoration: 'enabled',
+    anchorScrolling: 'enabled',
     useHash: true
   })],
   exports: [RouterModule]

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,5 @@
+<!-- <a class="skip-link" [routerLink]="[currentUrl]" [fragment]="'maincontent'" >Skip to Main Content</a> -->
+<a class="skip-link" href="#maincontent">Skip to Main Content</a>
 <app-header></app-header>
 <app-menu></app-menu>
 <main fxFlex="grow" id="maincontent">

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,9 +1,27 @@
 @import "theme";
 
+*:focus {
+  outline: 2px solid #005FCC;
+}
+
 :host {
   display: flex;
   flex-direction: column !important;
   /*max-width: $maxWidth;*/
   min-height: 100%;
   margin: 0 auto;
 }
+
+.skip-link {
+  background: #ffff;
+  height: 30px;
+  left: 50%;
+  padding: 4px;
+  position: absolute;
+  transform: translateY(-100%);
+  transition: transform 0.3s;
+}
+
+.skip-link:focus {
+  transform: translateY(0%);
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -10,7 +10,7 @@ import { appTitle, Constants } from '@shared/classes/constants';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-
+  currentUrl: any = ''
   constructor(
     public router: Router,
     private titleService: TitleService
@@ -24,6 +24,11 @@ export class AppComponent {
         } else {
           titleService.setTitle(appTitle);
         }
+        if (event.url != '') {
+          this.currentUrl = event.url;
+        } else {
+          this.currentUrl ='';
+        }
       }
     });
   }

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -13,11 +13,11 @@ <h1 routerLink="/" class="title">Building Performance Tools</h1>
             <div class="navbar-brand">
               <span><img src="assets/images/doe-eere-logo.png" alt="" usemap="#logo" class="banner-logo">
                 <map name="logo">
-                  <area shape="rect" coords="1,1,198,20" href="https://www.energy.gov/" alt="Energy.gov">
-                  <area shape="rect" coords="2,22,198,75" href="https://www.energy.gov/eere/office-energy-efficiency-renewable-energy" alt="Office of Energy Efficiency and Renewable Energy">
+                  <area shape="rect" class="focus" coords="1,1,198,20" href="https://www.energy.gov/" alt="Energy.gov">
+                  <area shape="rect" class="focus" coords="2,22,198,75" href="https://www.energy.gov/eere/office-energy-efficiency-renewable-energy" alt="Office of Energy Efficiency and Renewable Energy">
                 </map>
               </span>
-              <span class="banner-title"><a routerLink="/">Building Data Tools</a></span>
+              <span class="banner-title"><a routerLink="/" class="focus">Building Data Tools</a></span>
             </div>
           </div>
         </div>

diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -1,5 +1,11 @@
 @import "theme";
 
+.focus {
+  &:focus {
+    outline: 2px solid #005FCC; 
+  } 
+}
+
 .top-header {
   background-color: #094f58;
   background-image: url("/assets/images/datatools_header.jpg");

diff --git a/src/app/home/graphic/graphic.component.html b/src/app/home/graphic/graphic.component.html
@@ -2,43 +2,45 @@
   <div class="col-type-4" fxLayout="column">
     <div class="col-bkgnd-4">
       <div class="header4">
-        <h3 class="header">GOALS & OUTCOMES</h3>
+        <h2 class="header">GOALS & OUTCOMES</h2>
       </div>
     </div>
 
     <div class="goals-cards" fxLayout="row wrap" fxLayout.xs="column">
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g1" routerLink="/goals/analyze" (mouseenter)="mouseEnter('g1')" (mouseleave)="mouseLeave('g1')" [ngClass]="{'opaque': hovers.g2 || hovers.g3 || hovers.g4}">
+        <mat-card class="goals-card-pad" id="g1" (mouseenter)="mouseEnter('g1')" (mouseleave)="mouseLeave('g1')" [ngClass]="{'opaque': hovers.g2 || hovers.g3 || hovers.g4}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/com-resstock-outcomes-icon.svg" alt="ComStock & ResStock outcomes icon"></div>
-            <p class="card-text">Assess Impacts and Identify New Opportunities</p>
+            <p class="card-text">
+              <a routerLink="/goals/analyze">Assess Impacts and Identify New Opportunities</a></p>
           </mat-card-content>
         </mat-card>
       </div>
 
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g2" routerLink="/goals/target" (mouseenter)="mouseEnter('g2')" (mouseleave)="mouseLeave('g2')" [ngClass]="{'opaque': hovers.g1 || hovers.g3 || hovers.g4}">
+        <mat-card class="goals-card-pad" id="g2" (mouseenter)="mouseEnter('g2')" (mouseleave)="mouseLeave('g2')" [ngClass]="{'opaque': hovers.g1 || hovers.g3 || hovers.g4}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/better-outcomes-icon.svg" alt="BETTER outcomes icon"></div>
-            <p class="card-text">Identify Measures and Suggest Areas for Deeper Evaluations</p>
+            <p class="card-text">
+              <a routerLink="/goals/target">Identify Measures and Suggest Areas for Deeper Evaluations</a></p>
           </mat-card-content>
         </mat-card>
       </div>
 
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g3" routerLink="/goals/compliance" (mouseenter)="mouseEnter('g3')" (mouseleave)="mouseLeave('g3')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g4}">
+        <mat-card class="goals-card-pad" id="g3" (mouseenter)="mouseEnter('g3')" (mouseleave)="mouseLeave('g3')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g4}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/assetscore-outcomes-icon.svg" alt="Asset Score Outcomes icon"></div>
-            <p class="card-text">Bring Buildings into Compliance with EUI and GHGe Requirements</p>
+            <p class="card-text"><a routerLink="/goals/compliance">Bring Buildings into Compliance with EUI and GHGe Requirements</a></p>
           </mat-card-content>
         </mat-card>
       </div>
 
       <div fxFlex="25%" fxFlex.xs="100%" fxLayoutAlign.xs="space-evenly stretch">
-        <mat-card class="goals-card-pad" id="g4" routerLink="/goals/customize" (mouseenter)="mouseEnter('g4')" (mouseleave)="mouseLeave('g4')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g3}">
+        <mat-card class="goals-card-pad" id="g4" (mouseenter)="mouseEnter('g4')" (mouseleave)="mouseLeave('g4')" [ngClass]="{'opaque': hovers.g1 || hovers.g2 || hovers.g3}">
           <mat-card-content fxFlexFill fxLayout="row" fxLayoutAlign="center center">
             <div fxFlex="35%" fxHide.lt-md class="card-icon"><img src="assets/images/thirdparty-outcomes-icon.svg" alt="third-party outcomes icon"></div>
-            <p class="card-text">Customize Your Workflow with CRM, Data Visualizations, and More</p>
+            <p class="card-text"><a routerLink="/goals/customize">Customize Your Workflow with CRM, Data Visualizations, and More</a></p>
           </mat-card-content>
         </mat-card>
       </div>
@@ -49,7 +51,7 @@ <h3 class="header">GOALS & OUTCOMES</h3>
     <div fxFlex="calc(33.33% - 5px)" fxFlex.xs="100%" fxLayout="column" class="col-type-1">
       <div class="col-bkgnd-1">
         <div class="header1">
-          <h3 class="header">DATA COLLECTION & REPORTING</h3>
+          <h2 class="header">DATA COLLECTION & REPORTING</h2>
         </div>
       </div>
 
@@ -87,7 +89,7 @@ <h3 class="header">DATA COLLECTION & REPORTING</h3>
     <div fxFlex="calc(33.33% - 5px)" fxFlex.xs="100%" fxLayout="column" class="col-type-2">
       <div class="col-bkgnd-2">
         <div class="header2">
-          <h3 class="header">MANAGEMENT & COMPLIANCE</h3>
+          <h2 class="header">MANAGEMENT & COMPLIANCE</h2>
         </div>
       </div>
 
@@ -121,7 +123,7 @@ <h3 class="header">MANAGEMENT & COMPLIANCE</h3>
     <div fxFlex="calc(33.33% - 5px)" fxFlex.xs="100%" fxLayout="column" class="col-type-3">
       <div class="col-bkgnd-3">
         <div class="header3">
-          <h3 class="header">ANALYSIS & EVALUATION</h3>
+          <h2 class="header">ANALYSIS & EVALUATION</h2>
         </div>
       </div>
 

diff --git a/src/app/home/graphic/graphic.component.scss b/src/app/home/graphic/graphic.component.scss
@@ -14,13 +14,17 @@
   height: 0;
 }
 
+.card-text {
+  a {
+    color: #000;
+  }
+}
+
 .mat-card {
-  cursor: pointer;
   transition: filter 200ms ease-in-out;
 }
 
 .mat-card-content {
-  cursor: pointer;
   margin-bottom: 0;
 }
 
@@ -34,9 +38,17 @@
 
 .header {
   padding: 1.7rem 10px 0;
-  font-weight: 500;
+  font-weight: 400;
   color: white;
   text-align: center;
+  h2 {
+    color: white;
+    font-family: "Roboto", sans-serif;
+    font-size: 1.8rem;
+    line-height: 3rem;
+    padding-left: 4rem;
+    padding-top: 10px;
+  }
 }
 
 .header1,

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -2,23 +2,12 @@
   <div class="home-intro-text2 my-2">
     <div fxLayout="row" fxLayoutAlign="space-around" class="top-side" fxFlex="90%" fxFlexOffset="5%">
       <p>The U.S. Department of Energy developed a comprehensive suite of tools for accessing, managing, analyzing and sharing building energy data. This website describes how they can be used to support <a href="https://www.epa.gov/statelocalenergy/benchmarking-and-building-performance-standards-policy-toolkit">building performance standards (BPS) policies</a>, one of many possible use cases.</p>
-
-      <!--<div [fxFlex]="45" class="left-side" fxLayout="column">
-        <p>More local governments are choosing to implement Building Performance Standard (BPS) policies to meet their energy efficiency and climate-related goals. BPS policies go beyond benchmarking, requiring owners of buildings covered by the policy to conduct an energy audit and install recommended upgrades in pursuit of a minimum performance standard.</p>
-
-        <p>These mandates often lack funding for implementation, leaving public officials to do their best without additional staff or resources. This can result in a heavy reliance on manual data handling processes – processes which are time consuming and prone to error.</p>
-      </div>
-      <div [fxFlex]="50" fxLayout="column">
-        <p>To reduce the burden of BPS implementation, the U.S. Department of Energy (DOE) and its National Laboratory partners created a suite of powerful, interoperable, free and open-source data tools. These tools snap directly into existing workflows and make it easy to collect, manage, analyze, and share the building-related data needed for a BPS policy.</p>
-
-        <p>Sustainability leaders like Washington, D.C. and others are already using these tools to meet their goals. And since they're backed by DOE, you can count on long-term maintenance and support.</p>
-      </div>-->
     </div>
   </div>
 
   <div fxLayout="row" fxLayout.xs="column" class="interactive-map-div">
     <div fxLayoutAlign="space-around" fxFlex.gt-xs="35%">
-      <h2>Find Your Tool or Workflow</h2>
+      <h1>Find Your Tool or Workflow</h1>
     </div>
     <div fxLayoutAlign="space-around" fxFlex.gt-xs="65%">
       <p>Mouse over and click on the tools below to get more information.<br>When you're ready, follow the 'Learn More' button to see just how easy data can be.</p>
@@ -29,27 +18,27 @@ <h2>Find Your Tool or Workflow</h2>
 
   <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="10px" class="bottom-boxes">
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="standardize" routerLink="/data-standardization">
-        <h3>Get started with<br>data standardization</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="standardize">
+        <h2><a routerLink="/data-standardization"><i class="fas fa-exchange-alt"></i> Get started with<br>data standardization</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="help" routerLink="/help-desk">
-        <h3>Help Desk</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="help">
+        <h2><a routerLink="/help-desk"><i class="fas fa-question"></i> Contact the <br/>Help Desk</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="explore-tools" routerLink="/analysis-evaluation">
-        <h3>Explore the analysis tools</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="explore-tools">
+        <h2><a routerLink="/analysis-evaluation"><i class="fas fa-search"></i> Explore the <br/>analysis tools</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
     <div fxFlex="25%" fxFlex.xs="100%">
-      <div class="dev" routerLink="/developers">
-        <h3>Find information for developers</h3>
-        <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div>
+      <div class="dev">
+        <h2><a routerLink="/developers"><i class="fas fa-laptop-code"></i> Find information <br/>for developers</a></h2>
+        <!-- <div class="box-arrow"><img src="assets/images/box-arrow.svg" alt=""></div> -->
       </div>
     </div>
   </div>

diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
@@ -78,7 +78,7 @@ a {
   width: 100%;
   margin-left: 0;
 
-  h2 {
+  h1 {
     font-weight: 400;
     margin-top: 5px;
     color: white;
@@ -101,30 +101,43 @@ a {
 .dev {
   background-position: center;
   background-size: cover;
-  cursor: pointer;
-  height: 200px;
-  padding: 1rem 1rem;
+  height: 120px;
+  padding: 1.5rem 1rem;
 
-  h3 {
+  h2 {
     color: white;
     font-family: "Roboto", sans-serif;
     font-size: 1.8rem;
     line-height: 3rem;
     padding-left: 4rem;
     padding-top: 10px;
+
+    .box-arrow {
+      margin-left: 20px;
+      width: 5rem;
+    }
+  }
+
+  a {
+  color: #fff;
+    i {
+      padding-right: 5px; 
+    }
   }
 }
 
 .standardize {
-  background-image: url("/assets/images/get-started-box.jpg");
+  /* background-image: url("/assets/images/get-started-box.jpg"); */
+  background: #0A4F58;
 }
 
 .help {
   background: nth($colors, 3);
 }
 
 .explore-tools {
-  background-image: url("/assets/images/analysis-box.jpg");
+  background: #0174A1;
+  /* background-image: url("/assets/images/analysis-box.jpg"); */
 }
 
 .dev {
@@ -157,7 +170,7 @@ a {
   .explore-tools,
   .help,
   .standardize {
-    h3 {
+    h2 {
       font-size: 1rem;
       line-height: 1.5rem;
     }

diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html
@@ -18,14 +18,16 @@
   <div fxFlex fxShow fxHide.xs style="position: relative">
     <div fxLayout="row" fxLayoutGap="32px" class="top-row">
       <ng-container *ngFor="let navItem of navItems">
-        <div [routerLink]="navItem.route" fxFlex="calc({{flexWidth}}% - 32px)" class="category" [ngClass]="{'active': isParentActive(navItem)}">{{ navItem.title }}</div>
+        <div role="button" fxFlex="calc({{flexWidth}}% - 32px)" class="category" [ngClass]="{'active': isParentActive(navItem)}">
+          <a [routerLink]="navItem.route">{{ navItem.title }}</a>
+        </div>
       </ng-container>
     </div>
     <div fxLayout="row" fxLayoutGap="32px" class="child-row" style="position: absolute">
       <section *ngFor="let navItem of navItems" fxFlex="calc({{flexWidth}}% - 32px)">
         <ng-container *ngFor="let child of navItem.children">
-          <div *ngIf="!child.external" [routerLink]="child.route" routerLinkActive="active">{{ child.title }}</div>
-          <div *ngIf="child.external" (click)="openLink(child.route)">{{ child.title }} <i class="fas fa-external-link-alt"></i></div>
+          <div *ngIf="!child.external" [routerLink]="child.route" routerLinkActive="active" tabindex="-1">{{ child.title }}</div>
+          <div *ngIf="child.external" role="menuitem" (click)="openLink(child.route)">{{ child.title }} <i class="fas fa-external-link-alt" tabindex="-1"></i></div>
         </ng-container>
       </section>
     </div>

diff --git a/src/app/menu/menu.component.scss b/src/app/menu/menu.component.scss
@@ -91,6 +91,11 @@
         top: -4px;
       }
     }
+
+    a {
+      color: #000;
+    }
+
   }
 }
 

diff --git a/src/app/shared/components/tool/tool.component.html b/src/app/shared/components/tool/tool.component.html
@@ -4,12 +4,14 @@
       <ng-content select="[slot=logo]"></ng-content>
     </div>
     <nav>
-      <div *ngFor="let navItem of navItems" [routerLink]="navItem.route" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
-        <i *ngIf="!navItem.local" [ngClass]="[navItem.icon, navItem.fontAwesome ?? 'fas']"></i>
-        <div *ngIf="navItem.local">
-          <img [src]="navItem.icon" alt="">
-        </div>
-        {{ navItem.title }}
+      <div *ngFor="let navItem of navItems" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+        <a [routerLink]="navItem.route">
+          <i *ngIf="!navItem.local" [ngClass]="[navItem.icon, navItem.fontAwesome ?? 'fas']"></i>
+          <div *ngIf="navItem.local" style="float:left;margin-top:-5px;">
+            <img [src]="navItem.icon" alt="">
+          </div>
+          {{ navItem.title }}
+        </a>
       </div>
     </nav>
   </div>