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
[00:00] 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.
[00:20] 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.
[00:41] 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.
[01:04] 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.
[01:40] 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.
[02:03] 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.
[02:26] 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.
[02:56] 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.
[03:12] 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.