I'm currently trying to develop a lightbox that will be 508/ADA compliant; to achieve this, I need to make a lightbox appear (already done) and then have a reader such as NVDA read what's on the lightbox instead of changing focus to the page-text directly behind the lightbox and read that. In a more concise way - have the lightbox appear onload, have the focus remain on the lightbox and have NVDA read what's on the lightbox without going back to the background. I'll keep updating should I come to an answer before someone else provides one.
There is no solution for this problem at this moment -
This is a NVDA problem with Aria-hidden not being properly recognized.http://www.nvda-project.org/ticket/2706 // http://www.nvda-project.org/ticket/2117 -
The solution I propose:
Create an iFrame - or DIV - that expands or collapses / Appear or Dissapper only when a message is meant to be displayed. This will create a "focusable" area which can then be the point of reference for NVDA. I'll continue to work on a JavaScript/JQuery solution for this problem.
I would suggest you to use role="alertdialog" or role="dialog". This helps the screenreader to pick read the contents of the lightbox.
Related
I've researched this topic for quite sometime now and haven't been able to find any conclusive answers.
I've a template that creates an html5 video but that template is created on two separate events and has a different set of CSS with either call.
In one call, the video element is rendered with full screen and all is well.
In the other, the full screen button is missing and in Chrome I managed to solve it using video::-webkit-media-controls-fullscreen-button display option in CSS.
Now I started checking other options and I see that the button is missing, and I don't see any other css options I can depend upon.
My question is, other than using custom controls, what else can I do to fix this?
Thanks in advance.
I believe your template changes something, or doesn't add for example "control" attribute.
Here is a simple example of HTML5 Video, and full-screen option works in all modern browsers: http://www.w3schools.com/html/html5_video.asp
Click "Try it Yourself >>" to see the code.
I created a logo quiz in Asp.net. What I want is when the user fills the quiz he should not be able to right click and select on 'Search Google for image'.
Earlier I thought of using an alert using JavaScript but that can be disabled in the browser. Need a permanent solution for this.
Thanks in advance.
You could cancel the right-click event on the image. It would of course only work with JavaScript enabled, but there is no way of disabling that option altogether.
I know this is an old post, but, in case anyone else is trying to resolve the issue.
You can certainly disable the context menu in javascript, you can also render the image underneath a transparent object any attempts to click, or context menu the image would result in the click or context menu of the transparent image being triggered.
You could also add your image in css as a background image to a regular html element.
The context menu won't show up for it, but, inspect image will show a clickable link in the css attributes that anyone knowing a little web development will know about.
The best answer is a combination of the css and the transparent overlay.
I'm having problems making FullCalendar fully accessible. I'm using the default month view and can't access the next, previous, and today buttons on the top right without using a mouse. If I run a screen reader, I can access those buttons but not without running the screen reader.
And on another note, I currently am using tool tips that pop up when you mouse over an event title to display more information. If anyone has any tips on how to make those accessible to a screen reader or accessible without a mouse, I'd greatly appreciate it!
Regarding the buttons, I would advice that you write new buttons if accessibility is important. These buttons you could then hook up to your own javascript functions that moves to previous and next.
Check out this documentation example
Regarding the second problem, I think that's the same problem not just for physically impaired but also for things like mobile browsers. My tip would be to avoid onmouseover if the information that appears is really important.
This is my first question on Stack Overflow. I heard this site was a great resource for website developers. I'm new and still learning so this should be easy.
I am making a photo gallery that has a few small thumbnail images and a large image in the middle, all on the same page. I want to make it so that when you click on each thumbnail the large image in the middle of the page changes.
Is there a way to do this with pure CSS and no javascript? Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
Thank you in advance for any help! I look forward to participating here often!
Is there a way to do this with pure CSS and no javascript?
It is possible, but not well supported in browsers.
You could link to the images and use :target to change the display property from none to block.
The problem with this is that if the browser supports display (i.e. almost all of them) but not :target (i.e. lots of them) then some images will simply be unavailable.
Is it also possible to preload all the large images so that each time you click a thumbnail the large image in the middle just pops right up?
This would achieve that.
However, preloading the large versions of all the images would be quite a painful load on users' bandwidth.
Individual pages which use some form of include or server side process to duplicate the navigation are still the way to go.
I don't think there's a good way to do this with no Javascript.
With minimal Javascript, you could have all of the large images hidden, and use onClick on the thumbnails to un-hide the appropriate image.
With more Javascript, you could keep changing the src attribute of the large image and preload images using Javascript as well (see http://www.pageresource.com/jscript/jpreload.htm).
A google search brought back some methods using pure CSS but I would suggest using a jquery plug-in like galleria. JQuery Plugins make this easy.
I have one web page in ASP.NET and I want that page to be disabled until the whole page loading process gets completed.
One way is to activate a lightbox without content that will dim the whole page and then on the body onload event hide that lightbox.
Lightbox is a like having a modal window above the original window, and is used to preview pictures and other content. It could easy be modified to do what you want. Just activate a lightbox with no content and then hide the lightbox when the document is loaded.
This is a strange requirement and I would be interested in finding out your reason for doing this. Is there a problem or error that is ocurring. Perhaps you think the best way to prevent the error is to freeze the UI until the page loads.
I think that you should edit your question and describe what the underlying issue is. There might be a better way to improve your page.
I've seen this done with a simple overlay before.
Basically an iframe and a div that covers the page and has a high z-index is output at the beginning of page render. This is styled so it greys the page out and it also makes everything non-clickable. Then, once the page is loaded, a simple bit of javascript can be used to remove the div and iframe (or just set their styles to make them disappear).
I've also seen people attempt this issue by manually iterating over all controls on the page in JavaScript and disabling them. This is a horrible way to attempt it :)
The jQuery BlockUI plugin is another good option with lots of customization options.