I'm trying to make my HTML code accessible for a screenreaders like JAWS/Narrator.
I tried alot of different things to let JAWS read some text on my HTML page. I managed to get it working by using ARIA like this (the "role" attribute in the div):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head/>
<meta charset="utf-8" />
<title></title>
<script>...</script>
</head>
<body onpaste="return false" oncut="return false">
<div role="heading">
<PAGE id="PAGE"></PAGE>
</div>
</body>
</html>
I'm using Javascript to add the text:
function LoadPage(text)
{
document.getElementById("PAGE").innerHTML = text;
}
The problem is that JAWS reads the text, but it's impossible to navigate trough the words with it. When i press an arrow key, JAWS should tell the next character, but instead, it just repeats the text from the beginning. I know i'm not supposed to add main content text in a heading, but it's the only thing that works. Any suggestions or improvements would be welcome
Related
I am working on automating an area of a web page (not able to provide the webpage as the contents are confidential, although will try to give as much insight as possible).
This element has on it an html code preview that will change after some selections are done. Here is the page html of the element:
<div _ngcontent-hje-c241="" class="field" style="position: relative;">
<pre _ngcontent-hje-c241="" class="code-pre">
"
<!doctype html>
<html>
<head>
<meta charset='utf'>
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<style type='text/css'>body,html, #video {height:100%;margin:0;overflow:hidden;background-color:#000;}</style>
<script type='text/javascript'>
window.onload = function(event) {
var config = {containerID: 'video', Player: true, wmode: 'direct'};
myplayer = new Test.embed('WmAl', config);
}
</script>
</head>
<body>
<div id='video'></div>
</body>
</html>"
(I have edited and removed any confidentials parts of the string for the html, the html itself was not changed.)
I would need to get the value of the element I found through class="code-pre".
Here is what I have tried:
IWebElement htmlTest = driver.FindElement(By.ClassName("code-pre"));
var defaultHtmlTestValue = htmlTest.GetAttribute("value");
Assert.IsFalse(htmlTest.Equals(defaultHtmlTestValue), "The html has not changed after the Http selection");
The assert passes, altho, i would like to see what is the value that is being taken, as i feel like is not taking the html example i am trying to get.
I have also used Debug.Writeline(htmlTest) to see if it worked, but i got "Internal error in the expression evaluator". This is also an issue i will be trying to fix.
I am quite new to automation and stack overflow. Please let me know if there is a way i can improve this post.
I haven't worked with the html previews but looks like the whole html code is just the inner text of an element with class code-pre.
try doing :
String htmlTest = driver.FindElement(By.ClassName("code-pre")).getTex();
System.out.println(htmlTest);
Assert.assertTrue(htmlTest.Equals(defaultHtmlTestValue), "The html has not changed after the Http selection");
You can easily convert above java code into your language.
Windows 10 UWP Webview
I have the two html files located in a www folder under Assets (Assets/www/xxx.html) in a Windows 10 UWP, both files in VS 2015 are set to be copied to the output dir.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Script</title>
</head>
<body>
<form action="submit.html" method="post">
Data:<input type="text" name="somedata" > <br> <br>
<input type="submit" value="Submit" >
</form>
</body>
</html>
and submit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dummy Submission</title>
</head>
<body>
<h2> Your data has been submitted - Thank You. </h2>
</body>
</html>
The Webview object is embbeded in the XMAL as below
<WebView x:Name="WebBrowser" HorizontalAlignment="Left" VerticalAlignment="Top" Height="532" Width="1014" NavigationStarting="WebBrowser_NavigationStarting"/>
And the index page is loaded by
/// Helper to perform the navigation in webview
/// </summary>
/// <param name="url"></param>
private void NavigateWebview(string url)
{
try
{
Uri targetUri = new Uri(url);
WebBrowser.Navigate(targetUri);
}
catch (FormatException myE)
{
// Bad address
WebBrowser.NavigateToString(String.Format("<h1>Address is invalid, try again. Details --> {0}.</h1>", myE.Message));
}
}
NavigateWebview(#"ms-appx-web:///Assets/www/index.html");
The page loads and displays correctly but it will not display the linked 'submit.html' page, its just blank.
If I trap the Navigation event it does occur but appears to be prefixed by a GUID as show below.
I have changed paths to absolute etc and read the docs in detail but I fail to see why this does not work.
Ideas Please Guys ...
If I trap the Navigation event it does occur but appears to be prefixed by a GUID as show below
The "GUID" is the package name of current app, it is the default value of Authority part of URI schemes. So if you only want to navigate to another page, this absolutely path is right. You can test by code NavigateWebview(#"ms-appx-web://{your package name}/Assets//www/submit.html");
The page loads and displays correctly but it will not display the linked 'submit.html' page, its just blank
For your issue, I change the form method to get, it will work.
<form action="submit.html" method="get" id="myform">
Data:<input type="text" name="somedata"> <br> <br>
<input type="submit" value="Submit">
</form>
Please Click Me to jump
form has two methods for submiting the form data. Get sends form data via a URL string, post sends form data via the server. In my opinion, post method post data firstly and then navigate, and the data are handled at server side. I haven't seen posted form data received and handled on a HTML page, so I guess you did not need use post method. For get method you can receive data and deal them in javascript, here is how to do.
I'm trying to add several <img> tags to my html document from asp.net codebehind. I looked at Adding Html from Code Behind in Asp.net and it seems to be the solution, but I'm not sure how divcontrol.Controls.Add determines where exactly it's going to start adding html. For all I know, it's at the end of the html. I also found Write Html Markup from code behind in asp.net, but I'm not certain how to use it either.
So here's the html that I'm using. How can I add the img tag I have also included?:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gallery</title>
<script type='text/javascript' src='/jquery-11.0.min.js'></script>
<script type='text/javascript' src='theme-tiles.js'></script>
</head>
<body>
<form id="form1" runat="server">
<h2>Tiles - Justified</h2>
<div id="gallery" style="display:none;">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#gallery").gallery({
tiles_type: "justified"
});
});
</script>
</form>
</body>
</html>
This is the <img> tag that I need to add between the <div id="gallery"> tag:
<img alt="img1"
src="images/thumbs/tile1.jpg"
data-image="images/big/tile1.jpg"
style="display:none"/>
</a>
This is the code I would use to add the html:
HtmlGenericControl divcontrol = new HtmlGenericControl();
divcontrol.Attributes["class"] = "sxro sx1co";
divcontrol.TagName = "div";
pnlUserSearch.Controls.Add(divcontrol);
Label question = new Label();
divcontrol.Controls.Add(question); // add to the new div, not to the panel
If you're creating client-side HTML (not server controls) then you can just create a Literal, like this:
<div id="gallery" style="display:none;">
<asp:Literal runat="server" ID="MyLiteral" />
</div>
Then, in your code-behind, set
MyLiteral.Text = "<whatever html you want>"
I'm answering your question literally (no pun intended.) There may be better/other ways to accomplish the end goal. Mixing "normal" client HTML with webforms can get a little messy. Webforms wants you to do everything its way.
It might make more sense if your container div (gallery) is a server control instead. If you're looking to add multiple images then perhaps what you need is a Repeater.
To be really honest, if you're not too far down the development path it might be best to take a look at ASP.NET MVC instead.
Another approach:
Just add your image itself as a server control directly in the markup.
<div id="gallery" style="display:none;">
<img runat="server" ID="MyImage" Visible="False"/>
</div>
In your code-behind if you want to display it,
MyImage.Src = "/image url";
MyImage.Visible = true;
This is the original html url: http://www.tapuz.co.il/forums2008/forumpage.aspx?forumid=393&pagenumber=1
Original Link
And this is how i download the html:
private void GetHtml()
{
for (int i = 1; i < 2; i++)
{
webclient.DownloadFile(sourceUrl + i, combinedHtmlsDir + "\\Page" + i + ".html");
}
}
And the content i'm getting on saved html file is: this is the top lines of the content:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="פורום מזג האוויר - תפוז פורומים, קהילות בכל נושא שבעולם. בואו לדבר על מזג האוויר במערכת הפורומים הטובה ביותר ברשת." />
<meta name="keywords" content="פורום, פורומים, קהילות, מאמרים, מידע, דיון, תגובות ,תפוז, תפוז אנשים,מזג האוויר" />
And this is the top lines of the page view-source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="מתעניינים במזג האוויר? רוצים לקבל מידע אונליין על המתרחש? היכנסו לפורום מזג אוויר בתפוז!" />
<meta name="keywords" content="פורום, פורומים, קהילות, מאמרים, מידע, דיון, תגובות ,תפוז, תפוז אנשים,מזג האוויר, מזג אויר, חיזוי, אקלים, אטמוספירה, גשמים, חום, קור, משקעים, גשם, רוחות, רוח, עננות, עננים, ענן, צירוס, קומולוס, צירוסים, קומולוסים, קרה, ברד, קר, חם, מזג אוויר, לחות, nzd vtuuhr, דני רופ, מטאורולוג" />
The content is not the same. How can i download the same content of the view-source ? Could be the link i'm downloading from is different from the view-source one ?
I also tested now if i'm surfing to the website to the page and then making on it right click with the mouse and make save as and save it as: Webpage, HTML Only then it's fine the html file on my hard disk is 311KB size.
But with my program the html file size on the hard disk is only 77KB.
I can't figure out why it's not saving me the same content and size of html file in my program like if i'm doing save as.
If the page is dynamic (content will changes), I suspect your problem is that the content changed between your view source and your download.
If this is not the case avenues to pursue would be, checking if the browser/js changes the DOM tree that you see in your view source, or it's possible that the site changes it's content based on user agent.
Maybe you don't download the real source, but an interpreted code.
See https://stackoverflow.com/a/13070367/4592312 .
I want to use Valums file upload javascript. However, when I run the demo or the tests provided by them I get an Origin null is not allowed by Access-Control-Allow-Origin. in Chrome. It doesn't work on firefox either, but it seems to work on Internet Explorer.
The code is too long to post and I don't know where it goes wrong, if you need a part of the code I can add it in.
The html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="fileuploader.css" rel="stylesheet" type="text/css">
<style>
body {font-size:13px; font-family:arial, sans-serif; width:700px; margin:100px auto;}
</style>
</head>
<body>
<p>Back to project page</p>
<p>To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.</p>
<p>Progress-bar is supported in FF3.6+, Chrome6+, Safari4+</p>
<div id="file-uploader-demo1">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<script src="fileuploader.js" type="text/javascript"></script>
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: 'do-nothing.htm',
debug: true
});
}
// in your app create uploader as soon as the DOM is ready
// don't wait for the window to load
window.onload = createUploader;
</script>
</body>
</html>
There's probably nothing wrong with your code, but you're trying to violate the same origin policy. Basically, if your site is http://aaa.com/, you cannot make AJAX called to http://bbb.com/.