Perhaps I've been searching for the wrong thing but I've not been able to find a solution of how to either style or disable the default way that browsers on iOS handle <select>. I know when you're actually developing for iOS applications it's called a UIPickerView. Whenever I search for this I always get links to app development help.
Is any one aware of a way to handle this?
The problem that we are having is that our security questions, on our form, are too long to see.
Note: The screen shot is not of our site. I was just trying to provide an image of that to which I was referring.
Related
I’m building a simple browser, and I’d like to code most of it using HTML/JS/CSS. I cannot use iframes to display pages, due to frame-busting. What are my options?
The browser is not meant to be production-quality, but as a proof-of-concept for my thesis, similar to this interactive mockup. The main features it will need to support are:
Loading any page without frame-busting (even google.com),
Detecting when a link is clicked and opening it in a new frame, with the original one remaining intact.
I intend to write this using Web technologies, but it’s OK if it needs to be wrapped up in a small amount of something else, e.g., to turn it into an Android app. However, if it’s possible, it would be best if I could load the app as a web page. Finally, it is also preferable to be able to run the app on an Android device, but it’s OK if it only works on a desktop.
In researching this question, I came across a few options:
<iframe>. Google.com doesn't load at all in an iframe. I tried using the sandbox attribute, but it still didn’t load. Is there a way around this (for any page)?
Mozilla’s Browser API. This API was supposed to allow you to use the mozbrowser attribute in an iframe when building FirefoxOS apps. I suspect there’s no longer any way to access it. I couldn’t get the sample browser app loaded, and it seems that mozbrowser is not supported in WebExtensions. Did I miss something? Is there a way to make this work?
<webview> in a Chrome app. This is the only option that worked so far. I was able to download and install the sample browser app in Chrome. The one downside is that it seems to be Chrome-only (and I would prefer cross-platform or Firefox, all else being equal). Are there any issues with this option? Any way to make it run without Chrome?
Electron app with <webview>. While the setup here is more complicated than the previous option, it seems like the code would be very similar (there’s even a similar sample browser app). Are there any advantages/disadvantages to this option over the previous?
So, are there ways to make options 1 or 2 work? Are there perhaps other options?
HTML/CSS is a "language" translated by the browser into pages. You cannot code a browser in HTML. The easiest solution is to code it in C#.
I'm not sure if this is a good solution, but you can try Electron (nodeJS). You will only need to use JS/CSS/HTML.
I'm working on a website that has to be accessible for almost anyone.
Currently, I'm trying to figure out a way to make checkboxes accessible by different types of screen readers, using the keyboard to navigate through the content. At the moment i'm using both the standard Windows Screenreader and NVDA (see https://www.nvaccess.org/). I've tried different solutions I found on the web, but i'm still stuck and I would love some tips and trix on how to implement these sorts of features. One thing to note is that it has to work for different types of browsers (ideal would be Microsoft Edge, Google Chrome and Internet Explorer).
The ideal scenario would be something like this:
1: Navigate to the checkbox (or list off checkboxes) using the tab key.
2: The screen reader informs me that it's a checkbox, it's current state (checked, not checked), and its label.
3: Space key will uncheck and check my checkbox, informing me of my actions.
Here's two different code snippets that I've tried, but they only work on Microsoft Edge and Internet Explorer:
<fieldset id="accept">
<legend> My legend </legend>
<input type ="checkbox" id ="chbox" name ="check_1">
<label for "chbox">This is my checkbox></label>
</fieldset>
And this is when i'm using the Struts checkbox tag.
<span class="">
<s:checkbox
label="someLabel"
name="someName" id="accept" />
</span>
These work as expected in Microsoft Edge and Internet Explorer, but whenever I'm using Google Chrome, the screen readers are having trouble figuring out my content. The scenario I'm having:
1: I'm tabbing to my Checkbox, the screen readers say "Tab".
2: I'm using the space key to uncheck my checkbox, the screen readers
say "Space". (It still unchecks my checkbox though)
Apart from this, I've tried to surround my code in different divs, assigning roles and web-aria, but nothing seems to work. As I'm totally new to this, I would love some 'best-practice' ideas and tips.
Any help is appreciated,
Thanks in advance.
First, I could suggest you not to use Struts checkbox as most of them are design for legacy browser. And it may not always best for modern screen reader.
Regarding the checkbox, the recent recommendations from ARIA reference is to use DOM structure <label><input>Text</label> over <label for>.
Or use aria-label on the checkbox. But the second way is less recommend due to different support from browser/screen reader. In some bad case, they could ignore or read duplicate by different way to read the line.
Well, it's kind of a Chrome Issue.
Check this as you're not the only one.
I don't know any solution for this, I've bumped into this a few years back, luckly I just had to make it at A/AA.
It's worth mentioning that Narrator does not support third party (non-Microsoft) browsers.
I have a set of pages in my site where I input similar data in each page.
I use very much the autofill of chrome to input the data without rewrite the entire sentence.
In a specific page, the autofill is not working. In another page of the same domain, the autofill works properly.
Anyone knows what the difference may have on this pages which causes this behavior?
Tks a lot
Without knowing your setup it's impossible to tell, but I stumbled upon two possible reasons.
There seems to be a bug/feature in Chrome 37 that prevents autofill on websites with invalid ssl-certificates.
The issue is being discussed here.
There's also the possibility that you are using both post and get requests. autofill seems to only be available on post forms. See here.
I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)
I would like to know if it is possible to modify Chrome or Firefox display settings, so that it would only show rectangles of HTML DOM objects? What I want to do is to decrease rendering engine job amount as much as possible, so it would only build layout of the page.
People usually refer to this mode of operation as "headless" (i.e. without UI).
Usually there's an additional requirement - to be able to run it server-side without the usual for client software installed. If you're running it client-side, I wouldn't bother about optimization, it shouldn't give you a big win anyway.
Otherwise, try searching using that term. I've seen it asked for several times, but haven't seen a working out-of-box solution.
[edit] just saw http://hg.mozilla.org/incubator/offscreen, which seems to be a headless version of Mozilla.
I wouldn't go as low-level as modifying the renderer. Instead, I suggest you use Firefox's Greasemonkey to replace the elements from the page with whatever it is you need. You'll need to know a bit of JavaScript, but it's not that hard.
However, this will only work on client side. If you want to do this on server-side ( so that it will work on any page a user requests through your own ), my guess is you'll need to grab the page's content in a string, and then modify it using a HTML parser.