 Good morning And welcome to the accessibility first in designing learning material session Basically, my name is Rami and I come from the American University in Beirut That's obviously in Beirut, Lebanon That's like what 10,000 miles away So my biological clock now insists that it's like 8 p.m And I have to have dinner and then sleep So please bear with me if I was a little bit slow Moving on so What comes to your mind when you think about disability? basically We when we think of disabilities most of the 10 most of us tend to think about the extremes however, there are Different types of disabilities that we don't really think about for example, who of you suffers from hearing impairment and how about Color blinding Yeah, we got a couple of hands and who of you wear eyeglasses I can of course I can see some and how about Have you ever had a limp in the cast for more than two days? I know I have Other types of impairment might include as I said wearing eyeglasses and Of course ADHD and other types of impairment. There you go so basically The there are different categories of impairment and that include vision impairment hearing impairment motor impairment and cognitive impairments and Basically in this session, we will be focusing on visual impairments and how can we make our learning material and our moodle more accessible for people with mainly with vision impairments and specifically how can we make our Themes and our custom pages more accessible and Provide more pleasant experience for people who are using screen readers. Of course, we all know what screen readers about have have anyone here actually Listen to screen readers Okay, there you go So it can really become confusing when you are you know, if you just close your eyes and try just to browse your Model application or your web application or your learning material Just, you know by hearing what's going on and using your keyboard for navigation So why should we care? Well, of course because it is the right thing to do the smart thing to do and By the way, it's definitely aligned with The UNGC SDGs the United Nations global compact sustainable development goals too many acronyms here Specifically as the G number four and ten. That's the Quality education and the inclusion or equality And We are also legally liable so by law by with the ADA Is a board anti-discrimination law for people with disabilities and it has some titles specifically title two and Three of the ADA it affects web accessibility and you know closed captioning it has specific details on that and also the rehabilitation act section eight five or eight and five of four which deals specifically with web content accessibility and It mainly it applies to all federal entities and To entities which are receiving funding from federal entities and that's why we at Beirut are affected with that because we are an American University in Beirut and we receive funding from federal entities of course and That's why you know this also applies to us or so we are we are not in the United States We do have an office in New York, but that's another story. Anyway So basically there are Many types of Disabilities many types of impairment and there are many ways where you can modify your Web application your web tool your web content and your learning material to be to become more accessible So to what level should we be doing that? This is what what where I will be focusing in this session The W3C the worldwide web consortium they have written a set of guidelines which are the WCAG 2.0 web content accessibility guidelines version 2.0 which states What are the guidelines that your web content need to abide by in Order to be compliant to a certain level. So there are different levels single a double a triple a etc and They tell you what to do. What are the recommendation so that you can have your web content more accessible and Also, there are you know hundreds of tools online most of them are for free Well, of course for free, you know with specific features where you can you know just put in your URL To your learning management system and it will scan to tell you to what level you're accessible and to do that Things to consider when you're designing Your user experience to give a pleasant user experience for screen readers and basically this applies for dynamic HTML it applies for the course dashboard it applies for the assignments and Most importantly it applies to the model themes So the things that we need to abide to you know to do and to care about are things like header tags, so Smart usage of header tags will give better user experience for the screen readers and specifically Nesting header tags, you know the h1 h2 h3 etc. Heading one heading to heading three nesting them in a smart way that actually makes sense Will give users who are just hearing what What your course dashboard is saying for example, it will give it it will give it much better user experience And then we have the alternating text which is basically People who cannot see pictures The screen readers will read the alternating text which will not appear on the screen itself But it will only you know be displayed as voice for screen readers So we always you know for every image we make sure that there is enough description in the alt attribute of the image To specify what exactly this image is saying. What does it display? Why it is why is it here for etc etc? Moving on to link strategy That's also a way where you can You know you need to design your links in a way that actually makes sense to people who are just hearing so you can't say Click here and on the here There's just a you know a Hoover where it says the tooltip where it says what's going on because people cannot use that People with vision impairment cannot use that So your link would better be descriptive enough to tell people where this is going and also It applies for menus and nested links, etc colors of course And you need to give enough contrast to make sure that That this is clear enough for people with color blindness and For example, you shouldn't say that please, you know click on the green button The button has to have a certain description other than the color Designing of forms but that don't really apply to to a model or to reading material and then Avoiding tables for layout tables are a very easy way to organize your content. However They are so Unfriendly for screen readers, so you better do it using Dave's rather than having tables Lists so when you're typing for example an assignment Instead of when you want to, you know list three different things or three different deliverables Instead of just breaking or clicking enter We should use the HTML lists the UL and ally, you know, you can have this on the rich text editor and model Because they provide a much pleasant user experience for screen readers for people who are just hearing what's going on on this screen Keyboard functional side just make sure that you know the proper tabbing is there because people will be navigating your your page using Tabs using space bars and using enter rather than using the mouth the mouse itself Providing transcripts for audio files and captioning for video files. Obviously. This is mainly for people who who have hearing impairment and Obviously your content should be as readable as possible Well, let me talk about our trip basically an accessibility in moodle itself So what we have done is that we have applied all the WCAG 2.0 recommendation for a double a Website web content in moodle by modifying CSS files and by Making sure that our learning material is accessible enough, etc And then we upgraded moodle the theme to into a bootstrap theme, which is basically Which is basically Mobile friendly But the thing that happens is that the old theme For example, if you have a checkbox used to display the checkbox in this way and for the screen reader This is very obvious that this is an input tag and it's a checkbox and it says so and so But then with bootstrap checkboxes became list items with the specific classes and classes. They are not Obvious for screen readers. They do not pass classes screen readers just read the HTML of the page So what we had to do is to add things like roll roll is a specific HTML 5 Attribute which is mainly used for accessibility and we have used area who watches Game of Thrones No one. Okay. So yeah, that's not area Stark, of course It's with a Y. Anyway, so area is accessibility for rich internet applications, which is in attribute that that it is used for accessibility that has a lot of Usage, I'll you know just for the sake of time. I'll jump to one usage that we have for example if we have a course Which says that the course is science of uncertainty. The price is $649 which is a discounted price because you have a promotional code For example, and the original price was 739 which is Stroke now for a person who's seeing this it makes perfect sense. I mean the discounted price is here The original price is there. I know what's going on, but for people with Vision impairment that will I mean the screen will only read the science of uncertainty dollar 649.00 dollar 739.00 What we did is that we added The SR only so we added some some attributes to this where I say that for example A span that says discounted course validation price is $649.00 and this is only SR So this is only for screen readers it will not display for users But the screen readers will read it and then we hide it the other span which says $649.00 Area hidden so accessibility rich interpretation. I'm telling this screen reader that do not read this I've already told the screener what to do by using the other span and We're doing a lot of things in terms of digital accessibility Assessive technology training capacity. We're training our people faculty staff students and everyone to do that We're raising awareness and we're making sure that everything that we're doing is Sustainable we have a set of policies that we have developed Like the web accessibility policy course accessibility policy Institutional accessibility policy and procurement accessibility policy and that's basically what we're doing at at the UB I think we have a couple of minutes for one minute for questions I'll be available to share our experiences and probably share your experiences so that we can see how we can You know benefit from each other's experience in this domain So if you have any questions now Either no one was listening or I did a really good job here. Thank you