Who's that code snippet? A screen reader guessing game

Speaker 1: Hello everyone joining us and welcome to the latest session called Who's That Code Snippet? Just let everyone join in. This is going to be a fun and interactive one for you. So hope you're all still awake and ready Okay, while people are joining, I'll just let you know who we have here. So we've got, as I said, an interactive session with Laura from Hope Tech and accessibility expert Pavel. and where they will test your accessibility instincts and you will learn how to write more inclusive and accessible markup. So I will hand over to you both.

Speaker 2: Thank you very much. And I will share the slides. We have prepared um maybe you know the game uh Who's a Pokemon? We've kept it in that style. So we will show you a few snippets of screen readers. And you are gonna guess what the code snippet behind it is. Maybe just as a little preface, how exactly does a screen reader work? They're all a bit Slightly different, like same same, but different. I like to compare them to again in Pokemon terms the evolutions because they all work the same as a base But then if you pair them with different browsers or maybe you have different builds and also what operating system you're on, you get a slightly different output.

Speaker 2: Not that anything is like Not that one type is so much better than the other, but just that they are always slightly different. And here on the slide, for example, I've compared all the various um types of screen readers you can get NVDA, JAWS, Orca, Voiceover, Narrator to the different types of evolutions if you pair them with different browsers. Just to get a little taste of how they will sound like and how different they can be. Here we have NVDA on Windows in Chrome.

Speaker 3: Choose your starter Pokemon. Table with four rows and three columns, choose your starter Pokemon. Caption.

Speaker 2: So it reads, choose your starter Pokemon, table with four rows and three columns. Choose your starter Pokemon. And just as a comparison,

Speaker 3: choose your starter Pokemon.

Speaker 2: Oops, sorry. Here's what Joss would read.

Speaker 4: Table with three columns and four rows. Choose your starter Pokemon. Column one, row one, person.

Speaker 2: So it reads the same code, really exactly the same table, but slightly different because JOS also um navigates directly into the first column of the first row and will start there without repeating the caption again. The a bit more um theory behind how they work Is it because screen readers and any assistive tech device for that reason just access the code. So they just go into the DOM, the document object model. And based on what is written in your code, how well your code is structured, it will know what's on the website. There are different ways to write code, so for example, we do have semantic HTML, which this talk will be in part about.

Speaker 2: And here I've put it as like non-semantic HTML, but this is what you might know as having a lot of diffs and just cell divs, maybe not a button, but something that looks like a button and behaves like a button if you click it with a mouse. But Deep down in the code isn't really a button, and then the screen reader won't declare it as a button. So here in those screenshots, you're gonna find the DOM tree in any browser. Here you can actually see a difference. On the left side, we have the semantic HTML where you get a list attribute, a header, a navigation, a main section. So without seeing the visual render of the website, you can kind of imagine how it would look like and what the structure is and you get a good idea of what this web page is versus on the right side we have the non-semantic version

Speaker 2: where you just get a lot of text without much information of what it actually is, uh how it's gonna be styled on the website So semantic HTML makes code a lot more readable both for the developer but also to assistive tech. And then based on the dump tree That is where the accessibility tree is spot. So again, this is what we need with screen readers to actually access the website. Here we have again free screenshots. One time is the DOM tree with semantic HTML, we already know this one. In the middle we have the accessibility tree with semantic HTML, and on the right the non-semantic HTML version. So with the semantic version In the accessibility tree, we get a nice structure of this is a link, this is a heading, then this is a paragraph.

Speaker 2: It really gives you some additional information of what this text you're about to read is going to be. Versus on the right, you just get static text. It's static text, inline text, static text after one another. So this is where it really makes a difference. Again, for sense of tech, but also for the developer experience. So that was the quickfire intro. Now let's get started with the guessing game and our first example.

Speaker 5: Open the definition for Pidgeato button expanded has details. Pidgeato, Japanese, Pigeon, is a dual-type normal flying Pokemon introduced in Jet

Speaker 2: Ah, sorry. I think it's cut off.

Speaker 5: Generation I. It evolves from Pidge starting at level 18 and evolves into Pidgeyate starting at level 36.

Speaker 2: Okay, there was a lot of information about Pidgiato. So please if you have any guess on what the code behind this is, put it into the chat. We'll play it again so take your time.

Speaker 5: Open the definition for Pidgeato button expanded has details. Pidgey Auto, Japanese, Pigeon, is a dual-type normal flying Pokemon introduced in Generation I It evolves from Pidge starting at level 18 and evolves into Pidgeate starting at level 36.

Speaker 2: Any guesses?

Speaker 6: Yeah, we do have some first messages. Um I'm trying to get to them to read them because it's turns out to be a bit

Speaker 1: people are asking if they can see the definition list again to select from.

