In, that case I'm just gonna start and the. First thing I wanted to say, was. Just I've. Been listening all day and I just wanted to recap a little bit about, something. Which seems to have emerged which, i think is really important, which I've been thinking about recently which. Is to do with the relationship, between a. User experience design, or my company we call it user centered, design which. I guess is more or less the same thing and. Accessibility. And, I was talking to someone on the phone recently. And I, was having a little chat with them it's sort of like a free, consultation and, they wanted to give me a job and, but. It. Just. Turned out to be, me geeking, out at them about accessibility, and they had an application they were working on which. Is for a really good cause and. They. Had, designed that from Photoshop files and. The guy who led that design, work which was very good design work they filled it out really thoroughly, was. A self-described. UX designer and not the coder and I was helping them out by offering a few and little pointers. About, some of the accessibility, issues internet and, it did occur to me that it's this weird thing that, we have in our industry at the moment which is. It's. Possible for someone to say or or it's it's seemingly. Legitimate for, someone to say at the moment I, am. A UX designer I don't really do you I don't. Really do accessibility. Which. Is weird it seems, weird to me that they would be. Disconnected. Like that so. Anyway I'm, interested. In hearing more on that, subject and I think Henny and. Mike's. A prism in Billy's, talk mentioned. It as well and it's been mentioned a few times and I, just think that's a good thing so. My talk is, about. Current, page links. Which. Are, links. To. The, page that, you are on this. Is a relatively, simple, problem, or so you might think I don't, tend to engage with complicated, problems, because I don't have a the, talent.
The. The, knowledge or see. Patience. Or. Inclination I like. Fixing little. Problems like this I think a lot of the complex, problems we experience are. Actually. Created. Unnecessarily. I think as technologists. We're interested, in convolution. For its own sake simply, because there is a good way to legitimate. Our our. Our. Professional. Work credibility. And. A lot about accessibility, is about simplicity and I hope that this this little task which is to find a good solution to to, indicating. What the current page was. Bara, hire a, hyperlink, would. Be an easy one as. It turns out it's not that easy. I. Wrote. An article about, it in fact and I came up with a few solutions many of which I'm gonna cover in this talk, and. Then. I got a lot more solutions. A lot many. Of them a lot better than the ones that I came up with in the comments, and, I would furious. Because I thought I'd have it really covered and I was really smug and then. There. Was some really really good stuff that came out and that. Upset me greatly and I hate you all but. If. We work together like this and make each other feel bad until the point that we come up with something really good then that is all better and one. Thing I am very proud about with this article, was that it got somewhere, in the region of 44 comments, I say, somewhere in the region I came to them a minute ago for comment and I'm. Proud, of the fact that I brought up a subject which is very, very. Accessibility. Centric, and yet it created, a big discussion and a lot of interest which. Which. I was I was really proud that I've managed to get, that conversation going, and. So. I've noticed, in, my travels, around the web that there is an awful lot of information there and, you're. Currently. Looking at a very trite, representation. Of data, I've just got a bunch of zeros and ones and put them into a slide. For you to look at. Most. Of the information out there is, garbage. It's. Mostly useless. Information. Or it's, all. Pointless, functionality. And but. There is a lot of good stuff out there as well and ultimately with that huge, and. Surfeit. Of information, amongst, it somehow if we're able to reverse it in a. Decent way, I'm. Hoping, that, we'll be able to glean something, from it I'd like to think that the web represents, on like a second, enlightenment. Of man where. We. Can all sort of come together and somehow share our experiences, and, research. Things and find what we're looking for and, answer, some of the really big questions. Really. Big questions like Who, am I they've sort of ontological or, existential, questions like that and of, course what is the point of all of this and.
Those. Two questions would be very difficult things to cover. In. A. Short talk. About, accessibility. And. Which I wrote two days ago and and. Actually. My strategy. For. Trying, to answer these questions by using the, glut, of information, that, the web offers has, been quite. Well. I haven't been very good at it I mean it, basically come down to just pressing, the random. Article button on Wikipedia, and I have found some interesting stuff there about small towns in. Sort, of rural Germany and things like that but you. Know it's, not necessarily. Gonna give, me one so I've settled for a much smaller question. To be answered and that question. Is then where am I, if, I could just have that simple, question answered then, I'll be a much happier man and I. Find, using the web a. Much. More pleasant experience to, attend. So. The. Great thing about the web is it does offer standardized. Ways of. Knowing. Where. You are and being, able to tell at, what, location, you're, at amongst. All of that information all that structured information and interactive, information. And. The. Main, thing. Which. Is which is used. For this the main standard, is the is the URL or Uniform Resource locator. If, you're. Appearance, in the URI and. This. Is something which. Has. A known convention. For. Spelling out basically, in a string of characters. Whereabouts. In the internet or in. The worldwide web rather is probably a bit of them we we are act and, so. For instance and. If. I'm, looking at an article on my. Website. We've. Got a protocol, followed by the domain so I know which domain I'm on and then. There's a subfolder represented, by article, and then, even though it's been rewritten, by, by. Some, sort of actually directive the, name of the page itself and it's unique, so. The two words. Here sort of give you everything you need to know about URLs, and just. The first and third really is uniform. So. You know it's sort of dependable, it's quite robust and, every. Link goes somewhere, unique in. A distributed, global. System so that's that's a nice dependable. Way of being, able to work all these things out and it's. To do with location and the fact that the. By word addresses, use tells you everything you need to know about how, it helps you know where, you are. But. Let's imagine that. We. Are living in a sort of a futuristic. Technophobic. Dystopia. Where. Suddenly. And for reasons. I can't imagine the. URL, has suddenly become, unpopular. And. Unpleasant. To, certain. Parties and I. Mean this is totally hypothetical. Of course I mean I don't think anyone would even begin to conceive of a reason to to. Start to and to, banish the URL, and I'm sure that no one will ever do it I mean if someone did do it it would, be the sort of people who made you, know sort of futuristic military robots. And that sort of thing that you'd expect to find in the, Illustrated. Dystopian. Sort. Of grubby. Scene. And that. You're looking at in the. Slide and. But. Without, that how. Do we know you are here or where, you are when, you or in a certain location around, the web. Well. You. Have to use certain conventions, I suppose, and I'm. Likening. For the purposes of this talk this convention. This sort of marker, to, being like in a shopping mall where. You. Would have. The. Marker would say you, are here on a Mac and then, because you know where you are you know how to get to the other places, so. You know how to get to such-and-such. Shop. Where, you would buy some clothes that you don't need or go. To such and such. Bakery. Where you'd get some food. Between, meals that you don't need to eat so. This. You. Are here thing is kind of its, the point at which you can then work out all of your different. Trajectories. I suppose and and. One. Of the. It. Sort of it's sort of like a way, of them making. Sure that you you, can you can escape as well because actually I'm someone, who doesn't doesn't, like shopping in malls so. I'm. Very keen on the idea of, knowing how to get out so, when I'm usually looking at one of those maps in a mall it's it's.
To, Help me escape. From, the, the, undifferentiated. And. Depressing. Consumerism. That surrounding, them and. We. Kind of need to do this when we're on the web as well I think and. When. You are. Trapped. Someone whether it's a you're a keyboard, user and someone. Has usurped, your your. Tab, key. So that you can't escape. The. Page that you're wrong to close your browser and, you're stuck somewhere in, the internet surrounded, by trolls. Accusations. Of being like Hitler, and. Just. Interminable. Means. And. Insults. And your YouTube, clients so. We need to provide an escape route so, that that keyboard user perhaps pressing, shift, tab, can get to that address bar and change, that address oh yeah but he can't because there's, no URLs. In a futuristic, it's lobia okay, well anyway and so. I want, to talk about how. We. Define. Where someone, is. Just. On within. A website let's just break it down to that because, that's that's, simple, enough I think and so. There. Are already, conventions. For this and so. Illustrated, at the moment what you're looking at is a sort, of fairly typical navigation. Bar and which. Reads home is the first link. Then. About then blog then, contact, the. About, link has, a blue. Background, and to. Indicate. That, that's the, active. Link. Amongst. The navigation, so that corresponds. With the, the page that you on. Which you are currently situated, and this. Is a long-standing, convention. Which, has been used. For many years and sometimes. Incorrectly people, do absent, and they show the. Sort. Of forward-facing, tab is the current page and you. Can get. Into a mess doing that. Because. There. Can be this sort of confusion between what a spectacle, e looks like a tab and what is actually. Interoperable. E a tab. Like. The tab switcher, and Leoni was talking about earlier the area tabs but. Anyway it's just a. Link. Which says here. You are and so, you know your context, and it's its context, that's important. So. To mark up a navigation. Block like that you would of course use, the. Nav, element, because. Ultimately. That will the, baseline semantics, that will be communicated. To accessibility, api's, you. Add the role equals navigation. To as, has, already been recommended. Earlier today, and. Make. Sure that and all the user agents, can, also provide. That and the. Great thing about these landmarks, of course is that you can press shift f7. Or whatever the key combination, is for your particular screen, reader and it will bring up a dialog, or. Links. In one tab, and. Headings in another and, landmarks. In yet another one and. So you can go straight to that landmark, there also please which allow. You to travel, between landmarks. I forget. Which ones that I think are goes, to the next one, and. In. That one, or something like that and someone, can correct, me then in the comments well. The method. We use to define the, current. Link. Representing. The current page is usually. Done with.
A Simply. A class and. I. Bore. Myself talking about this because I've talked about it for a long time in, many. Different places in many different comment streams and different. Indicators. That. The class. Isn't. Interoperable. And. So. It only, communicates, things visually and I know that you know that I, just wanted to sort of draw, that line and before. We moved on to find out ways of communicating. This properly. But, as. Far as I'm concerned classes, are. One. Of the biggest enemies of. Accessibility. Because. They. Give. You that notion that you are you're creating. Value or you're communicating more. When. Your own where you are but you're only doing it visually, so. I think the class more than anything. Represents. The difference that, represents. That, mistake. Where people think that been UX, is. Different, to. Accessibility. That, that's, somehow that you deal with all of those things and you use those fancy, icons and things like that and that, that's an art in and of itself and that. You can just do that without worrying about, what's. Underneath. So. How do. We communicate this, stuff interoperable. Ooh we. Communicate. It and by, providing, text. Just. About. Every. Instance, of, a. Truly. Interoperable. Piece. Of information come. Down to text. And. By interoperability, by the way I mean it, can be communicated, to. Different. Devices in different ways so. Text. Can be read, and interpreted turned into synthesized. Speech or, even. Used. With. A refreshable, Braille, display you. Can't do that with the. Pixel. Bitmap. Information, of images or or, or. Unsupported. Or, uncommunicative. Unicode. Characters, or anything like that you. Have to use, text, and text is a very very big. Weapon. And a powerful tool when it comes to accessibility. So. To, solve our new, our hair problem, our and this is the current page link. Within our navigation, schema, problem, we. Will, have use text and so. We'll have to use one. Of the following I may have missed one or two options. Out here but, most of the time is either a text node which, is of, course exists. And. Inside. In. Between the two tags which make up an element so, you, know that's that's very well supported actually and if. You're, making a button it's probably, better, to just use some text inside that button I find, it weird when, people people. Have said to me well it's all very well using proper buttons without, classes as. Control, elements, or action. Elements whatever you want to call them inside your application. Because. You know, I want, to add some value on it you know all of that again and. So. Maybe I want like different buttons to be different colors to represent different things like that and I would say well, have. You tried just using text to, do that only, if you've got a Save button just, have, save as the text node that's pretty accessible. To, everyone really, I mean, it. Can be translated, it I mean there's there's no real sort of cognitive. Load there, you don't have to decide for someone's pretentious, icon which, is supposed to represent, safe, I mean it have there's a fourteen-year-old, feel about a floppy, disk anyway I don't know so.
Detects Nope that's a good one opals, attribute, yes title, attribute probably. Not area. Label one of my favorites we'll be talking about that some more area, labeled by and that's. Also good and in. Brackets, area described by which I'll be covering two, that's. A great one because. It. Depends. As. We'll discuss the. Text. Rather than simply replacing, it. So. Here are the techniques here this, is a mixture of techniques. That I came up with in the original article and and. Some. Other techniques. People. Came up with. In. The comments, and I. Tried to distill them, so. Weirdly. And I didn't expect this I do understand, where people were coming from when they said this in the comments I think. Tre. Suggested. This for, instance is to. Remove, that, link altogether for specifically. For users, of assistive technology. So, the idea is that this, link. Is. Not for them, it's. It's, a distraction or it's redundant. So. Just. Take, it away. Which. Is you, know which is one way to go so, here's this sort of crass represent, representation. Of that being removed so, how does that work well. The reason we're doing it and one of the reasons which was suggested for doing it as. Was. The worry that you'd you, would focus that link and think to yourself oh that. Must be a different page because you've forgotten that you're on that page, and. They need to click it and then it would reload, now. If we were providing, some accessible. Text. Which could be which. Could be announced which. Said oh this is the current page and we'll discuss this then of course that's less of a problem so, the idea is that if it's a functional, link regardless, of what the text is the, I, didn't. Click. And then. Bring. It avoid. Going off line. Yes. Terri's, just said in the comments and as I had already attributed, to him he says it's it's a redundant. Link. So. Yeah but. Then the. Fear is that it would reload, the page and you'd start at the top of the page again and then you'd have to climb all the way through which is you know that's a legitimate thing and. The. Technique to do this would be to use area, hidden in. A specification, area, hidden should in almost, all cases it is recommended, be, paired, with. This. Style so you should probably use, the, area, hidden. Attribute. Selector, so just area hidden in the square. Braces and. Attach. Display:none, to that then you have your accessible, state and your visual. Interpretation. Of that state tied together in, almost, all cases area. Hidden should, be used to, hide. Things which are, also hidden visually, and that's, that's, the misunderstanding, I think a lot of the time and, you. Can use it sometimes, and perhaps you. Know there's a case here. That, you. Know you could you could use it here to simply. Hide. From, a particular type of user but that's a very dangerous part, of the go down I think and. Explain. More why as we move on. What. It does create is some inconsistency here. By. Removing, that link or, the, link which, corresponds, to the page per, page, you. Create a problem. Whereby. Every. Time you go to a page the navigation, is essentially different, and. Again. By the specification, the only, landmark, which, should, contain content, which ever changes. Which is which. Is which is by. Definition inconsistent. Is the main part because that's where all the dynamic. Content would go so. The. Idea, is that everything, inside the role navigation. Should, remain, consistent, and equally, everything, inside. Content. Info and there's good reason for that it's, because. The. Behavior, the idea behind those landmarks is that they are their tools, which helps you navigate that. That, exception. Landmark. Which is named, so. Does that, also. It sort of creates a bit of a blind spot if you take it away and, because. Within. The navigation at least if you arrive on the patient and immediately. Open up the landmarks. Dialog and go straight to the. Interior. Navigation. You. Will find that there's no indication, of your context.
So There's so we've lost that you're here so if you were to imagine yourself, using a Google. Maps. And. There. Was a, everywhere. You looked on Google Maps was a big was, a big sort of blurry, patch so, the center of the map was always. Below E it's, sort of my. Mind anyway it would have that sort of effect where. It's. Like with a shopping mall to, know how to get anywhere or to, understand, where. You are it has to be indicated. So. You. Know that's that's one way of doing things and there's, a lot of supporters for that and. This. Now. I would say area, instead, of Arion I know everyone's, been saying Aria today and I'd. Say, area which is weird because I'm I'm. A southerner, and I'm a bit posh so I tend to say ours. Instead, of Aires for, a lot of stuff so I'd say bar and. Not. Back. And. You. Can say Indiana Jones, in the Temple of Doom or back that should be Indiana Jones and the Temple of Dom but. Yeah. I've noticed today that everyone says Aria so. I'm going to say area another, say, Indiana, as well because, that's. Actually. The correct way of pronouncing it. So. This, time we're actually going to talk about what I originally set out to do and we've covered that sort of world card one layer first and, which, is to if, we're. Going to indicate. Where we are then, I think we should do that for everyone. So. How do we go about it so. The area labeled, we just put the area label actually on the link itself and we. Would put, something, current page or, or, active. Page or this page or something like that and. What we would get would be a, list, of. Navigation. Links which starts with home and then, on our active agent would simply read current, page if. There's, been the, attribute value then, blog then, contact, and. So. It. Does provide. At least some some, information. To, say that there was a link here and you, are you. Are here, whatever. That link it. You. Can pair it with CSS. And this. Is by, the way this ISM this. Is the an, important, part of this for me is to is to is. To have a way of doing this where you can use a selector. In your CSS which, like, I said before it's nice to pair state, with style and so. If you're using area label, the. Nice thing is you can just use that area label, attribute. Selector there you don't even have to have the value, it's just if the if the area label, in. This context, an attribute. Is present, than that that marks, are on our current page so you can base styles on that which is nice, it.
Ties Things together. The. Problem is that it overrides the links original text now when I first discovered, an aria-label. I started. Experimenting. With. It and did a bit of testing I, and. I. Think. Because of the voiceover, bug at the time I don't know whether that still present on. My iPad. Mini it. Depends. The area. Label text, to it and and then I got into that mode where you know sometimes, you use one screen reader and you think oh that's. How it works and then you assume or others do the same thing but actually that turns out to be buggy, and. What. Should happen is that, the area label and overrides. Whatever contents, in there so if if, it says about in the text mode an area label will supersede, them and replace it the idea being that area. Label would contain. Text. Which is clarifies. Better to. People. Using assistive technology. What's, there in the original text. There. Is also and Roger you're handsome brought this up in the comments for, that blog be a translation. Issue, well. Perhaps you brought it up on Twitter it's not really important there is also a translation, issue, if you think about it which, is that that current, page string. Is in the area, label, attribute, which. Is in the code, so. It's, not part of the text of the page so, when you translate the page that's not going to be translated I mean, it's not like you get the French translation, of. Of. A. Blockquote, and whatever. That would be or only you know the code isn't translated. And I suspect that unless. You use some clever JavaScript, and you know we want to avoid using Java for, this kind of thing as much as possible. You. Would have a problem there where it would say current page regardless, of the the native, language of the page after it's been translated. Just. A note on testing, there's a brief interlude here I do mostly, text with NVDA, and Firefox. Because. I find, that to be the, most. Dependable. Sort. Of combination. And I, didn't go on to test with them jaws. And. Illustrated. Here is a picture of jaw, which I test with a lot this, is and this is the jaw of a small I think blue shark or possibly Mako. I thought, this would be a good visual gag for this talk that I did at the last minute, and I, actually cut myself whilst, I am when I brought that out to. Play with and still. Not as bad as testing. With jaws the actual screen reader whether, in deep draw blood and they. Are always testing jaws and. So. Here's the third method this, is the, area to, area described. By, method. And. So. Um. Illustrated. At the top there is the CSS, selector so again. We, can we can tie. The. Accessibility. Of the, added accessibility. Of that thing to the style which would have otherwise been attached, to a class so we didn't have to manage a class and this. State or the property. Separately. And. Then, of course you'd have a. Dom. Node on the page which contained. That. Of. That, texture. And current page and you, would associate, those, two things together via, the ID the, good thing about this is that an area described, by does, in, fact append, the. Text, to the link which. Is really nice so you. Get home about. But, then there's a short pause. Write. Neatly, I thinking, in most. Screen. Readers that I've tasted with so, you get about current. Page rather, than blog and then content and, so. It appends text nothing is emitted you get all of that information there, so that's, good, and. As. I explained, you can you can still use. That attribute, selector, in your CSS. The. If. In the page can be translated, so that's that's, really good. Because. It's actually on the page whether or not it's actually hidden, and. I, believe. Even. If you hide. The. Text. Node. It. It's. Okay, and you. Know. Better. And so, there you go there's that problem. But. Does it scan correctly I'm not sure you. Have home. Abouts. Current, page that. Sounds sort of buckets and it could be a link, to somewhere within the page which then tells you about that page rather than telling, you that you're on the.
About Page if you tell me so, I don't, know perhaps the the wording Capisce change that that current pages in the right thing, but you've got to be careful. And, of course there's extra, markup. Innovation I think that's a bit of a sort of first world problem, a. Lot. Of developers. - a bit finicky, about that sort of thing might not like the idea that with. The navigation ships. This other dip which, would have to sit somewhere on the page and. Where would you put it and. It's. Messy, and I don't like it, so. You'd have to have that argument basically and, you. Know the, classic, argument the this, isn't this isn't performant, all this isn't needs or this isn't you know big readable, verses. But. It's accessible, and. So. Here's, the, fourth, technique and, still, not quite there I think a lot of those have some, issues I'm sure Thierry. Will tell you all about them, and. The. Inner, element is the, is. My. To go so. You can use some. Replace. The, link which is there with. The strong element the idea being that you could you, could add tabindex zero, so that it's part, of the natural tab order and you could focus it and read. That text but crucially. Although. It says you are here. Or. Well. Does it I mean it sort of says you are here by being what, was a link but isn't a link and. Does. That work I don't know. It. Is focusable. But. It's a non-interactive, element. That you're focusing, and as, a rule, that's probably, bad. Idea, you know it's probably it's something that wants to be avoided. Generally speaking. And. Again. It's, the consistency, issue, you, kind of really want your. Navigation. Landmark. To to be kind of consistent. Across pages you, don't really want to do I, think. A lot of users probably wouldn't want to see a lot of change in there a lot of manipulation, of what's, going on in there and you've. Got a list of items, inside. A navigation land. You expect them to be links. In each one of those items and so, that's going to be a bit weird and, be. A weird experience to some people. It's. Quite a lot of editing there as well.did you've got to replace the link entirely. And. Yeah. I mean when this was suggested to me someone said strong and because, they believed it was the most semantic, way of doing things but to, be honest I, didn't, know what semantics strong really, offers so here's, my rule of thumb if. It's not semantics, it's, not semantics, unless, it actually says, something, what. I mean by that is you. Can fuss, a lot about how semantic, things are and how appropriate those, elements are but if they don't actually communicate. Something. In. An accessible. Interoperable. Fashion then, you're. Not really dealing in semantics. Anymore.
Same. Con when people talk about the semantics, of classes, like, is this a semantically, named class that's, not really what we mean by semantics. When we talk about the web we're talking about what, a browser understands. And therefore can communicate, via excess, ability api to users, of all varieties, so. That's the rule of thumb you. Know, this, is a priority, of constituencies. Offered. By the w3c for a reason. Which. Is that you should consider. Users. First. Then. Authors. A next. Important, then implementers. Our next, important after that and then, finally, the you know this semantic theoretical, semantic purity of things and I think the difference between a strong or expand in this case really, goes into that territory of, who. Get, and. So, finally, and this, is probably my favorite. Way. Of solving. This problem this is the same page link. So. Would same page link. What. You can do is, you. Would. Harness. That, current link and. You. Would point it and to. The fragment, which. Is identified, here that ID equals, main, and I. Really. Like this idea. Because. It gives you a lot of stuff for free. So. The HTML. Would. Simply be changed, so that that, link, which previously. Went to the page about simply, goes to the main content within that page now. Note that. Although. You're replacing, the eval in each case that you replace it whether whether, it's for an app or home or context. Or whatever the pages are. You. Can use the same attribute, selector again so, that style, can be attached to a tree F equals, mailer attribute selector which I'm quite keen on so. It uses an existing, can convention. Which is really nice because when you focus, that link. It will announce, the text node about, and then say same page link and that's that's. An ancient. And very. Well established. You. Know. Way. Of communicating, that it's something that goes to somewhere on the same page so that's really nice we can harness that. You've. Got the CSS and the document semantics tied together again of course which is good. Very, little HTML editing, because you're just changing the, value of the atria. It. Does remain a link now, navigation. Blocks, don't. Have to just be, land. Nuts which take you to, other pages on the site it's. Entirely, conceivable that you would have a role navigation. Block which, went to all the different pages and have another role navigation, block on your page which, went to different sections within the same page. If. You were to imagine with. The PDA which, has its main navigation, which takes you to different places within, Wikipedia. Across pages and then, although, I don't believe they actually use, a roll of navigation, they could live, safely use role navigation, on the. Blocks. Of. Nested. Links, that, they have, at the top of their articles, whatever. Also. It doubles as a skip link so. The, reason that the main element, was conceived. Specials because of this. Heavily. Subscribes, behavior. Of wanting to get to the main content which is why we have skipped links at the top of our page to get us over all of the crap and. Banner. Adverts, and junk which, which, we've already waded. Through once, and and we'd like to do it again so. It's. Another, way it's doubled up that you know I'm not saying this very issue then therefore get rid of your skip link but. Now. If. That becomes a sort of a known convention, that's the sort of thing where you can get. Your dialog up go, straight to your landmark and then you you'll. Expect, to find a link which will take you to your own the main part of pages one. So. As. Part of this discussion originally. And I was talking to Leonie about M Aria. Current, and. She. Expressed some interest and I, couldn't, find a link unfortunately. So. Our. Area, current I suppose would be a standard, for doing a lot of this stuff and I. Don't know whether that would make it a lot better but the idea, at least proposed, was that you could do steps as well you. Could you. Could you, could. Use area current to. Determine. The current page that you're on but also the. Current step perhaps that you're on within a continuum, of. A. Continuing. With shopping. Cart. Screens. Or you. Know like multi-page, forms. That. Kind of thing and. If it's anything like Aria, controls. Will drop us an interesting, additional. Functionality, and for. Instance in Jaws and, you. Can. Really. Focus. On amendment, which. Has. An area controls, relationship, with something then, it. Will offer you. The ability to go, to that, element by pressing a key combination I think is jaws. The. Jaws P plus. O plus N or n or something like that and the, wonder whether that that kind, very, specific, behavioral. Thing which actually. Allows. You to do something, actually, do something special rather than just communicate, the special semantics, might be might, be interesting. That's. Actually, if on that I I'm sorry I haven't been answering questions, it's very difficult, to do that whilst I'm talking but I'm happy to answer several now quick.
Thing First, housekeeping. They only mentions, the. Area. Examples. Which. I did the thought they're. Not they're. Not actually, linked. To from my website, if. You want to go to them there's, the, URL there it's Hagen works comm slash practical, underscore, area under. Examples. Or simply. Search practical, area examples, and that will be there, the reason I've not linked to it is because their articles which are going to be integrated. Into a book. Which. I'm. Just. Completing, now and. 30,000. Words on, area. And, I can't even pronounce. It that, book, has, been reviewed. By. Nettle. Bloody Bartos, and aka. Steve Faulkner and he, made sure that I wasn't talking up my bum so, it's it's looking in good check. Oh lasting, Thanks to everyone who bought a rock-and-roll or rock and and roll. T-shirt, as well and it's the last day today on cotton. Bureau that that t-shirt showing all, of the profits I make from that are going to the RNIB, so, if you can't see a t-shirt. With a sort of a hipstery symbol, on it involving, a guitar amp please, get in there thanks to everyone who already bought one I know that a few, who you already have not. Really really, good of you okay, I am. Done. Questions. Cheers. Thierry. Area. Current, hasn't, actually been specified. Yet it's. It. Was a suggestion, which, they, only came up with to try and solve this problem and. Or. Perhaps some someone else came up with it and then and then she developed the idea. Thank. You Debbie. Okay. No worries much. Do. We. We. Don't have time for any more questions yes, that's okay. No. He didn't you tell him about 15 minutes there, are any more questions right. Right. Oh dear. He's got one I can see. I think in my testing. Yeah. I did. A code pen I might be able to find that for you now. Where. I, went, I don't have a screen reader running though on this laptop I'm afraid good, yeah no I, hit, the. The. Element. Which. Was. Associated. With the area described by wood display:none. And it. Still, faithfully. And speaks. That content which is I was, worried about it I told, that that would be an issue but actually it's fine. Or. At, least released, it was in in. Jaws. And NVDA. A CSS. Content property. Yeah. As. In pseudo content. Yeah. It's. Interesting I I. Think, it can be used as. It. It. Can be a really useful tool, in. Some cases and and, it can be a, real. Pain, in the ass in other cases and. Depending. On, whether. Or not you want something, like that to be announced, this, if. You don't want it to be announced the safest thing to do is to probably put it actually in the content, and wrap. It in a spam which has an area hidden on it or something where there yeah. Yeah, hi Jonathan, um I'm. Not sure I I really, like that idea and it. Does still change the behavior. Of what, was previously on another page and link to a page. I'm. Not sure uh I. Can't. Think of I like, the idea that it's. Another way of getting to the main content, and I, like how you can use a consistent and. The. CSS selector for it as well I'd. Like to I would like to hear any any. Okay. Yeah. I'd like. To hear some some. Others. If. Anyone, has any cons about it that they can they, can conceive what if I'd like I'd love to hear them because, I think it's really good and. Any. Of these things are also tricky because you do have to get in there and change the mark-up per page. Yeah. Daniel. Wasn't you came up with it on the blog I. Think. It was cuz it wasn't me, yeah. I thought so yeah, all credit to Daniel on that one. Yeah. When he yeah. Danny wheeler. Submitted. That idea and I jumped on it I loved. It I thought it was that. Was it that was the most sensible way of doing, and. I hadn't thought of it originally. Yeah. Well that's sort of what it's all about isn't it is and you, know that's the cool thing about being in a community of people who just, give. A about doing, these things and getting them right you, get into these conversations and, that's that's why I was excited about there being so many comments, although a lot of those comments will mine because I'm a gobshite and I can't shut up but yeah.
You. Yeah. Ask me anything done. Oh. Sorry. Yeah. Rewind. Yeah, we're looking for cons one of the questions was would you reiterate, what you thought the biggest conquer be when, swapping the current link with Maine that was Jonathan and we. Pretty much agree that there were few, cons that we could think of. There. Was another question, there. Was another question and, probably. Previous. Two, before. I'd actually finished, oh. Yeah. That's yeah, that's Steve's. Absolutely, right yeah which 80's use area current and, it's. Not it's not been specified. Or, or certainly, not implemented, yet yeah. As exactly, as he says, it's. Just an idea you know I. Guess, a possible. Future, enhancement. We were also talking about, and whether or not. Area. Described. By, if. It was associated, with a hidden element hidden with display:none would it still work and. In. Testing, it seems that mostly it does I haven't I haven't encountered a situation where it doesn't. I'm. Sending the current link to Maine Thierry. As serious now I have a second thought. Why. Sending current link to Maine. We would, possibly. Have a skip link which did that but then I see, no reason why that, link. Would go, anywhere else really I mean the main content, of the page is, paramount. And. I, think, that that would be where I'd want to go if, it was if. It was a link which said you all here I'd want to be in the guts of whatever here, is and. So that seems like the most logical place to go and and, I think any opportunity, to take people to past. All of the the decorators and garbage in adverts to that main part of the page is, a, good. Opportunity. So. Theories. Them, doesn't. Like the idea of having two links which go. Go. To the. Main the skip link and also the link within the navigation. I'm. Not sure I'm not sure I agree with that. It's. Point about duplication and. Perhaps. Benson redundancy, but, I think with things like that. Personally. I'd like there to be as many many, opportunities as possible to. -. To do - and provide an important action like that. So. Jonathan's asking what are the thoughts on using it as a hypothetical, attribute. The styling purposes for now or would you prefer we start atria. Equals. - link. Well. Href, equals hash, link would go - unless, you had a fragment. On a page, with. The identifying, link as its, ID. That. Would go that would go nowhere and I, wonder whether that would be confusing, because. Oh, sorry, you meant, hash main ok sorry Jonathan I'm, still, going on the. Clarify. That and. Well. This is yes so the, question is for. Styling purposes does it make sense anyway and I think I think, what's what's neat about it is that your time the style with, the function, so, it's form form. The follows function and I think that, when, we go wrong in doing, in trying to get things accessible like usually, where we separate, form and function, arbitrarily. Below. For no good reason and. And. I think it's really important, to take. Any opportunity to, to, make. Something which has a function, look. Look. In. Such a way that it elicits. An, understanding. That that. Is the function of it so you have the highlight, of the link in the navigation and, that highlight, is sort of saying here and then. Condon is you, know is as I said like the guts the heart of what here is. Yeah. It's like an unofficial area, currently it has a similar, sort of. If. I understand what you're saying there yeah I think. It's. Sort of similar. Well. I may be area is in this day I hate, to do this to hate him we're gonna have there to, wrap it up could. We have a good, another. Speaker coming up but we really I think, we all really enjoyed your presentation I'm, really thankful that you were able to be part of this special. Day with us my pleasure. Cheers. Carl I'll let you get on the thanks, everyone, it's. Been really cool and enjoy, the rest of GAA D or God, as. I'm calling it because I'm mediate see. You later.
2019-07-08