I'm trying to define a title for a <select> tag which is read by the Android screen reader, mostly called "Talkback". On my test device (Galaxy S8+) it's called "Voice Assistant".
Interestingly, the following HTML works with NVDA (PC) and with VoiceOver (iOS), but I don't have any idea why it doesn't work on Android.
Here's the minimal example as HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<style>
form{
background: red;
margin: 5px 0;
}
label,
select{
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
Test link
<form action="/en" method="post" accept-charset="UTF-8">
<label name="edit-destination-1-label" id="edit-destination-1-label" for="edit-destination-1">Choose language</label>
<select id="edit-destination-1" name="edit-destination-1" aria-labelledby="edit-destination-1-label">
<option value="/de">German</option>
<option value="/fr">French</option>
<option value="/en" selected="selected">English</option>
</select>
</form>
Test link
</body>
</html>
As you can see it's just a reference of for and id as well as a reference of aria-labelledby.
Does anyone know a solution here? I just want the Android screen reader to speak "Choose language" and when you activate it, it should jump to the select menu.
For a working example reference take the post.ch page, section "calculate prices". When you navigate to it with Android it reads "Country" before the <select>.
EDIT What I've done to solve the problem temporary is to use a link instead of a label, as this works.
Related
I try to capture a photo from a camera (android) and then upload it to the server right away.
It works on my computer, but with Android, after taking the picture, the form is not submit.
Any idea why ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
h2 {
font-size: 3rem;
}
</style>
<script type="text/javascript">
function submitForm(){
document.getElementById("form").submit();
}
</script>
</head>
<body>
<form id="form" action="send.php" method="POST" enctype="multipart/form-data">
<input type="file" accept="image/*" capture="environment" onChange='submitForm()'/>
</form>
</body>
I have a nodogsplash version 0.9_beta9.9.9 installed on OpenWRT 15.05.01 device and they work well when I'm using the browser (mozzila, chrome) to access the captive portal and after click to 'Continue' they redirect me to pre-setting page.
This is my code:
`<!DOCTYPE html>
<html>
<head>
<!--
A client is authenticated by requesting the page $authtarget.
So, href to it here, with an img or link text the user can click on
Alternatively submit an HTTP form method=get, passing $authaction,
Also, note that any images you reference must reside in the
subdirectory that is the value of $imagesdir (default: "images").
Available variables:
error_msg: $error_msg
gatewayname: $gatewayname
tok: $tok
redir: $redir
authaction: $authaction
denyaction: $denyaction
authtarget: $authtarget
clientip: $clientip
clientmac: $clientmac
gatewaymac: $gatewaymac
nclients: $nclients
maxclients: $maxclients
uptime: $uptime
imagesdir: $imagesdir
pagesdir: $pagesdir
Additional Variables that can also be passed back via HTTP get.
Or just append them to the authentication link:
nodoguser
nodogpass
info
voucher
-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalida
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='shortcut icon' href='$imagesdir/splash.jpg' type='image/x-icon'
<title>$gatewayname Entry</title>
<style>
body
{
background-color:lightgrey;
color:black;
margin-left: 5%;
margin-right: 5%;
text-align: left;
}
img
{
width: 40%;
max-width: 180px;
margin-left: 0%;
margin-right: 5%;
}
input[type=submit]
{
color:black;
margin-left: 0%;
margin-right: 5%;
text-align:left;
font-size: 1.0em;
line-height: 2.5em;
font-weight: bold;
border: 1px solid;
}
</style>
</head>
<body>
<b>Funz Hotspot Gateway.</b>
<br>
<br>
<b>
<img src="$imagesdir/splash.jpg" alt="Splash Page:For access to the Interne
<hr>
<span style="color:red; font-style:normal;">
Bem Vindo!
</span>
</b>
<hr>
<br>
<b>Por favor, para acessar a internet clique em continuar.</b>
<br>
<br>
<hr>
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value='http://webapp.funz.com.br'>
<input type='submit' value='Continue'>
</form>
<hr>Copyright (C) 2004-2016. This software is released under the GNU GPL l
</body>
</html>
`
But the real problem is when I click to submit the form (see below) on a mobile device and the login "pop-up" closes instantly and I am not redirected to setting URL, But when I use the browser on the android device the redirect to the setting URL well.
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value="http://webapp.funz.com.br">
<input type='submit' value='Continue'>
</form>
Some One had some idea to solve this problem with the redirect to a URL with the nodogsplash Captive Portal on a Mobile devices.
Thanks Until now.
This is a default behavior of android captive network assistant. It is very specific about its functionality and one feature is, that when it finally detects it got connected to the internet, it immediately closes itself. It doesnt happen on iOS devices and older androids though.
You might want to try send the form with ajax and redirect manually, this way I think I have achieved holding the page longer, but I am not sure now why I abandoned this solution. Probably because some misbehavior on other devices.
I am currently developing an HTML kiosk presentation for iPad and Android. Issue I am having is with popup videos on Android, which works perfectly on iPad and also within Chrome on Android. I need to present this as a kiosk style application and so am using Protosee on iPad and Fully Kiosk Browser on android which I believe uses the Android Webview (Chromium) engine so should work too but doesn't.
Using FKB the video popup comes up but with a blank screen and a video icon in the centre, touching the screen again removes the popup and the video plays in the background.
Any pointers would be much appreciated.
Code is as follows
<html>
<head>
<title>BASE Charging Stand</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="logitech.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/logitech.js"></script>
</head>
<body>
<div class="main_content basechargingstand">
<div class="header">
<div class="hotspot" onclick="goBack()"></div>
<div class="hotspot"></div>
<div class="hotspot"></div>
</div>
<div class="page_navigation">
<div class="top_slot" onclick="goBack()"></div>
</div>
<div class="product_detail">
<div id="video_pop" onclick="onPopClick()"></div>
<a onclick="onVideoClick('videos/Base.mp4');">
<img src="images/play_btn_lrg.png" width="78"/>
</a>
<div class="hotspot 3col"></div>
</div>
</div>
</body>
</html>
</script>
function onVideoClick(theLink) {
document.getElementById("video_pop").innerHTML = "<video poster autoplay id=\"the_Video\"><source src=\""+theLink+"\" type=\"video/mp4\" ></video>";
document.getElementById("video_pop").style.display="block";
document.getElementById('video_pop').play();
}
function onPopClick() {
document.getElementById("video_pop").style.display="none";
document.getElementById("video_pop").innerHTML = "";
}
</script>
<style>
#video_pop {
z-index: 9999;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
background: rgb(193, 198, 201) !important;
display: none;
cursor: pointer;
top: 20.7%;
}
#the_Video {
width: 100%;
position: fixed;
top: 60.5%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
Android and iOS have disabled video autoplay with purpose! Imagine browsing the web with your phone and all the video advertisements that could be playing in the background will just simply eat up all your bandwidth.
While working with hybrid HTML clients, I used this trick/workaround to start autoplaying videos: When user entered the page for the first time, then <video> element with empty src has to be created the page (hidden somewhere). Whenever user touches the screen for the first time for whatever reason, then I tried to invoke play method on the video element (this breaks the first usergesture on html video element). This will usually give a small error/warning in console but that is okay because what matters is that the first user gesture has been made, thus enabling you to use play() method whenever you want! So after the first user gesture has been made, you simply just have to use the same <video> element!
I hope this helps.
I think that you cannot Autoplay a video inside a WebView in Android. I believe Android does it for security reasons, so apps don't use too much mobile data unless the user wants it. Maybe you could try it by having the video stored locally?
Is it a good way to use card in Materialize CSS as on click card popups it used for values to edit and save and it pops back i'm using it for android application using a Phonegap.
The real problem is i was not able to use modal in Materialize CSS as this is not responding well in my emulator.modal is pop up's without clicking.
Thanks in advance.
Sometime this will be happened when you use <a> tag. Instead of using<a> tag use <button> tag. I have added sample html code snippet. Try this.
HTML
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
Full Code in single html page.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<button data-target="modal1" class="btn modal-trigger">Click ME</button>
<div id="modal1" class="modal" style="width: 360px; max-height: 100%; height: 50%;" >
<div class="modal-content">
<h4>POP UP</h4>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
I am developing mobile webapplication using Phonegap and JQM. I have Page with form with Search Input which submits to self and suppose to get data from using AJAX Query from server.
I enter a text and hit enter on phone, form submit event handler executes but it does not execute on subsequently whenever I hit enter on phone keyboard. I tried to add event handler in pagainit, pagecreate but did not help so added script to page itself but its the same behavior. Whats the right way to add handler to form.
<html>
<head>
<title>MyApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/mobileinit.js"></script>
<script src="js/ios-orientationchange-fix.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/phonegap.js"></script>
</head>
<body >
<div data-role="page" id="index" >
<form id="indexsearchform" method="post" >
<div data-role="content">
<input type="search" id="txtbusinesssearch" placeholder="Search Business...."/>
</div>
</form>
<script type="text/javascript"><!--
$('#indexsearchform').submit(function(){
alert("hi");
});
--></script>
</div>
</body>
</html>
The reason why there's no second alert message in your form is simply because the form you see after clicking #submit button for the first time isn't the same form. It looks the same, it has the same markup, but that's because jQuery mobile submits the form to the same address you're on and displays the result.
There are two options what you can do
1)Use <form id="callAjaxForm" data-ajax="false">
The behavior after adding data-ajax="false" to the form results in jQuery mobile to submit the form regular way, so the page actually get reloaded and the click handler for #submit button works every time.
2)Just change the type="submit" to type="button"
And the normal button will work fine :)
Try this:
<form id="indexsearchform" method="post" onsubmit="functionToBeExecutedOnSubmit();" >