If It’s Interactive, It Needs a Focus Style | Accessibility NYC Meetup Recap

Okay! Hello, everyone! So welcome to Accessibility New York City! I'm Thomas Logan.

I'm one of the organizers of the event. And we appreciate everyone coming out today for our first event of 2019. Yay! Yes!

It's 2019! Yes! Gonna be more enthusiastic. It's a new year!

New beginnings! You know? And we're here at Thoughtbot, and so Stephanie here in the back is the office manager here. Thank you as always to Thoughtbot as our event space host.

Really appreciate having this space and being able to have the events here. We're typically the first Tuesday of every month. This month, we're actually having a second meetup on the 22nd, so we're gonna have a second one in January, because it's 2019! And the speaker is here from London.

So we're making a special accommodation there. And we will be streaming that event as well. Here in the stream, we'd like to thank Joly from the Internet Society of New York for putting together the stream, for people who can't attend in person or to follow up on past presentations, we stream and also archive all of the presentations we have here. Also a shoutout to Mirabai Knight from White Coat Captioning.

She is providing the live captioning that we have tonight, and tonight we have this displayed at the top of our screen, but on our live stream, we've got it down at the bottom. So we've got live captioning at all of our events, and as part of Accessibility New York City we commit to having the captioning available for every event that we do. And we'd like to thank Level Access, who's our sponsor, for helping provide and enable us to have captioning at the events.

With that all being said, it's now time to hand it over to our presenter, Eric Bailey. I met Eric in Toronto last year. Great accessibility speaker, and also works for Thoughtbot and was, like, amazing to be able to have someone from the place that we've been hosting our events present for us tonight, to learn about this very important issue. Thanks, Eric!

(applause)

ERIC: Thank you! Wow. I'm Eric. I'm a designer at Thoughtbot.

I guess not only am I a member. I'm also a client. I'm very excited and happy to be here today. And I'll be delivering my talk: If it's interactive, it needs a focus style.

And I figure we can save questions for the end. Unless there's something pressing. And then I'll be happy to answer any questions you have. And without further ado, let's just hop right into it.

So this is the Mona Lisa, by Italian Renaissance painter Leonardo da Vinci, a priceless work of art, easily one of the most famous things ever created. So two questions I want to ask you: Is it beautiful? And is it useful? Beautiful, yes.

Da Vinci was a master of his medium. The subject's enigmatic expression has inspired generations of tribute, inspiration, parody, and analysis. Useful? From a society perspective, undoubtably.

However, it's just a wood panel with some paint applied to it. Fragile, brittle, and needs a controlled environment and constant conservation efforts. What can we do with this? Not a whole lot.

This is a leg splint made by the husband and wife design team Charles and Ray Eames. They were commissioned by the US navy during World War II to design a splint to get soldiers out of the field without causing additional injuries. The splints weren't secure enough to hold the leg still at that period, causing death from gangrene, shock, and blood loss. Is it beautiful?

I think so. It followed the molding of the leg, giving it an organic shape. This was later used to create the Eames chair, a highly coveted piece of designer furniture. But is it useful?

Definitely. It's literally saved lives. This is a hammer you can find at any hardware store. Is it useful?

Very much so. Is it beautiful? When viewed through the right lens, definitely. The hammer's bell and neck are elegantly tapered to minimize weight and maximize driving force and the claw's V shape lets it prise out nails of many sizes.

It's comfortable to grip and slip resistant. This is a CSS declaration of outline none applied to everything on a website. Way back when, many print designers transitioned to web design and brought their biases with them, codifying and perpetuating a lot of bad ideas. This included writing CSS resets that globally removed all outlines, because there was the perception that they were ugly when compared with the static layout you get with printed content.

While the web borrows a lot from print, it isn't print and we should stop thinking of it that way. Many people rely on having outlines removed, for reasons we'll get to, and I would like to point out that many CSS authors recanted this decision to remove them, after learning how important they were for the people who relied on them. Focus styles are commonly thought of as ugly but it's because we approach it with the wrong mindset.

