Good afternoon, everyone. Thank you very much for coming to this session. I appreciate it. My name is Hadi Rangin. I'm a member of IT accessibility team and my primary responsibility is to make sure the software that we develop here on campus or we purchase are accessible. I work with a lot of on campus designers, developers, as well as third party vendors. I think that is, I think that's enough, my introduction. So, one thing that you want to know that I'm blind, it happens that I'm blind, and then I will use this technology. I use a screen reader as, you know, on regular basis. Occasionally I use it also for testing and evaluation, but we will dive into a discussion if on how and under what condition we can use a screen reader for testing purpose. Today we will be discussing a little bit about the differences between functional and technical accessibility, then I share with you how and what we can test, and then talk a little bit about the screen reader, and what type of screen reader we have, what kind of screen reader we have, and then things that we have to consider before testing, and then toward the end we dive into real use of a screen reader for evaluation and testing. So, what is technical accessibility in technical accessibility we focus on the, the coding practice for the particular element. For example, we see that if it's particular button or, you know, menu or text box or whatever. The coding that has been done is according to the standard. It ensures that any user, including mouse user assistive technology technology user can interact with that element properly. As you know, as you understand that it does not give us a holistic view of the page, it just tells us if that particular element that we are investigating is is is accessible or not. On the other side, the hand you know for the functional accessibility focuses on the functional task that we can complete a task from a to Z. For example, if you consider and sending an email and you want to know that and that that function if you consider sending an email as a functional task we want to see that if user can discover the compose button if they can to the can I see the to field or CC field and then type their address or can navigate to the body of the email and write the, you know, his or her text, and then send it successfully or not. So we consider the entire functional task in functional accessibility. So, this will give us a holistic view of the overall task that we have. Putting these things together, technical accessibility is required is necessary is we need that but for functional accessibility. We need to make sure that the entire process as well as the individual elements are accessible. Things that we want to consider before diving into testing. As much as you know many people they try to minimize that I personally think to provide to do a kind of effective testing and evaluation. We need some familiarity with the coding practices and HTML and then are your coding practices. We want to focus on functional accessibility. And then, you know, meaning that to complete the to focus on their functional task associated with the applications that we are testing. I think there are a lot of accessibility testing tools that we could utilize it to get some data about the technical accessibility issues. I just wanted to emphasize that the technical accessibility is required, but it's not sufficient, and this accessibility testing tools or evaluation tools, they can get up to, you know, if I want to be high, you know, on the optimistic side I would say that maybe up to 30% of the technical or simple technical accessibility issues for the more complex accessibility technical issues we need to do that manual testing. And then security there can really potentially help a little bit. Now, when we are testing that we need to differentiate between our personal preferences and how it has been done. Yeah, so that is also important that we test that objectively. And then, sometimes when you're running into some pages you see that know they have some kind of work around solution for certain people. One of the things that I was sharing with some of my students this morning was that just, it was a real example, it was some interactive charts, that's one of our entities one of those user entities, ask us to evaluate. Now that you know they have interactive charts so you could get a lot of data through it by interacting with the mouse with it, but as alternatives they provide an alternative solution, just gave a flat summary of of the chart that we were dealing with. So, and then they, they, it was not even close to what a real user could get from those an interactive chart. So I consider those stuff, those are the no flat, all text for the chart as a kind of work around solution, and this is not acceptable. So we should try to make sure that every user they have say same quality of the experience. Okay, now think that we want to consider now is a consistency. So, so far you may say that we are not touching the screen reader consistency we want to see that that there is a visual consistency. So one consistency, visual is clear but functionality consistent. We want to make sure that for the same type of interaction for the same type of communication if they are either use the same technique. We can go into some pages or some application that we see that for just simple, simple questions like gender, you know, then the site in one place in one page they use, you know, a combo box, and then gave it for a male female or do not want to disclose. On the different page, same in the same domain, they are using a radio group. So this inconsistency is important because as user dive into your page they familiarize with the page with the layout of the page as well as the technique that you are using. And once you use the different tools for the same function. They do cause confusion. Proper user element that is important, you know, we want to use button for as a button link as link and then you.  That is an important part of the testing we want to make sure that there'll be the keyboard user can get to navigate in the application can get to all those possible elements and interact with it. And then as we are testing that we want to make sure that users should always be able to see the focus indicator so they should never ever blame their eyes for for access that they do they cannot see they cannot see their focus indicator unless they are blunt. Aria landmark is another component of your landmark is in one of the most effective implementation of audio and widget that we have, you know, well, can we set a widget that we can attribute that we can use other landmark they help screen reader to understand the, the infrastructure of the application the framework of the application and see that what are the major component of the page. So once we do that you know we want to make sure that the, that we have that the integrity of our landmark regions throughout the domain. And then we have no orphan content often content we refer to those content that they are not encapsulated in a particular landmark. We have seven predefined landmarks.  Another landmark type we call that complimentary search form, and maybe I missed one. So, some of these elements, some of these landmarks they should we should use it only once in our pay per page for example banner, we have only one banner, and main, which is where the main, the main content information goes there is, you know, it should be used once per page, but navigation or other type of landmark that can be can be repeated but wins once we have multiple landmark of the same type we need to provide a meaningful label. For example, if you have to type to navigation bars, one on the top on the left, you want to provide a label otherwise user wouldn't know which landmark is which, which navigation language speech. So heading the structure we use it in the structure for the, or to structure the content. Again, we separate content from the application framework. We use heading for the content. And then that is one of the basic accessibility elements that we need that. So they should be hierarchical logical meaningful and complete meaning that every part of the page should have a meaningful grouping can't imagine how important it is to group the relevant items as a proper list element and ordered list on order list or definition list. And then that you tell user in advance that here you're entering an area with five items. And then, with that, that that user can see the beginning of that list and end of that that list. And if they are not interested is going to be the program they provide functionality to bypass that segment all together. In graphics, we check for the graphic and graphics is something that we, this is again another basic poster child of accessibility. So we want that any meaningful any, any image, any that that provide convey any message should have a meaningful and all text all text is providing good all text is an art. And then so it requires it. You know we need to have practice, we need to practice to provide good alternative text. Of course, again another complicated it can be a simple as radio button or a simple button or checkbox or they couldn't could be also complicated widgets. Like a menu like expand collapse or the disclosure or cancel and other complicated widgets. So we all we check that for the error handling, you know how program the application handles errors we purposely generate some errors, and we want to see that the user can discover and recover from that. And then we talk more about the basic things that we check. So, type of the screen reader that we have in the market in the North America. In Windows, we have nvda we have jazz, and we have narrative jazz is a commercial one. So from the beginning of windows, and then cost money. nvda is a free. And then narrator is the built in screen reader from windows windows has neglected the narrator for many, many years but in the past three years they really worked on hard on it and then they made it better. So for Mac, and then iOS, we have voice over. And for Android we have talk back. And what a one of the institution that has been focusing on accessibility for many years. They have been conducting accessibility. They have been dealing with the usage in the past years. Unfortunately, after 2021 they haven't done that but this is a kind of a statistic of the, you know how many, the market share you know how many, how much, how many people or how many percentage of the blind user are using which type of screen reader jobs as of two years ago it was 53. Yeah, and then nvda was about 30% and then voice over was about 6%. And then I have a link also to the source for the case you are interested to study by yourself it is a lot more information than what I showed you. I want to emphasize the screen reader is not for everyone screen reader is made for the screen reader user and then then and this is not something that you easily is like you like not switching from Chrome to Firefox or Safari it is a lot more than that you user need to learn a lot of how to understand how web works and then how browser render the information in an accessible way. So, do not, you know, if you are not, what I'm saying good. Come back, come to me and say that you found some problem with screen reader. Very likely the problem is, is you because you are not using a screen reader properly or you haven't configured that properly or you haven't switched to the right mode. So this screen reader, especially jazz provides a lot of functionality to compensate for the lack of accessibility features in the page for example you know if a form element doesn't have any proper label jazz is looks around the surrounding area and see that the closest text and then consider the closest text as a as a label for the four elements sometimes they guess for guess correctly sometimes they don't. That's why it is very difficult to rely on a screen reader. I just want to use this opportunity to tell you that on May 18, there we will have global accessibility awareness day and then we are having a big event, lots of discussions, please watch for the program debate. And usually we have some in depth session about the screen reader, or other accessibility exercises. So, now when we get to the screen reader program you know you see a page as is you see all those visual elements you'll see the all those spacing and the relationship between items and all those graphics colors those stuff. I mean, as a screen reader, look at that page all those information are gone. We do not see those information we do not see the spacing we do not see the visual relationship between elements we do not see the color. The same visual relationship that you build is gone. So we don't see. So, what is important in in accessibility of HTML pages is the structure that you build behind the scene. So, we do not see against the page in the way that you see a screen reader, they render the page in a mode that we call linearized or virtual mode, linearized or virtual mode, or some some screen reader program they call that browse mode. Practically it put the page in a kind of read only mode, and then it renders the information from left to right top to bottom.  And when I talk elements, it means it could be a static text, it could be a button, it could be a menu button it could be a table. For example, will be rendered in each cell will be on one line. So security there can easily read down the page, but the order that they read this is from left to right top to bottom. And that is the most difficult concept of understanding all the screen reader works. So but remember these two term or this this term browse, virtualize or linearized mode. Practically, the each element is extracted and power and then put on top of each other. And then skim reader can read the page and understand that so if you make something and a heading that attribute is maintained with that element so I can see that for example, the University of Washington. This is a text, but skills you tell me it is a heading one. I can see, for example, there is a graphic. It said the graphic, but the graphic might say with all text and on to students talking. And then I can go and see a table, but it tells me this is a table before I enter the table area it tells me it's a table with three rows and five columns. And it renders each cell, one by one. So I see that for example column one header column two header column three column four five followed by the data cell. For example, you know, data cell one data cell two and so on. And yes, in that mode when everything on top of each other, we do not see the relationship. The structure is behind the scene. So skim reader provides me with some mechanism to interact with the table. Even they are tied on top of each other, or built on top of each other. But behind the scene, there is a table. So it gives me the option to use a special navigation keys to to navigate in the table go left top to bottom and if the table is properly made. So if I go to a particular cell, it reads the cell value followed by the column header. So I know exactly where I am. And what that specific value is associated with. So the same thing with the list. I mentioned that earlier when you are reading a list it turns your list of for example five or six item and then you can set up when you arrow down you see the item one item two item three. And along the way, if you know that I don't you don't care for this group of items and all you can press another shortcut key bypass that please go to the next bigger object. So page discovery is difficult. Especially if it is not done properly, if the is not accessible. So we use techniques if we use for example landmark navigation, and then to see that hey what are the major component of this page. And then once identified the main region where the most the main content should go. When I find it, then I check for the headings. And those headings should provide some structure, some some information about the page. Once we are in a reading mode, or really linearized mode or visual mode, so I am adding for synonymous for there are synonymous. So linearized mode, virtual mode, browse mode, reading mode, all of them are the same. So, depending on what screen reader you are using, they use that. On the other hand, we have also we call that application mode or form mode or interactive mode. I'll set the same in the active in the form mode or interactive mode. If you take level or mode, I mean like you see on the screen, you can only tab to the focusable element. If, if you have some static text, and that text is not focusable. If you press tab, you will completely bypass it. So you do not even as a screen reader you do not know there you missed something. So that's why it is very important that that was for a screen reader user to be in a reading mode to discover the page to discover hey what we have here. And once they familiarize themselves with the page, then maybe in future visit, they can be in the form mode or interactive mode, and take care of the business. But usually when we go to a page for the first time, we might need some discovery. Okay, now to get good with that question. So what we use for testing the answer is the, as we say in German for this. Yes. But remember, this is not designed for accessibility testing. That is an important factor that I always thought that you can use it to verify an issue but not to determine issue because once you start determining issue then you will be very disappointed because some of those issues are related to screen reader because screen reader is not doing the right job, or user has not configured that properly. So, and then you should never use it for the keyword of operability, because screen reader give you an extra power to, how do you, how do you it's Anna Marie we're at 30 minutes. So the, how double timer. I appreciate that. So, it is not the screen reader but something keyboard user, you know, cannot focus on a particular element, because developer has not made it so. Okay, but screen reader, since they have this reading mode, they did virtualize everything. They are able to go to the able to go to those elements. Okay, these are additional recommendation here that the, what I mentioned earlier you need a little bit more knowledge about HTML and to be able to determine some of those issues and understand which issues. As I mentioned, there are screen reader. No, there are accessibility testing tools, automated testing tools that they can extract or give you some information about the ticket all issues, but you need a little more knowledge to understand those issues to be able to explore more. So, we will be sharing this screen these slides with you there are some I call that screen reader survivor command. So, it is about, I guess, I did not include I did not include for my voice over for so for a screen for jazz and MVDA. So you can use you can see some of these basic commands. I go to this page shortly but again wanted to emphasize that before we dive into the demo. Once we are in a reading mode or virtual mode. Remember the page is linearize left to right top to bottom. And then we see the attribute for each element, along with the page along with the name of that element. And that mode, when you type anything in the screen reader intercepts that and then it tries to interpret that as a command. For example, if you are on a page, and then if you type age, it searches for the next heading in the order. If you press for example, be like the BS boy know it just searches for the next button on the page. And then you can search also the reverse mode with the shift, and that command for example shift age takes a search as for the previous heading from that for your current position. When you get to those pages you will see that I will be using some of these commands. Now, this is accessible. This is the first so I just to make sure that everybody is awake. I am going to turn on the audio sharing so we can can hear my screen reader program. I am going to ensure and leisure sharing sound screen sharing the controls. OK, now wake up everybody accessible university them accessible university sorry that accessible university. You'll start a screen share, press F6 to switch between opens and windows, visitors button collapsed. Okay, I am going to slow down the... Slower. Slower. Live transcription, left parent close, slower. Visitors button collapsed. Is it too fast? Listen. Main menu navigation region end. Main region. Brute start 104. Feedback, is it too... Partis, an old brick building reflected in the glass exterior of a lot. Is it fast? From Karen Crow, she slasher to everyone calling it so fast. Is it still so fast? Slower. Slower. No, I don't want that you fall asleep again. An old brick building reflected in the glass exterior of a lot of modern school. Brute end 104. I've got comments in the chat, how do you that say it's too fast? From Patricia Shetley to everyone. I don't want to hear a snoring. Slower. Next button. List of four items. Slide one button. Current from Anna Thompson to everyone calling act director. That's a good speed, much better. From Karen Crow, she slasher to everyone calling much better. Much better. From Alex Clark to everyone calling that's a good speed. That's a good speed. Good, Alex, I heard that. Wonderful, so we get that. So we make sure that everybody is awake. Accessible university demo. Okay, I want to sample page that we have been developed with in eight years and use that as a kind of platform for training. Here on this page we have one fully accessible and one. Accessible university demo site-in accessible version. This is inaccessible version. Windows app arrow and snap assist running applications. List escape. Press escape to escape. Be the John left parent. She slasher right parent. Left parent code dash. Host right parent. Escape. Accessible university demo site-in accessible university demo site-in accessible Windows space. Engineering checkbox not checked. Escape. Escape. Engineering checkbox not checked. Accessible university demo site. Has Windows removed alt space for maximizing? Somehow it is a kind of mess. This is an inaccessible version. Visit Seattle Washington vertical accessible. And this is an accessible version. I am being told visually they are almost identical. But first I show you the accessible version. See that how I discovered this page. I discovered this page, you know, by first. Same page accessible university demo access. Same page heading level one graphic. Looking for the aria landmark. I want to say how this page looks like, you know. What is what? So skin with a gizmo command. I mean list of the going for list check for the list of the landmark. Document regions dialogue. Regions preview banner opened. So it tells me we have a banner. One demo site menu navigation. One of one banner. Zero main menu navigation. Two of five. Main opened. One slide show carousel. One of two. Let me close everything to show you the top level. One. Zero banner. Main menu. So the top level landmark tells me we have a banner. Main menu navigation. We have a main menu. Main closed. And the main which is the main content area. Apply now complimentary information. This is a complimentary information. Content information.  Okay. So if I am interested. Apply now complimentary. Apply now section. I can first enter. Enter. It moves my focus right there. So the beauty of landmark is that, you know, it not only shows me that what the what are the major component of the page. It also helps me to navigate to desire section in one quick, you know, jump. And then, but if I want to explore more. I can. Accessible university demo site dash access. Here I'm going to press letter H for heading. Accessible university level one graphic. Hotty. Sorry. This is Gaby. I don't mean to interrupt you, but we we've got a split screen situation here. So we're not able to see your the entirety of your web browser. So they can do you and can somebody take over and then fix it? Ah, yeah. Let me see if I can take control here. Definitely. It was not intentional. Gaby the job is waiting for Gaby the job to control your screen waiting for Gaby the job to control your screen. To me it seems like a completely perfect page. Gaby the job is controlling your screen. Accessible university demo site dash accessible version document. Okay. Hotty, I think we are ready to go. Thank you very much. I appreciate that. Okay. Same page link skip the main content. Sorry for this site conversation. So I am pressing H. Accessible university heading level one graphic. It takes me to the next setting. I press H again. Welcome heading level two. It takes me to the welcome and H again and be ready for Spanish. So in the content, we mark the content to be a Spanish text. So screen reader on the fly can determine. The main can identify. This is a Spanish text. So immediately on the fly switches to a Spanish reader. So if I read down accessible university. I have a parent. This is what Sierra parent. This is a university official. Yes. That is a part of the fiction. My Spanish is not that good. Okay. Okay. But I guess those of you know that you know that it is versus Spanish. So what if I continue to get out of the Spanish text and I press H again. Can you spot the barriers heading level two? It switches to English again. Continue. AU enrollment trends heading level two. And sometimes if you think it is difficult to follow by HHH to go to the next setting. We can call the list of the headings. Heading list dialogue. Heading list view. Can you spot the barriers? Call it to be in veneto. Call it to welcome. Call it to accessible university. Call it one. So you see that tells me this is a heading one. The number on the right indicates the heading level. Welcome. Call it to is heading to be in veneto. Call it to. Can you spot the barriers? Call it to. AU enrollment trends. Call it to. AU video. Call it to media player. Call it free. And then when you set a tree. Then I make that conclusion. This section is a child of this guy. So media heading gives me a good outline and the relationship between sections or between headings. So these are the really power of the headings. And then I can tell you how in impactful they are simple. Very easy to implement that, but at the same time, very useful. So the page that I had in if I copy that for you, for example, 3350 escape. You make sure that parent their endorsement. CNS left paragraph. Quick settings dash 3v1. REST mark lands highlight indication on page load. Windows space us. Allow web application reserve. Virtual ribbon menu checked. Virtual cursor verbosity level medium document setting one. Virtual cursor options dot point allow web application. Select and copy from virtual cursor document set escape. By 3350 copy that and go to notes that not even enter notepad app. Press right to switch preview note. Edit that accessible universal skip to accept demo list. Oh, before app. As you see, this is how we see the page. As a security that that is a linearized or reading version of the page about. As you see that I mean, this is impossible to understand that. On even if there is a structure is not there. But thanks to their structure, I can understand the page. I think almost like everybody else. So back to the page accessible university demo site dash accessible version. We looked into heading between looked into the accessible university demo site dash access. A landmark and then if I want to, for example, go to the same at the list list list and demo site. Menu navigation region and off. And then interact with those menus. I have to switch to interactive mode because type of those elements are interactive elements. Accessible unit manner region. See that the info link. Main menu navigation region list with four items about button collapsed. Academics button collapse. I am interacting with my keyboard. And then pressing enter expanded expands that list with four items degree AU faculty link. Distance learning link. If I press escape, I expect that it closes. Escape academics button collapsed. He goes back to that menu because right through key admissions button collapsed. In the next one. Enter expanded. Open it. List with four. I gradually the other stuff. If I am pursuing escape admissions button collapsed. And if I press tab key visitors button collapsed. Main region slideshow region previous button takes me to the next section. So, or if I show you a list, let me see that if you have a list yet on list of four items. You probably read that element again. List of four items is that list of four elements. Slide one button current slide two button slide three button slide four button. And when we get to the end list and it said that list and so it marks the beginning of each group and end of each group. So, as I said, mentioned earlier, when I am, for example, the slide two, when I say that I'm not interested, I press a shortcut key. It move. It takes me completely out of this list of this list. I'm at the end list and I'm ready for the next big object heading level two. Welcome. Then I'm just welcome section. So, the, about how what tables. 11 columns and four rows. The following table shows undergraduate and graduate enrollment over a two. I pressed letter T. It searched for the next table here. And then using some special navigation command. I can navigate in this table. And let's do that together. Land row two. Last year English column two. Last year economics column three. I don't say anything because you can see and hear. Last year physics column four. And down. Yes. It's Anna Marie. We're at 45 minutes. Thank you. And then I go down. Undergraduate seven hundred forty seven row three. I go left. Last year economics seven hundred twenty seven column four. Last year English four hundred column three. So, this is the last year English was four hundred. Last year computer science fourteen eighty one column two. So, thanks to the accessible coding. You know that that is the result of accessible. You know that accessible. Accessibly made page. But. To practice a lot of some of those things that we have learned. If I press, for example, B. Play button. It searches for the button respond to the next button in the order. I press B again. Play button. Another belay. Restart button. Restart. Rewind button. Revind. Forward button. High captions toggle button. I think I don't need to repeat it because you hear. Turn on descriptions button. Show transcript button. So, but if I press, for example, look for this checkbox. And for this screen, either the checkbox command is X. Desired major left parenth, right parenth, colon, group, computer science, checkbox, not checked. X, it took me to that checkbox and I press. Space, apply now complimentary region. Desired major left parenth, right parenth, colon, group, list with six items. Computer science, checkbox, not checked, checked. First is the unchecked button. The change it's miles is the check. I press the space bar. Space, not checked. And space, checked. Check. I do not, don't remember we have any radio group here, but I type a search for the next radio. No radio buttons. No radio button. No radio button. Okay. If I check for the graphic, I can either search for the next graphic in the order or bring up the list of the graphics in the page. Select a graphic dialogue list. An old brick building reflected in the glass exterior of a modern building. These are the graphics used there. Creative commons license. An accessible university. And so, and so now let's do the same experience in the other inaccessible version. Accessible university demo site-in-accessible version. Accessible university demo. Now, if I type, for example, H for heading. No headings. It's a no heading. Even visually you can see something that resemble a no heading, but no headings. If I check for the table. Zero columns and zero rows, not a table. They're endorsement. They're endorsement. CNS-1 wrapping the top 11 columns and four rows. Column one, row one, blank. I am in the table. Blank row two, end column two. Epo column three. You see that? High column four. It doesn't expand those things if I go down. Seven hundred forty seven, row three. Seven hundred twenty seven, column four. So it reads a number but doesn't tell you what year and what subject this is related. Same table, right? But one of them, the first one was done with the inaccessible version. Accessible format of accessible coding. Yeah, it is not. And when I bring the list of the, for example, graphics. Select a graphic dialogue. List one, list view of one hundred twenty. Carousel slash slide one. Horizontal line graphic. Okay. Horizontal line, horizontal, horizontal line graphic. So you see that? I mean, useless alt text for those graphics. For us or create, for us creative commons license. And then it is more in this page. We purposely made sure that it is not very accessible. It is one of the least accessible version. Or when I get to accessible university demo for one hundred twenty. If demos list a list of Spanish text. Visit a curl. Accessible in this office section accordion veneto. Okay. You see that I'm in that section. But accessible university. That left there in the right there in the university. That fictitious. Why is that super? Gina. The vision. It reads Spanish. In English, Spanish text in English. So because this section has not been labeled. Or with we got the proper length or language. Attribute. So these are the screen reader. I mean, stuff that we tested. But as you know, if you come to global accessibility on this day, we make sure that we will have some sessions. On how to use automated checking tools. To identify some technical accessibility problems. But this time, I think for this session, we don't have time to look into that. But I encourage everybody to watch for the program details. And then come to that global awareness day events. And we will have a lot of fun activity there, including checking the website using accessibility tools. Now here is, I think we gave you enough about how is screen reader. We can use it for testing. And if I show you the list of the accessibility features, really some of the accessibility. Quick settings, dash cross. Some settings. 3-0, virtual cursor 1. Smart glance, I allow, select and copy. These are all screen reader functions or attributes. Or just, this is really a fraction of it. Not all of them. I think at some stage I counted it was something around 600 functions that you can manipulate to optimize for your page. So if you are a novice user, you probably wouldn't be able to utilize them because you do not understand them or you do not know what is the best option for you. So make sure that if you are a user, testing with a screen reader, you use a real user with some knowledge of accessibility. So if even a screen reader user beginner, screen reader user beginner, a beginner user, they do not know how to customize their screen reader. So watch, be careful when you are testing that. So because you might get a lot of false positive results, we usually end up checking the code, going to the inspector element and then examining the elements for accessibility before we compile an issue with the page. So it is 1.52 pm. 52. Wow. Usually I don't give any chance to put questions, but we have eight minutes for questions. We are open for questions, please. That was a long question. If I understood correctly, I am hearing the chat through my headset. If I hear inquiries, there were two map, two elements. We are using a webinar, maybe an American you enable audio, so we can hear more about the question. Yeah, Mel, would you like to go ahead and unmute yourself? If you want, otherwise we can go with what we understand. This is Mel, how's my audio? Loud and clear. Oh, great. Okay. Yeah, it was a long question, I apologize. So you said that there are two elements, one to the map, one was to the other one. Yeah, one looks like a map and the person filling out the form is expected to grab a virtual pin off the screen and drop it onto the map. And then the other one is it looks like a blank canvas and you're asked to draw a picture to help explain a situation. So you can either draw using your mouse or I think there are like some drawing shapes on the screen that you can maybe click and drag with your mouse to create a picture, a visual picture that you can submit that when you're filling out the form. They're not requirements of the form, but they're still on the form and I can't think of a way to make those accessible. I don't know of any alt text that's going to make any of those things accessible. They're very graphic in nature, but maybe I'm not thinking of something. So I'm wondering if my advice to the web developers is to remove those things altogether. Again, without really looking into those elements, talking about that without context is very difficult to answer that, but I'm glad that is optional stuff, but we need to ask them, what is the purpose of that thing? What they want to convey with it? What they want that user, what is again the main purpose behind that? Because once you ask the designer, develop those questions, then they don't have answer. Some of them really don't have answer. Many times, many, many times, I ask designer or challenge designer with their creative ideas and they say, what is the purpose of that? And just they say that it is cool. I mean, being cool, having a cool thing there, it is not the good rationale to add it. I can understand that. For example, in a GPS, you want to drop the pin on a certain location and get direction, but for that an alternative method is just to type the address or type the intersection. Or type the GPS location for that. But without having any more context about that activity, I really do not know that. But this is definitely a very difficult thing to do. We do not have always a reasonable accessibility solution this morning. My colleague Dan and I, we were participating in a meeting with another university that they had questions about some of those cybersecurity the power class issues that they had and some of the activities. Yes, some of them are completely accessible, drag and drop. It is technically accessible, but how many developers know the technique, the proper technique to do that? I do not know that, but there are not too many. But again, it is important to know that the reason, the rationale for that stuff, and then those elements and then come up with an alternative solution, but by itself, drawing as a keyword user, I mean, skin reader user or like a keyword user, how you can draw, maybe some certain limitation with maybe a key. Keyboard can give me some up and down and left and right, but is it what they want? Sorry, don't have any clear answer for this complicated question. From El Toy Left Paragy Slasher Right Paran, CCER to everyone, Colin, that was very helpful. Thank you. So question, how many of you are developers? Or too many? Can you raise your hand and then Annamarie, can you tell me how many of the audience are developers? So far we have one hand raised. One hand. Zero, virtual cursor option. Any question? 158 p.m. One. You don't have question? I tell you, I mean the from Karen Kroche Slasher to everyone, Colin, will the recording be available on the accessibility webinars page? I'd like to show it to my teams. Karen, yes. If I heard your question, yes, it will be available. I think we are recording that. Annamarie, yes, yes, we are recording. And then Annamarie will be sending a follow up email and then share the link with you. From Karen Kroche Slasher to everyone, Colin, thank you. There's no more question. Then I wanted to, I would like to wish you all a great afternoon and thank you for coming. And then from Accessible, remember to come to Global Accessibility Awareness Day. We'll have a full day of interesting accessibility activities. From Meltoy Left Paragy Slasher, right parent, CCER to everyone. Annamarie, I missed it. From Teetana to a few, the last chats. From Dahlia Highland. Again. Oh, we've just got a lot of David Slasher, right parent. Okay, I put the link in. To everyone, Colin, thank you. Okay. I put the link in. From Lisa Lefer, Paragy Slasher, right parent. To everyone, Colin, thank you. Adi. From Robin Fashita, everyone, Colin, thank you. My pleasure. Thank you, everyone. Again, for coming. From Cassidy Roche to everyone, Colin, thank you so much. Stop recording. We do have one other question, Adi, from Patricia. Patricia, do you want to go ahead and state your question? Yes. Sorry to get this in late. So for those of us who aren't necessarily developers, like I know a little bit of coding and sometimes I need to tweak something and I can check something. But when we're using something like WordPress and it's just a blogging platform, when we select something like a table and we put that in there, where you're just, you're not coding the table, you're using, yeah. So I'm assuming that WordPress has all of that. It's all accessible when you're doing something like that. Is that correct? Yes and no. I mean, if we stay within the template that our office, I mean not our office, but it's called the communication office they provide. I know that they have selected carefully those plugins that are accessible. But I am really not sure that every component that they have created or that you find in the WordPress market is accessible. Yes. So it is really important that I think for some of the known widgets or so of the plugins that are used in again, in UW template, they are accessible. But if you search and come up with other plugins, I really do not know that they need to be tested. Okay. Okay. Got it. Thank you. Welcome. Thanks for coming, everyone. Have a great rest of your day.


