Below is my sample code, when user clicks arrow-down NVDA is reading section as clickable.
<section>
<p>How would you like to pay?</p>
<form>
<input type="text"/>
<button type="submit">Add</button>
</form>
</section>
I read somewhere that NVDA considers <section> as clickable, so I have tried changing <section> to <div> tag as shown below:
<div>
<p>How would you like to pay?</p>
<form>
<input type="text"/>
<button type="submit">Add</button>
</form>
</div>
But the issue still exist.
It is reading:
clickable
How would you like to pay?
Should not read <div> as clickable.
https://github.com/nvaccess/nvda/issues/5830 NVDA reads "Clickable" if there is mouse events associated with the dom element in question.
One solution would be to set tabindex=0 on the paragraph tag.
Here is a work around. in your section tag add:
<section role="presentation">
read this:
https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/presentation/
Related
function yes(event, yesicon) {
event.stopPropagation();
yesicon.closest('button').nextSibling.remove(); //Why doesn't this work???
yesicon.closest('button').remove(); //This works ok
}
<div class="doors_list" id="doors_list">
<button class="accordion">
<div>
<img src="Iconos/arrow_down.png" alt="Expand" class="arrow_icon">
</div>
<div>
<img src="Iconos/yes.png" onclick="yes(event,this);" alt="Yes" class="yes_icon">
</div>
<div>
<p class="door_room">Kitchen</p>
</div>
</button>
<div class="panel"> --THIS IS THE ONE I WANT TO DELETE --
<p>Info on Door 1</p>
</div>
</div>
Inside doors_list I actually have several buttons of class 'accordion' followed by the div of class 'panel' which is the one I want to delete for each one when the 'yes' icon is clicked.
What I want to do is to remove the next div of the class 'panel' with the "yes" function.
yesicon.closest('button') seems to be working ok but when I want to remove the nextSibling it doesn't seem to work.
You want to use nextElementSibling as it will, as its name implies, be the next sibling element. nextSibling will be whatever node follows, and in your case is going to be a text node: the white space characters between your elements.
function yes(event, yesicon) {
event.stopPropagation();
yesicon.closest('button').nextElementSibling.remove();
}
<div class="doors_list" id="doors_list">
<button class="accordion">
<div>
<img src="Iconos/arrow_down.png" alt="Expand" class="arrow_icon" />
</div>
<div>
<img src="Iconos/yes.png" onclick="yes(event,this);" alt="Yes" class="yes_icon" />
</div>
<div>
<p class="door_room">Kitchen</p>
</div>
</button>
<div class="panel">
--THIS IS THE ONE I WANT TO DELETE --
<p>Info on Door 1</p>
</div>
</div>
You have invalid HTML and that is the cause of your problem.
Leaving aside the issue that a <div> is not allowed inside a <button> in the first place…
The content of the button is:
Start div
img
End div
img
End div
Since there is no open div for the second end tag to close, error recovery implicitly closes the button, and then the div end tag closes the doors_list element.
Consequently: The element you are aiming for is not a sibling of the button, but of its parent.
Use a validator. Write valid HTML.
You forgot to open the div before your icon
</div>
<img src="Iconos/yes.png" onclick="yes(event,this);" alt="Yes" class="yes_icon">
</div>
I'm trying to hit this result: i have 2 div with their tab-index order in the same page, and when for example i'm navigating in the first div and i reach the last tab-index of that div, my focus don't go on the next div but restart from first tab-index of that div. Is this possible?
Example:
<div class="main">
<div class="container1">
<input tabindex="1"/>
<input tabindex="2" />
<input tabindex="3" />
</div>
<div class="container2">
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
</div>
</div>
Can you post your code?
Are you using tabindex="0" on all of them or are you setting a specific order by using tabindex-"1", tabindex="2" etc.?
My suggestion without seeing your code is that you are trying to put tabindex on an element that doesn't allow it.
Use tabindex="0" on elements like <div>, <span>, <p> that are not keyboard focusable. They will not work with tabindex="1" etc. If you are going to do this though you should specify a role="button" etc. on that element to let a screen reader know what the purpose of the focus is for example if the user is blind.
It's hard to answer this question for you without seeing the code.
Hope this helps! If you need more help, please post your code and I'd be glad to help more.
<div role="button" tabindex="0">A button</div>
<div role="link" tabindex="0">A link to somewhere</div>
I have five buttons in my html page. I used to create four of them by javascript and one with html, but after various changes decided to create all of them with html. The problem is that previously all of my buttons worked just fine, but after the change the ones previously made by javascript don't work anymore. I use getElementById("").onclick = function() for all of the buttons, yet only one of them works. (I only made the functionality for one of the four buttons because I encountered this problem)
Here is the javascript for both of the buttons. button1 is the one that doesn't work, I even tried with only having console.log() inside the function, but it didn't do anything.
document.getElementById("button1").onclick = function(){var element = document.getElementById('presetPicker');element.value = this.value;providerManager.refreshProviders();};
document.getElementById("DownloadXml").onclick = function (){createReport('http://192.168.0.101:8080/rest/v1/excel-reports/run/XLT_211607',verifyReport)};
Here is the html part of the page
<body>
<div id="container1">
<header>
<img src="http://www.jamk.fi/globalassets/tietoa-jamkista--about-jamk/materiaalit-esitteet-asiakaslehdet-ja-logot/jamkin-logot/jamk_fi--tunnus/jamkfi_tunnus_sininen_suomi.png" alt="Jamk logo" style="width:50%;height:50%;margin-left:25%;">
</header>
<div id="container2">
<div id="textContainer">
<h2>Fosfaattifosfori PO4-P [mg/l]</h2>
</div>
<div id="Graafi"></div>
<div class="input">
<div id="buttonContainer1">
<ul id="buttonList" class="timeForm">
<input id="button1" type="button" class="buttonGroup1" value="Previous day"
><input id="button2" type="button" class="buttonGroup1" value="Previous week"
><input id="button3" type="button" class="buttonGroup1" value="Previous month"
><input id="button4" type="button" class="buttonGroup1" value="Previous year">
</ul>
</div>
<div id="buttonContainer2">
<div id="list">
<ul id="downloadList">
<input id="DownloadXml" type="button" value="Download" />
</ul>
</div>
<div id="download_div">
<img id="loading_gif" src="/modules/dashboards/web/public/359.gif" alt="Loading" style="display:block;">
</div>
</div>
<iframe id="download_frame" style="display:none;"></iframe>
</div>
<div class="testi">
<select id="presetPicker" class="testi" ></select>
</div>
<footer>
</footer>
</div>
</div>
</body>
By adding an option <option value="Previous day">Previous day</option> to the select, your code works again. So either that is the problem, or the function providerManager.refreshProviders();, which I can't check, is giving you issues.
Can you please provide a jsFiddle with the example?
I think you are loading the script before the DOM elements are drawn.
Maybe a $(document).ready() should resolve.
I found the problem. Looks like there was no problem with the code itself, but I was using Firefox Web console to debug, and for some reason it didn't register any console.log() commands. After debugging with Browser console I found the debug data.
Feeling quite ashamed now
EDIT: should I remove the question or let it stay here to remind every starting developer to doubt their debug tools?
I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)
I am trying to use jQuery accordion widget. I want to use a common javascript code inside all the accordion section. For e.g I am trying to make a tab view inside every accordion section. The tab view is handled through an external javascript file created by me. Also I am using images slideshow inside every section of the accordion.It works for the a single section only. Whenever i try to paste the same html code in the next section of the accordion , javascript does not execute. The accordion still works. Waiting for your suggestions.
This is the html code
<div id="contentList"><h3 class="accHead" onclick="initAll('FoodCheck')">Food Check</h3>
<div class="accContent">
<ul class="menuHoriz">
<li>What ? </li>
<li>How ? </li>
<li>Who ? </li>
<li>Screenshots </li>
</ul>
<div id="what" class="content">
<p>
Details about the projects<br /> What. description
</p>
</div>
<div id="how" class="content">
<p>
Details about the projects<br /> How description
</p>
</div>
<div id="who" class="content">
<p>
Details about the projects<br /> Who description
</p>
</div>
<div id="screenshots" class="content">
<p>
<h2>FoodCheck Snapshots</h2>
<img height="468" width="250" src="images/FoodCheck/Screen_1.png" alt="First screen" id="slideshow" />
<div id="imgText"> </div>
<br clear="all" />
<form action="#">
<input type="button" id="prevLink" value="« Previous" />
<input type ="button" id="startAgain" value="Start Again">
<input type="button" id="nextLink" value="Next »" />
</form>
</p>
</div>
</div>
This is one of the section of accordion.
There are 3 more such sections. Each section has a Tabs (with id What, who, how, screenshots) in it which are controlled by an external javascript
In
<script type="text/javascript">
$(function() {
//set up the news accordion on the lower page
$("#contentList").accordion({ header: "h3", collapsible: true});
});
</script>
You will have to subscribe to element events and not use some global javascript functionality. Every acordion view can have various controls but they would need to be distinguished by either class or id attributes to attach to their events.
Some code would help of course. Can you provide some? but only relevant parts so ot won't be overwhelming.