Our company is addressing gaps in accessibility on the Native side of our app. We get a general diagnostic indicating lack of zooming on text on the Native app. The ticket looks like this:
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
Zooming and scaling should not be disabled.(meta[name="viewport"]).Fix the following: user-scalable on <meta> tag disables zooming on mobile devices
We use react-native-web which allows for both web and native in one codebase. Looking at the top HTML file, I don't see anything indicating user-scalable is disabled.
In order to be able to use pinch gesture to zoom in on text, do I need to go through every text component and add a prop to enable this? Don't want to use a jack hammer for a nail but we might have to if this is what's required. I would think it would be automatic.
Your ticket seems to come from an automatic test, by axe-core : https://dequeuniversity.com/rules/axe/4.4/meta-viewport
Unlike what your ticket said, it's not a WCAG 1.4.4 failure but an accessibility best practice for the web.
If you don't have user-scalable in your HTML file, maybe the automatic test did not run correctly ?
Anyway, to manually check if your mobile app is WCAG 1.4.4 compliant, you have to increase the font size to 200% in the accessibility settings of your phone.
You absolutely do NOT need to go through every text component.
The error is accurate. You have disabled some resizing capabilities in your meta tags.
Just check the head of your document for a meta tag with the attribute name="viewport". You will probably find it has an attribute of content set to either "width=device-width, user-scalable=no" or "width=device-width, user-scalable=0". Reset the content attribute to "width=device-width, initial-scale=1". You should be all set.
Related
In my project I'm using swiper.js as a slideshow, each slide either contains and image or a html5 video with webvtt captions / subtitles.
On debugging, we noticed that the subtitle position is wrong (too low, cuts off screen) on webkit browsers.
After much debugging it turned out that this css3 rule on the parent div (the swiper-wrapper) makes the vtt position wrongly:
transform: translate3d(-1024px, 0px, 0px)
When you put the video in the first slide, all goes well, since there's no css translate yet.
This seems to be a core webkit issue: default webvtt positioning breaks when using css translation on a parent.
The workaround I found is to add a line positioning in the vtt itself to every subtitle element, like so:
WEBVTT
00:00:02.160 --> 00:00:06.440 line:90%
hello world
00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles
Any sentence without the "line: 90%" part is rendered partly offscreen. It seems this setting forces the webvtt parser / renderer to set itself to the correct position.
QUESTION: did anyone encounter this issue yet and is there any other (easier) workaround for this bug? Adding the "line:" part to all subtitles would be a hell of a job.. unless there's a good editor that can do that stuff in batch.
QUESTION 2: Since this seems to be a webkit vtt parser bug, anyone know where to best report this?
Test setup here: http://orgonemedia.nl/webvtt-bug/
I'm currently debugging some WebVTT files for English captions and other languages too. I'm experiencing a similar problem, although I can't say what is exactly causing it. I'm going to try the line:90% fix you've suggested here.
ANSWER TO YOUR QUESTION 1: Regarding the job of adding it to all the subtitles, you'll be happy to know that's actually pretty easy with the right tool. I use Sublime Text Editor. The way I would do it is use "Find all" to find all the occurrences of -->, then simultaneously edit each of those lines, using the arrow key to navigate across to the right place on the line (since each subtitle out-time is the same number of characters, 12), then type in line:90%
UPDATE:
So I implemented your suggestion, using the method I outlined, and it successfully repositioned my captions.
More details: I was only experiencing the problem of captions being half off the bottom of the video when viewing on an iPad. Oddly enough, viewing the same page on an iPhone, they were positioned correctly without any change. The 90% change still adjusted it up though.
Intriguingly the line:90% code does nothing to adjust caption position when viewing the page on Chrome.
I'm having trouble getting much at all to display on Safari desktop. I think there's something invalid about my file format, but I'm darned if I can find it.
When editing the captions through my video hosting service's caption editor (I'm using JWPlayer), the timecodes show up as being invalid:
Image showing caption editor with invalid warning
The col-xs-* is used to control screen with with range: 0-767px.
This appears to be too large for my site.
In my case, I need grid options for a screen width that is larger than 500px AND another with range less than 500px, and that enables me to manage iphone screen with 320px for example.
I already has the media query as an answer, but I am expecting a more elegant answer.
Customize and Download your own version of Bootstrap after modifying the media query breakpoints:
http://getbootstrap.com/customize/#media-queries-breakpoints.
Alternatively, if you have node and grunt available on your system, you can actually add more LESS variables, such as a col-xss-*, or col-xlg-*, but this would require you to modify the source code (which is available to download VIA bootstrap's website).
Long story short, there isn't a way short of modifying the underlying bootstrap code.
this is not clear to me from the documentation and from the current behavior I see in my app: The stylesheets work nice using a web browser, but not on the mobile app.
So what I was looking for is how to apply different background images in our mobile app (or at least colors) to the navigation page (top level pages list) and any other pages. We would like to apply different styles to the our current, I guess default style but don't know how to do this. So at this point I do not know what I can ask our graphics designer to provide.
Any docs that I missed or examples I can look at?
Thanks,
Vincent
The styles you are using for the web are applied by RAP's theming. Currently Tabris does not support theming. The only option you have at the moment is to use the SWT setBackground.Image methods on the widget itself. To behave different as in the web you could use RWT.getClient().getService( ClientDevice.class ).getPlatform(); to distinguish between the mobile and web client.
For plone 4.2.5 is there a non-complicated way to set up theme switching between desktop/mobile versions based on visitors screen size?
Something like "if less than 640x480 then" serve the mobile version ?
Talking about 2 non-Diazo themes for instance?
What is ++skin++ for skin switching, may it work?
I am quite new to plone and not really a programmer so a "sane" solution would be really appreciated !
Take a look in portal_css (via the Zope Management Interface) and search for "mobile." In the ""CSS Media" field, you'll find:
handheld, screen and (max-device-width: 480px)
This sets up a media query that causes browsers to use the mobile.css stylesheet if they know (admit) they are a handheld device or if they have a screen width of 480px or less. This is all done through completely standard CSS, and you may use the same principles to achieve completely different page designs for different screen widths. There are several great books on responsive design ("responsive" is the magic word). You may customize this stylesheet, or add your own media query style sheets.
You can also see a thorough and popular use of media queries and responsive design in "Twitter Bootstrap," which provides all sorts of class selectors that you may use to change designs at various screen widths. A bootstrap example is included with the newer version of plone.app.theming that is included with Plone 4.3.
Note, if you want design to change when you reduce a window size (not just the screen size), use "max-width" rather than "max-device-width."
I don't think so. However, you should look into responsive design and media queries. I suspect you can achieve what you want using standards compliant CSS in a single theme.
http://plone.org/products/collective.themeswitcher/
This is an alternative implementation you can use. From the description:
This addon has been designed to easily support new switcher. At the moment the only switcher that is implemented is the "mobile switcher" based on user agent from http://detectmobilebrowsers.com/ (python version).
Is it possible to capture a snapshot of a video that's loaded using the HTML5 video element and use that as a preview image until the video loads or the play event is triggered? I know about the poster attribute but I want the thumbnail to be self generated, like a random frame from the video. Sort of what YouTube/Vimeo does.
Thanks,
I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.
However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.
check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)
Update
Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.
This because it would be possible to do this only inside the same domain due to browser security issues.