I use embedded tweets in my website, however, I would like to prevent any type of user interaction with these embedded tweets other than showing them to my users. Following the advise here, I wrapped the embed code inside a <div> element with the CSS property pointer-events:none, as in the example below, nevertheless, the embedded tweet in the remains clickable. Any ideas how to mask it with an invisible NON-CLICKABLE layer?
<div class="right" style="display:inline-block;float:left;pointer-events:none;z-index:2">
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Or hey, ya know, just relax and have fun. https://twitter.com/U53iZEL9O9</p>— Meg Turney (#megturney) February 19, 2020</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
What you wrote actually works well, and Chrome doesn't send click events to it. But we can add an eventListener to override anything that might be attached to it, and prevent the event from propagating with event.stopPropagation(). I added some CSS to disable text highlighting/selection as well.
It's a little hard to demonstrate an event is not firing, but you can see the console won't log the "Uh oh, I got clicked" message even if you click around.
document.querySelectorAll(".unclickable").forEach(
element => element.addEventListener("click",
event => {
event.preventDefault();
return event.stopPropagation();
}
)
);
.unclickable * {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}
<div onclick="console.log('Uh oh, I got clicked')" class="unclickable right" style="display:inline-block;float:left;pointer-events:none;z-index:2">
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Or hey, ya know, just relax and have fun. https://twitter.com/U53iZEL9O9</p>— Meg Turney (#megturney) February 19, 2020</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
The code below seems to work using your "twitter-tweet" class rather than the div to specify pointer events:
<head>
<style>
.twitter-tweet{
pointer-events: none;
}
</style>
</head>
<body>
<div class="right" style="display:inline-block;float:left;z-index:2">
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Or hey, ya know, just relax and have fun. https://twitter.com/U53iZEL9O9</p>— Meg Turney (#megturney) February 19, 2020</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</body>
However, when I run the code you've posted, it behaves as specified as well. It seems you may have other code preventing your efforts here. Nonetheless try adding pointer-events: none; to your twitter-tweet class instead.
Related
Recently while attempting to make my site accessible I stumbled upon a bizarre problem. During the process of setting up a 'skip navigation' link, I noticed that when the page is initially loaded (by 'initially loaded', I mean in a clean browser session, not on refresh—as NVDA keeps a track of the last focused element so results would be dependent on that).
When the page loaded and the tab key pressed, the element that received focus was the 2nd element (which as you will see from the below simplified example, is the site logo/name (also an anchor link)).
The problem doesn't show when NVDA is not running... everything works as expected, Firefox works perfectly fine with or without NVDA running but the problem is present in Chrome, Edge and Opera desktop. I've not tested it on any other browsers thus far.
Please note, because of the nature of the problem, I didn't include a runnable code snippet or fiddle (as there would be other elements on the screen and, as I said this problem only shows with a new browser session/clean page load. Here is some simplified code to show the problem...
CSS
body, html {
margin: 0;
}
.skip-nav {
position: absolute;
margin: 10px 0 0 10px;
white-space: nowrap;
display: inline-block;
padding: 0;
}
.skip-nav a {
position: absolute;
left: -1000px;
border: 2px solid blue;
border-radius: 2px;
background-color: black;
padding: 5px;
}
/* Move link into viewport when focused */
.skip-nav a:focus {
left: initial;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
background-color: darkblue;
padding: 10px;
color: white;
}
nav ul {
list-style: none;
}
nav li {
display: inline;
margin: 0 5px 0 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: rgb(165, 165, 165);
}
HTML
<!-- Should get focus first, only does in FF when NVDA is running, not in other tested browsers -->
<div class="skip-nav">
Skip navigation
</div>
<!-- Dummy nav bar -->
<nav>
Name
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<!-- Main site content -->
<section id="main-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dolores voluptates temporibus culpa in quia et magni laborum architecto fugit!
</section>
Things I have tried
The first thing I did was to disable all my browser extensions/test in Chrome incognito mode. Then I tried in the other browsers mentioned above. I also tried other focusable elements (such as a button and even a div with the 'tabindex=0' attribute set. I also put my initial link on its own (not within a parent div). All gave the same results.
Workaround
Instead of placing the link in a div, I put it in an ul/li... and it works perfectly...
<!-- Using a UL works... but not with bullets hidden
<ul class="skip-nav">
<li>
Skip navigation
</li>
</ul>
So I thought I would just set the list with the following property in my CSS...
list-style: none;
The bullet disappears but the problem returns...
For now, I've stuck with the 'fix', but instead of setting the list-style to none I've simply removed the padding from the list so that when it's over to the left side of the screen, the bullet remains off-screen and hidden. I've tested this in all browsers and it works, save for the fact that screen readers still read and announce the 'bullet' when traversing elements (in NVDA, using the arrow keys). Not a massive deal-breaker but this seems a very 'hacky' way of achieving (something close to) the desired result.
Just to summarise, to reproduce the problem the browser must be a new session. With the page loaded, the first tab press should focus the link in the 'skip-nav' div. Currently with the above example the initial tab seems to ignore the first link (unless in a bulleted list). However, shift-tabbing backwards then does focus the link as would be expected.
Is there something I'm missing?
This is a visual focus problem, when you load the page focus is placed on the document (by the browser) and the first link is already focused (by NVDA) if it isn't wrapped in a <ul>. NVDA also doesn't report that the item is focused using NVDA + Tab.
However if you press Space to activate the link you will see it is indeed focused as the URL updates.
My guess is it is something to do with how NVDA places the review cursor when focus changes programatically and how it interacts with the first item on the page.
Also if you put focus into the URL bar after the page loads (resetting the focus) and Tab into the document it behaves as expected.
This appears to be a long standing bug but I couldn't find any answers as to what particular part of the process causes this. It is also a bug I was unaware of until today so I will do some more digging (my sites are affected by this).
The only thing I can think is that the browser focuses the document the first link on the page is the first text and when the review cursor is placed on it it assumes that the link is activated (or focus is set by NVDA before the document is rendered...pure conjecture though).
How to fix for yourself
One way around this is to change your settings in NVDA.
Right click NVDA icon -> Preferences -> Review cursor... -> uncheck "Follow system focus".
At that point you will see that the first item on the page is automatically focused correctly.
How to fix for everyone else
It is debatable whether it needs fixing, Tab is not used as often as other methods by screen reader users and with the fact it is only on a brand new session (I mean I have never noticed it and I use a screen reader often, albeit only for testing not as a full time user) I imagine most people will not be affected.
As it only appears to happen if the first text on the page is a link you could work around it perhaps (I haven't had chance to test) by adding a span before it with a space.
<div class="skip-nav">
<span> </span>
Skip navigation
</div>
I will return to this question after some testing of the above but it may take a couple of days before I get chance.
Update
I was correct it seems, adding a span with a space fixes the issue and focus is shown correctly.
full HTML tested in the fiddle below, just added <span> </span> into the <header>, the first link then shows focus as expected:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NVDA focus Test</title>
</head>
<body >
<header>
<span> </span> <!---------------THIS IS WHAT I ADDED------------->
I should focus on first tab press
I should focus on second
</header>
<section style="margin-top: 20px;">
<p>
When you press tab after this page has loaded (at least for me), the initial tab press will focus the <i>second</i>
link for some reason.
</p>
<p>
This seems to happen however I present the link (on its own, wrapped in a div, section, or even a ul/li with the
list-style set to 'none') :-(.
</p>
</section>
</body>
</html>
Sample code
<style>
#parent-div {
visibility: hidden
}
#inner-div {
visibility: visible
}
</style>
<div id="parent-div">
NEED TO HIDE
<div id="inner-div">
NEED TO SHOW
</div>
</div>
Precondition: I can only edit css
Request: "NEED TO HIDE" should be hidden and "NEED TO SHOW" should be showed.
Problem: The code above works on PC browsers (Chrome, Firefox,...) but not work on iPhone's browsers (safari, Chrome) - I tested on iPhone 5 and 6.
My question:
How to fix above issue?
How to select "NEED TO HIDE" only? i.e: I want to change it's color, etc.
Thanks!
wondering if anybody can help a newbie? My code seems to work fine in Chrome but it doesn't display in IE.
The intention of the code is to show or hide a piece of text. This works fine in Chrome, but does not load correctly in IE10. Due to restrictions with the application I am using, I am unable to use javascript or any derivative.
Apologies if I have overlooked an article or post on this topic already, but I cannot see a relevant solution.
.answer,
#shown,
#hideaway:target {
display: none;
}
#hideaway:target+#shown,
#hideaway:target~.answer {
display: initial;
}
Click here for text
Hide text
<div class="answer">
<P>Text Goes Here</P>
</div>
Thanks in anticipation for any help you can provide!
You should try using the IE developer tools, you probably would have found the answer.
Anyway, initial is not supported by IE
As answer is a div, display: initial will be the same as display: block.
You can change the display: inital, to block. Because initial is not supported by any version of IE
.answer,
#shown,
#hideaway:target {
display: none;
}
#hideaway:target+#shown,
#hideaway:target~.answer {
display: block;
}
Click here for text
Hide text
<div class="answer">
<P>Text Goes Here</P>
</div>
The initial keyword is not supported in Internet Explorer 11 and earlier versions.
Use Display:block instead .
<style>
.answer,
#shown,
#hideaway:target{
display: none;
}
#hideaway:target + #shown,
#hideaway:target ~ .answer{
display: block;}
</style>
</head>
<body>
Click here for text
Hide text
<div class="answer">
<P>Text Goes Here</P>
</div>
</body>
I have a .jsp file that we use as a login page at https://com-bb-dev.com.edu and in that file it has a few lines laying out some links/buttons and a live chat button.
<h2><center>Accessibility Options</center></h2>
<ul>
<access class="access">
<img src="/images/ci/ng/fonts.gif" alt="" />
<a href="#" title="Change Text Size"
onClick="page.showChangeTextSizeHelp()">Change Text Size</a>
</access>
<access class="access">
<img src="/images/ci/ng/contrast.gif" alt="" />
High Contrast Setting
</li>
</access>
</ul>
<div id="parature">
<parature>
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);" onclick="return launchChatWindow('http://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="http://com.parature.com/ics/csrchat/inc/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
</parature>
</div>
Up within that same file I have declared some separate styles so that I can modify them without affecting anything else that is in the same . Here is what I declared:
parature
{
float: right;
margin-right: 18px;
position: relative;
bottom: 30px;
width: 138px;
}
access
{
display: inline-block;
margin: 0px -4px 6px;
font-size: 125%;
padding-left: 24px;
}
Of course, this works fine and the buttons and links display properly in Firefox and Chrome. And to my horrid dismay it does not work in IE8. You'll see that the button is treated as a direct down-the-line item and that the two links under accessibility options to not take on any CSS formatting. Is it because they are using styles that I declared locally in the .jsp page? I've already had to go back and discover that the ancient fossil didn't support transparency so that was fun to discover and fix. This is what I've tried so far:
parature
{
float:right;
width: 138px;
}
Because I read that floats don't work if the div doesn't have a width. Not sure what to look for. The IE8 developer pane is a total nightmare.
Thanks.
You are attempting to use custom elements, which you shouldn't be doing, but IE, specifically, will not style any elements it is not aware of. That would include every non-standard element you are attempting to use now.
This can be done using javascript. Google for "html5shim" for an example of how IE is updated to accept HTML5 elements.
EDIT: In addition, the elements you are using inside the ul are invalid since ul can only contain li elements.
There's no opening tag for the li. That could be the problem. If not, you might try using an inline-block on the parature class just to see if the block will render on the page.
Problem is very very simple: When clicking on "red red red" in browsers: Chrome 17, FireFox 10, IE 9, Opera 11.61 both elements have been lightened with their appropriate colors.
When clicking on "GREEN" it happens only in Chrome and FF. In IE and OPERA nothing happens. Why?
Demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.container:active
{
background: red;
}
.container:active .in
{
background: green;
}
</style>
</head>
<body>
<div class="container">
red<br />red<br />red<br />red<br />red<br />
<div class="in">GREEN</div>
</div>
</body>
</html>
Does anyone know any workarounds?
CSS does not define which elements can be "active" and if a parent element of a clicked-on element also becomes "active".
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
So all browsers are behaving according to the specs. Sorry!
If you want a workaround, try using an <a> element instead of the outer <div>. Need more styling then though. And the inner <div> should be an inline element to make sure it remains valid HTML.
Edit: And the <a> also must have a href attribute, otherwise it still won't work in IE. (Can't test on Opera here.)
jsFiddle
I believe you need to use Javascript to handle this, as CSS is not capable of selecting parent elements.
In jQuery:
$(document).ready(function(){
$('.container .in').mousein(function(){
$(this).addClass('container_active');
}).mouseout(function(){
$(this).removeClass('container_active');
});
});
http://jsfiddle.net/uYfna/8/