[Does your team need to master AngularJS? Oasis Digital offers Angular Boot Camp, a three-day, in-person workshop class for individuals or teams. Bring us to your site or send developers to ours -AngularBootCamp.com.]
[This episode is sponsored by Wijmo 5, a brand new generation of JavaScript Controls. A pretty amazing line of HTML5 and JavaScript products for enterprise application development, Wijmo 5 leverages ECMAScript 5 and each control ships with AngularJS directives. Check out the faster, lighter and more mobile Wijmo 5.]
CHUCK:
Hey, everybody! Welcome to Episode 27 of the Adventures in Angular Podcast. This week on our panel, we have Joe Eames.
JOE:
Hey, everybody!
CHUCK:
Ward Bell.
WARD:
Hello.
CHUCK:
I'm Charles Max Wood from devchat.tv. Another quick reminder to check out JS Remote Conf where we're doing online conference about JavaScript. And it would be in a few weeks, so you need to get tickets now if you wanna be there. We also have a special guest this week, and that is Marcy Sutton.
MARCY:
Hello!
CHUCK:
Do you wanna introduce yourself really quickly?
MARCY:
Sure. I'm Marcy Sutton. I'm a developer at Substantial in Seattle where I am working fulltime on Angular Material, which is a framework we're going to talk about a little bit today. But yeah, I specialize in accessibility, something I care very much about and I love how it's integrated with my work every day.
WARD:
Hey, Marcy, what is Substantial?
MARCY:
Substantial is a design and development company. It's about 60 people. We have offices in Seattle and San Francisco. And I went there to learn pragmatic development, learning software testing and Git. Coming from the agency world, those were skills I didn’t have. So in the past year, I've become very fluent in those things. I use them every day on Angular Material, so it was a good move.
WARD:
You came from the agency world? That means that you were doing what?
MARCY:
I was developing on whatever the… at the agency I was at. Primarily, I did things from Target, which if you’ve ever built anything for Target, you would know that it has to be accessible. So that’s where my expertise started to come together. But we did all kinds of things for Nintendo and Xbox and really big clients but you had to get them out the door as quickly as possible. So software testing was not a core competency there. So for me to learn it, I had to go learn from people who actually did it every day. So that was my driving goal in moving to Substantial.
CHUCK:
Awesome. So Substantial does the work for Target and all of these other clients or you kind of wound up there afterward?
MARCY:
I wound up there afterward. So we do projects that live on longer like a teaching platform for teachers to host videos. It's a common core site. That’s one project. We have another project with the recommendations app that I've worked on to make accessible. So these are our projects that live on… you know, they have a longer life cycle than the typical agency campaign. So by having to maintain projects for longer, you end up having different software development practices. So that was where I ended up with later.
WARD:
So now you're working with the Angular team on material design?
MARCY:
I am. They reached out to me back in June or July and asked me first to speak on ng-europe, and through that engagement, I came to work on Angular material for accessibility. I'm also the resident docs redesign person right now, so I'm focused on user experience of the actual… the design docs for Angular material; how are our directives and services presented to developers and figuring out how to communicate that best. So in addition to actually auditing the components that my fellow developers create for accessibility, I'm also contributing for the actual presentation of the library.
WARD:
What is “material design”? For our audience and for me.
MARCY:
Material design is a design language that Google came up with to basically, across all of their platforms from Android to using Angular or Polymer, if you're creating user interfaces that are either using Google frameworks or for Google products, you think about drive or Hangouts or any of those kind of things, they wanted a cohesive brand almost. And so they created material design to basically give you a full spec on how details should be implemented so that they look similar across all of these platforms. So material design could be implemented in different ways: there’s the Android version, there's the Polymer version, there's the Angular version. And this basically give people options to implement whatever they wanna create, but have it look cohesive across platforms.
WARD:
Oh. But they are making this available to the public on the grounds that we might wanna use it too and we wouldn’t necessarily be buying into the Google brand. We could effectively host our own brand or our own style within material design. Is that the thinking?
MARCY:
Yeah, I believe so. So there are other design frameworks if you will, out there like Bootstrap or Foundation and I think they all have very un-opinionated design styles, in that you could kind of use these frameworks to work within your own brand and kind of style a few things differently, so that maybe the colors and the typography they match your brand more but you're still starting with a style sheet and some JavaScript and HTML that is going to look similar across the web. So Google’s brand is pretty benign. It's very… like you could mold it to fit into the other brand voices. So if you think about it is it's another option compared to Bootstrap or one of these other design frameworks. It has a slightly different style to it. That’s the way I think about it.
WARD:
Yeah, I did think look at it. The thing that let down at me was how much… because I've struggled with Bootstrap right? I mean, I don’t know about you guys, but I lay down my Bootstrap and I have no idea if it's going to work and it can go off somewhere very quickly and I have no idea what's going on and there just seemed to be lots of nested stuff. And then I take a look at the previews of material design and it seemed to be oh so much simpler to me, so I was immediately captivated but I know it hasn’t been released yet. But before we go into that, how about you guys? Have any of you taken a crack… I mean, are you Bootstrap users now or what are we out here?
JOE:
I'm kind of a Bootstrap user by default just because it's fairly popular and I'm often using in courses and so I try to pick something that lot of people have some exposure to. I don’t necessarily feel like I love Bootstrap though.
WARD:
They have you look at it and go, “Huh?”
JOE:
Probably not quite so much, but maybe because I've been messing with it for so long that… I don’t know, I'm not feeling that way anymore.
WARD:
Yeah.
CHUCK:
Yeah. I use Bootstrap basically as kind of a… it makes it look nicer than what I would come up with by default, and so that’s when I loaded in when I have a client that doesn’t have a design and that way, they at least have something that looks okay, and that kind of works out nicely that way. But there are a lot of nice things about it, but there are definitely some things about that it that I don’t love. And mainly what it comes down to is a default look and feel looks nicer like I said, than what I would have come up with, but it's still pretty bland. And they want you to customize it so that you give it your own flavor but I'm not extremely talented that way, and so I wind up tweaking colors and fonts and do that at a slower pace. And so it seems like some of the other ones like Foundation gives you a little bit more in the way of, “Hey, you're going to have a nice looking website that doesn’t look like it was just gray and black.” It makes it a little easier to go that way. And I've used them both but yeah, I generally just toss Bootstrap on the heap when…
WARD:
[inaudible] design goals to make it easier to lay down your controls, your HTML controls?
MARCY:
I think the way that it's implemented doesn’t differ that much from… I mean, like talking about picking up a library or something like this, having that be confusing, I think we certainly want our components to be easy to use. One of the differences I wanted to mention that kind of separates material design from Bootstrap for example is that material design has a lot more motion and zindexing, so it has more [chuckles] forgive me for this… it has more “depth” [chuckles] in the way that they actually suggest that you layer different things on top of each other. It has more of a backstory with why you would put these two components together in a certain way.
So if you think about it as a design language, it just happens to be implemented in a few different flavors. That is a more compressive solution than a Twitter Bootstrap. But the nice thing about all these cool open source stuff is that we can make choices. If you don’t want to use Material, you could use Bootstrap or the other way around. And there will be a bit of a learning curve I think for any of these. The ones that are the easiest to get into are going to have good adaption. So we're definitely, on Angular Material, we're listening to our contributors and open source community so that if something is confusing, then we either refactor it or we go back to the docks and make sure that we're explaining it correctly. So that’s where a lot of our effort is making sure that what we're building is going to be easy to implement.
CHUCK:
Yeah. That’s definitely a downside with both foundation and Bootstrap, is that there is so much there and it's so opinionated that you have to consistently go back and look at how it's done in order to get in any work done with it. I mean, eventually you get to the point where you’re semifamiliar with it but initially…
MARCY:
I think sometimes you have to be opinionated. I know with Angular material, because of the way that there is motion, things animate in and out in a certain way and we want them to be hardware accelerated on multiple and accessible, so sometimes to accomplish those things, we’d have to be pretty opinionated, so I can totally understand that. The balancing act is making it easy for developers to consume.
CHUCK:
Well, I think a lot of it just comes down to naming and stuff, so I mean, you have your class names and things like that and some of these other frameworks are like sm column ten or whatever. So that’s, on a smaller layout, this is column ten but it's not named in a way to where it's really apparent what it's doing; you have to learn the naming conventions around stuff. And so I'm really curious to see if material design… yes, it has to be opinionated because that’s kind of the point if you're giving somebody a generic or you know, a complete look and feel, but is it going to communicate better what things do.
MARCY:
Will it be intuitive? That's definitely the goal…
CHUCK:
It's not easy but yeah.
MARCY:
Correct. You know, there is a learning curve with Angular in general but we wanna make it intuitive. I think that [unintelligible] times is what you might think as intuitive, might not be intuitive with everyone else [chuckles], and so that’s where we’re really listening to feedback and trying to make it as easy to use as possible.
CHUCK:
Everybody else can be wrong. That’s fine.
MARCY:
[Chuckles]
WARD:
One of the things I think I noticed was that animations were all kind of built right on to the things you drop on there. Is that just my impression or is that part of the design?
MARCY:
They are built into… are you talking about components? Like how self-contained..
WARD:
Yeah.
MARCY:
Yeah, I think… primarily our efforts so far has been if there's animation related to a single component, then it will be part of that component. What we… a major thing that we haven’t gotten to yet is actually animation between components. And I know at Google, there was a demo where sections of a page kind of morph into each other and you persist certain DOM nodes after a page transitions. So rather than having it just re-appear after a transition, actually seeing it transform into like from a grid tile into a bigger piece of content on the next page. So I've seen some early prototypes of that and I think that’s going to be really awesome because we'll start to see… across individual components actually see them tied together, and I think that's where the material design aspect is going to shine.
WARD:
That's going to be huge for my world. I think everybody has to sort of say, what kinds of things do you build? And since I build mostly business applications, we're not usually looking for our own branding so much as we're just looking for some things that give thy graceful user experience and we'd be happy to copy somebody else’s design. And so as long as we could just lay these things and have them work, and that appears to be a goal of material design. At least that was the way it just spoke to me as I was looking at it. And I don’t know if that is an explicit goal but it sure came across that way.
MARCY:
Yeah. I think that certainly seems like a goal to me. And there's a themeing part of it so that you can change the look and feel a little bit. I think there are preset color palettes that Google has come up with but there is the opportunity to craft it a little bit to fit your brand better.
WARD:
So what's the availability?
MARCY:
Well, you can hammer on it now on GitHub [chuckles] or using Bower. So you can pull it in your projects. I would say that before it gets into production for anyone, we're still actively working on it every day. And so I don’t think we're quite ready for it to go into production apps, but by having people create the kinds of apps that they would build with it and then give us feedback, that helps us make it a more robust solution, so can hammer out as many issues as possible before we fully release, which I heard is supposed to be Q2 probably because we're in Q1 and I don’t feel like we’re close to that yet.
CHUCK:
You should totally make promises you know you can’t keep.
JOE:
Indeed.
MARCY:
[Chuckles]
WARD:
Yeah, well some of us are all in favor of releasing early, but I guess things can crash and burn that way. So position it for us relative to our other choices as Angular developers.
MARCY:
Yes. Well, the biggest selling point I think on Angular material, because there are others; there's a React material option, there's another Angular material library as well. And we are working with those folks directly [unintelligible] folks to join efforts so that we can collaborate, which I think is awesome. The biggest selling point is that we have a lot of brain power behind Angular material; some industry experts, as far as Angular goes, they brought me on in accessibility. And accessibility is something that is considered with a lot of these frameworks; you'll see them get released quickly. And if you go dig in a little bit, you'll find that accessibility wasn’t considered at all or maybe it's not hardware accelerated on mobile or maybe it doesn’t have any test coverage. So I think the pragmatic thinking that goes into Angular material is going to make it a really good solution.
CHUCK:
Now, you keep saying “performance accelerated on mobile”, what exactly do you mean by that?
MARCY:
I mean if you have animations, there are some animations in CSS that performed better. Like if you use transforms versus animating height or some other CSS property. So by creating… like you can do things quick and dirty and they will work but it might perform as fast on a mobile device. It has limited computing power compared to a desktop computer -- although phones are pretty awesome now. I think there are techniques that we can use with animation that will just perform better on mobile and those are things you pick up along the way that I haven’t seen in some of these other frameworks.
CHUCK:
Right and so you're just making sure that that’s all bolted in automatically into Angular material, so that when I load it in, I don’t have to worry about that because it's just going to pick that automation that it's already going to perform the best on the phone and that way people don’t get some funny experience when they come in.
MARCY:
Correct. So the goal is to make it perform as good as possible on a number of platforms. The challenge with that is that there are an infinite number of mobile devices and it's really hard to test and develop in every single one. So I anticipate that it won’t be perfect everywhere but it's pretty hard to accomplish that anyway. But the goal is to know that there are common patterns, that if you animate CSS transforms instead of some other CSS properties, that you'll get a better result.
WARD:
So the word “accessibility” keeps popping up and it's one of those things… well it was like testing… everybody wants… says they should do it but…
JOE:
Nobody does.
WARD:
Yeah. But nobody is compelled to do it. Although on the one level, it would be great to hear from you about how I can get into this gracefully without killing myself. And also you know, occasionally, I run into clients who say that they are required. There's this stick behind this. So maybe you can tell us a little bit about the landscape that will both compel make our apps more accessible and then how you can make easier for us to do so.
MARCY:
Sure. Have you ever broken your arm?
WARD:
No, I haven’t.
MARCY:
[Chuckles] So, my goal in asking that question is just to put it in context that anyone of us could need accessibility features at any time. So I think the easiest way for you to start building accessibility into the apps you build is to use your keyboard only and not a mouse and not a track pad, because a lot of times we completely forget that we should support the keyboard. And I fell like, screen readers aside, that’s a huge portion of this as well when we’re talking about accessibility but I feel like you can hit a lot of the major accessibility issues if you just try to navigate using your keyboard. So that’s probably the easiest way to get started is to go, “Uh, there's a button here” or “There’s some action that I've coded up with ng-click and I can’t reach it from my keyboard and I can’t operate it.” So if you wire that up by using buttons or tab index and keyboard events, you can actually start to improve accessibility quite a bit. And I think those should just be best practices that you build in anyway because if you start with accessibility earlier, it makes it a lot easier to justify, I think, because then you are not having to come back and add it later when you're out of budget.
JOE:
Many of the things that you said, I feel like we could put the word “testing” in there and it would be the same statement.
MARCY:
It would, yeah. And actually I've combined both of those to do accessibility testing, so that if we go and implement some accessibility feature in Angular material, if we have test coverage on that, if something breaks and the accessibility feature doesn’t continue to work as expected, well, that will probably be caught by a test that we wrote.
JOE:
That's awesome.
WARD:
So that’s broccoli and anchovies together. [Laughter]
CHUCK:
Yum!
MARCY:
Yeah. Accessibility is traditionally been broccoli topic and I'm trying to make it more into pizza because I think it can be fun. If you anticipate accessibility, you talked about there being a stick and Target was a company that had legal action brought against them, and so everything that they made had to be accessible. That created a pretty cool culture though that they really embraced it while I was working on their projects so that… they had an accessibility team that I worked with directly and they were people with disabilities that would test things that I worked on. And by getting to know those people, I really started to care about accessibility. I have friends now frankly that have disabilities and the things that I build, I want them to be able to access them.
So for me, that’s what helps me integrate it full into my development process was that I started to care a lot more about it. And I can’t undo this care that I have for accessibility. I can’t like not build it in to my process. So I would hope that just by talking about more, people will go, “Oh, it's really not that hard. I can totally add some accessibility into my process and not have it balloon the scope or the budget on my project.” It just helps to know a little bit when you're getting started that, “Hey, if you put ng-click on a div, that’s not going to be accessible.”
WARD:
Really? So I'm not sure we have those touch [unintelligible] because I think many of us say, “Oh my god, I got to litter the thing with aria tags.” And maybe I do, and you can talk about that because I already, I can barely spell it. I don’t even really know what it does. So maybe you can… you’ve talked about making things [unintelligible] but I never thought about ng-click and the keyboard being divorced. Are there like a top five things that we should know?
MARCY:
Yes. I’d say number one, use a button, [chuckles] the button element. It will get you so much for free, that you don’t even have to worry about the Aria aspect, so that’s probably the easiest. There are things that we're doing with ngAria which is the accessibility module in Angular. That is an add on that if you include ngAria and you can get some fixes for the ng-click on divs, we're trying to fix that so that all people would have to do is add this module and then it will make all of those ngclicks accessible. But that still depends on people using the module. So I would recommend that any time that you're creating an interactive element, just start with the button. That will help give you a lot.
CHUCK:
What about things like lists for example? So let’s say I have a list of I don’t know, podcast episodes and I'm loading that in with AngularJS and so you know, I set the hover state and the click stuff with that kind of a tag, should I just put an anchor tag around it?
MARCY:
Yes, depending on what the content is. If it takes you to a page with a podcast on it, yeah it would wrap inside of list item you would wrap out with an anchor. So we can get back to the keyboard test. So if you try to tab through the page, you would find that you can’t actually access those list items with your keyboard because list items are not part of the tab order. You could do some fancy things with adding tab [unintelligible] and you’d have to add a keyboard event alongside the ngclick, but it's so much more work than it's worth, that if you just wrap the content in an anchor, then that will make it accessible. Given that you also, alongside your hover state in your CSS, you also wanna find a focus state. And as long as you can reach it from the keyboard either because of a button or because you’ve added tab index to zero, then you can define a focus style. And then when you're using the keyboard, you'll actually see where you are on the screen because that’s kind of an important thing.
WARD:
Yeah. So the hover thing, that’s something we do with our desktop and we forget that in mobile, you can’t hover. But also you're saying that from an accessibility point of view that the plan is for somebody to like tab into it and then get whatever is supposed to happen with hover?
MARCY:
Yeah. So definitely, if you're putting hover in your CSS, you wanna ask, “Is someone going to be able to use this from the keyboard?” and if it's a list item, by default, they wouldn’t. so anytime you have a hover, you should be asking yourself, how will I apply focus to this? Because keyboards are pretty important for a lot of people. I think mobile devices are becoming used a lot especially by people with disabilities so there's slightly different… you know, the actual keyboard focus might not apply as much but you still have to… if you use buttons, you know, button element or an anchor element, you get a lot for free no matter what kind of a platform it is.
WARD:
This really a new question, but I see the word “Aria” and I don’t know what the heck I am looking at. It's one of those embarrassing things that I've been meaning all these years to go find out about. Give us the elevator pitch on Aria.
MARCY:
Sure! Aria stands for Accessible Rich Internet Applications and it was created to give us the set of attributes that we can put on our HTML to add semantics. So with HTML5, we got a new set of tags that actually have semantics built in. If you think about the nav element or the section element or any of those elements, we don’t have to add Aria to those to say that that is a type of element. So that’s what we call “built in”. Aria allows you to bolt on attributes that will add similar semantics, so you could add a role of list item to like… say in Angular material, we use custom elements quite a bit. So for your list of podcasts in Angular material, we might have an ng-list element.
To create an actual list item out of that which ng-list item is pretty much just a div. We can tell it to be a block element but it doesn’t come with any semantics because we made it up. But if we add a role of list item to that and it's inside of… it's grouped together in an element that has a role of list, then when someone is using a screen reader or some other assistive technology, that set of element will actually have semantics added on. So Aria is a mechanism that you can add semantics like this. There's also attributes for “is it disabled?” “is it selected?” all of these things to communicate what this widget that you made that might not come with any free semantics. It gives you a mechanism to actually tell a screen reader, “What's happening with this thing?”
CHUCK:
It seems that a lot of the focus in the area of accessibility on the web is focused around visual impairment; people who can’t see the screen and so they have to use some other mechanism to read it. And honestly, if you want to understand how difficult your life is, go blank out your screen and have a screen reader to read it. [Chuckles] You'll get some empathy real fast but…
MARCY:
Yeah, there are all different kinds of disabilities though. I think we tend to focus a lot on visual impairment but there are all kinds of things that could get people to need accessibility features.
CHUCK:
That’s where I was going, yeah. How do your account for that? What other types are there?
MARCY:
Well, there’s people who can’t use the mouse. That hits a pretty big segment of people because those could be temporary disabilities; it could be motor impairments like maybe someone can see the screen but they just can’t use the mouse. So by enabling the keyboard, that helps everybody. I like navigating with the keyboard and I can use the mouse sometimes using forms for example. Like if I had to give up and use the mouse, well, lucky me I could give up and use the mouse but I’d prefer to keep my hands on the keyboard the entire time. There's also hearing impairments. So if you have audio or video content, you would need to provide alternatives; so provide captions or transcripts and those kinds of things.
And an interesting idea that we had on Angular material was that material design, I mean, they say upfront that it is a visual design language but we thought it would be really interesting if that extended to what if that included ear[unintelligible] for those page transitions that we talked about. They are so visual but what if you could communicate that the transition is happening without having to see it? That would be a really cool design language if it actually went that far. So those are the kinds of things that we think about with accessibility.
CHUCK:
Interesting. I also know that some people are using some kind of assistive devices. So for example they can’t use the mouse but they use other devices for like tapping a screen or a pointer or something that helps them select things sort of like a mouse either because they can’t use the keyboard or the mouse because they don’t have arms or things like that. And so by providing a larger target, a lot of times you can solve somebody’s issues. So instead of having a teeny tiny button somewhere, you have a larger target that they can tap and so by allowing them to interact that way, you make their life a little bit easier.
MARCY:
Definitely. Yeah, I try to think of it as you can have different kinds of inputs. Not everyone is going to use a mouse to reach you. Like what if you, I don’t know, what if you waved your hand to engage something? You wanna factor your… however you make things happen in your application, you want to factor the business logic so that it's not tied into a single type of event. So if you click and it does something, you want the same function to happen when you use a keyboard or change that input out for waving your arm or blinking your eye. There's people who have RSI. There's a designer I just read her story a week or two ago, and she actually had her dad create a track pad she could use her nose to draw. She might be trading RSI in her hand for in her neck, [chuckles] but it was an alternative that allowed her to continue as a designer.
So there's all kinds of modifications that people make. It's pretty hard to anticipate everything, but I think if we just put our creative hats on in terms of what kind of inputs are people are going to have for accessing our site, we end up building things better so that we can support other kinds of devices. Because yeah, you're right, there are assistive devices for reading. If you think about it, having to have audio be your only input for consuming content, it would be nice to have options. So if you're visually impaired or blind and you read braille, then you can read without having it all pipe through your ears which I'm sure is a welcome… a different way of consuming content.
WARD:
So Marcy, circling back to material design, what do you think we should be thinking about now ourselves as we're making choices of projects that we're about to build. And what are the things that you think most need doing?
MARCY:
You mean like for us that are building it or do you mean as community members?
WARD:
No, for us out here. I'm sure you've got your own agenda there but what I'm thinking about is us out here, we were building Angular apps and have new Angular app projects coming our way, and we need to give our clients advice about what they can expect, what direction to take in terms of building the UI. So it's probably like what can we do, what should we be doing now, how should we be thinking about that and yeah, that kind of thing. What's your advice to us?
MARCY:
Well, right now, I think the best thing for community members to do is to contribute and to help us get to the finish line by battle testing components. And especially if you know that there's a certain set that you’d wanna use together and you have a use case that you could go and create a demo, that will help us… if there's issues with that combination, then we can fix it sooner than later because I don’t think it's quite ready to say, “Hey, client we wanna use this thing.” I think for projects that are launching right now, it's probably too early but in a few months, it will totally be time to start considering Angular material for production apps. That’s my hope but we definitely have more work to do to make it a comprehensive solution.
WARD:
If I knew that I had a project I was supposed to deliver six months from now, knowing as you do the current state of material design, which isn’t ready to release but maybe the API have settled down enough that the rug won’t be pulled out from under me, so it's safe to go into the water, is really what I'm asking. I realize that it's not safe if I have to deliver it in February but is it safe for June?
MARCY:
I think we definitely are trying to assume we don’t have any more breaking changes but just given like the number of components that we're supporting and we have coming out soon, it's really hard to say, which does make it a bit challenging to… you're picking a UI framework. I would definitely hope in a few months that I can have a better answer for you but it's hard to say at this point.
WARD:
That's incredibly fair.
MARCY:
[Chuckles]
CHUCK:
Nice. We're getting toward the end of our time. I have one more question though and that’s back to accessibility. So, I can go and I can pick up ngAria right now. I see that it's available in Angular 1.3.9 and it's probably been around for a little bit longer.
MARCY:
Since 1.3, that's when it came out.
CHUCK:
So what I'm wondering is you know, do I just plug this in and then just start using the Aria tags as well or is there a next step beyond that?
MARCY:
Yes. The first thing with ngAria you include it as a module and then you have access to it. We actually pulled it in Angular material, so you wouldn’t need to add it to Angular material because you would already be getting with Angular material. But if you're going to use it, I've written some information on the developer guide for ngAria. That is a really good place to start to know what exactly it would be doing for you or not doing it for you. So there is a little bit of developer education involved to know what exactly it's trying to fix, but it does do a limited number of things, so you can either go read the developer guide for ngAria. There's also a blog post that I wrote on the official Angular blog that would be more information as well. So that’s what I would look at.
CHUCK:
Very cool.
WARD:
I just wanna say, here’s a little tip for the Angular team. It would be nice if… you look at the documentation, it's very thin. It would really be nice if they had some sort of links out to additional resources and you know, some place to go just [chuckles] because it's…
MARCY:
Which documentation are you…
WARD:
You know, like if I just went to, say, the ngAria page, you know, it's kind of thin.
MARCY:
You mean the API?
WARD:
Yeah, I think that’s where I went.
MARCY:
Yeah so the API definitely does not have as much information. If you just search “ngAria developer guide” that's where the bulk of the explanation is. And there's also at the blog post I wrote, it's called using ngAria. And it's kind of like the higher level like what is this thing? Why is it part of Angular? And it kind of leads you into the developer guide, so by reading that information, I think that would help.
WARD:
Oh yes, Okay. Good.
MARCY:
So yeah the API docs, we try to not copy the exact same information. I agree that the API docs specifically are hard to follow. I think that the developer guide helps kind of round out the explanation.
WARD:
Very good.
JOE:
Awesome.
CHUCK:
All right, let’s go ahead and do some picks. Joe, do you wanna start us with the picks?
JOE:
So my only pick this week is going to be an activity. It's also kind of the announcement for ng-conf and that is that at ng-Conf, we're going to be running a kid’s track. It's called ngkids , and it's an opportunity for attendees to bring their kids along with them to the conference. And for the entire time that they are at conference, their kids are going to be able to learn programming using… which would be taught by Zaniac, a nationwide company who happens to have a local branch. And by the way, we are looking for companies that want to help out sponsor those and the cover costs. So if you happen to work for a company that might want to help sponsor teaching programming to 50 kids, then please contact me. That would be great. And that’s my pick.
CHUCK:
Cool. Ward, do you have some pick for us?
WARD:
I have one technical one and then one non-technical one. The technical one is that there will be a lot of Angular content at DEVintersection in May. The conference is May 18th through 21st in Scottsdale, Arizona and I'll be there, John Papa will be there. I'll be doing something on Angular testin. And then the other kind of off the wall one is, this last weekend, I was at a poetry retreat lead by a guy named David Whyte. And if you’ve just ever have a poetical bone in your body and you're thinking about it, you might wanna check out David Whyte’s work. And not only his own poems which I think are great but also he’s a magnificent reader of other poems from many cultures but also most primarily English language poems. And it's fascinating stuff and it gives you a chance to sort of ask that primal question about whether you're doing the right thing with your life [laughs]. I know that’s exactly what you want.
MARCY:
That’s why I like accessibility. [Chuckles]
WARD:
Yeah! It has that effect, doesn’t it? It shocks you into the realization that your world is not the same as everybody else’s world.
MARCY:
Yeah. What I came to realize is that I can actually help people through web development, which when you get into web development it's kind of like… it would be a stretch for me to have said it before that I'm helping people by creating campaign websites. Now, I don’t think so. But by creating accessible and advocating for accessibility on digital products, definitely I can say that.
CHUCK:
You can totally change the world by making campaign websites for the republicrats.
MARCY:
[Chuckles]
CHUCK:
I just have to say I like those guys. Anyway, what are your picks?
MARCY:
Sure. My first pick is something practical. The accessibility developer tools in Chrome are super useful. There's a browser extension that you can add onto Chrome so that you can just audit a website really easily. So if you haven’t heard of that, that’s a really good way to find out how you’re doing in accessibility in your applications. And the next pick is I'm going to be presenting on Angular at FluentConf in April in San Francisco. So if anybody will be there, I'm going to be talking about how accessibility is improved in Angular since August.
CHUCK:
Nice.
WARD:
Yeah. That's a great conference. Marcy, is there something that you read or saw that really turned you around on accessibility or that would help us get a better sense of it? A book or a video or something you can recommend?
MARCY:
That’s a good question. Well, for me, it was getting to know people with disabilities. I’d have to think about that. I’m sorry. I wasn’t ready.
WARD:
That’s the better thing. I'm always a book and video guy. You know, sitting in the corner and learning something but maybe there's something we should be doing in our communities as a way in our own communities where we can have that kind of an encounter.
MARCY:
Yeah, definitely. I do know there's like one video I saw recently that I thought was really cool was a blind developer talking about how he does his work. And I thought that was super interesting. I'll see if I can find his stuff because yeah, anytime that you can actually hear firsthand what kind of challenges someone has, that really helps you to, I don’t know, consider like, “Oh, maybe I shouldn’t make myself work for them because that’s a real person that I can be helping.”
WARD:
Absolutely.
CHUCK:
I don’t think most companies really realize that until they have somebody with a disability come to them and say, “I really have to use your stuff and I can’t.”
MARCY:
Yes. I actually did find, yeah a blind programmer, Austin Seraphin is his name and he's done a number of talks. It looks like there's a TED Talk as well, but he talked about creating iOS applications as a blind developer which I thought was super interesting.
CHUCK:
Yeah, that is interesting. Well, and Apple gives you a whole bunch of built in stuff for accessibility in XCode in iOS.
MARCY:
They do. We just tend to think of if you managed to get people to think about accessibility, a lot of times they are only thinking about the end user. So for somebody navigating through a website that’s built with, that isn’t an app that we’ve made, if you're creating tools -- like creating developer tools or documentation for development -- like all those things should be accessible as well because you know, the developer could have a disability. So it's not just the end consumer; it's also the development consumer that we should be thinking about too.
CHUCK:
I really liked that so many of these ecosystems, I've heard things about Ember and iOS has accessibility features; Android has some accessibility features. And I like that in a lot of cases, it's just as simple as turning it on. You now, the ngAria stuff for example is one of those things where you know, you include the library and then it more or less is on and then you just have to add some tags. I mean, it's real simple.
MARCY:
Totally! Yeah. The goal of ngAria was to try and help you in those common scenarios. And it's hard to anticipate every scenario, but I think the biggest one that we're trying to fix was that the ng-click of divs, that's written in textbooks. There are Angular textbooks that tell you to do things in accessibility. It has become a part of Angular culture has been to create accessible UIs. And so I mean, we're not going to go and reprint every textbook that has it in it. If the framework can actually fix that, that’s going to make the web more accessible while we advocate that you use a button. That is definitely the better way to do it, but we can hopefully go and fix some of these issues just by having a smart module.
WARD:
Yeah I've been doing that. I'm going to go look at my stuff and go fix it.
MARCY:
Nice! If you use the Chrome accessibility developer tools, it will help you diagnose some of that.
WARD:
That’s good. That’s good.
CHUCK:
Cool. I'm just going to throw a pick real fast. It's an iOS game it's called A Dark Room. The UI is pretty simplistic. It's not pretty. It's kind of a text-based game if you played those back in however old I am, you know, back in the day when your computers weren’t as powerful. And so anyway, it's pretty cool. They also have an online HTML5 version, so go check that out. And I guess we'll wrap up. Thanks for coming, Marcy. It was really cool to talk about this stuff and hopefully we'll have you back.
MARCY:
Thank you so much.
CHUCK:
All right, we'll wrap up and we'll catch you all next week!
[This episode is sponsored by Mad Glory. You’ve been building software for a long time and sometimes it gets a little overwhelming; work piles up, hiring sucks, and it's hard to get projects out the door. Check out Mad Glory. They are a small shop with experience shipping big products. They're smart, dedicated, will augment your team, and work as hard as you do. Find them online at madglory.com or on Twitter at @madglory.]
[Hosting and bandwidth provided by The Blue Box Group. Check them out at bluebox.net]
[Bandwidth for this segment is provided by Cache Fly, the world’s fastest CDN. Deliver your content fast with Cache Fly. Visit cachefly.com to learn more.]
[Do you wanna have conversations with the Adventures in Angular crew and their guests? Do you wanna support the show? Now you can. Go to adventuresinangular.com/forum and sign up today!]