They're an integral part of the web and we should treat them as such. A good link relies on a good focus style to help people who rely on them to navigate. On this slide is linked the protagonist from the Legend of Zelda series. First we write the word link.

That clues us into what we're trying to do. We don't say click because not everyone clicks with mice. But the word link is ambiguous when placed in the context of two or more. So we want to use a word or phrase that describes where activating the link will take you.

In the context of a page, you begin to tell the story of where you can go and what you expect to find when you get there. The text that describes the link is what we call an affordance. Affordances are hints about how something should be used. Think of them as little cheat sheets for operating things.

The image on this slide is a push handle for a door. Other common affordances we use for links is assigning them a color to distinguish them from the surrounding text. Blue is a commonly understood link color because it's the color used in many browsers' fallback stylesheets. This external consistency is a quick win for cognitive considerations, as it's one less hurdle to overcome when first learning the ins and outs of a website's interface.

But if you don't see color the way other people do, this may prevent you from determining if text is a link or not. To get around this, we add an underline to help distinguish what a link is. This affordance is as old as the internet itself. Underlines equals links.

If we're using a mouse or a track pad we want feedback to tell us we've successfully identified the link we want to activate. This communicateds that the cursor has been placed on an area that can be interacted with. Removing the underline on a link when the cursor is hovering over it is a good way to indicate that. It doesn't rely on color alone to communicate state change.

We also want to have a state that confirms that we've successfully activated the link in question. This reassures the person clicking the link that something is actually going to happen. This is ideal for low powered devices, low bandwidth or server scenarios, where it may take some time for the site or device to deliver on your request. But how do we identify a link if we aren't using a cursor or track pad?

We use a focus style, which is a visual indicator that works much like the hover style. Here we've successfully identified the link we want to activate via the tab key on the keyboard. The fallback stylesheet that ships with every browser includes code for focus styles that appear if none is provided by the author. This is important to note.

The deliberate inclusion of focus styles is a recognition by browser manufacturers that people interact with web content in multiple ways. However, not all fallback browser focus styles are good enough to meet acceptable web content accessibility guidelines criteria for contrast. Firefox in particular uses a tiny dotted outline, which might prevent low vision users from perceiving what link has been focused on, which isn't great. If they can't see which one has been identified, it will be tough or impossible to know that they can activate it.

We can use CSS to overwrite the browser's default focus style and create one that is compliant. Here I've turned the dotted outline into a solid blue outline using a color that matches the hyperlink color to visually reinforce the fact that it is a link. We could also fill the background of the link in with a blue color and update the text to be white. Now it's even more visually apparent.

That's great for both biological and environmental low vision conditions. You want to make sure that each of your states is visually distinct and separate from the other states when styling an interactive element, because each state is discrete. It allows us to understand what's happening to it. Here I have a link with hover, focus, active, and visited CSS selectors.

And note with the visited link state, it may or may not be desirable, depending on your use case. It's best to use these kinds of things for collections of links that are used for task completion such as viewing training materials or navigating through a table of contents. A thing worth mentioning is the options for styling and visited are a little bit limited due to privacy and security concerns, so make sure you do your research before you start to create these kinds of styling.

In a pinch, you can usually use your hover state for your focus state. Combine the two selectors with a comma to save on file size. If there's one practical thing you can take away from this talk is that this one little hack can go a long way to help your users out. Here's a button element, another workhorse of the modern user interface.

Like links, buttons have discrete states that you can style. There's hover, focus, active, and disabled. You'll note that the button has a disabled state, and not a visited one. This is because a button is a trigger for an action and not a destination.

Disabling links is technically possible, but can wreak havoc on assistive technology. It's best not to do it. I'm using the disabled HTML attribute as a CSS selector, meaning that appearance here is semantically tied to state. Now we know why it's important to have all these things implemented.

