respected mukesh sir! I have one suggestion for you! but Iam not sure its work or not! please try it sir! please go to the websight which have such feature like your need, then go to view source! there you may be find it!
On 3/3/13, Mukesh <mukeshbaviskar....@gmail.com> wrote: > Dear Srinivasu, > Excellent! I'm agree with your accessibility check list but only I have a a > > question how to change the background and text colour for low vision > visitors? Yes, there is an option in latest browsers to change the size of > font but no option to change the background and text color for low vision > visitors for exa. 'yellow on blue, white on black, etc.. > > > > -----Original Message----- > From: Srinivasu Chakravarthula > Sent: Sunday, March 03, 2013 1:07 PM > To: accessindia@accessindia.org.in > Cc: accessindia@accessindia.org.in > Subject: Re: [AI] Making an accessible dialog box > > Vinod, > > Re tagging PDFs, please read on at > http://www.ehow.com/how_4395018_add-tags-pdf-document.html > > Secondly, please note that you need to think beyond screen readers when it > comes to accessibility. In fact, accessibility is for all users, devices and > > technologies. http://www.w3.org/WAI/ would be a great start to learn about > accessibility. Also, refer to quick accessibility checklist I have created > at http://sgaccessibility.com/sites/a-quick-web-accessibility-checklist/ > > Good luck, > > Regards, > > Srinivasu > http://srinivasu.org Twitter: @vasutweets > Sent from my iPad > > On Mar 2, 2013, at 12:09 PM, Vinod Benjamin <vinbenji.gr...@gmail.com> > wrote: > >> Dear learned friends, >> this was very useful info, i am also creating a web site which is >> accessible with screen readers , i would like to ask similar question >> as mukesh sir asked , how to creat script for increase and decrease >> font and color , and how to tag a file which is a pdf in html, also >> how to creat a PLS file to play in winamp or windows media player. >> >> Regards, >> Vinod. >> >> On 3/2/13, Mukesh <mukeshbaviskar....@gmail.com> wrote: >>> Dear Prashantji, >>> Excellent! It's a very useful information for us. >>> I have created a html document and want to use the function 'increase >>> and >>> decrease font' option and 'change background and font color option' by >>> java >>> >>> script coding. Refer 'www.codefactory.es' site. >>> is it possible? Please send me a code to perform this function. >>> >>> Waiting for your response soon. Thanking you in anticipation. >>> >>> >>> -----Original Message----- >>> From: Prashant Ranjan Verma >>> Sent: Friday, March 01, 2013 9:24 PM >>> To: accessindia@accessindia. org. in >>> Subject: [AI] Making an accessible dialog box >>> >>> Source >>> http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/ >>> >>> >>> >>> Making an accessible dialog box >>> >>> Posted at February 12, 2013 07:00 am by Nicholas C. Zakas >>> >>> Tags: Accessibility <http://www.nczonline.net/blog/tag/accessibility/> , >>> JavaScript <http://www.nczonline.net/blog/tag/javascript/> >>> >>> In today's web applications, dialog boxes are about as common place as >>> they >>> are in desktop applications. It's pretty easy to show or hide an element >>> that is overlayed on the page using a little JavaScript and CSS but few >>> take >>> into account how this affects accessibility. In most cases, it's an >>> accessibility disaster. The input focus isn't handled correctly and >>> screen >>> readers aren't able to tell that something is changed. In reality, it's >>> not >>> all that difficult to make a dialog that's fully accessible, you just >>> need >>> to understand the importance of a few lines of code. >>> >>> ARIA roles >>> >>> If you want screen reader users to be aware that a dialog has popped up, >>> then you'll need to learn a little bit about Accessible Rich Internet >>> Applications (ARIA) roles. ARIA[1] roles supply additional semantic >>> meaning >>> to HTML elements that allow browsers to communicate with screen readers >>> in >>> a >>> more descriptive way. There are a large number of roles that alter the >>> way >>> screen readers perceive different elements on the page. When it comes to >>> dialogs, there are two of interest: dialog and alertdialog. >>> >>> In most cases, dialog is the role to use. By setting this as the value >>> of >>> the role attribute on an element, you are informing the browser that the >>> purpose of the element is as a dialog box. >>> >>> <div id="my-dialog" role="dialog"> >>> >>> <-- Your dialog code here --> >>> >>> </div> >>> >>> When an element with a role of dialog is made visible, the browser tells >>> the >>> screen reader that a new dialog has been opened. That lets the screen >>> reader >>> user recognize that they are no longer in the regular flow of the page. >>> >>> Dialogs are also expected to have labels. You can specify a label using >>> either the aria-label attribute to indicate the label text or the >>> aria-labelledby attribute to indicate the ID of the element that >>> contains >>> the label. Here are a couple of examples: >>> >>> <div id="my-dialog" role="dialog" aria-label="New Message"> >>> >>> <-- Your dialog code here --> >>> >>> </div> >>> >>> >>> >>> <div id="my-dialog" role="dialog" aria-labelledby="dialog-title"> >>> >>> <h3 id="dialog-title">New Message</h3> >>> >>> <-- Your dialog code here --> >>> >>> </div> >>> >>> In the first example, the aria-label attribute is used to specify a >>> label >>> that is only used by screen readers. You would want to do this when >>> there >>> is >>> no visual label for the dialog. In the second example, the >>> aria-labelledby >>> attribute is used to specify the ID of the element containing the dialog >>> label. Since the dialog has a visual label, it makes sense to reuse that >>> information rather than duplicate it. Screen readers announce the dialog >>> label when the dialog is displayed. >>> >>> The role of alertdialog is a specialized type of dialog that is designed >>> >>> to >>> get a user's attention. Think of this as a confirmation dialog when you >>> try >>> to delete something. An alertdialog has very little interactivity. It's >>> primary purpose is to get the user's attention so that an action is >>> performed. Compare that to a dialog, which may be an area for the user >>> to >>> enter information, such as writing a new e-mail or instant message. >>> >>> When an alertdialog is displayed, screen readers look for a description >>> to >>> read. It's recommended to use the aria-describedby element to specify >>> which >>> text should be read. Similar to aria-labelledby, this attribute is the >>> ID >>> of >>> an element containing the content to read. If aria-describedby is >>> omitted, >>> then the screen reader will attempt to figure out which text represents >>> the >>> description and will often choose the first piece of text content in the >>> element. Here's an example: >>> >>> <div id="my-dialog" role="alertdialog" aria-describedby="dialog-desc"> >>> >>> <p id="dialog-desc">Are you sure you want to delete this message?</p> >>> >>> <-- Your dialog code here --> >>> >>> </div> >>> >>> This example uses an element to contain the description. Doing so >>> ensures >>> that the correct text will be read when the dialog is displayed. >>> >>> Even if you omit the extra attributes and just use the appropriate role >>> for >>> your dialogs, the accessibility of the application improves >>> tremendously. >>> >>> Setting focus to the dialog >>> >>> The next part of creating an accessible dialog is to manage focus. When >>> a >>> dialog is displayed, the focus should be placed inside of the dialog so >>> users can continue to navigate with the keyboard. Exactly where inside >>> the >>> dialogue focus is set depends largely on the purpose of the dialogue >>> itself. >>> If you have a confirmation dialog with one button to continue in one >>> button >>> to cancel then you may want the default focus to be on the cancel >>> button. >>> If >>> you have a dialog where the user is supposed to enter text, then you may >>> want the focus to be on the text box by default. If you can't figure out >>> where to set focus, then a good starting point is to set focus to the >>> element representing the dialog. >>> >>> Since most of the time you will be using a <div> element to represent a >>> dialog, you can't set focus to it by default. Instead, you'll need to >>> enable >>> focus on that element by setting the tabIndex property to -1. This >>> allows >>> you to set focus to the element using JavaScript but doesn't insert the >>> element into the normal tab order. That means users won't be able to >>> press >>> tab to set focus to the dialog. You can either do this directly in HTML >>> or >>> in JavaScript. For HTML: >>> >>> <div id="my-dialog" role="dialog" tabindex="-1" >>> aria-labelledby="dialog-title"> >>> >>> <h3 id="dialog-title">New Message</h3> >>> >>> <-- Your dialog code here --> >>> >>> </div> >>> >>> For JavaScript: >>> >>> var div = document.getElementById("my-dialog"); >>> >>> div.tabIndex = -1; >>> >>> div.focus(); >>> >>> Once tabIndex is set to -1, you can call focus() on the element just >>> like >>> any other focusable element. Then the user is able to press tab to >>> navigate >>> within the dialog. >>> >>> Trapping focus >>> >>> Another accessibility issue with dialogs is making sure that focus >>> doesn't >>> go back outside of the dialog. In many cases, a dialog is considered to >>> be >>> modal and therefore focus shouldn't be able to escape the dialog. That >>> the >>> dialog is open and pressing tab ends up setting focus behind the >>> dialogue >>> then it's incredibly difficult for a keyboard user to get back to the >>> dialogue. So, it's best to prevent that from happening by using a little >>> bit >>> of JavaScript. >>> >>> The basic idea behind this technique is to use event capturing to listen >>> for >>> the focus event, a technique popularized by Peter-Paul Koch[2] and now >>> in >>> use by most JavaScript libraries. Since focus doesn't bubble, you can't >>> capture it on that side of the event flow. Instead, you can intercept >>> all >>> focus events on the page by using event capturing. Then, you need only >>> determine if the element that received focus is in the dialog or not. If >>> not, set the focus back to the dialog. The code is pretty simple: >>> >>> document.addEventListener("focus", function(event) { >>> >>> >>> >>> var dialog = document.getElementById("my-dialog"); >>> >>> >>> >>> if (dialogOpen && !dialog.contains(event.target)) { >>> >>> event.stopPropagation(); >>> >>> dialog.focus(); >>> >>> } >>> >>> >>> >>> }, true); >>> >>> This code listens for the focus event on the document so as to intercept >>> all >>> such events before the target element receives them. Assume a dialogOpen >>> variable is set to true when the dialog is open. When a focus event >>> occurs, >>> this function traps the event and checks to see if the dialog is open, >>> and >>> if so, if the element receiving focus is within the dialog. If both >>> conditions are met, then focus is set back to the dialog. This has the >>> effect of looping focus around from the bottom of the dialogue back to >>> the >>> top. The result is that you can't tab out of the dialog and so it's a >>> lot >>> harder for a keyboard user to get lost. >>> >>> If you are using a JavaScript library, chances are that it has a way of >>> delegating the focus event in such a way that you can achieve this same >>> effect. If you need to support Internet Explorer 8 and earlier without a >>> JavaScript library, then use the focusin event instead. >>> >>> Restoring focus >>> >>> The last part of the focus puzzle with dialog has to do with restoring >>> focus >>> to the main part of the page when the dialog is closed. The idea is >>> simple: >>> in order to open the dialog, the user probably activated a link or a >>> button. >>> The focus then shifted into the dialog, where the user accomplish some >>> task >>> and then dismissed the dialog. The focus should move back to the link or >>> button that was clicked to open the dialog so that it's possible to >>> continue >>> navigating the page. This is an often overlooked aspect of dialog in web >>> applications, but it makes a huge difference. >>> >>> As with the other sections, this requires very little code to work. All >>> browsers support document.activeElement, which is the element that >>> currently >>> has focus. All you need to do is query this value before showing the >>> dialog >>> and then set focus back to that element when the dialog is closed. For >>> example: >>> >>> var lastFocus = document.activeElement, >>> >>> dialog = document.getElementById("my-dialog"); >>> >>> >>> >>> dialog.className = "show"; >>> >>> dialog.focus(); >>> >>> The important part of this code is that it keeps track of the last >>> focused >>> element. That way, all you need to do when the dialog is closed is to >>> set >>> focus back to it: >>> >>> lastFocus.focus() >>> >>> In total, this adds to very short lines of code to what you probably >>> have >>> already for your dialog. >>> >>> Exiting the dialog >>> >>> The very last piece of the puzzle is to allow the user a quick and easy >>> way >>> to exit the dialog. The best way is to have the Esc key close the >>> dialog. >>> This is the way dialogs work in desktop applications and so it's very >>> familiar to users. Just listen for the Esc key to be pressed and then >>> exit >>> the dialog, such as: >>> >>> document.addEventListener("keydown", function(event) { >>> >>> if (dialogOpen && event.keyCode == 27) { >>> >>> // close the dialog >>> >>> } >>> >>> }, true); >>> >>> The keyCode value for the Esc key is 27, so you need only look for that >>> during the keydown event. Once received, close the dialog and set focus >>> back >>> to the previously focused element. >>> >>> Conclusion >>> >>> As I hope is obvious from this post, it really doesn't take a lot of >>> extra >>> code to create a dialog that is easily accessible both by screen readers >>> and >>> those who use only a keyboard. For just a few lines of code you can take >>> your users from being incredibly frustrated to being incredibly happy. >>> There >>> are a lot of web applications out there that use pop-up dialogs but very >>> few >>> get all of these pieces correct. Going halfway leads to more frustration >>> than anything else, so I hope this post has inspired you to make your >>> dialogs as accessible as possible. >>> >>> References >>> >>> WAI-ARIA <http://www.w3.org/WAI/intro/aria.php> (W3C) >>> >>> Delegating the focus and blur events >>> <http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html> >>> by >>> Peter-Paul Koch (Quirksmode) >>> >>> >>> >>> Register at the dedicated AccessIndia list for discussing accessibility >>> of >>> mobile phones / Tabs on: >>> http://mail.accessindia.org.in/mailman/listinfo/mobile.accessindia_accessindia.org.in >>> >>> >>> Search for old postings at: >>> http://www.mail-archive.com/accessindia@accessindia.org.in/ >>> >>> To unsubscribe send a message to >>> accessindia-requ...@accessindia.org.in >>> with the subject unsubscribe. >>> >>> To change your subscription to digest mode or make any other changes, >>> please >>> >>> visit the list home page at >>> http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in >>> >>> Regards >>> >>> Mukesh Baviskar >>> Mobile: 9403161157 >>> Skype id: mukeshbaviskar >>> Blog: >>> http://mukeshbaviskar.blogspot.com >>> >>> >>> Register at the dedicated AccessIndia list for discussing accessibility >>> of >>> mobile phones / Tabs on: >>> http://mail.accessindia.org.in/mailman/listinfo/mobile.accessindia_accessindia.org.in >>> >>> >>> Search for old postings at: >>> http://www.mail-archive.com/accessindia@accessindia.org.in/ >>> >>> To unsubscribe send a message to >>> accessindia-requ...@accessindia.org.in >>> with the subject unsubscribe. >>> >>> To change your subscription to digest mode or make any other changes, >>> please >>> visit the list home page at >>> http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in >> >> Register at the dedicated AccessIndia list for discussing accessibility of >> >> mobile phones / Tabs on: >> http://mail.accessindia.org.in/mailman/listinfo/mobile.accessindia_accessindia.org.in >> >> >> Search for old postings at: >> http://www.mail-archive.com/accessindia@accessindia.org.in/ >> >> To unsubscribe send a message to >> accessindia-requ...@accessindia.org.in >> with the subject unsubscribe. >> >> To change your subscription to digest mode or make any other changes, >> please visit the list home page at >> http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in >> > Register at the dedicated AccessIndia list for discussing accessibility of > mobile phones / Tabs on: > http://mail.accessindia.org.in/mailman/listinfo/mobile.accessindia_accessindia.org.in > > > Search for old postings at: > http://www.mail-archive.com/accessindia@accessindia.org.in/ > > To unsubscribe send a message to > accessindia-requ...@accessindia.org.in > with the subject unsubscribe. > > To change your subscription to digest mode or make any other changes, please > > visit the list home page at > http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in > > Regards > > Mukesh Baviskar > Mobile: 9403161157 > Skype id: mukeshbaviskar > Blog: > http://mukeshbaviskar.blogspot.com > > > Register at the dedicated AccessIndia list for discussing accessibility of > mobile phones / Tabs on: > http://mail.accessindia.org.in/mailman/listinfo/mobile.accessindia_accessindia.org.in > > > Search for old postings at: > http://www.mail-archive.com/accessindia@accessindia.org.in/ > > To unsubscribe send a message to > accessindia-requ...@accessindia.org.in > with the subject unsubscribe. > > To change your subscription to digest mode or make any other changes, please > visit the list home page at > http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in > > -- with regards J. yogesh Add me to your skype: romio.yogesh connect with me on facebook: yogeshyogi follow me on twitter: romioyogesh minds are like parashoot when it is open it is working fine Register at the dedicated AccessIndia list for discussing accessibility of mobile phones / Tabs on: http://mail.accessindia.org.in/mailman/listinfo/mobile.accessindia_accessindia.org.in Search for old postings at: http://www.mail-archive.com/accessindia@accessindia.org.in/ To unsubscribe send a message to accessindia-requ...@accessindia.org.in with the subject unsubscribe. To change your subscription to digest mode or make any other changes, please visit the list home page at http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in
