Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Angular Material: Theming and ARIA

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows.

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

This course presented by Thomas Burleson and Aaron Frost

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows.

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

This course presented by Thomas Burleson and Aaron Frost

Avatar
Nina

Could you please upload the code to github.

In reply to egghead.io
Avatar
Paul

Thx for a great course. Really good.

Interestingly, if you use <md-icon md-font-set="material-icons"> with <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> the aria-labels are added automatically.

In reply to egghead.io
Avatar
Ian Poston

Nice angular-material lesson Thomas and Aaron. There were times when a different user gets selected in sidenav and the share details with the previous user would stay open in the bottom sheet so I added this line $mdBottomSheet.hide(self.selected); when function selectUser(user) is called in the UserController. Also the sidenav was overlapping the bottom sheet on small screen so I added this line $mdBottomSheet.hide($event); when function toggleUserList ($event) is called. Notice I am passing in $event to trigger the the hide functionality. I think this looks more complete. Thank you!

In reply to egghead.io
Avatar
Dane

Someone posted earlier that the github they are referencing is https://github.com/angular/material-start/tree/es5-tutorial/app

In reply to Nina

To finish our Angular Material starter app, we're going to do two more things. First, change the theme of our app. Second, we're going to fix the remaining ngAria warnings that we have. For that first step, we're going to change the theme to be a different darker color. Angular Material makes theming almost too easy.

If you head over to the documentation on their site, they have this great introduction that gets you up to speed on the different terms and the different concepts you're going to need to know to get dived in and understand theming with Angular Material specifically. One of those concepts is the idea of color intentions.

We have a primary palette and an accent palette. Whatever you define for those palettes, the primary palette changes and affects the layout, the look of our primary elements. The accent palette affects our secondary interface elements. We're going to go ahead and set those, the primary to be brown and the accent to be red, in our app. Let's head over to the code.

We'll come down to our config block and we'll inject the mdThemingProvider. We'll go ahead and say mdThemingProvider.theme. We're going to use the default theme. We're going to set that primary palette to brown, like we've said. We're going to set the accent palette to be red. When we save this, it refreshes. You can see it's there.

I'm using these palettes that come default. We can set this to lime and this to orange. It's that easy. We're going to go ahead and set those back to brown and red. That's how you get into theming with Angular Material. Let's go ahead and do our second step, and fix these labels, these warnings we have for ngAria.

What this is telling us here is that it can't tell what the aria-label should be for a specific button in our app. The button that it's referencing is the menu button. If we shrink our app down here, the menu button will reappear. It doesn't know what screen reader text to put on this because it doesn't have any text inside that button. Let's go add it up. We'll give it one.

On that menu button, we'll say aria-label="Show User List." Now, the experience for a screen reader is much, much better and our aria is gone. Let's fix this button as well to be even a better experience for any of our users. Let's change this to "Share with." We'll use interpolation. From Angular, we'll say ul.selected.name.

Now, when you look at the aria-label for that share button, it is "Share with Lia Lugo," so again another great experience for any of our users showing up with a screen reader. That's it. Our starter app is all the way done.

To build it, we used some sophisticated components. We used Angular Material's great adaptive layout API and their theming API. We used some custom logic and custom CSS. Imagine doing all of this without a solid component and layout library like Angular Material.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?