On this slide is a knife switch in an open position. But interactive elements on the web aren't just limited to links and buttons, and this system of distinct and discrete elements should be applied to everything a person can interact with. The other interact elements the HTML standard gives us are buttons, details, sometimes the object element, depending on its implementation, and input, select, and text area with an accompanying label. These elements constitute the basic building blocks of any modern, robust design system.

You should also make sure that your focus styles work for links that wrap non-text content, including things like images. It doesn't have to be anything fancy. Just make sure that it's obvious. And of course, don't forget to provide alternate descriptions for those who may be unable to view your content.

Here we have a puppy in a flower pot. It's a myth that styling focus states is limited to just the outline property as well. You have the full range of CSS to work with. Just make sure that when a state is styled, it is done so in such a way that it does not shift the page's layout around when activate.

This is disorienting and can make a person lose their place. I like to use properties that won't cause the browser to recalculate box sizes, such as color, background, and box shadow. Speaking of box shadows, one technique I especially like using is using stacked box shadows to create a ring around an element that will honor its border radius. You can see here I have two declarations of a box shadow.

One with the color of the background and one with the color of the focus as variables. And you'll notice here that I'm removing the outline to get this effect. This is a situation where it's actually acceptable to remove the outline, so long as the focus style you replace it with is distinct and passes web content accessibility guidelines' color contrast criteria. It's a mouthful.

However, people experiencing low vision conditions may use Windows High Contrast mode to help them read, so it's good to check our styled states to make sure they hold up. High Contrast Mode will strip away a lot of CSS, including box shadow. To get around this, what we can do is use a high contrast mode media query to tweak the focus style to fill the button in instead. Here with the MS high contrast active media statement, we are styling the background color with the color keyword button face and the color with the value window.

This will ensure that the color in high contrast mode will match what the user has specified, thus ensuring that contrast is preserved. This could be helpful for people who are magnifying their screen, as the focus effect is more pronounced and therefore easier to perceive. Alternate ways to identify and activate content aren't just limited to keyboards. This is a switch which helps some people with motor control issues operate technology.

They're typically large hardware buttons that you can program to do different things. And this is neither a mouse nor keyboard interaction. It's binary input that may emulate other kinds of input. Focus styles aren't just limited to assistive technology either.

Here I'm using the Apple TV Remote to identify the tile that I want to activate. In my case, that's too much Netflix. And we're not just limited to the focus selector anymore. The W3C has two new CSS properties for us to play with.

Focus within and focus visible. This slide's photo is a statue of the Buddha. Focus within is a pseudoclass that's activated when an element is focused or contains an element that is focused. Currently the most recent versions of Firefox, Chrome, and Safari support it.

This is a screenshot from can I use showing the support table. A practical example of how we could use this could be for a table whose cells contain links. This is a list of NBC television affiliates. With focus within, I'm able to highlight an entire table row when a link in one of the table cells has received focus.

This is done entirely with CSS, something that you could previously only accomplish with the help of JavaScript. Here's how it works. We're looking at the table represented as a hierarchical tree in the document object model or DOM for short. Focus within is declared on apparent node to the one that will receive focus events.

In our example, that's the table row. When a focus event occurs on a link inside of a table cell, the event travels up the DOM tree until it hits the element that has focus within declared on it. Styling rules are then applied because the rules for focus within have been met. Note that if the browser does not support this selector and it's included in a list of other valid selectors, the entire group declaration will be ignored, so be sure to author your CSS with care and discretion.

On this slide is a tweet by Keith J Grant illustrating this point. Next we'll talk about other people's opinions regarding focus styles and what you can do about them. On this slide is Michael Scott, the boss from The Office, probably the greatest villain in modern literature. Sometimes you're trying to be a good ally and have a strong case for incorporating focus states in your site, but a less informed person can override you because they have more organizational clout.

So what can we do about it? Focus visible is a pseudoclass that is activated when an element is focused and a user agent determines via heuristics the user's input modality. That's a fancy way of saying it shows focus styling when activated via input other than mouse, cursor, or finger tap. Say you have a link on a website.