to finding your piece of the rock on ThinkTech OIE. I'm your host, Abe Lee. I've been licensed real estate agent since 1973. I'm the owner of Century 21 I Profits OIE and work with close to 100 wonderful real estate agents. I started Abe Lee seminars in 1980. I have been privileged to teach over 11,000 students to help them get their real estate licenses and have continued education to licensees to maintain their license every two years. Our show is dedicated to helping buyers and sellers understand the process involved in a real estate transaction. Our special guests will talk about legal issues, escrow, title, getting a loan, survey, home inspection, insurance, contracts, rules and trust, and much, much more. Today, we were supposed to interview a wonderful person from the escrow industry and titled in the tree, but she got sick yesterday and texted me and said Abe, I can't be on the show today. So I asked the powers that be at ThinkTech, can I be my own guest since I don't have a speaker at the last minute, and I got permission to do this. So you're going to see me interviewing me. So it's good or bad. So I'll let you be the judge once we finish the course or the discussion. I'm going to be talking about several key items that I think people should know, especially on Oahu, but it applies to different islands with just a different name or title. But I'm going to be talking about what they call the Ohana properties homes, accessory dwelling homes or units called ADUs. And then I'm going to talk about the zoning issues on the zoning table that we're going to be showing you on the computer. So this should be fun because a lot of people say, well, what can I do with my property? And they really don't know. And so I'm going to hopefully shed some light on this for you. And in fact, let's make this a game here. If you can answer about 70% of the questions that I asked in this show, email me at ably1948andgmail.com and say, hey, I got 70% or more right. I'll take you to lunch or breakfast. So that should be fun. And this is on the honor system. All right. So first question. Who was the mayor that promoted Ohana dwelling units in Honolulu? And what year was it? Who was the mayor that promoted Ohana units in Honolulu and what year was it? So the answer is Mayor Eileen Anderson in 1982. And she promoted what would they call the Ohana units? It used to be called excessive dwelling units and the law in the state law. The legislature mandated that every county shall allow more than one house to be built on certain zone properties. And so Mayor Eileen Anderson promoted it through city council and got the quote Ohana law. So it wasn't really only for family, but everybody thought it should be for families. So in the Ohana law in 1982, if you had say a 6,000 square foot lot and what they call R5 zone, that's residential minimum lot size 5,000 square feet. Now there's other zoning destinations which I'll show you on the chart later. And we have R3.5, R5, R7.5, R10 and R20. So those are three different zoning areas. So the number stands for the minimum lot size, like 3.5 would be 3,500. R5 would be 5,000 minimum lot size and so forth. So on any given lot, residential lot, the law said you could put a second house on even if you didn't have double the land area that's normally necessary for the zoning chart. So the Ohana law said that you can put a second home and there's no size limit. So if you had a 6,000 square foot lot, normal rules are you can get 50% of the land area under the roof. So 6,000 square foot lot, you can put a 3,000 square foot home. And then if you have the right setback, you could go two-story and build a 6,000 square foot home on 6,000 square feet of land. So the density requirement was double, sorry, 50% of the land area. So in this case, R5 zone, 6,000 square feet and you can get 3,000 square feet on the first floor and possibly under the 3,000 on the second floor. So the Ohana unit could be half or less and the main owner would live on part of the house and the Ohana unit would be reached there for whoever is going to rent it. Under the old law, Ohana did not have a restriction where you had to rent it to relatives only. Now the Ohana law says you have to rent a relative. But back when the law first came out, there was no such limit. So the size limit was 50% lot coverage with a possible second floor and anybody could live there or rent there. And you could also, what they call, condominiumize the property and split the properties into two units and sell one and keep one or you could actually do a CPR is what they call it and your son or daughter or stranger could buy one unit and the other person could keep the second unit and split the ownership. And there are legal reasons why you may want to do a CPR on a Ohana unit. And in 1988, the neighborhood board got a lot of complaints from people saying, you know, you put a second house on and they're putting all kinds of parking and we don't have parking on the street and it's a jungle. So they complain to the neighbors complain to the city council and the city council then passed the law back in 1988 to limit the size of the Ohana unit to 700 square feet, 900 square feet, a thousand square feet depending on the zoning. So it went along for a while. And in 1992, the council passed another resolution that said from now on, Ohana units have to be attached. It couldn't be detached and you have to rent to relatives only and you could not condominiumize the property. So if you'll notice now in 1982, they're basically no rules except 50% locked coverage and they could be attached to detach and you could CPR or not CPR and family members did not have to rent the Ohana unit. In the 88, they had a size limit and in 1992 said no CPR, must be Ohana and must be attached. Now subsequently they changed the rules at the city council and said they can be detached and you have but you still have to be renting to relatives only and you cannot CPR. So that rule still applies today. So that's the short version of the Ohana. Then there's the next question. Who's the mayor that proposed the ADU, accessory dwelling unit rules? And what year was that? So if you know the answer to that, you might be winning a breakfast or lunch with me, all right? And the mayor was for how long? And the year was 2015, September. So with this new rule called the ADU, different from the Ohana. So you notice Ohana was back in 1982 and had several changes along the way and ADU came along in 2015 with Mayor Caldwell. And on that one, let me ask you a question. What's the maximum size of the ADU unit? If your lot is residential and it's 3,500 square feet to 4,999 square feet, what's the biggest unit you can build on the ADU? And the answer is 400 square feet under the roof and you have to have one car parking and you cannot see PR. And you could have a detached or attached and you didn't have to rent to relatives. So you see the difference now between ADU and Ohana is different sets of rules. So the question is, is your house permitted under Ohana or under ADU? So that's ADU. Now with the ADU, if your lot is more than 5,000 square feet, what's the maximum size of the ADU unit? 800 square feet maximum. If your lot is 3,500 to 4,999 square feet, the maximum size of the ADU would be 400 square feet. If your lot was over 5,000 square feet, the maximum ADU would be 830. And you can rent to anybody you want. It can be attached or detached, but it cannot be CPR. So current law under Ohana and current law under ADU is you cannot CPR. Those are the main rules. So if we look at the land use ordinance chart, which is going to be showing here, let's look at R5. Now, this may be a little too small for you to read. And if you want to have a PDF version, email me and I'll be glad to email it to you. All right. So I have two sheets. One is the land use ordinance copy of a page on the chart. And the other one is the ADU page from a booklet that Hawaiiapolis created, which is a really good book. And I've read that booklet front to back. And it's a very well written booklet. And I'll be glad to email you that as well. Okay. Now under the chart, if we look at R5's zone, you look at a one family dwelling detached and other uses, it says $5,000 per feet. So you have to have a minimum lot size of $5,000 per feet to be an R5 sub divided lot. If you look just below that, it says two family dwelling detached. And it's a $7,530. And you go, well, what is that? Well, that's really in our normal language. It's a duplex line where you can have $7,500 per feet or bigger. And you can have two kitchens on the property, but they have to be attached. But wait a minute. The land use ordinance label says two family dwelling detached. And I just told you that they had to be attached. It would take too long for me to explain this to you, but just know that it's detached from the boundary line and not from each unit, which doesn't make much sense. It took me a little years to figure out what this booklet, this zoning chart meant. Then if you notice, just below that, it says duplex $3,750 per feet. So people look at that and go, oh, an R5 zone, if I have $3,750 per feet, I can build a duplex. But if I have $7,500 per feet, I can build a two family dwelling detached. And I just told you it was a duplex. They have to be attached, not detached. So it's totally confusing, isn't it? So on the duplex lot, on the $3,750 per feet, imagine if we will a lot that is 60 feet wide and 125 feet. I believe 60 times 125 comes out to $3,750 per feet. So imagine if we will, you have two lots, 30 feet, 30 feet, that's 60 feet wide, and 125 feet deep, and draw the line right in the middle. So each lot would be $3,750. You have to, on this duplex lot, build a house and have the boundary line as a common line right in the middle. And then you can build a house on the left. You can build a house on the right. And that's your duplex. And they're attached at the boundary line. So if I have you thoroughly confused, lots of people are confused, right? So that's what they call the duplex lot. So lot one on the left is $3,750 per feet. Lot two on the right is $3,750 per feet. And the two lots of record are subdivided. And you can sell each one separately. But the common wall, you have to have a common wall between the two units. And that's why when they say two families are in detached, that means it's a duplex, but it's detached from the boundary line. That makes any sense. So I don't want to belabor this point, but just know that the chart says R5, $5,000 per feet for one house, $7,500 per feet for two families while in detached, which I'm going to tell you is a duplex. And then $3,750 is each side of a duplex lot. And you have to have always two lots. $3,750, $5,750. And you build a house right in the middle. And there's a common wall between the two units. And you have to have it attached. Now, if you go to R7.5, then you need $7,500 per feet to have a house, one house. And then if you do a two-family dwelling detached, you need $14,000 per feet to be able to build a duplex. And then if you're going to build a duplex lot, then you need $7,000 per feet on each side. So $7,000 per feet on the left, $7,000 per feet on the right. And the two together will be $14,000 per feet. And you'd have two separate lots of records. But again, you have to have the home attached at the boundary line. And then if you look at R10 and R20, then the lot sizes become bigger and bigger. So I'm sorry to confuse you, but this is how the zoning chart reads. And over the my 50-something years of doing developments and teaching classes and doing real estate work, it took me a while to figure out how to even decipher what the charts meant. And this is in the land use ordinance for the city and county of Honolulu. Now, the labor islands or other islands may not have the same kind of ruling. But what I'm teaching you is for Honolulu only. And other islands do have ADU and Ohana type projects, but their lot sizes are different. So you have to check the county requirements for each island to see what the requirements are for duplexes and single-family homes. Now, one other thing that you should know is I told you that after 7,500 square feet and higher, you can do a duplex or have two homes of one lot that are attached and have two separate kitchens or by the year, two parking stalls for each unit. Now, if you have 10,000 square feet in our five-zone land, you have double the minimum land area. So the city will allow you to put two homes on the property and they can be detached. They don't have to be attached. So you can detach the homes and on this property and also duplex property, by the way, you can cut the minimized and sell the separate units, either duplex or two families that are detached. And it's not a subdivision. It is a CPR, which is very different. CPRs go through the state law called Hawaii Revised Statutes 514B. That's a condominium law for the state of Hawaii. It applies to the whole state. So now the counties do not recognize CPRs. Counties recognize that you have a 7,500 square feet. It's a duplex and you have two kitchens that are legal. And whether you CPR them or not, the county does not recognize CPRs. But the state law 514B says if you have this under the county rules and they're legally permitted, then you can condominiumize it to and separate the ownership. So all the CPR does is transfer title to property with two or more units under a condominium setup rather than a subdivision. So the condominium laws are governed by the state of Hawaii and the zoning laws are governed by each county. And each county has their own set of rules. So now I've got you really confused and I'm so sorry, but that's how complex this situation can be. Every island is different. All right. So now let's go to the ADU. And if we go to the green chart, the one that the mayor put in for Caldwell. All right. And the way he did it was he said, okay, we're going to be different from the O'Hana rules. So in this chart you see on the left hand side, O'Hana unit. On the right hand side, you see ADU. So make sure you understand the difference in Honolulu. So O'Hana unit was started by or promoted by Mayor Eileen Anderson. And the ADU was promoted by Mayor Caldwell. And they're totally different. Even though they sound like they have different rules. If you look at the O'Hana unit on the left, on the zoning, you have to have an R5, R7.5, R10 country district, Ag1 and Ag2 zone land, and you get an O'Hana unit. Hey, what happened to R3.5? And what happened to R20? What is that in the charts? On the right hand side under ADU, these zoning areas are allowed ADU. Now there's 3.5, R3.5, R5, R7.5, R10, R20 and country district, but not Ag1 and Ag2 as you see under O'Hana. So how come? Well the city decided that they are going to allow different zoning types of properties to be allowed O'Hana units and ADU. And they're not the same, are they? Right? So a lot of eligibility. You have to, basic rules are that you have to have enough sewer capacity for the area. So there's some parts of O'Habu where the sewer capacity is passed and is inadequate. So you have to apply for a sewer adequacy permit for approval with the city and county of Honolulu, which we are a management department. There's a form that you fill out to check to see if there's sewer adequacy. So when I have a client that says, hey, can I build a second house on this property? The first thing we do is we do a sewer adequacy check. We fill out the form, put in all the information. They will send it to the Department of Waste Water Management and they have an email address that you can send it to. And within a couple of weeks, somebody from that department will say, sewer is adequate or sewer is inadequate? If the sewer is adequate, then you can build a second house, ADU or O'Hana or two homes detached or attached. If the sewer is inadequate, you're dead, you cannot build. So one of my agents had a client that owned a 20,000 square foot land in R10 zone and that means that he put two homes on that property. He had double-gum minimum land area, R10, 20,000 square feet. So he applied for O'Hana sewer adequacy form, send it up to the city wastewater department and we got back a rejection saying inadequate. So in that neighborhood, the sewer's capacity is maxed out, so they will not let you put another kitchen on that property. Now, if you're in a different part of O'Hana or different part of O'ahu and you apply for sewer adequacy, you may get approval.  So if it's inadequate, then you get a rejection. If it's adequate, then you get an approval. In that adequate approval, it says this approval is good for two years only and then you have to apply for permit to build that second house or second unit or whatever or hundred homes or whatever and then you have to start construction within the third year. So you got two years to apply for a building permit, then one year to start construction and supposing you don't do that and you let time pass, you ran out of money or you're not interested and you just did it to see if there's sewer adequacy and if the two years passed and you did not apply for a building permit, someone next to you in your area could apply for a permit and if it's really tight on the sewer capacity, the sewer department will then take your approval away and give it to the next person in line and that's why it's important that if the sewer adequacy is tight in that neighborhood and you really want that house, you've got to get a permit within two years and then you have to start construction in the third year. Now if there's no problem with sewer adequacy and there's plenty of sewer space, then you don't have to worry but the wastewater department can take away your approval and give it to somebody else. That hasn't happened very often but it has happened and I also know that in certain cases where there's inadequate sewage, you cannot get a permit for the second home or third home or if you want to do a hundred lots of division, there is not enough sewer capacity. The other thing that you might want to do is if they say no, it's inadequate sewage, you could write to the wastewater department and say you have any thing in your budget for capital improvements to increase the sewer capacity in the next three years and the wastewater department knows when they're going to be applying for wider sewer pipes to increase the capacity. Hanoi and Kailua was like that for a few years. They increased the capacity and they allowed more homes to be built. Prior to that time, they said inadequate sewage. So it'd be nice to contact the wastewater department engineer and say do you have any plans in the future to increase the sewer capacity and when might that be and they'll tell you we have X amount of earmark or increase the sewer capacity in the Kalei, Lileha or Nuwana area. So it's nice to know that you could have sewer capacity rejected now like to be approved a few years later. Of course, you have to be patient and wait for that. And then remember under Ohana, you have to have two car parking for each kitchen and the ADU, you only need one car parking for each unit. So there's a difference of two units, two parking stalls versus one parking stall. Now, I'm almost out of time. Can you believe it? I'm interfering myself and I'm almost out of time. So as you can tell, this is a pretty complicated issue. And I've learned this thing over the last 45, 50 years. And I teach this in my zoning class, in my condominium class, my development class. If you have any questions, email me at ably1948 at gmail.com. And you can also go to ablyseminars.com to see if you want to take a class on getting a real estate license. And I cover some of this stuff. Now, the pre licensing school is to get a test so you can get a real estate license. What I covered for you today is strictly post graduate class. And I don't believe any school will teach what I taught because that's not part of the real estate licensing requirements. This was zoning requirements that you should know this information. Or future shows, or shows that we've done in the past. If you go to Think Tech Hawaii and look at the archives and put in Think Tech Hawaii, Abe Lee, I think I've done 22 shows now. And this is the 23rd. I post a new show every two weeks. And I've had lots of different wonderful instructors and guest speakers. And I'm sorry that my guest speaker today was not feeling well. And I had to take her place. But I hope this was worth it to you. If you have any questions, please feel free to email me. And also, if you go to YouTube, look up Abe Lee free licensing school. I posted seven short videos on what I covered in the real estate school in short snippets. So I'm trying to provide free service on Think Tech Hawaii as well as YouTube. So thank you so much for being here today. I hope it was a help to you. And again, if you have any questions, feel free to contact me. Thank you very much. Aloha.