Speaker 2: The examples I showed before aren't all the examples we will be going to. We're not spoiling anything.

Speaker 1: Oh no, that was Helen's guess. Definition list was the guess.

Speaker 2: Oh definition list. Okay.

Speaker 1: And the Wikibase. There we are, they are coming through.

Speaker 2: Mm-hmm. An

Speaker 6: accordion of an expanded section is another guess Shall we slowly be giving it away or do we give it another thirty seconds? Details.

Speaker 2: Okay, well I will show you what the browser output is. Maybe that will solidify some guesses So we have a heading saying flying Pokemon and their definitions. The pigeon here, the picture is not included in what the screen reader read out, by the way. But this is what we used as a source code.

Speaker 6: Mm-hmm. So Should I explain a bit more? Yes, please go. That's the one I I picked. So the the key detail in this example was indeed has details. ARIA details, it's an attribute that points one element to another one. So for example we have um an accordion button here Um and this accordion button references a paragraph that is further down the page and it contains the definition. Um I personally found this example interesting because I believe with the right implementation

Speaker 6: It could serve as a way of providing longer alt descriptions because how many times were you thinking, is this a description uh good enough? Is it long enough? Is it detailed enough? And then to make a compromise maybe a short one in out would be great, but also a longer one somewhere else. There used to be the long desk attribute. available but it has been abandoned. But ARIA details seems like this kind of attribute that could be used for this because uh you hear the basic description from the out first And then what the screen reader can do is it informs you first of all that the item has details, which means it references and another element might be a P element might be a details element as well with another ID or a list of IDs and it can

Speaker 6: Do either of two things. So different screen readers do it differently, so it's great that we discuss it here. NVDA can only read out what's beneath. So it will only read out the contents of the referenced element. But JOS will actually move you there. It can take you there with a shortcut and then take you back to the element that made the reference. Here, however, is a special case because as you see we have never we haven't used any ARIA. We use the popover attribute. And what the popover attribute does is uh for you all visually it pops out a nice window I guess on the side. Yeah but what it does for me is it establishes an implicit ARIA has details relationship with the contents of the popover. So whenever I use a popover

Speaker 6: element on a button and reference in the popover target the ID of a P element or any other element really , then first of all It creates an accordion by itself so already the button becomes uh expandable and ARIA expanded is applied on it so I can tell it's expanded or collapsed. I can expand it, I will hear that it has details, so in NVDA I can read out the details with a shortcut straight away and in JOS I can move to the item that is referenced. And also for keyboard navigation it places the contents of the popover in n in as a next item in the tubbing order. So you can just uh tap away from the button and you'll be right at the paragraph that is being referenced. So it's uh ARIA details immediated by a popover

Speaker 2: So our guesses with details weren't too far off. And I also see in the chat now that um there was a question if the image was marked decorative. No, it was just part of the slides. But In theory, yes. It if it shouldn't show up and it was part of the code, then it would be marked decorative.

Speaker 6: I would argue a bit as a blind user that if I read an article about Piotto, I would I would love to hear how he looks like.

Speaker 2: Yeah Actually looking up um the the Pokemon for the stock I'll I compared a lot of bird Pokemon and I still haven't found the one that looks most like a wagtail, but that's something where you would actually need a description.

Speaker 6: Yeah. Okay. So

Speaker 2: moving on to the next example. Now we're getting into the question which Pokemon are you?

Speaker 5: Which Pokemon are you? Form grouping which of the two Pokemon above are you? So

Speaker 2: get ready to guess. I'll play it again for you.

Speaker 5: Which Pokemon are you? Form grouping which of the two Pokemon above are you?

Speaker 2: Any ideas? Or are the Pokemon to distract?

Speaker 6: Form form element with two radio options. Not sure if something else has one. Multiple choice multiple choice table, form field group

Speaker 2: Oh pretty solid options. I will reveal the browser output. Again, charizard not included.

Speaker 6: With radio happening. Field set legend, which of the two?

Speaker 2: Two more seconds to decide between field set and legend.

Speaker 6: Combination of guesses that have already been given. Okay, I think we're ready, are we?

Speaker 2: We are.

Speaker 6: So you are all many of you were right, that's indeed a form with a field set and some radio options. However And I know it's a lot of information. The screen reader reads a lot of things at once. It it does it to me every day. So welcome to my world The tiny detail that made this example interesting is that it said which of the Pokemon are you form? How did it happen? Because not every form is announced like this. This particular form has been labeled with an aria label. When you label a form, for example, you make a less than form and an aria label or title attribute is put into that. It creates the form or establishes it as a landmark. So it's on equivalent terms with main