And a person decides it's interesting and wants to visit it. They identify the link. If focus visible is declared on it, the browser runs a bunch of logic to figure out what input the person is using. This allows us to create separate focus styles.

One for cursor input. And one for keyboard input. This allows us to create two separate modes for your website. One that is shown to mouse or track pad users and one that is for everybody else.

Currently only Firefox supports it, as shown by this screenshot from the support table for the pseudoclass from can I use. But we can get other browsers supporting it by using a polyfill, which is a technique that uses JavaScript to recreate a browser feature. But in addition to the extra data to download and maintenance concerns that come with introducing a polyfill, I would like you to consider this: Can you trust your heuristics?

I'm parano... I mean skeptical. Computers are awful at understanding the context of the real world. Here's Google's world class algorithm having trouble telling the difference between dogs and fried chicken.

You can search for that. It'll show up. Yeah, it's great. And the web is more than just mice and keyboards.

We're seeing more and more devices with multimodal inputs becoming commonplace, meaning that a person may be switching input on the fly to best accomplish their task. For example, someone using the Microsoft Surface may at any point be using a mouse, a track pad, touch, keyboard, stylus, gesture, or voice inputs. Form factor is also an unreliable metric. So device sniffing is out.

For example, here's a Gemini PDA, which is a clamshell Android smartphone with a qwerty keyboard. I really want one. It looks awesome. Devices may also have their input augmented.

The latest screen reader survey by WebAIM revealed that a total of 62.3% of all participants use an external keyboard in conjunction with their mobile device in some capacity. This especially should give us pause for concern about making assumptions about how people actually use their devices. Now, let's talk about people. I have a lot of problems with identifying people as "assistive technology users" without their express consent.

I think the general idea behind focus visible is well-intentioned, but ultimately may be a slippery slope solution. The specific concerns I have aren't new, nor are they exclusive to just me. For starters, if you spent any amount of time doing web development, you know that trying to make solutions based on detecting what the browser reports is an unsustainable nightmare. There's also the collecting and sharing of personally identifying information.

Focus within can be used as a hook to try and identify people as an assistive technology user. From a technical perspective, this runs afoul of the same kind of problems that device sniffing does. Who knows what the people collecting this information is doing with it? Mass breaches are a common occurrence this these.

Would you be comfortable having this kind of information about you out there, sold to the highest bidder? Other big picture concerns are if you don't actually check to see if your design solutions work the way you intended with the people you're designing for. There's a whole host of biases, assumptions, and subtle nuance that silently worm their way into the design process. Especially when it comes to designing for disability.

And we should be always on guard to prevent that. Finally, this line of thinking is starting to creep back into a terrible trend of the early web, which was separate sites for assistive technology users. These sites didn't always have parity in information or capability, compared to the sites they were supposed to accompany, and often forced people to contact support if they needed assistance, an embarrassing act that reduces personal autonomy. There's a reason you don't see these kinds of sites anymore, and that's because they don't work.

In fact, Scandinavian Airlines was recently find by the US Department of Transportation for this exact thing. People aren't binary about their skill in operating websites either. Here's a graph with two axes arranged in a cross shape. The X axes are labeled completely unfamiliar and expert, and the Y axes are labeled fully able and severely impaired.

When I'm healthy and working on my personal laptop, I can use Google Docs with ease. But I'm not that smart, so I'm gonna have some difficulty learning about differential calculus on Khan Academy. Maybe I'm traveling in a foreign country and need to get some kind of critical information, but I don't speak the language, have a limited data plan, and I'm jetlagged and sick from the long flight. Or maybe I'll just get old.

Another way to put this: I tab through forms all the time. Am I an assistive technology user? Really, it's not about what a system identifies me as. It's about how well the system responds to who I am and what I experience when I use it.

Because of this, what I'm asking you to do is embrace the unknown. On this slide is a picture of Hank Hill being embraced by John Redcorn. Hank has a very uncomfortable expression on his face. King of the Hill is a fantastic show, by the way.

