 This is a session which I personally think is extremely important. I'm slightly biased because I've worked on it for a long time. So Prem, who works at PayPal now and who's worked at Yahoo before that, is going to talk to us about inclusive design, which means how does one ensure that different parts of your website or your entire websites are accessible to everyone, regardless of their abilities or disabilities. So he's going to be talking about the challenges that inclusive design poses to us as developers and designers for UI widgets. Thank you. Good afternoon. Thank you. I'm here to talk about inclusive design challenges with UI widgets. So my name is Prem Nawaz Khan. I work for PayPal as an accessibility evangelist. So let's start the talk. So what are the things we bother about when we start developing, designing browser compatibility? What's the reason why we care about browser compatibility? Otherwise, quality will file a bug. Yes, IE7. So we write code like this, right? How many of you have written code like this? Star, underscore, hash, siblings, parsers, fooling the browsers, right? Or at least like this, IE5, IE6, IE7, IE8. Oh, sorry. Oh, this is the problem you mentioned. Yeah, I have pulled over here. And this is called a situational disability. So should I use this? So what is the next thing we bother about? Search engines. Are these the list is complete or something is missing? There are so many search engines, right? We do a lot of things to make our code work better in the search engines. Why is that? To get ranked in the search engines? And why do we need to get ranked to get more revenue? So what is the next thing we care about? Responsive design. We care about a lot of devices, mobile, tablet, PC. Suddenly Google will come and release something in between size and then we start writing queries like this. Yes? How is it different from the browser-based style sheets? It's the same, right? But do we ever care about people with disabilities? Do we? Guys? Yes, no? No. The answer is no. Why do we need to care about people with disabilities? But before we talk about, why do we need to care? We need to know that there are four types of functional disabilities. There is also situational disability just on my hat. My wireless presenter stopped working. And functional disability is four main things like cognitive disability, visual disability, auditory disability, and cognitive disability is hard of learning like dyslexia. Visual disability is like blindness, low vision, cataract or color blindness. And auditory disability is people who can't hear, you know. So why do we need to care basically? Sorry? That is the one reason, the policy, right? But what if your company is in India? So it provides equal opportunity to the people who are disabled. For example, eBay has a partnership with the National Federation of Blind so that the people with blindness and other disabled can start their own job on eBay. Do we follow among the old people category? See, we are the ones who get older soon because we are in IT industry unfortunately. The way we, at least I, use the mouse is not the same as which I do. It's not the same as which I'll be doing another 10 years. People, once you get old, you can't hold the mouse the same way. I mean hands started trembling and you can't see. Maybe you get diabetic retinopathy. So the third thing is the search engine optimization. Caring about people with disability and designing a code, inclusive design code also helps search engines. You know what, Google is nothing but a blind deaf person, right? Google can read nothing but alternate text images. So if you think of Google as a person with disability, yes. Policy. Policy, we have different policies in different countries. Like I said, India, we don't have strong policies. It's still in the papers yet to be signed. We have in the US, we have American Disability Policy, ADA. We have Disability Discrimination Act in UK. We have Disability Discrimination Act in Australia. We have it in Canada. We have it in so many other countries. But still, policy is not the main thing why you need to care about people with disability. Are there any disabled in this room? Just want to cross check. Are there any people with disability? Yes, no? No one? Yes, have eyeglasses, right? Eyeglasses again kind of, because without eyeglasses some of you may not be able to see. So eyeglasses what? It is a kind of assistive technology. So as a developer, this should be the business case. If your code, if your design is not accessible, means it is not of good quality. We are not paid extra for search engine optimization. We are not paid extra for browser compatibility. We are not paid extra for responsive design. So similarly, we are not paid extra for inclusive design, web accessibility. It is the main part of the job. Say if someone says that your code has some evil function and it may have a possible access attack, don't we go and fix it? Yes, right? So it is our job to make the code accessible. So do you agree that every kid should have a fan like this? Yes, no? Yes, thank you. So the way we interact with the web, even it differs within us, right? Some people may use only keyboard, geeks use only keyboard. Some people only use the mouse. Old people cannot use someone's head in the previous talk. They will use only a single finger. There are people with a disability who can't use even that finger. They will use something with the head mouse. So there are so many assistive technologies. I'll give you an example of a situational disability which happened to me yesterday. I had to come to Bangalore at 9 o'clock. My train was scheduled at 9 o'clock. It was late by 3 hours. So I came late around 12 midnight. So I went into the reception. There was no one in the receptionist. And then security was calling the receptionist. And he came running. He gave me the keys. There was no one to assist you. Just go and your room is on the right side, last room on the right side. So I went there. What's the first thing you'll do once you get into the room? Switch on the lights, right? This is the first time you're getting into the room. How do you know where the switch is? You assume, you assume, right? Because it is the standard. You consistently have been into many hotels. And you know that it should be somewhere behind the door. What if the engineer has put the switch somewhere in the middle of the room? You touch and feel and feel through what you'll do, right? So this is one kind of situational disability. And how people will face this, I mean, handle this situation. Some may just move around and switch on the light. Or some may go to the receptionist, even though he's not connected with the, why the switch was in the middle of the room. We'll go and yell at him, right? So here the reception is what customer representative for our website. So people with disabled just shout to the customer, hey, your site is not working. I'm blind. I'm using a screen data, but it's still not working. And then still if the customer representative is not responding back, then according to the policy, they go and file a lawsuit. So how many of you know about target.com lawsuit in US? So target.com is a physical store and also a website online. And someone blind couldn't use the website. They went to the court and filed a case. It was a million dollar case. The problem was it was a lawsuit which turned into a classy action lawsuit, which means that any blind person could be added as a partner into that suit. So target.com lost. And many other famous websites are targeted like AOL, EES. Yeah, eBay, so many websites are targeted. It's not because of policy. Like I said, it's because of code quality that we should develop with accessible code. So there is a company, a university called Web Accessibility Initiative in Mind. It's a Utah-based university. They conducted the survey in October 2012 very recently. And according to them, these are the most impactful problems in the order. So you have, the first one is the flash content. Flash is always a problem, right? Next is the capture. Security guys will say capture is very important. And at times, we ourselves couldn't get into the website because of some captures blocking us. Capture means confusion. Third is links or buttons do not make sense. What is that actually? Links or buttons that do not make sense. Sorry. Gives the context. Yeah. Usually code, right? With the image as a button. And say click here, click here, click here, which is on the previous session. And you have a link. You code it as a button. Button code it as a link, et cetera. And then fourth is screens or parts of screens that change unexpectedly. So why is this a problem? Suddenly the screen gets changed. Because of single page web application. And thanks to Node.js and all the stuff. Why is this a problem to people with disability? Because people use something called as assistive technologies, right? We right now saw. It is basically a piece of software which will grab the content, parse the DOM, will take the, into the buffer and will start interacting with the person. So if the page is suddenly changing, the assistive technology will not be able to grab the content. And complex or difficult forms. People love forms. Someone says, right? People love forms. So, but difficult forms is something which you don't have a proper label. I will cover how to do a proper label. Because of improper labeling means you are not converting the visitor to a customer. Because forms are the ones which convert the visitor to a customer. And if you are hiding the form labels or information, means you are hiding money. So lack of keyboard accessibility. What is this all about? This is because of web 2.0. We want to copy most of the applications on the desktop, Mac or Windows, for example, email application or a menu or a tab into the web. Unfortunately, web didn't have that kind of tags. It doesn't have a menu tag. It doesn't have a menu item tag. It doesn't have a header. It doesn't have a footer. Then there came something as ARIA, which helped to achieve this keyboard accessibility. Right now in HTML5, they have introduced header tag, footer, main tag. How many of you know about main tag? It has landed in Firefox 90s. Yeah, main tag. So missing improper headings. Again, many of you may not know that the outline logic is still in the draft. Because you code too many h1, h2s inside a section element, it will be difficult for a screen reader user to grab through the content. Complex data tables. Thanks that we are not coding layout tables. So in case you have a classic page, we are able to make it accessible. Inaccessible or missing search functionality. Lack of script to main content. Next slide. So few things to know before we make our widgets accessible. So hiding content with CSS. Tab index, show focus, device handlers, ARIA attributes and labels. I'll go one by one here. So someone said hidden attribute, right? So hidden is basically a class which you can have a visibility block or something like that, display none, display block. And off screen is again a class where you will position the element absolutely off screen so that visual user cannot see it but still the assistive technology can grab the content. And here is a new method for using off screen which is clip property. You can declare clip property of one pixel and you can also use the height one pixel with one pixel to make sure that it is hidden for a visual user but it is still available to the screen reader user. So what is the use case for this? For example, you have an input element which according to your design you are not able to code a label. The one way is to include a title attribute. So according to the HTML file to accessibility APIs the title text will be converted into a label but still you can also use a label and say class equal to hidden off screen. I mean class equal to off screen, don't use hidden because that will be ignored by the assistive technologies. You can say just off screen and still the label will be read by the assistive technologies and it will not be any effect to the visual user. So tab index. Tab index is another beautiful property to make the keyboard accessible widgets. Tab index had its entry in even in HTML4 but in HTML it was an invalid attribute and tab index can have three values minus one, zero and a positive integer. Minus one means you can use it on a non-semitic element like a div, span or something like that and still called JavaScript dot focus method to set focus on the container. So basically you can't set the focus to elements like div, span, paragraphs, right? So here you use tab index of minus one to set focus. So tab index zero is for when you want to receive the tab focus you code zero which means that when you tap, tap, tap it will receive focus and also you can use element dot focus method. Positive integer. So if people wants to order the HTML elements they code tab index 10, 20, 30, etc. So please don't do this because it will change the tabbing order and the cursor will move here and there. Even handlers. We love even handlers, right? That's why we have YUI, we have jQuery, we have so many things. But what people forget mostly is we add most dependent even handlers and assume that it works across the devices but we forgot to add any keyboard handlers. So evens like on focus, on blur, on select and on change or in device independent even handlers. So when you use an on click on anchor or an HTML input then it works across devices. On most or non you know that on most out and non double click etc. most dependent and on key down etc. keyboard dependent. Show focus always. This is one of the major problem which we are seeing these days. There are, I will show you what's the problem actually. So this is make my trip. So when the page loads it will be basically in the address bar. You know where I am? Yeah, you are lost. So this dotted line is actually an indicator to know that where you are exactly on the page. Another thing you notice that see basically this min bar works nicely, right? Firefox, Opera, Alt F. See, I am pressing side arrow key. I am pressing down arrow. But at the same you say this menu. I can't receive focus. So I have to use a mouse. So this is the problem. We copy the application to the web but we forgot to copy the keyboard interaction. So always show this focus dotted line. Never say outline none. People still some people know. One reason is because QMSA the dotted line looks ugly so please avoid it. Or maybe because someone is using Eric May's reset dot CSS 1.2 which he clearly defines that. Please redefine the focus. It's clearly written in the comments but people forgot to define the focus and you have to fix all the... Just one minute. You can also say button focus, outline dotted, one pixel. So you will always see the dotted lines. So what is accessible rich Internet application? Aria. This is a spec from W3C to make applications accessible. The use cases in the name itself, applications. Like I said, we can use menu bars, we can use tab controls, we can use outlook on web, etc. But we need to make sure that it exposes the semantic sugar to the accessibility APIs. So Aria consists basically of roles, role states and properties. Roles is for the divide into widget role, document structure, and landmark roles. For example, state and properties are categories widget attribute, aria and hyphen popup is just nothing but an extra HTML attribute. You just say do aria hyphen has popup equal to true or false means it has a popup. Aria hyphen hidden equal to true or false means it's a hidden from the assistive technologies. Live region attributes. So I said some parts of the screen refreshes automatically. So how do you throw that content to the assistive technology? Use aria hyphen live equal to true or polite or off or assertive. So relationship attribute is aria described by aria controls. So what is aria again? Aria is not an, it doesn't, it passes the important information to the screen readers. Actually the browsers will handle the job of communicating this aria attributes to the accessibility APIs. They do the bolt. It doesn't change the presentation or behavior of the web page to a sighted user. It doesn't makes the element focusable in a tab index and it doesn't make the keyboard accessible. Labeling. Again I said when you have a form, you should have a proper label. So these are the ways you can have a proper label. You can have aria labeled by equal to element ID. Aria label equal to label text. And you can have the semantic label text. You can have a hidden text content within the system element. You can have the title attribute. And you can also say aria described by then point to some other element on the page to have a description of that element. So I think this is aria live is polite, which means the assistive technology will wait for the updates to complete and then it will announce to the screen reader. So you have implicit live roles like role, alert, error, message, etc. Oh, why is it like this? So accessible button. So here the first one is the element which actually looks like a button, but can't receive focus. So I had to add tab index 0. But what is missing here is the focus style. So I need to add the focus style to make it so span button focus style to redefine the focus. But still if I click, there will be no action. But if I click with the mouse, yeah it works. So to make it work like a button again you need to add the keyboard handlers like 13 for entry key or 32 for space and initiate the click. So if possible use the natural element like button or anchor. So accessible tool tip. So one of the problems with the windows tool tip is you move the mouse over it, it will show the tool tip. But if you have a keyboard and it receives the focus it will not show it. So to make it accessible, first again you need to add tab index of 0 or you can use an anchor tag because anchor is naturally focusable, right? You need not a tab index. And then you can add keyboard support like on focus, on blur etc. And then finally you add area describer and roll equal to tool tip. So area describer says that the element which will receive the focus that is the span element is described by this tool tip element. And this tool tip element will have the role of tool tip. Anyone didn't understand this? Questions? No? Yes? Got it? No? Hello? Yeah, next one. So let's go to move on to a little bit complex example. How do you code a drop down in a HTML web page? Use select element, right? Use a select element. But what if your product comes and says there should be an add button inside. It should look like a Facebook share button or something like that. So you don't have any other option than to use anchor, li, ul, li, etc. So this will be communicated semantically to a screen reader as a list item, ul, li, list item one of one, list item two of two, etc. It will be never known to them as a drop down. To make it like a drop down, first we need add... Since it's an anchor, I don't need to add a tab index. I just add a roll of button. So when the anchor is receiving focus, it will say it has some button. And since it has an aria has pop up, which means that it is a menu button, because it has a submenu. So it will be some macOS, it will say menu button or pop up button. Aria expanded set is initially set to false. This we need to dynamically manage with JavaScript. We need to set false when the drop down is open and true when the drop down is open and false when it is closed. So aria expanded is set to false. And ul has a labeled by of drop one, which means that this is referred by the anchor text. So we need a aria roll of presentation. Presentation rolls, if any man has a presentation roll, means it will be ignored by assistive technologies. For example, if you have a roll of presentation to a table, which has a layout table, means the table will not be announced as a table. So this roll of presentation helps to fix the child, parent-child relationships. We need, only the anchor will receive the focus and not the lia. So here we add the menu item roll to the anchors. I will show you the demo later, next. So here actually this is a bootstrap code. I contributed to the Twitter bootstrap to make it accessible and I am still working on that. When the menu opens, first we will set focus as the first item and also the aria expanded property is toggled. Then we add the keyboard handler for down arrow key handling. So when you press down arrow, it will navigate within the drop down widget. Next, I am sorry, I will take another five minutes. Another thing is when you press the escape key, the drop down should close like a select drop down. We are trying to mimic here the proper desktop drop down. So when you press escape key, the drop down should close and we tab out again the drop down should close. So you add all these functionalities here, key equal to 27 means you find the class and then set focus and clear menus on the focus out. So accessible dialogue. Recently, someone called Nicholas Zechers wrote a very nice article on how to create an accessible dialogue. Dialogues are the most disastrous things we create on the web. Dialogues pop-ups open but there is no focus. You can't tab inside the tab, I mean the control moves here and there rapidly and for assistive technology user, they are lost. Even we have web flows inside a dialogue which is pathetic. So for that, no, no. You can have the ARIA role of dialogue for the container. You can have the ARIA labeled by two, label the dialogue. You can set focus to the dialogue once the dialogue opens and then you need to enforce focus within the dialogue and then again close the on escape key and when it closes, the control should travel back to the main page wherever you open the dialogue. So these are the things we need to take care of. This is the summary, but before summary, let me show a small demo. So restarting. You have an audio cable. I need to plug in the audio. Is it not showing? It rebooted. Extra, right? No, not extra. Not it? Audio? What happened? Windows? Can you duplicate? Yeah, okay. At least audio. You left right up that inclusive design changing help to be rebooted. Go to ARIA tooltips. You probably link default tooltips. Bootstrap, bootstrap, log for the meta include include the BSI. Go to BSI, the soft help like create awesome after after after the ARIA landmarks and tab index highlighter use in bootstrap out of list you probably visited link default tool two dot roll tooltip for three dot ARIA described before modal dialogue. Windows link Microsoft.com. Optimal resolution notification. This is not the optimal screen resolution for the clone displays configuration. The optimal resolution is 800x600. Click this notification for more info. Launch demo modal button. Modal heading dialogue. Heading level three modal heading. Heading level four tooltips in a modal. This link visited link to that link visited link. Save changes but modal heading dialogue. See it is enforcing the focus within the dialogue. This is all a modal dialogue. This link visited link tooltip. And this says tooltip for a screen reader user. So I am using something called as NBDA non-visual desktop access which is a free software from a blind guy from Australia. It is nice you can just download it and use it and check how it works. If you have a Mac just press command FI and the screen reader will start automatically because it has an inbuilt screen reader called voiceover. If you have iPhone also it will work. So go to settings turn off accessibility settings and voiceover and you can feel how the people are blind. Accessibility fixes document button drop down menu button collapsed submenu. List list six item. One dot area has to put true and roll button for launch link. Two dot roll button for launch for dot tab control, tab expanded select collapsed profile one tab expanded selected two of three. Collapsed profile two tab expanded selected three of three. Out of list at symic state wayfarers. Ethical where Anderson Tofu before they sold out McSweeney's organic Lomo Retro Fanny Pac-Lo-Fi farm to table ready made. Messenger back gentry tab control. Collapsable group item. S5 dot up and left arrow navigates tab and right also navigates tab. So tab this is how it... Three dot roll presentation for tab live. You should be able to tab to the content to read the content. So three dot five dot up and left arrow navigates tab. Collapsable group item. Three tab selected one of one. Then I press enter to respond to it. And in my as mod highlight for Q. And in my as mod highlight for Q. Previous button previous. This is a carousel. Carousel list. Home of mark interior view of marks. Home second thumbnail lane next button next. So mark is the guy who developed the carousel bootstrap for dot up and it's auto complete blank. So some one... What if we use click here click here what is the problem? So if you see I can just press insert. F7. Carat browsing dialogue pressing F bootstrap X1 bootstrap 2 dot roll list box area label F before carousel container. That's the insert key. Carat browsing no. Yes. Before dot up and now arrow navigates tab. I can browse with the actually it will show a list of links in the dialogue. It also shows the list of headings etc. So I can skip different headings and go to that part of the page directly. So if you have just click here click here click here it will the screen data will say click here click here click here which will not make sense to an assistive technology user. Tab 1 dot label for 1 dot label for 2 dot roll presentation for light and tab in there. Running up notificate notes words nvd nvd nvd nvd nvd nvd nvd nvd nvd nvd nvd So there is a quick way to check if your site is accessible. We have something called as I said web bang conductor on survey. So they have a tool bar firefox add on called wave tool bar. And they just go and click errors features and alert. It will show the accessibility errors. It doesn't mean that this page has only 48 accessibility errors this page can deduct only 48 accessibility errors. No tool can deduct the accessibility errors because if you are going to code alt equal to alt or some blank text tool cannot identify it. So these things don't have an alternate text. So this is a very good tool. You can check text only. You can check outline. And you can just click research page structure order. So it shows the structure. So when you tap this is the order it will receive focus. This is a nice tool firefox add on. So maybe you should start using it for your project. That's it. Thank you guys. Questions. So actually I was just curious on the meta refresh website when you scroll down there's a top navigation that appears once you scroll down. What's your opinion on that? Is that from an accessibility point of view? It is not. What's the best way to handle those kind of things? If I have to handle I will set focus to the minubar. It happens there. Because it doesn't appear it's still in the code so would you say that you set access to it even when the user can't see anything on the screen? Did I? Let us check again. So right now you can't see that so if you scroll down a bit if you scroll down a bit with your mouse maybe just scroll scroll down yeah there you see better refresh about so what's your how would you advise is the best way to handle that for accessibility? Because I can see that being useful because it allows you to switch between sections on the same page. So usually you set the focus to that bar so if you see if you use the mouse say one minute so you can just click here this access what you call internal link these are anchor tags I guess you can just set focus to that item and just you can press key down and press enter to activate it. So when you're on the top of the page you can't see this menu but what I mean is would you still enable this in your if you're using a screen reader for example or using a tab navigation? So you need to manually set focus to that item using tab index minus one to that whole bar and set focus okay thanks yes yes one minute so these are the designers for the designers for the graphics on what a designer should do to make the design accessible excuse me yes hello I definitely like the idea of making websites accessible but at the same time I don't want to affect other people people who can see the page with eyes and about adding extra markup into the page and making it too slow to download actually I came up with the solution I make invisible link which runs JavaScript blind people can click this link and it runs JavaScript and adds extra markup for the page and this is like a compromise what do you think about such solution or maybe you can suggest something else can you repeat the question okay in order to save markup I do not add this markup for accessible website when the page is loading but I can provide it with an additional JavaScript you mean a deferred downloading then the page is already loaded blind person can click invisible link and then JavaScript runs and adds all the markup needed what do you think about such a solution or maybe you can suggest something else this is okay actually because we are going to defer the JavaScript we are going to load the page because the JavaScript maybe you can use worker threads to update the page this is the first link on the page that says please download extra things maybe I can see the page and suggest you unfortunately it's under development so I can just describe the idea with words how can we find compromise between accessible web pages and a lot of markup you can defer it you can defer the JavaScript you have something called a script loader you can say on the window loader you defer the script and load it you can visit Steve Souders website on how to do that you can defer the script and that script can add this markups it's absolutely no problem for the performance okay so this is your suggestion right thank you very much yes I'm trying to make a web page accessible how can I handle model windows because I've given everything ARIA dialog and everything I've handled all the accessibility issues through that but content in the model window is not readable the content in the model window is not readable the screen reader is not reading it actually which screen reader are you using Jaws Jaws so try to set focus to the dialog okay you are in a role of dialog right and sometimes what it does is it will go to an application mode so I didn't cover all of the ARIA things there is two things mainly document and application so application will treat the whole thing as an application so don't use an application role there is a tab index of 0 within that if it has lot of content so lot of dialogs we see we assume that it is an application but it is not so it is actually a document which is part of an application so use an div id I mean tab index 0 it's a container inside that dialog and try it and this is one of the suggestion that by Pesla group Steve Faulkner one more thing is I have a header in a web page I have a header navigation and the content and below the footer can I make the screen reader to skip the from the header can I make it to skip content and come to footer you have something called as landmark roles so you have header right you can declare header role equal to banner you have a main you can also start using main tab by the way you can say main role equal to main and footer role equal to content info so screen reader user for example india will press insert F7 same as in joss it will show a dialog with all the landmark roles so screen reader user can basically skip to that part of the page it really helps I am using aria label by and aria describe by what is the difference and where can I use it labeled by and described by say imagine a label label tag label for equal to some XYZ tidy input equal to type into text so if you are going to say input type equal to text aria labeled by equal to some other element so this label is going to be skipped this is very important for error messages inline error messages etc so you should not use aria labeled by you should use aria described by to reference that or you should use aria labeled by label I mean id for the label and id for the the content thank you we will take one last question and the rest of the questions can be taken offline hi very nice talk I just had two questions actually sorry I couldn't hear can you hear me now first question is what percentage of sites would you say actually are doing something for accessibility and the second question is is there any plan in the W3C standards to have some sort of detector to be able to detect that somebody is coming in with a screen reader no there is no full proof method to detect a screen reader so what do you need to do to a website accessible use semantic elements use button for a button anchor for anchor select for a select here simple rest of the questions maybe I will take it offline or maybe tomorrow here yeah do you know any Indian website which is accessible offline please some of the government sites are accessible the barrier break technologies one of the pioneer in India is working with the government they are also trying to help the government in framing the laws etc and they are working towards this last year February there was a texture 2012 and I think it will happen soon for 2013 where there is a plan actually here to make all the government sites website accessible it is in the plan do we have any accessibility act in India accessibility act is India is still in the that is our paper right I said it is still in paper it is still not enforced that is what I know from the last status so Stainey is also working on that law thing I just wanted to answer you can take a look at India.gov.in when it comes to because the barrier break actually made this and they probably have a lot of if you want to say that okay I want to see a government site which is accessible that is the best bet regarding the question regarding detecting whether someone is using a screen reader or not I think and I will cover this in my talk tomorrow I think that is a very bad approach to see or browser sniff or do some kind of sniffing for the user agent and saying whether that user agent is a screen reader or this type of browser or that type of browser and showing content I think you need to by default make stuff accessible on your site so that no matter what the screen reader is no matter what the browser is they will be able to make sense of it I think that is the best approach as well as what he said make use semantic elements if it is a button use a button element don't abuse different elements to make it something else use semantic elements use proper best practices for web accessibility they are already online just search for it and just by default make good stuff and the user agents will make sense of it on their own thanks that is it thank you