I have very very small code, where I describe behavior of button. But it don't react.
JS:
$('.boxbar').click(function(){alert('Click')});
HTML:
<div class="boxbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
CSS:
.boxbar
text-align: center
padding-bottom: 16px
padding-top: 12px
height: 58px
cursor: pointer
[class^='box']
color: $primary_font_color_W
background: $primary_color_bg
&:hover
background: $hold_color
color: $primary_font_color_B
First off the i tag is depreceated, use em. SECOND,Your div has no text or visual element value, it takes no real estate in the browser so you'll need content in the em tag to have something to react to your alert function.
Related
I have created a slideshow for a website using W3Schools HTML code (from here: https://www.w3schools.com/w3css/w3css_slideshow.asp)
It all works fine except that I cannot get NVDA to read any title or aria-label attached to the previous and next arrows on hover. It only reads on click, which is too late for someone using a screen reader.
I've changed the W3Schools code from actual buttons to this:
<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button" aria-label="previous">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button" aria-label="next">❯</div>
and tried several combinations including:
adding ids to a span with text and then referencing it with aria-labelledby in the button div
using title="Previous Slide"
using a special class="visually-hidden" using the clip method to hide the text (already used in the menu, but it doesn't read that, either)
various other similar options, to no avail.
What can I do to make NVDA read the label/text on hover? JavaScript is ok, but no jQuery, please. Thanks.
I think you have to use aria-describedby="previous" or "next" So NVDA can read it. More information here: https://www.powermapper.com/tests/screen-readers/labelling/a-aria-describedby/
If it does not work I am sorry. Let me know so I can delete
The following code works. I haven't included the JavaScript as it's not relevant to this post.
.gallery /*code for this demo only */ {
width: 100%;
margin: 1rem 0;
border: 1px solid red;
height: 50px;
}
.prev,
.next {
background-color: rgba(0,0,0,0.2);
cursor: pointer;
position: absolute;
top: 30px;
width: 10px;
padding: 15px;
margin-top: 22px;
color: var(--dark-green);
font-weight: bold;
font-size: 1.25rem;
transition: 0.6s ease;
border: none;
user-select: none;
left: 1rem;
}
.next {
left: unset;
right: 1rem;
border-radius: 3px 0 0 3px;
}
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
}
<div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮<span class="visually-hidden">Previous slide</span></div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯<span class="visually-hidden">Next slide</span></div>
I was facing the issue where nvda did not read the aria-label assigned to Icon or IconButton on hover. I wrapped the icon with span, set the role as img and assigned aria-label to span.
Previous:
<IconButton
aria-label="Some icon"
role="button"
>
<TodayIcon aria-label="Today"/>
</IconButton>
Current:
<IconButton
role="button"
>
<span role="img" aria-label="Today">
<TodayIcon />
</span>
</IconButton>
I got there in the end. I needed to move the forward and back symbols inside the spans and, as #robariissa01 said, I need to use the 'aria-label'. The code for the buttons is now this:
<div id="dp" class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button" aria-labelledby="ps"><span id="ps" for="dp" aria-label="Previous slide">❮</span></div>
<div id="dn" class="direction next" tabindex="0" onclick="plusSlides(1)" role="button" aria-labelledby="ns"><span id="ns" for="dn" aria-lable="Next slide">❯</span></div>
I'm new to web applications, so I don't know HTML, CSS and JS good enough to handle problems by myself yet. I followed some YT tutorial to create collapsible sidebar, but I don't know why it is collapsed as default and i can't make it opened. I think that the problem is that i don't know what exactly is going on in my code. Can you tell me what I'm doing wrong and help me understand how this should work?
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#selectGameSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
<i class="fa fa-fw fa-gamepad"></i> Select something</a>
<ul class="collapse list-unstyled">
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-home"></i> Home
</li>
<li>
<i class="fa fa-fw fa-user"></i> My profile
</li>
<li>
<i class="fa fa-fw fa-question-circle"></i> FAQ
</li>
<li>
<i class="fa fa-fw fa-phone"></i> Contact
</li>
<li>
<i class="fa fa-fw fa-sign-out-alt"></i> Logout
</li>
</ul>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<!-- some code -->
</div>
</div>
CSS:
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 0;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
#sidebar-wrapper .sidebar-header {
padding: 20px;
background: var(--black);
}
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
transition: 0.15s;
color: black;
}
#wrapper.menuDisplayed #sidebar-wrapper{
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
.sidebar-nav{
padding: 0;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a{
display: block;
text-decoration: none;
color: var(--gray);
}
.sidebar-nav ul li a {
font-size: 0.9em;
display: block;
color: var(--lightGray)
}
.sidebar-nav li a:hover{
color: #fff;
background: var(--gray);
}
.sidebar-nav ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: var(--deepBlue);
}
JS:
$("#menu-toggle").click(function(e){
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
Ok, I'll tell you how to achieve what you want (2 methods) and then I’ll explain how your code works.
method 1
in your first div (#wrapper), add the class menuDisplayed:
<div id="wrapper" class="menuDisplayed">
method 2
you can also change your CSS to do what you want and make the "menu displayed" the default style:
replace "menuDisplayed" with "menuHidden" throughout your code, so that it continues to make sense semantically
update styles for #sidebar-wrapper giving it a value other than 0 for width.
#sidebar-wrapper{
z-index: 1;
position: fixed;
width: 250px;
height: 100%;
overflow-y: hidden;
transition: 0.15s;
background-color: var(--black) ;
font-size: 1em;
}
now change styles for #page-content-wrapper too, so that it leaves room for your sidebar:
#page-content-wrapper{
width: 100%;
position: absolute;
padding: 15px;
padding-left: 250px; /* leaving 250px of space on the left */
transition: 0.15s;
color: black;
}
the next step is to make the closed sidebar have the right styles:
#wrapper.menuHidden #sidebar-wrapper{
width: 0; /* the element of id 'wrapper' and class 'menuHidden' must have width 0 */
}
#wrapper.menuHidden #page-content-wrapper {
padding-left: unset; /* clears the attribute that gave space to the sidebar */
}
now I'll explain how your code works (before you change the sidebar behavior):
your CSS tells the browser that the element with the sidebar-wrapper id should have null width (so it does not appear as soon as you load the page), but it also says that the element with id sidebar-wrapper should be 250px wide when inside another element that has the wrapper id and the menuDisplayed class.
the magic is in your javascript: it tells the browser to toggle the menuDisplay class of the element with id wrapper, which activates the CSS style that makes your sidebar 250px wide, and so it appears. when toggled again, the menuDisplayed class is deleted from the element with id wrapper and your sidebar returns to having width equal to 0.
the $("#menu-toggle").click adds an event listener for the 'click' event using jQuery. when this event is fired (someone clicks in the element with the menu-toggle id), the callback function is executed:
function(e){
e.preventDefault(); // prevents the default behavior of the element (if it is an anchor (<a></a>), it loses the ability to change pages, etc.)
$("#wrapper").toggleClass("menuDisplayed"); // toggles the class 'menuDisplayed' of the element with id 'wrapper'
}
You can add the class menuDisplayed to the navbar (with id #wrapper) initially, so on page load, it will be displayed.
<div id="wrapper" class="menuDisplayed">
you should add the class menuDisplayed to your #wrapper. then it can show by default.
<div id="wrapper" class="menuDisplayed">
full example can be found here :http://jsfiddle.net/9ojvnutc/
I have a simple HTML, CSS website that is also making use of JavaScript for animated navigation for a mobile only site.
Current Naviation
The HTML for the button:
<div class="navigations">
<div class="left">
<div class="leftinner" id="left">
<i class="fas fa-arrow-left"></i>
<span id="lefttext">CONTACT</span>
</div>
</div>
<div class="right">
<div class="rightinner" id="right">
<i class="fas fa-arrow-right"></i>
<span id="righttext">WEBSITE</span>
</div>
</div>
</div>
When the user clicks on the contact button it triggers a JS function that runs the following:
document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';
The issue I am having is when the user clicks the CONTACT button it triggers the WEBSITE button as well, almost as if the WEBSITE button has a hidden overlap over the CONTACT button. I have attempted using Flex Box, Float left, Float left and right, Display inline block, Display table with table-cell, column etc. The issue only persists on Chrome for Android, but works fine on iPhone and other browsers.
What would be the best way to fix this issue?
Apologies I can't share more than just the screenshot due to NDA reasons.
Edit
Here is the CSS for the navigation buttons, this uses the float left and right attempt.
.navigations .left {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: left;
}
.navigations .left .leftinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-right: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
.navigations .right {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: right;
}
.navigations .right .rightinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-left: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
So I managed to solve the issue with this.
Seems the float right on the text inside the right hand side button was the culprit. Changing how the right button moved its text to the right by making use of text-align: right;instead of float: right; solved the issue.
It seems that the floating right of text made the text's width 100% and overlap the button on the left.
I have a submit button in a form end. I found that even while clicking outside the button the entire row of div for button acts a button.
Is there any option in css for that?I can provide the code if you want..Thanks in advance
html:
<div id="submit">
<div id="block">
<button type="submit" id="submit">Create</button>
</div>
</div>
css:
button.submit-button {
font-size: 14px;
padding: 1px 2px;
color: #fff;
margin: 0px 70px;
margin-top: 5px;
border-radius: 1px;
}
I guess you have kept button inside an anchor tag having display:block like Button1 from snippet.
Make it to display:inline or display:inline-block
<div style="text-align:center">
<a href="#" style="display:block; background-color: yellow;">
<button>
button1
</button>
</a>
<div>
<a href="#" style="display:inline-block; background-color: yellow;">
<button>
button2
</button>
</a>
</div>
<button>
button3
</button>
</div>
UPDATE:
your div and button both having same id i.e, id="submit". It might be because of that. Change one of those id's
You may have a href element that is hasn't been ended or you may have the href element around the div not the button. It would be easier to answer with code but your button should look like;
<button>Your Button</button>
I made an example in JSFiddle.
Go have a look at it and try removing css attribute: display from #block or change it to inline and see what happens.
The size of the blue area is determined by your margin and padding on the button.
What you are looking for is display: inline-block; in this simple example you can see that the button is keeping his normal size while the div #submit is by default using the entire row.
And also i changed the selector of the button to id="button"
Check this sites out for more Info: w3s Display and w3s Selectors
You are having same id in div and button tag, you should change that first. and then your CSS would be
#button{
font-size: 14px;
padding: 1px 2px;
color: #fff;
margin: 0px 70px;
margin-top: 5px;
border-radius: 1px;
}
I hope it will help you.
I have made a small web page, the source code of which is available on FIDDLE. It uses a jquery plugin which I made for autocomplete.
The plugin adds a new div (.mridautocomplete-list) after the initialized inputs, which contains the autocomplete list :
<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>
<input class="test2">
<div class="mridautocomplete-list"></div>
<input class="test3">
<div class="mridautocomplete-list"></div>
The problem is :
This web page renders perfectly as expected on fiddle
But when I run the same code on my browser ( without fiddle ), it doesn't get displayed properly, shifting all elements ( SHOWN IN SCREENSHOTS ATTACHED )
Can anyone explain what might be causing the problem ?
Your .test2 class is a width of 80%.
The other inputs have a default width of 173px.
If you resize the fiddle window to a larger width, you will see the same issue.
To fix this you could add a display: block to your .test2 class.
Have you already tried the display CSS property? Setting the second input to "display: block" forces the 3rd input to the next line.
Another option is to place the autocomplete Javascript just before the closing body tag. This also worked for me in Chrome, Firefox and Safari.