I highly recommend watching it. Focus styles are so baked into what the web is that we don't even consider it a unique, standalone feature. If you're going to make a browser for mass consumption, it's just simply part of the table stakes. Here's a screenshot from can I use where I'm searching for focus, and it basically just lists CSS 2.1 selectors.

It doesn't even try to break them apart to make that distinction. Everything is supported. It's green across the board. We're not always using the latest device or version of our browser either.

This is a $30 smartphone from Wal-Mart, and if you're economically disadvantaged, unhoused, or live in an emerging market, you simply may not have access to a device capable of taking advantage of the latest technology. The Jio smartphone is a device that is incredibly popular in India right now. It does have a web browser. Some people purchase devices that are no longer supported specifically because of the fact that it makes it affordable.

This is the now defunct Windows phone. These groups of people represent millions of people, many of whom have never used the internet before. Should we turn our backs on them because of this? Browsers are eating the world.

We're going to keep finding them in places we never thought they'd be. Here's developer Drew MacLean discovering that his new car has a browser built into it, and apps. So in closing, it's important to keep the following in mind: Good user experiences meet the user where they are. Not where we hope they'll be.

Thank you for your time! Thank you to Thomas, Stacy, and Accessibility New York City for this wonderful opportunity. This deck is available on noti.st, if you're interested. Or have any questions.

And my website is also listed here as well. I'm @Ericwbailey on most social media. I'll be hanging around if you want to ask questions, or we can jump into questions now. Thanks!

(applause)

I haven't thought about the best way of phrasing this question. Preface. But do you have any advice or thoughts on how to balance fully able focus styles or any kind of decoration with maybe the kinds of much more differentiated styles you might need to have it be recognized by somebody who isn't? And how to balance the two?

Or whether maybe fully abled people don't need... Don't mind if it's much more apparent? If that make sense?

ERIC: Yeah, I think so. The tack I take is... Don't make a big deal about it. So hooking your hover state in with your focus state, as long as that's apparent and distinct, I think that's okay.

I start to get a little uncomfortable when you start making a distinction between, you know, ability and lack of ability. Because that starts to get into... What is a disability? You know?

I might need it if I get my pupils dilated or I'm having a hard time seeing or I break my arms, that kind of thing. But in terms of preserving the overall aesthetics, I think if you're taking the time to work on a mature design system, these are the kinds of conversations you should be having. If you have inherited one or you don't have one, I think it's one of those things I like to kind of sneak in.

It's amazing what people don't notice if you don't tell them. And this is one of those things that I think is, like, where you're being kind of a White Hat designer/developer, and just kind of getting something in there for the people that rely on it. Does that answer your question?

Yeah. I would love to talk a little bit more after, anyway. But thank you.

ERIC: Thank you.

Other questions? Here I come.

My question is quick. Maybe two parts. On just some of the best practices around states. So you mentioned a visited state.

You kind of alluded that... Maybe more of a privacy issue than an accessibility issue. But what is best practice for visited state? Should it be different colors?

Should it be the same? And then also... Any recommendations whether a hover state or a focus state can or should be the same? Sometimes in design to me they seem like they should be the same.

I don't know if there's a reason to distinguish a focus state versus a hover state.

ERIC: For the first part, the reason that visited links are restricted in what you can do with them is because some very clever evil people figured out that you can use it for fingerprinting your browser, which then in turn can be used to deanonymize you, and yadda-yadda-yadda and all the bad stuff that comes with that. In terms of the UX of styling a visited link, you kind of run into an interesting chicken and egg problem here, where not a lot of people do it.

So when you see it, sometimes people -- especially if you're lower on the technologically literate kind of scale -- may not know what's happening and why it's changed. Because of this, I think it's really important to user test this kind of stuff with your intended audience. So if they can grok why you're including a visited link state and it reads as "yes, I visited this; this is something I've done" kind of the check mark thing for that, because it communicates I've checked this off my list of stuff to do...