Speaker 6: or footer or aside or nav. Which means that I can navigate to that form From my screen reader straight away skipping all the other content. This is quite useful on web pages where the form is accompanied or is placed under a heading which contains a lot of text, like informatory text, before it, and also when the form is used frequently. My favorite example is a train company that offers assistance for passengers with disabilities. And they offer a form and they have a heading, and under the heading there is plenty of explanation how this particular form should be filled in, there is a lot of instructions. And then um

Speaker 6: yes, and and then then indeed um the form can be found. But if I But if I uh have the form um I use it like every day or every week as so long as I book the travels. I don't need this information anymore, so I can jump straight to the form itself. Um there are some questions, uh for example, if the ARIA label and the legend would be read out twice It was unfortunate for me to compose this example in such a way that both things are called the same. I should have called the form something else. I'll give it another area labeled, then maybe the example would be a bit better structured. But um Yeah, it depends what is put in the area label and in the field set. I mean the form

Speaker 6: doesn't have to have to begin with a field set. So it can also begin with uh with an with an with an input text for example and then you hear which Pokemon are you and your name for example and then edit field so that's what would be read when I navigated Another question is if the H1 would be read out twice. If you navigate straight to the form with the landmarks, uh or if you actually found the heading first, no, actually you hear the heading first Then you hear some text that is below the heading, and then you hear that the form announced with its accessible name. And the same is true when you navigate straight to the form using the screen reader shortcut. You will hear only the name of the form being announced.

Speaker 6: I hope that's all that that these are all of the questions answered.

Speaker 2: I think yeah it was so let's move on to the next one because we have some more examples for you. So get ready, listen up.

Speaker 3: I choose you. Deleted minus. Deleted Pagetto. Inserted plus. Inserted Charizard.

Speaker 6: Can you maybe turn it up a little louder, Laura?

Speaker 2: I will do my best to do that.

Speaker 6: Okay

Speaker 3: I choose you. Deleted minus. Deleted pagetto. Inserted plus Inserted charizard.

Speaker 6: Yes, there are some suggestions with the Dell and INS tags. Markup of a div with Dell and Instax. Mm-hmm.

Speaker 3: I choose you Deleted minus. Deleted gajetto. Inserted plus. Inserted charizard.

Speaker 6: Diff output

Speaker 6: Should we be roughing it up slowly?

Speaker 3: Deleted Gagetto inserted Charizard was so happy to hear that. deleted Pagetto inserted Charizard was so happy to hear that.

Speaker 2: Ah, sorry.

Speaker 6: Yes, exactly. That's the You're back. Oh

Speaker 2: no. Um okay, where did I cut off?

Speaker 6: You played the example and then we heard nothing more

Speaker 2: Okay, but that is not ideal. Uh the deleted Pegetto inserted Charizard.

Speaker 6: Mm-hmm.

Speaker 2: Yes, so as I was talking to myself, um, this is the same thing, it's also deleted and insert, but this time without the styling. So you get directly deleted pejetto, inserted Charizard within one line And sometimes this is something that can vary between screen readers. And I actually presented this exact same example about half a year ago with a different screen reader with voiceover build. Where it didn't read out the delete insert part, it just ignored it and gave you Pujeto Charizard was so happy to hear that. And then you wouldn't know who was actually happy to hear that. And the very very last example I have is something a bit more exotic. Maybe some of you have already seen that before.

Speaker 2: Once more. So this is actually a voiceover recording. And maybe take a while, guess if you've seen it before. Because it's one that is not so often in use, but it is still semantic HTML. So it's kind of the wild card for today. Yeah.

Speaker 6: Japanese with Ruby text is one suggestion.

Speaker 2: Anyone fan uh throw another guess in? I 'm overveeled uh browser output. So it's Japanese text. Then with the Furigana, the little connotations how you actually pronounce it in Latin alphabet. And you were correct, it is indeed the Ruby. So this is something that I've like you obviously use this a lot with Japanese text, um especially also not just within paired with Latin alphabet and uh the transcription. But also within Japanese websites, if you use any

Speaker 2: lesser known kanjis or spellings of names particular, then it is something that you usually put the Ruby on top, just to make sure that the reader knows what it is, how it's spelled. And how to Google it maybe in case. So to wrap things up, how many did you catch? And we've also brought a list of survey uh resources that we'll be posting in the chat We will also be um linking we have a whole playlist with all of those examples. We will also be linking those.

Speaker 1: Brilliant. Thank you very much both. Way over my head, but I think all of the front-end developers were loving it and had really good guesses and questions. And with some brilliant questions throughout as well. I don't think we've got any extra ones. But if you are happy to share your slides so that people can access those resources as well in the main lobby, then maybe anyone can ask any extra questions that they have. as well before we all head over to the um final wrap-up.

Speaker 2: Definitely, yes.

Speaker 1: Thank you very much both.

Speaker 6: Thank you.

Speaker 2: Thank you so much.