JSConf 2014

La accesibilidad de los componentes web

Marcy Sutton  · 


HTML (pincha para descargar)



Extracto de la transcripción automática del vídeo realizada por YouTube.

screaming's marklar i'm marklar I'm a marklar at marklar here to talk to you about how you can make your mark larmor marklar at this point you're probably saying to yourself what the marklar is she talking about well this has been an exercise

in semantics because if we use the same word for everything it has no meaning it would be the same word over and over again which would be useless so especially to people who can't see visual designs it's really important that we add meaning to our

words here's a code example let me zoom in a little bit and actually given what we're going to talk about today this isn't that far-fetched I have a marklar tag it has a nested marklar tag some text it has a bark lar that looks like a link but

it kind of doesn't really tell you what it's for if we created our web components without semantics we run the risk of adding a lot of Solus div tags around the web and nobody needs that so you're here to hear about the accessibility of web components

Who am I I am Marcy Sutton I am a developer at substantial in Seattle which is a 60 ish person development studio and what we do design and development but I work there because they allow me to expand my skill set beyond just the front end but I am stronger

at the front end so along with the projects I work on I really focus on making them accessible and recently that's included a fitness app for personal trainers and a whisky recommendations app because everybody wants to drink whiskey right so why shouldn't

we make all of those things accessible I love accessibility because it adds meaning to my work it makes the everyday grind a lot more enjoyable it's the right thing to do and also accessibility can provide some really freaking cool development opportunities

it is not boring as I tried to convince Dominic but he's not sold quite yet so some accessibility challenges that are worth running going over real quick to refresh our memory antics is a huge thing in accessibility that I'm going to talk a lot about

today in the context of web components so the type of element that we create it becomes an object and that type of object matters to somebody who can't see it so keyboard access this is actually a wider audience than just people using screen readers this

affects a lot of people how many of you have ever broken your arm how many of you have run out of batteries in your mouse yeah that's a lot of you right so you want to use your keyboard but we are grown too accustomed to it really sucking out their keyboard

excess is a huge problem and we're used to being able to give up and use the mouse but if you couldn't use a mouse because you had poor motor control or you're using some sort of assistive technology you rely on that cue so it's really important

that we build that into all of our websites but I'm going to focus a lot on web components because it's more fun to talk about also in accessibility challenges text alternatives are really important so that includes the alt attributes on your images

form labels or their Aria equivalents and off screen text which I use a lot to add text to my documents when it's not represented in a visual design I can put headings or other text off screen to give users who are non visual use some context of a document

and that actually rounds out the whole HTML hierarchy in my document but I don't leave it out because it wasn't in a visual design saying it wasn't in the design is not a good enough excuse we need text alternatives and another part of accessibility

challenges is color contrast and this starts with your brand guide so you want to work with a designer to make sure that the colors in your brand and on your webpages meet the color contrast ratio so that people can see your content web components you're

probably hearing a lot about them these days and for good reason because it's sort of a revolution for us as front-end developers there's five major parts to web components which are standards moving through the w3c and into modern browsers right now

custom elements which we'll talk about today shadow Dom templates HTML imports which are super cool because you can include a significant of HTML just like a stylesheet and a link tag and then decorators which actually don't have a spec yet as far

as I know but the idea with decorators is that you could include the fit of HTML in your CSS just like you would include a background image except you're including UML and that will then decorate your HTML for presentation purposes so that's really

exciting I'm curious to see where decorators go today we're going to talk about web components we're gonna focus on shadow DOM and what happens in a screen reader because that's what I was really curious about and then we'll talk about

custom elements and how we need to add some antics to those elements why are we excited I mean you may be you have your own reasons but I'm excited about web components because it's a chance to extend the Dom and we have a lot of power with that that's

[ ... ]

Nota: se han omitido las otras 2.471 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.