I'm developing a website which needs to be accessible via the Xbox One browser, but can't find any information anywhere about web content guidelines or development specifications, requirements, or whatever. I'm not even sure which browser Xbox One uses. IE? Edge? Likewise, I can't even find contact information to reach out to them.
I know PS4 released this document a while ago, which states the limitations of its browser. Is there similar documentation for Xbox One? Additionally, is there more extensive information for PS4?
Can anybody provide any information about any of this?
Xbox One's browser runs a modified version of Internet Explorer 10.
This article by Microsoft has a fairly comprehensive list of the differences between IE 10 and XBOX One's browser.
It's also worth noting that XBOX One can be made to run Edge, as is pointed out in this SitePoint article.
Simply develop for those two browsers and you should be fine.
Some general development tips for XBOX One, taken from Microsoft:
Design for mouse, keyboard, touch, and controller
Design for 1024px width
Use adaptive design
CSS Media Queries or JavaScript can be used to change the layout of your page based on properties of the device that is loading the page.
On mobile devices, consider reducing image quality to save bandwidth and improve performance.
Minimize horizontal scrolling on narrow devices to improve readability
Avoid using plug-ins
Use HTML5 audio and video (H.264/AAC/MP3)
Avoid using pop-up windows
JavaScript debugging can be achieved by checking for the Xbox One user agent:
if (/Xbox One/.test(navigator.userAgent)) {
XBoxOne = true;
}
Hope this helps! :)
Xbox one browser is internet explorer minus a few html 5 capabilities... Maybe this is what your looking for? https://msdn.microsoft.com/en-us/library/dn532261(v=vs.85).aspx
You can use the gamepad api to handle controller events
xbox handles voice commands by scanning your webpage for interactive elements and adding them to Microsoft's speech recognition engine.
Keep your webpage relatively simple as recommended by Microsoft and avoid using drag-and-drop, hover, and timed interactions.
To maximize availability consider TV, PC, tablet, mobile screens
Users cannot copy and paste
w3c Geolocation services are not available
Happy developing!
Related
I've tried on getting browser info from javascript - navigator.userAgent, but cannot find any related string with "Vivaldi".
Please help to suggest if there are any other programming method or javascript can be used to detect Vivaldi browser?
The correct syntax in JavaScript is navigator.userAgent.
You can check window size, but it may be incorrect.
Vivaldi has its own sidebar and bottom bar that the others not.
But remember, user can change the window size to prevent detection.
According to Vivaldi, the userAgent will not have Vivaldi in it for a better user experience and mimic Chrome in all sites except a few known ones.
For the next release of Vivaldi, we have decided to try something different. The problem with our current approach is that with the web being almost infinite, we can’t possibly discover all the websites who have blocks set against us. Thus maintaining a list of sites where we present a non-Vivaldi User Agent is difficult. Instead, we will try doing the reverse. For a handful of sites where we know the label Vivaldi (and our version number) is responsibly used, we will present our full User Agent. Those sites being our own and a handful of interesting alternative search engines: duckduckgo.com, ecosia.org, qwant.com, and startpage.com. Every other site will get a User Agent that appears to be identical to Chrome.
src: https://vivaldi.com/blog/user-agent-changes/
Since you haven't mentioned your use case, assuming you are building sites, the best solution would be to do what everyone does. I recommend building websites agnostic to browsers and devices, but responsive to resolutions and feature support. Almost all of the browsers are running on Chromium these days, except Safari and Firefox (to my knowledge). So they are all going to work consistently across the board. For any given feature, one could always refer to w3c or mdn docs for compatibility and build around that.
Browser detection is also not quite reliable, as there are extensions to spoof the information. Like this extension that mimics a TV agent so one can run youtube console version on it.
On the other hand, once again I don't know your use case, one might benefit from platform detection over browser detection, like catering to mobile and TV users. Even then, if you have a site responsive enough the platform becomes non-essential information.
I am looking at trying to scan barcodes from a mobile device.
I been doing some research and I having hard time finding JavaScript libraries that can do this.
I see these projects
zxing
This seems to be no longer in development and just bugs fixes are done?
QuaggaJS
This one, I am not sure if it is development either anymore as changelog is from 2017
quagga2
This seems to be a fork of the one above? So this might be the better choice to go with vs the 2?
What I am trying to achieve is this. I want to go on an andriod device (think phone, maybe tablet), load up chrome or firefox, go to my site click a button and load up the devices camera and scan a bar code (mostly EAN-8/13).
I want to do the same thing on apple devices (iphone and ipad), load up safari (not sure if they got chrome and Firefox on these devices. I don't own apple), click a button and load up their devices cameras and scan a bar code.
I think this is possible in all the libraries I listed above, but I am still unclear if this is possible on apple devices? I read somewhere that before ios 14 it would not be possible?
I am open to other libaries, I can use Jquery, vanilla javascript and I think angular (but I think it is version 3).
Just been doing this same research myself. All of those open source ones you listed seem to be either dead or have performance/reliability issues. Looks like only the commercial versions are really viable at the moment:
Dynamsoft - https://www.dynamsoft.com/store/dynamsoft-barcode-reader/
Scanbot - https://scanbot.io/products/barcode-software/web-barcode-scanner/
There are also two different mobile apps that are viable. These are web apps that just display a browser view and make a barcode scanning function from the app itself available on the page:
https://berrywing.com/scan-to-web-app/
https://www.mochasoft.dk/iphone_barcode2.htm
The second one has a more capable JS API of the two.
UPDATE: I went with that last option from Mochasoft. Turned out quite well.
I am investigating how to differentiate tablets with Windows 8 and other devices. According to this doc http://msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx there should be "Touch" token in UserAgent in tablets with Windows.
But I am worried, will laptops with touchscreen also have this token in UserAgent. Unfortunately, do not have such device and test in myself.
Can someone please confirm that this "Touch" token is used in Internet Explorer for tablets and mobile phones only?
OK so I think you created a diversion for some here, you are not trying to detect touch per se as much as you want to detect if a device is a tablet or desktop. As I stated earlier in my comment you should not use any user agent string to do feature detection, ever. Detect the features directly.
FWIW here is how I detect touch support in DeepTissue :
this.touchType = window.navigator.pointerEnabled ? "pointer" :
"ontouchstart" in window ? "touch" : "mouse";
Notice how I detect pointer events first then fall back to other input modality APIs?
On to what I think the essence of your question really is, how can I design an interface that is optimized for legacy desktops and modern touch enabled devices? This is where you need to tap that artistic part of your mind and meld it with valuable UX research by folks like Jacob Nielson on what works and what does not work. As you have seen Microsoft, Google and Apple all struggle with this same question it is not easy to answer. My advice, based on lots of experience, is to create a simple, responsive UI and grow from that. Start mobile first and design up from there. Remember, if it works with fat fingers then it will work with a mouse pointer. Touch is a direct input modality, where a mouse in indirect, so the experience is slightly different.
Make all your data actionable. This means instead of a small touch target with an anchor wrapped around text make the anchor wrap around the product photo. Make sure there is enough padding within the anchor to make the touch targets easier to hit and make sure there are margins between adjacent targets to reduce errors.
This is not an easy question to answer with an exact science because each application has its own character or personality. Users vary, etc. But one thing is for sure touch is quickly replacing non-touch devices and you need to account for that in any application design.
You cannot guarantee that any token, let alone the touch token, will be used only for Windows tablets or phones. Period. For example, the UA string can be modified by third party controls, group policy, and even the end-user. It's unpredictable, at best.
I know of no standard that dictates (normatively) the contents of the user-agent string. Various browsers and user agents have copied elements of other user agent strings for their own purposes to ensure that their user agent receives content. Indeed, the IE team is already on record as saying that the user-agent string for Windows 10 is designed to ensure the delivery of content, rather than the identification of the browser.
Because of this, reliance on the user-agent string is no longer considered a "good" practice, let alone a best one. This is only one reason why Microsoft's content has been advocating feature detection and other practices since the release of IE9. (Other resources have been deprecating the user-agent string for much longer.)
You haven't said why you need to differentiate one manufacturer's tablets and phones from another or what changes you hope to offer such differentiated devices. As a result, it's difficult (if not impossible) to recommend a more effective approach.
If you are trying to create an app that works only on these devices, then the web platform is probably not the one to use. If you're looking to provide content or functionality specific to these devices, the Windows Store platform (or the .NET framework) may be more appropriate. If you're looking for a way to exclude these devices from your offerings, then you may wish to consider an Android or iOS specific platform instead.
The web platform is meant, in part, to be device agnostic, to enable a consistent--and predictable--set of functionality across a wide set of devices, form factors, and operating systems.
Hope this helps...
-- Lance
Mozilla says... ish.
var isTouch = 'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
Im working on a mobile optimised site. Im using media queries to detect the screen size and the majority of the content is still shown just formated differently.
The site has some JavaScript reliant interactive tools. What if any are the accessibility concerns for using JavaScript with mobile devices?
On desktop, non JavaScript users see a static list of the same information the interactive tool uses. I was thinking of the same solution for the mobile version but I guess im interested in more general answers for other situations as Ive not ready anything about accessibility and JavaScript specific to mobile.
Thanks
I would say the same rules apply wouldn't they? Some users may have js turned off, you never know.
Mobile or not, it's still on the web and needs to work regardless of js.
Most screen readers work on the DOM. Properly written Javascript can really help accessibility (just like properly written CSS & HTML).
Not working with Javascript enabled is more of a problem for security conscious folks than it is for most screen reader users. That being said, a progressive enhancement approach will ensure that your content is available to the widest range of people.
The older WCAG 1.0 Mobile Guidelines - http://www.w3.org/WAI/mobile/
A Newer WCAG 2.0 set of Mobile Guidelines - http://www.funkanu.se/en/About-Funka/News/News-archive-en/Mobile-accessibility-guidelines/
I know this is a bit of perennial question, but here goes: I want to know whether the device my site is being accessed with is a touchscreen. That means phones and iPads, of course, which are individually detectable, but also other touchscreens that may well be running flavors of Windows. Any chance of determining the presence or absence of a mouse on those?
Let's say I'm willing to use a large JavaScript library like Modernizr. Will that help any?
You might want to look into MobileESP. Not touchscreens only, but it at least gives you some detection capabilities. From their page:
The MobileESP project seeks to provide
web site developers an easy-to-use and
lightweight API for detecting whether
visitors are using a mobile device,
and if so, what kind. The APIs provide
simple boolean results for popular
individual device OS categories (such
as iPhone, BlackBerry, Symbian S60,
and Windows Mobile), device
capabilities (e.g., J2ME), and broad
classes of devices, such as "iPhone
Tier" (iPhone/Android/WebOS) and
smartphones.
Try http://wurfl.sourceforge.net/ for device capabilities.