Hey, good afternoon, everyone. I'm just doing a little. That, work and then we will be ready to go. Oh, thank you all for joining. Hmm. Okay. So I am. So in 2 59, so I'm gonna give another minute or so for my moderator to. What folks in? So I know quite a few of you on this list. So all. I'll do short introduction just when. Everyone is in and after we get started. So yeah. Alright, so I am showing 3 o'clock and I know we only have 15 min. I mean, 15 min excuse me. So I will go ahead. And get st
arted and if my moderator feel free to let folks come in. As they went like, so I'll go and get started for those of you that don't know me. My name is Jennifer Maxwell and I'm the coordinator of instructional design. And compliance at community college of Denver. And I'm going to talk to you today about how to make form language courses more accessible from an HTML standpoint. Okay, the gist of this. So, It's it's a little bit more on the technical side, but I wanna try to make this as simplist
ic as possible for you also. I don't have to try and teach you every one of you. Yeah, HTML skills in 15 or 15 min. That's not the idea here, but rather the idea is to be able to recognize. When there's a change in the language. So that's Why we're doing this, primarily. So just to. Yeah, give you a minute. Step back on this. Is to the reason that we're looking at this specifically within different documents and files. Within our LMS. Which is our school is D too well. The reason we're doing thi
s is because Alright, introductory foreign language courses. It's not always. A single language. Within one document or one file within the LMS. And as you can see. From this. Assignment description here. We are jumping between English and Spanish Right, regularly within this document and throughout much of this. Content and activities. That's what's gonna be happening. And so the issue with that for screen readers is for those of you that have dealt with foreign languages before, what happens i
s that then if we don't do these steps. Then the same is text here gets red. With a English accent and pronunciation. So it just sounds like gibberish. There's someone using a screen so The reason for what we're doing is to. Not only tell the screen reader what's happening within the entire document. But also looking. Piecemeal at what's happening in each. Line of text because, if you know HTML at all, then you know that for example, HTML documents will have a broad. One primary language that Bu
t when you have a foreign language class like this. In the NDP well I'm just gonna open that editor and my toolbar. So that you can see here How we have quite a few language changes. So typically If this document were. In Spanish we would tell the browser to set the language to all Spanish. But because we have. Some. Transitions between English and Spanish. We need to. Differentiate those and Again, this example because there's quite a few. Transitions that happen. And there's typically. Within
these courses, there's 3. Instances where Alright, you'll need to make changes. So the first one I'm going to. Demonstrate to you here is online too and we'll talk about more about the code. In the minute but online too, we have this. Awful. Word that's inner mixed within and. An English sentence. And then we have. Another snippet of Spanish text at the end of that line. So we can't tell. The browser and the screen reader that the whole line isn't Spanish because it's not. So. So this is sort of
the case one. That I would say that you'll find in these documents is that there's little words or snips or phases. In another language. And just to take it a little bit broader again, you know, this coding here. Will work or any language. So it's basically You could have a, you could have an introductory German class, you could have an introductory. French class. It would just be a matter of tagging it with the right. Language codes and we'll talk about that again in a second. So, and again, a
nother example. That you might have. In, You're HTML text is where. An entire. And this one, you know, doesn't have it, but let's just say that. Line 5 that whole line. We're in Spanish, then we could tell our code. That that list item. Wasn't Spanish and we would use this. Going through the slaying attribute right here, this laying equals yes to denote that because that's saying that everything within this tag. Is in Spanish. And then. The third example, if you will, is when You get later in a
course like this or you're in say a second semester course. Where. The primary language of the course or the documents become Spanish or French or German. Then you would let the script. And you would have to do. The primary language as. Spanish and the And then in that case then. Something turned to English. Then you would use those. Tags. And that would be, So that's just sort of a broad. Stroke of this. So I'm gonna go ahead and. Close this one for right now. And then just tell you a little bi
t. Or show you a little bit rather. About language attributes. And it's TML. Because I think it's important. Do have this. Resource at your fingertips. So I have a big fan of these w 3 c school. Tutorials very good for. Helping you. Learn a little snippets of code because again, I'm not trying to have you You know, learn it's, in the day here, this is more about making language. Code accessible. So. As you can see this This talks about the language attributes. And as you can see there's some exa
mples in here that are really nice. Let's go to the next page. So, And then you can, and then the other piece to that is the, the language codes. So in HTML. There's different codes for for different languages. Country codes everywhere. So in in English, for example. We have, and, and Spanish is Espanol, so it's Yes. So again, we go back to our handy, w 3 c schools. And then here's a nice table of. Iso codes for pretty much every country in region. If you wanna get really fancy. You can even cha
nge dialect. So. If you, and again, that's more for typesetting. In a lot of instances but if you're wanting to Use a certain dialect of Spanish. And there's different tags for that. And this document will go over that for you. So, this is a resource. I'll go ahead and drop that in then. For all of you. So you can have that. So what? So basically, The other thing to talk about here, let me go ahead and. Oh, there's a chat. So here's the So here is the. Link to the country codes. To pull these up
. And then I can also go back to. Getting the HTML. Code just for the language. Attribute in general. One more record. So yeah, so here's a little bit about the link. And how it support or the link attribute. And how it's supported in each browser. So, and copy this. And then we'll go and paste that in there. Alright, so that's those are a few different a couple different resources. To check out. As we go through this. So let me just buy a chat out of the way. So. The next piece of this to look
at. If we go back to our HTML code here is, Let me go back to. Assignment that had. The Spanish language in it. So we'll go back to this source code. And, look at a little bit more of. The anatomy here of. How are you using? The, in the app and the link attribute. So another example I wanted, oh first of all. The first example I want to show you is using the span tag. So again, if you are somewhat familiar with. HTML. The span tag is just one of those tags where If you need to style or. Apply a
specific attribute, a language, a color, in line styles to some piece of text. Within your document. 10 you can encoding what we do it we call this encapsulation you would encapsulate the word or the phrases in this link or the span. Tag and then again the link. Attribute is. Here and it's equals ES. For a spaniel in Spanish and the nice thing. About d 2 l Is that it's HTML editor. It's a lot more robust. It has color coding and. Hi, to help us see where we are in the code. So if I back that out
. And delete the link attribute. I can actually. Start typing and press enter. And it's like a lot of code editors. Where I can type. At symbols and tags. And it'll give me nice auto-complete. So it knows that. We're specifying a language here within this text. So as I'm typing. It can. Hey, it can pull up all the different tags for me. But obviously it's worth going back to these. Code Make sure that you're using the right. Country code for your text. And as you can see, There is some delineati
on in English even between what we have and Great Britain and British English. Versus US English. So like I said, you can really get in to the weeds. Oh, we're looking at Spanish. So, boom, there you go. You don't even have to memorize, you know. Like the quotes and you just have to know the basics of okay, I'm wanting to set the language here. And here's how we. Do that. So, another example. That I highlighted a little bit earlier is. When we have. Something that's already within. A different t
ype of HTML tag, whether it's a list. Or a heading or paragraph. We can also. Apply the language attributes. To that. So what do I mean by that? So, we have this B-tag here, which is one way to bold. Something in HTML. And because this whole Fraise is in Spanish. We don't need to put a span tag in here. Because the only thing that is, in Spanish is that, bolded item. So what we can do is. Rather than putting extra code. Of a span tag inside the fold tag. Which would work. But we all, but you kno
w, on the code side, we like to keep it. Clean and simple. So. What we can do is. On this B tag. We just added our language attribute. By starting to type it. It popped up. And then that way it's saying from this point. Everything that's in both. Is also in Spanish. And so we can see that closing. Or slash B. So, that means that you'll be, done with, that code that folding and the language change. Ends there. So That means. Like we talked about a little bit earlier. In the description in the pre
sentation, let's say. This list item. Was. Staying if we could also. Use our language attribute here. Oops, and just have the space bar. And then it does our little auto complete. For us, we get link. And then we can do equals. And then start typing. Yes. I can come down here. And boom, there's my. There's my tag. Obviously this text. Is in English, but again. Anything that has tags around it and. It's TML. That is in a different language. We don't have to go in. And have 2 types of tags. Wrappe
d around that. But, sentence or that paragraph. So that's a bit of an overview of. This. I'll go ahead and. Flaws and give you all a chance to Awesome questions, feel free to. And mute yourself. Or either type in the chat, you know, I'm low vision. So, The hand raising is a little more. I might miss it so feel free to speak up and ask your questions or comments and chat. Alright. So. That's a little bit of introduction. To this. The next thing I'm gonna show you and I'm just gonna. Grab this cod
e for simplicity's sake. Is the other reason. And Jennifer, before we get going, we did get one last last second question in from Pamela. Just saying this would take so much time. Do you know if our colleges expect us to be able to do this? And then what's, what's college are you at, Pamela? FRCC. Alright, front range. Okay. Yeah, so that's something that we're that we're working out. At the system level, and depending on what sort of support you have. I don't know if K is in this group to speak
to that but I know it's CCD or trying to provide some. Professional development. Oh. Dana, I think, did you say you were doing this? For the. Alright. Yeah, hi, Indiana. I'm doing this for the whole Spanish. Offering that we have through the early childhood education. I don't know Pamela in what department you are. I'm the instructional designer for just that specific. Program because I'm contractor. I work full time for CEO holder. And are you? So I think you're an instructional designer and t
hen Pamela, are you? A part time instructor or what's your role at Hi, I'm full time faculty. I'm a lead faculty for online Spanish and Chinese and I don't wanna do code at all. I just, and being honest with you, to me, I'm hoping that there's somewhere. Like this would be kind of nice to have an idea of what someone needs to do, but that someone is in me. Right, right. Oh, and Yeah, and Cap, thanks for bringing up that point. You know, as we move to HSI, yeah, that will be very important. And t
he other thing about this. And, for those of you that are in our college system. And you are using d 2 l. All of you familiar with the product idea exchange in the bright space community. It's a great resource. Yes. And the reason I asked that and If those if you aren't, I would strongly recommend getting involved in it and you just have to. Sign up for the bright space community using your institutional email. And the reason I say that is because they have one tool called the product idea excha
nge. And through that you can make suggestions. And 1, one to Justin that me and a couple of learning designers made at CCC online was to rather than going into code. You would have a language button. In your Wizzy Wade editor. So what that would mean. Rather than having to weed through a bunch of HTML code. What you could do is. Click on the option. So say we wanted to. And then when the little too far here. Say we wanted to make these. 2 words be Spanish. We would have. Either a language drop
down on this toolbar or on the editor toolbar up here because when you click bold. All right, or underline or color or some other attribute. All that's doing is of flying that line for that code, that language code or that bold code or that underlying code. All this, all these buttons are doing is applying that code on the back end. So we proposed that they. That d 2 l add a language button on here. So to Pamela's point, you don't have to go in. And. We through the HTML, you can just highlight s
tuff and say, oh, this is Spanish. This is friends, which again is still time consuming. But it's probably less of a headache. Than going into the code if you're not as comfortable. And then Robin, I saw something flash by, what is your question? It's how to screen readers read foreign languages and word documents or PDF files. Okay, so that's a similar process as well. Is you set up? The the language. As you set up the languages. In either Word or PDF. But that you get a little more that graphi
cal interface. To go into the menus and say this like this document. Has Spanish or French in it. So it's a little more. Intuitive, I want to say then, D to L, unfortunately. But, again, those documents. Have their own challenges for making them accessible in other ways. So that is a good question. And I can definitely send you more. Resources. Yes, thank you, Kap. I'm glad you're on here. Provide. More specifics too. So yeah, yeah, that's definitely true. And, you know, I could send you some mo
re detailed resources on that. I'm sure. And then, in your role, since you're out front range, like what processes have you been doing? Well, you know, we were glad to work with anyone and to help. Remediate their own courses. We're glad to walk you through things. If you do have students with disabilities, we're glad to go ahead and create access to your documents whether you want us to do the train the trainer model where we're training you how to do it or if you're if you need us to actually
do the full. Work on it as long as it's for a student with disabilities. We're glad to do that. You know, as we're moving forward. Hopefully that's something our accessibility center. Once we get one up and going, we'll be responsible to do. Yes. Yeah, yeah, thank you. I'm glad they're willing to collaborate on that as well. And then getting back to where I was going when I copied all it and. Thank you. Diana for. Posting that resource. I appreciate that. I always like to share knowledge. So wha
t I'm gonna do is Go back into one of these. Modules here and just create a new file real quick as a demonstration. Because the other using that we want to try to use this content as much as possible. And, . 2 is because We have the built in reader called. Read speaker and Some of the tools in that are able to. Go back and forth. And change languages but not consistently so again It's good to. Have your. You know, have your tag set properly and that RED speaker is really nice. Because it can, it
allows students regardless of whether they're registered. With their disability services office or not. Er, let's say they're on along commuters and they link that they can go in and pull up the read speaker. And if you can just bear with me here, I'll. Show you. Oh, that would. Okay. I'm not, how that would read. From the student perspective. I'll just go ahead and. He says code in. And save it. And another just little side plug here is Hey, in order to create accessibility. We also develop th
ese templates based on the DTL accessible templates we branded them and tried to choose. Fonts and colors that were high contrast. So. That's another little thing that's going on here. To make it more accessible. So just saving close this. And then again, the other thing. That we now have going on is, you to Panarama, which as a whole other. Tool that's nice. So if you're in the system, I recommend piloting it and I know some of you are, but for the purposes of this. Spanish, that You will now w
rite your own short biography. 200 to 250 Palaveris. Primer. Parafu. Introduction and your past. Name. When in where you were born. Significant Life Events important events in your life in chronological order. No descriptive details. Use expressions like tomato, mastarve, gwendotani and ummirs, Luigo, in this place, or a new Merrill Onions, etc. Segundo Parafa, your current life. What are you doing now? Present. The third barafo, your future plans. Use expressions like VOYA plus Infinityivo. Pin
sel plus and fifth. No, as you can see, I wanted to give you this example because I wanted you to hear what it sounded like. Things were, properly tagged. And when they aren't, so as you could see, this one doesn't have this Spanish tags on it and read really badly and within the English accent. And pronunciation. As opposed to these words. Up here. So at the end of the day, this is why we're doing this. And then of course, screen readers like. Reading right, NVDA. Would also have that same. Cha
nge and pronunciation. For students. To utilize and here. So that's That's why we're doing it. It's not just. For the little Bye, credit marks or things like that. It's actually so the software. Will read things correctly and a variety of This is assistive technology. So, the other thing I wanted to point out too, and we just organically saw a little bit of this is. Anywhere. That you have the Wizzy Wig editor or. What stands for what you see is what you get. Anytime you have that tool. We can d
ive into the HTML. And apply those tags. So. So that applies to discussion descriptions. Assignment descriptions. Like. Web pages here like this is another example. Of. Where? You can pull up. Web pages and apologies. But here's another example where it. Switches between. English and Spanish. And it's within the DTL HTML template as well. Okay. Be in Beneto, Sala, Classe, the Espanolos, Passono, Creo, video paraprescenter, Tiola Classi. Contest is theas Prauntas, Komote Jamas and D Donderes, as
well as to pro-numbry personnel, poor case to the SS Spaniel, Kikiris comparative to share. Onto companions parts of the And I wanted to bring up this example because again, this is one of those. Cases I talked about where much more of the document is now in. Spanish. Then English. So we actually. And so this one is actually. Where we would use it where it says to share, that's where we used. The waying equals EN. Because within this entire sentence. The primary language was Spanish. But then we
need to go quickly, let back to English so that. That light switch if you well for languages. Goes both ways. So, yeah, so that again, that is something that, becomes probably less and less important as you get higher and higher in your language courses because eventually you know it's going to be all written in Spanish or all written in I'll written in French and then at that point. Let's do that would probably just set their screen reader to that other language. SET, D, to all to that languag
e. And off they would go. So, yeah, so these are some. Examples of that and again just to recap sort of the 3. Hey. If you will are when you have an entire document. That's 1 language you would just set that at the very top. And then the next case would be. Is if you have an entire line of code that is another language and I'll bring up the code. To show you that. Then you would use. The wing attributes. On that entire line. Of code. So as you can see, we, set that entire line to Spanish. Versus
having to. To chop up. Different sections of the text. And then the last case being. Where, let me see if I can find it. So yeah, so online 9 of the code. Where it switches to English for like 2 words to share. We actually applied the the English US attribute to This chunk of text rather than. The entire line because then at that point it was implied. That this was Spanish. So those are kind of your 3. Basic cases. And again, to, Pamela's point and other instructors, this can be very tedious. B
ut that's where, you know, instructional designers like Diana and myself and Thanks more on the accessibility. Side. Can assist with that. And then, you know, again, really out voting this. Highlighting feature. In the product idea exchange So that. You can just click on things and set them the Spanish just as you would bold. So if by moderator, could, I'll pause right here again. And then. Yep, and there was actually a question, Jennifer, going back to editing in the HTML there. The question wa
s, wouldn't it be prudent to add a span tag around the entire section that is in Spanish instead of just each individual line? Yes, and that's yeah, that's definitely an approach that you could do as well. And in that case, you know, you might want to use a, for example, because that could. Encapsulate an entire section of tech. So that's a great question. As you get into those higher level language classes, yes. You wouldn't have to go line by line. And then as you saw in this example, if there
was a couple English words thrown in there, you would just. Tag those as English. So that answer that for you. Oh, great. Awesome. So we are getting near the end. So I just wanted to see, are there any other? Questions or thoughts. Or ideas to share in that chat and like I said, Phil free to speak up and I love that we're all sharing ideas here and resources. Because we can't know everything. So. And thanks, Kath, for the. Resource. Yeah, so anybody feel free to speak up or? As post in the chat
. This is Robin at PCC and You know, I've been through a lot of presentations, between yesterday and today. With using AI and some you know some people have talked about even using AI for scripting. And I kind of wonder if you couldn't. Experiment with, using AI to go through and maybe do. Some of the coding for these lines. Robin, great idea. Yeah, that's a great idea. Well, if somebody comes up with that formula, let me know. Yep. I think you asked it to go ahead and identify Spanish and wrap
it in line tags. Write appropriate HTML 5 code. I do that. Yeah, that's Yeah, and that's basically, what I'm wanting, d 2 l to do is to add a button. Up here that can do that for you. At least as a first step. So that, you know, the first time adjunct instructor that's, you know, teaching 10 classes can focus on their teaching and not having to learn. HTML but yeah I I do like that Robin that they go I'll do a little research on how you can automate. Scanning this document and then putting in th
ere. Appropriate code. Yeah, and Robin, I'll add to that. I actually do some of the editing for accessibility at front range. In the, design room or crew and I actually use chat GPT if I get into a jam where I'm just not getting the wording quite right. I'll throw it in there. The one thing I caution is just make sure that there isn't any content in there that you're institution wouldn't want you to be sharing and you can kind of make that, leave that part out. But it's also if you're using d 2
l, it's worth mentioning to the AI that you're using Bright Space Editor because it's a little bit different than just straight up HTML 5 and it knows bright space and will adapt for that. Oh, that's great. Good point. Thank you. Well, chat GPT on the fly, just forgot to put in line tags. But I just asked it to do valid HTML. It was able to do a short paragraph in both languages, but it didn't go ahead. And do anything other than repeat in both languages. I'm asking. Hey, do you add the co-cath?
Cause I do that quite often. But I don't put the you know, what we see in the pretty, version of the of the error I actually take the code straight. And I feed that to Chat GBD. Absolutely. That makes sense. If you already have the code, I just asked it to do it on the fly. Got it. When I asked Tags it did. And even put comments. Around it saying this is English content. And this is. Spanish content. Oh good. Yeah, well. So on the fly, it did fine. I mean, it wasn't anything complicated, obviou
sly. Yeah, and it's worth noting too that. That these language tags are not, we're not invented for accessibility. Things rarely are, unfortunately. Alright, so originally the link. Attributes for Oh, oh, well, look, I can't talk at the end of today. Allowed you to bring in that, extending character sets but the diacritics and various foreign language accent marks. Right. Right, so and then accessibility, this was a side effect of that, if you will. So. It's worth remembering that. Oh cool. Than
ks for posting the code. And then, mmm, moderator person, what was your name again? I go by mouse. Okay, cool. So, and then will we have access to the chat logs from these? To everyone to share. I believe so the. The video itself is being recorded so that will be available and I'll check and double check to make sure that the chat log is saved as well. Yeah, cause that'd be great. So it's always good to share resources with everyone. Yeah, so looks like we have about another 3 min here. Were the
re any other? Thoughts or. Comments on this like I said I would highly encourage all of you that use d 2 l. To go and then. You know, give the, ideas of incorporating AI. And buttons. So, and then lastly, are there any Native Canvas users in this group. That have been have had similar or differing experiences in Canvas. It's very similar. But as you know, the HTML editors in Canvas pages are kind of like the ones that you have in d 2 l for the description of, modules and so modules is not a full
HTML editor. Like you have in the pages in the 12, so it's a little bit more restricted. Like, Okay. Alright, so in those instances. Where are you? Do you have foreign languages? What are you doing in those cases for assignment? Yeah, I I work with the, department. As a holder. So we take care of a lot of Spanish and Portuguese. Courses so when that happens go in that my instructors don't have to do it cause and the instructional designer for them, like go in there and take care of that for the
m. But like I said, many times canvas don't like what I do, I'll wipe my code out. Oh no! Yeah, well, DETAIL is a little bit friendly, that aspect, cause I work in D 12 program range that Yeah, so you get to play in both and play around. That's kinda nice. Yes, I do. Yes. Interestingly enough, I, I was, I started in Canvas and I found Canvas to be the friendlier tool. But. Maybe I just learned to get over my barriers there and haven't. What to be fair when it comes to the end user and you know l
ess text heavy users, definitely Canvas is more friendly because it's is a little bit simpler but when it comes to like you know creating more complex stuff that might be more accessible to other users, the, gets me the better tools. I started actually with blackboard. Hello. Oh yeah, me too. Yeah. Yeah, I started with Blackboard, then Moodle, then D 12 in Canvas. So yeah, I've been jumping all over the place. Okay. Yeah. Yeah, I bet I bet I'm old enough to remember Blackboard too, like any of i
t before that Web CP, like show of hands, Yeah. Well, you know what, city an hour? Oh my gosh, that was, that was painful. You can see well. That's good. Yes, that was bad. So yeah. It's come a long way in LMS. So. All right, on that note, unless there any more very pertinent questions, it's, it is time to wrap it up. So are there any more pertinent questions? Okay, thank all of you for attending the conference and helping out and being a, contributor as well, Jennifer. There is a survey there f
or anyone that would be willing to take the time and just let us know. Your thoughts and help us to improve for the next one. It's just right there in the chat. Thank you, Jenny. Sorry, this was awesome. Thank you. Alright, thank you all. For coming.
Comments