The other kind of thing with the visited link state is it's a contextual thing. So not everything like your primary nav... Don't need to know if you've visited it or not, because you're maybe returning there. This is more sort of -- yes, I've seen this.

I acknowledge that I've seen this. If I come back to it, and there's a list of 50 links, okay, I did go to this one. Cool. Does that answer the first part?

Okay, cool. And then the second part... I personally... If you're going to really practice what you preach, they are distinct and discrete states for a reason.

So I think it is good to communicate that. You might have a multimodal user input. Somebody who is navigating with a mouse but is tabbing and kind of switching on the fly. So you want to basically communicate that like...

Yes. Cursor is over here. But this has focus. If that makes sense?

Just to kind of very concretely state what action has transpired and what's going to happen because of that action.

So you're saying you recommend having different stylings?

ERIC: If not, hook it into a hover. I'll be happy.

THOMAS: I guess I get getting a consistent visual focus state, but when you have a page that has a dark theme in the header and then a lighter theme, do you have thoughts or designs that maintain a consistency when you want a strong contrast and the background changes?

ERIC: Yeah. I think it's fine to make bespoke focus styles for each of your components. So long as the overall effect is... Ah, yes.

This has been focused to. So if you're just shifting the color around to reflect what it's been placed on top of, I think that's fine. You know, again, it's such an underutilized thing in CSS that I'm just happy to see it at all, usually. So things like links -- if you're shifting the underlines away on the body copy, I'll take it.

If your primary nav and your footer has a slightly different treatment, maybe an outline ring, that's cool. Just it's more consistency within the kind of component that you're navigating through. So if you have 5 links and a footer, and one changes color, one underlines, one outlines, what's going on here. What?

So that's the kind of thing. When I'm saying consistency within a component. And kind of getting that.

THOMAS: Thanks!

Microphone is coming!

Hi, Eric. Question for you. Can you give a use case where your business says: I do not want focus styles. I think they're annoying and irritating and the default browser ones make me want to punch people -- how would I as a developer or a QA engineer, in your opinion, what is that conversation like, to help people do the correct thing?

And move that forward?

ERIC: Yeah. Woof. So I mean... You can be the good cop.

You can show usability studies. Especially if you can kind of tie that into the business's primary focus. If you can show somebody abandoning a shopping cart, say, because they're unable to operate it with a keyboard, that in my mind... That very distinctly says: Oh, we're leaving money on the table.

And then if you want to swing it into bad cop territory... You are a business. And you are selling things on the internet. And somebody can't complete it because they can't focus to it.

There's a lot of law out there that says this is not something that you can do, because it violates civil rights. That probably won't make you a lot of friends, but... I'm not in this business to make friends. I'm in this business to make good design.

It's a very easy thing to say up here, but I know in the trenches it's a lot different. I do think that's why focus:visible was implemented. It's born of that space and also the weird... I don't like that.

That's ugly. Which is kind of the point of this talk. Which is like... We need to kind of talk about recontextualizing them and demonstrating their utility.

I have another question. I haven't been watching focus visible for probably... Since life got busy in November. Are we seeing anything upriver in Chrome?

Chrome Canaries?

ERIC: Yeah. I think it's under a feature flag right now. The polyfill works. To dig into the technical details of it, the description of what a focus event is -- is kind of like...

Euuugh! So I'm very skeptical of that detection. Another thing I've had some conversations with people about -- kind of focus visible flickering on and off, as it's detecting whether or not you're switching input. And anecdotal, but it's been described as very confusing, especially for users that are using a magnifying screen, because basically that consistency is now thrown away, and you don't know...

Why did it blink blue this one time and not this way this other time? Did I break something? That kind of thing.

On its way.

Sorry. I was just gonna add that I think -- to your question before -- is that before you implement any code or any code changes or frameworks, that unless you have, like, a culture of accessibility and you actually say that's important for your company, it's never gonna happen. Right? Because it is extra work.

So just to your point... The easy answer is: No. Accessibility is important to us. And that's why we're doing this.

