I have some text which is spat out if JavaScript isn't turned on and this is currently failing an accessibility test.
It is within a <noscript> tag but the accessibility test is saying that the text is not included within a landmark.
None of the 8 standard roles seem to cover this, and I can see there is a generic role.
Is it therefore okay to use:
<noscript role="generic">
Or is that going to be a poor user experience for someone with a screenreader?
Thanks
Just fleshing this out a bit.
So actually when javascript is disabled via developer tools, the code just gets spat out on the with no tags at all. Looks like:
<body>
"Please ensure Javascript is enabled for purposes of.....
<meta charset="UTF-8">............
The first landmark I can see is on the navigation so the message itself is not wrapped within another landmark.
It is being flagged an error because of:
https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA20
https://alfa.siteimprove.com/rules/sia-r57
Based of the above, am I right in thinking I can either:
Wrap the message in <dialog>message to go here</dialog> OR
Bring the current message inside the <header> tag
Related
My site is using Angular 10 (With server side rendering). I referred to https://angular.io/guide/universal to convert the site into SSR. Everything is working fine. 'View Source' shows me the content, I can share with Social Media. My node server does not give me any error.
The only issue I am facing is - When it is rendered through the node server, it shows as HTML string. For few seconds user sees below:
<!DOCTYPE html> <html> <head> </head> <body> <h3>Step 1 - Add environment variable </h3> <p> ......</p> </body> </html>
Later it switches back to properly formatted HTML. The same is the case with material icons used on site. I see them as strings initially.
Please check out the link https://ecokrypt.com/dashboard/article/detail/5e59df2b00190207e65d9e99/4.3---Angular%253A-Consider-Different-Environments
Slow network throttling shows the issue clearly. This is giving a very bad end-user experience. Am I missing any step in SSR? How can I handle this? I tried to search this issue on google, but no luck.
OK guys, tell me what I am doing wrong... Is this a new Google Plus issue? Or — to use an old Facebook term I created — an Unannounced Platform Change? (note the date of this question)
Please Note that I'm asking about Google Plus Share Buttons, not the GP+1 like button which is a different beast…
The Description Tag is not passed thru to the share window or to the Google Plus page post. If you inspect the Google window code with Firebug, you will see this:
<div class="Zm"></div>
…which is where the description tag should display.
Demo and source code located here.
Now...
The demo and the more complex script are both HTML5 validated. I have tested this with both schema.org tags and open graph tags:
All Tags work fine in the Google Structured Data Testing Tool here.
Results are the same in both cases: description tag does not display, so that's not the problem.
I have tested this on http:// and https:// with the same results: description tag does not display, so that's not the problem.
I have tested this on FF22.0 with and without AdBlockPlus && Chrome 28.0 and the results are the same: description tag does not display, so that's not the problem.
I have tested different button types with the same results: description does not display, so that's not the problem.
And I have googled for hours… and cannot find any "current links" to this issue that are not simple code errors.
So what part of this am I missing?
Any ideas, comments, suggestions or solutions would be greatly appreciated!
Google+ dropped the shared page's description.
You can find indications of that by looking at the "Basic Page" example at https://developers.google.com/+/web/share/ which used to show a description until several weeks ago. The current status of Google documentation clearly shows that a "description" is not expected or used anymore.
<html>
<head>
<title>Share demo: Basic page</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
</head>
<body>
<g:plus action="share"></g:plus>
</body>
</html>
So, the only important tags are:
the "page title",
and — optionally — the "canonical link" (for SEO reasons).
That's it!
Obviously, Google downgraded website descriptions to less relevant in Google+ just like they did in their search engine a long time ago.
Most probably this was done for the same reasons Google once started to put less emphasis on the description of pages in their Search Engine product too: to avoid spam and keyword stuffing from polluting their Google Search and Google+ products.
For additional, "official" reference that Google generally marked descriptions to be "less important" a long time ago, check https://support.google.com/webmasters/answer/35624?rd=1 which states in the section "Create good meta descriptions":
...Google will sometimes use the meta description of a page in search results snippets, if we think it gives users a more accurate description than would be possible purely from the on-page content...
Well, "sometimes" obviously does not include Google+ (anymore) and — to be honest — I see their point. After all, you can (and should) "describe" the link in your Google+ post textarea yourself… which would also be the most logic thing to do: tell your users why the linked website is worth visiting instead of relying on a site's description.
You can use Google Snippet via meta tags to inform google what to display when your link is shared... You can view details # https://developers.google.com/+/web/snippet/ (Customize the snippet people see when your page is shared. Using this tool, you can generate code for your page that indicates the images and text that best represent what's being shared.)
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Add the following three tags inside head. -->
<meta itemprop="name" content="Title For Example.com">
<meta itemprop="description" content="Sample Description For The Article..">
<meta itemprop="image" content="http://www.example.com/1.jpg">
Hope this helps.
I am working on the accessibility issues in my project. I am using VS 2010 added a .htm file to the project and pasted the following html.
code snippet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Submit Go Question
</body>
</html>
When i right click on the html page in visual studio and say check accessibility it throws the following error.
Error 18 WCAG 13.1 : Clearly identify the target of links. Do not
use "Click Here". Use something descriptive, like "Map of
campus." C:\Raghu\Official\MVC\Lab 01 -ASP.NET-MVC-Fundamentals
MVC3\Source\Ex01-CreatingMusicStoreProject\Begin\TestAccessibility\TestAccessibility\TestPage.htm 8
When i analysed this error i found that whenever there is a word inside the HTML anchor tag with the combination of letters "Go" it throws this error.
The error is not thrown for GO or go letter combinations. The error is thrown even for words like Goals, Governance etc.,
I think this has got something to do with the combination of "G" in capital followed by "o" in lower case.
How to resolve that error (escaping the combination "Go")?
It isn't an error as such, but more a guideline for the text you should have as your link.
this page http://www.w3.org/WAI/wcag-curric/sam97-0.htm should give you an idea of what you should have as your links.
in your example you have Submit Go Question, the link text doesn't make sense. By using the word Submit, you are implying that the link is a button for accessibility purposes, when it actually is a link that will not submit a form.
better ways to put your text that might meet accessibility guidelines are
Start the questionnaire
Next question
Previous question
basically you have to describe where the links are taking you. going of the W3 guidelines, click here is a bad example, as accessibility-wise you might say 'click where?'
I am trying put place a Facebook Like-Box on a page on my site, and then style it via my own CSS (chiefly to increase the height awarded to div#stream_content. (The idea is to have the FB feed act as a news feed, but I don't want the user to have to scroll to see more the top two items or so as it does by default).
I have read and experimented with suggestions from these articles and more:
http://stackoverflow.com/questions/4064038/customizing-facebook-like-box,
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/,
http://hitech-tips.blogspot.com/2010/05/facebook-like-button-xfbml-tutorial.html
I am going the FBML route (rather than using an iframe) as I gather is required for applying a cross-domain stylesheet. I gather also that I need this doctype declaration for my webpage:
<!doctype html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
So then I have this in the body of the page:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box
profile_id="***my ID here***"
width="450"
height="600"
colorscheme="dark"
show_faces="false"
stream="true"
header="false"
logobar="0"
css="http://***my domain here***/css/FBstyles.css?1"
href="http://www.facebook.com/***my page name here***"
></fb:like-box>
But I still get these sorts of errors:
"(4) Unsafe JavaScript attempt to access frame with URL ...(my webpage)...from frame with URL http://www.facebook.com/plugins/likebox.php?channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Dfd907a0e%26origin...blahblahblah. Domains, protocols and ports must match."
Where am I screwing up?
I went this route too. Although you are using FBML, the actual embedded code ends up being an iframe anyway. (you can see it in the DOM with an HTML inspector after it loads). About the only thing I was able to do was put it in a div with a colored background, since the iframe is transparent, and a border.
You are probably getting errors since the javascript on the Facebook server is trying to access the CSS on your server. I didn't think you could do this.
EDIT:
In the StackOverflow link you provided, the posted answers clearly state that using your own CSS only works with a "Fan" box, not with a "Like" box.
Due to network or some other reasons, some sites do not have their css files loaded and you will see unformatted/un-layout-ed ugly page.
It happened to pages I did before also. Kind of beyond control from a developer/design point of view.
I'm thinking of something like this place at the top of the page and obvious:
/*.... header and stuff */
<body>
<h2 id="hiddennote">If you do not see this page properly, please refresh</h2>
/*.... rest of the page .... */
The external stylesheet have a definition like this:
/* other styles defined */
#hiddennote {display: none;}
Functionally I know it'll work. Any drawbacks?
Another potential drawback is that it depends on the user knowing what the page is supposed to look like. You could fix that by changing the language of the message to something like, "This page is not displaying properly! While you are free to use the content below, you may want to refresh your browser to try loading the layout and styling information." You could also include a screenshot, assuming your images are not hosted on the same troublesome network.
The obvious drawback is if the page fails to load the CSS the second time.