So I think that was a lesson that we learned. We're like... Oh yeah. We're gonna be compliant.

There's not much empathy in saying I want to be compliant. Whereas we're like... Hey, actually, accessibility is really important to us and this is the right thing. All of a sudden all the developers, all the engineers are like...

Okay. I get why we have to spend extra effort for designing this or implementing this. So I think that was a really important lesson that we learned. I'm sure you're already doing that, because you're here.

But I think before you get into the code, making sure you have the empathy and the reason before it is definitely really important. I'm actually just curious... Bootstrap is obviously a CSS framework. Are there any other CSS frameworks that you would recommend as a base when it comes to a lot of these things?

You mentioned browser having a focus state, but... Are there any CSS frameworks that you've seen?

ERIC: I have complicated issues with CSS frameworks. That all being said, I believe Bootstrap does include a focus indicator now. I believe Foundation does as well, but it also has other accessibility/usability problems. So I haven't checked in on it for a while.

But I was kind of waiting for it to do a little growing up. I can post on the meetup page. I can do a quick audit on the popular stuff out there and give some recommendations, if you'd like.

That would be great.

ERIC: Cool.

I had kind of a follow-up question, related to that, which is: Do you have examples of sites or webapps that you can bring up that have a really good demonstration of focus styles? So not just compliant and visible and that sort of thing, but also beautiful and integrated into the overall design system?

ERIC: You know, I should have a list. Off the top of my head, Google Hangouts... I don't know if the current redesign... They actually have one where the focus ring is animated and it shifts position visually to the next focusable element.

That's really cool. It's a little animation. And it really kind of helps communicate that... Oh, I was here but now I'm here.

Let's see what else. Gov.uk, which I am a fanboy of, has really good focus styles. If you look at a lot of... Yay, open standards web developer-y people, usually they have some pretty good ones, because they work in this space.

Ch-ch-ch... I think 18F maybe also? Possibly... I can get a list.

But... Yeah. I'm always happy when I see them. Oh, CSS Tricks actually just redesigned, and now when you focus you get this cool gradient overlay on your links, and it's this nice little surprise.

Other questions? Okay. Here we go.

THOMAS: This is kind of a comment and question. Curious if you've seen basically the Access Key or Accelerator Key of desktop software in the past having the visualization of... This letter is underlined. It'll move focus.

It'll actually jump me to this area of the page. That seems like that really went away in the web design world. And I was curious if... Have you seen design on that?

Do you think that's a potentially good idea? Or visualizing how do you move focus? Not just sequentially, but...

ERIC: So using access keys to hop around the page? As a nerd, I love that idea. Because moving the mouse is effort and ugh. Who has time for that?

I know there was actually... I was talking with a Thoughtbot employee. There's a Chrome extension that's like Vim but for the web. And you know...

In that Stop Trying to Define These Things in Concrete Terms... He's a perfectly able-bodied user who was also complaining about the fact that if you don't use an interactive element, his Vim mode can't actually let him navigate the website. And I was like... Huh.

Interesting. Yeah, weird. So... The thing about access keys that kind of bother me is the lack of...

The lack of external consistency. So Twitter has keyboard shortcuts, but those don't translate to another website. So it gets into a weird thing where you basically have to relearn an interface for every site on the web. There's also accidental activation.

I've definitely started to type a tweet and then the JavaScript caught up with my clicking and I accidentally sent one that was half completed and then I feel bad and delete it. I think that's something that's a missed opportunity for browsers. I'd love to have jumping to headings, jumping to landmarks would be great. There's browser extensions that do that.

And I actually use them all the time, because again... Scrolling is so much work. And I'd rather just jump around. But yeah.

Especially it would be great if you could link to every heading declared on every website without an attribute. That would be great. Like a lot of CMSs have started to do that, and I'm all for it. Deep linking!

Yeah!

Sorry. Thank you for all of this. This presentation. Incredibly well done.

One question we had recently in design in regards to focus states was: When you have tiles, sometimes you have a tile and within the tile or square, you have a text or something that says "read more" or "check out this..." do you find from a focus state you should focus the entire tile when it's selected? Or just focus the link state?

ERIC: Is the entire tile navigable?

Yes.

ERIC: Okay. Is... Is it a link buried inside of a link?

Well, essentially it's one big link.

ERIC: Yeah. You know, I'd wrap it to the tile. If the entire area is something that's a hit target, you're basically identifying it as a hit target. You know, counter that with...

If it's too big to be recognizable as interactive...

That was the problem. It wasn't extensible, because someone using a bigger screen, maybe the tile is bigger and it's not clear that the tile actually links to the read more, and another problem we read to was... In some of the tiles we have read more, or... Skip a page.

Or... We actually had multiple links within the tile. So in that use case, it didn't work as a tile, because you have to have the links.

ERIC: This sounds like a perfect opportunity for focus within.

Focus within?

ERIC: Yeah, so you can have your cake and eat it too.

That's a great answer. Exactly what we'll do. Awesome.

ERIC: Shiny new toys!

Paid for admission! Thank you.

Great. Any other questions for tonight? We'll be around hanging out. Thank you so much, Eric.

That was awesome.

ERIC: Yeah, thank you for having me! Thank you, everybody!

Any announcements or anything? Sam? I think you have one. Yeah, sure.

Hi, everyone. I'm Sam. I work as an accessible consultant, but why I'm in front of you today is because I lead a project called Your Everyday Ally in partnership with the World Economic Forum. My team and I believe that with tech education we can empower people with disabilities to lead more independent, confident, and empowered lives.

About 1/5 of adults in the US live with some form of disability and I'm one of them. Living with cerebral palsy and working as an accessibility consultant, I know firsthand the transformative power that technology can have on people like me. When I got my first smartphone, it opened an entirely new world for me, making me feel much more comfortable and confident, traveling independently, across the US but especially in New York City.

With Your Everyday Ally, we want to broaden access to tech education for people with disabilities through one-day workshops, to teach people with disabilities how to leverage the tools within their smartphones, such as navigation, mobile banking, time, and task management applications. We spent the last few months validating our idea, interviewing subject matter experts, and conducting market research. We're currently building the workshop curriculum. If you or somebody you know has experience in education, curriculum building, occupational therapy, assistive technology, or anything else that might be relevant, we'd love to get your input.

Please come find me after this. And just... Thank you. (applause)

And as an aside, I want to introduce Tanya, who is going to be helping us out with social media interactions and that sort of thing. So if you have events outside of tonight and the hour that we have here, she's great to reach out to. We'll be sharing different things going on in the community. Say hi.

Hi. My name is Tanya Davies. And I volunteered to help and I'm doing social media. So feel free of course to reach out, and also I will be posting a lot of interesting things as well that relates to a11yNYC.

So that's it!

Thank you! And with that, we can hang out here for a bit. But a huge thank you to Thoughtbot for providing the space, to Joly with the Internet Society of New York for handling streaming and recording and all that good stuff, and for Mirabai Knight with White Coat Captioning, and Level Access with their ongoing sponsorship. Thank you all for coming.

We'll hang out for a bit. One more announcement? Sorry.

So I work at a company called Seamless Docs. We do web forms and PDF forms, bringing them all online for government. We have a big initiative this year on making all of our forms and our PDF forms all accessible. With that being said, we're also looking to hire a director, a VP, or a chief accessibility officer.

We work with over 500 governments, ranging from state governments to local governments, and not all of them have those resources. So being able to provide and be a resource for them around accessibility and more specifically for us digital accessibility. So if you know someone -- we're looking to hire a full-time role. To both help with education content, but also these things as well.

So thank you!

Cool. I would also recommend posting that in the forum on Meetup. And if you haven't already, reaching out to a11yjobs on Twitter. They tend to repost awesome opportunities like that.

Cool. All right. Thanks so much, everybody! (applause)