I am working with the ChromeVox extension to add a text reader for our church web site www.uulynchburg.org. When using the mouse to navigate, it is easy to click on a text block to start the reader. The problem comes for someone unable to use the mouse and relying on navigation keys. I can walk down the menu, but once a menu item is selected, I want the focus to jump from the memu to the start of the text in the content .
If you want to focus ChromeVox on a particular page element, you need to focus on that element.
Create a wrapper element which is focusable.
To make inherently un-focusable elements (non-form elements, buttons, links, etc) focusable, add tab-index="-1".)
<div id="main-content" tab-index="-1">
<h1>heading</h1>
</div>
Use javascript to focus on the element after navigating, on page load, or whatever event makes most sense.
document.getElementById('main-content').focus()
This is an example but you can select any specific element.
This technique is especially useful if you are building a single-page-app.
Related
I try to use column header menus and row context menus in my tabulator but nothing appear. Then I realize in the DOM that the menu is there but out of the window and at the top of the tree in the dom, it's the div with the class tabulator-menu.
The DOM, the div with smd take the whole page
I use Vuejs with Bootstrap 4.
How to make it appear at the right place ?
Thanks
The menu is appearing in exactly the correctly place in the DOM.
It is standard practice in a lot of context menu libraries to append the menu directly to the body rather than to the element that triggered it, this happens because menus are often long and overflow their containing element, by absolutely positioning the elements in the DOM the sit on top of these and prevent this being an issue.
It is hard to say without seeing an example, but it is likely a z-index issue that is causing the problem.
By default Tabulator menus have a z-index of 10,000 if you have anything with a z-index higher than this it will sit over the menu.
To resolve this you simply need to add a bit of CSS after you have imported the tablator style sheet, that changes the z-index to be higher than any others on your page:
.tabulator-menu{
z-index: 99999999;
}
I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement
I have a web application, in that application the head menus open when we move mouse on to that (I don't want to click on that head menus because clicking on that menus redirect the page to another page).
On mouse over it opens a menu list, I will be able to select the menu item but not able to hover on to the head menu so that a drop-down menu list can appear.
fire_event("onmouseover") is not working, it is only flashing that menu(element) but not opening the drop down menu list.
Can any one give me the solution How can I put hover on to any HTML element please.
Well, there is #hover method:
browser.element(:how => what).hover
And this could also help: How to find out which JavaScript events fired?
For some reason .hover doesn't work for me, but this one does:
browser.element(how: what).fire_event(:mouseover)
No idea why.
I'd like to use jquery masonry within a drop down menu, to organize the dynamic menu item blocks (images and text) in a complex drop down menu.
I'm having a couple of issues.
First of all, if I start with display:none then masonry doesn't do any position calculations. Since I'm using masonry with a drop down menu, I can't open the page with the drop down visible.
Secondly, the menu container has to be position:absolute so that the drop down opens Over the continuing page and doesn't push down the text below the menu. Masonry pushes the rest of the page down.
Thirdly, with IE 8 and 9 (didn't try 7 yet), when the I hide and show the dropdown, the blocks of items start off unorganized and then instantly switch to the organized masonry layout. It's the flash on every hide and show that I don't understand and can't get rid of.
Has anyone successfully used jquery masonry within a dropdown menu?
Thanks
According to the first issue, just use visibility:hidden and in hover event visibility: visible instead of display:none & display:block.
I need to create a DHTML menu with the specified features, but I can't figure out how to do it. Here's what I need:
All items are layed out horizontally. If they would be wider than the screen, two little arrows appear on the right side of the menu that allow to scroll it. Something like this:
+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+
Menu items should be clickable anywhere in the cell. They should stretch both vertically and horizontally to the contents. The text in the items should be centered both vertically and horizontally. The menu should work in IE7/Opera/FF/Safari.
The scrolling is the easy part - I just place it all in a container (say, a <div>), set the container to overflow: hidden and then play around in Javascript with clientWidth, scrollWidth and scrollLeft. That I've figured out and have already tried.
But how to make the menu items so stretchy, clickable anywhere and centered text?
Try the CSS below:
#menu {
display: table;
}
#menu a {
display:table-cell;
vertical-align:middle;
}
And then format your menu like:
<div id="menu">
normal text
<big>large text</big>
<span style="line-height:100px;">very tall text</span>
</div>
This will force vertical alignment and prevent the links from wrapping. Let us know how it works out.
OK, I talked with my superiors and they decided that it might be OK that you cannot right-click a menu item and select "Open in New Window". If this requirement is dropped, then I'm not bound to <a> elements for links. With JavaScript I can turn anything into a link. Thus, I choose you, pikachoo <table>!
Yap, it's a heresy, but it works. More specifically, it's the only construct that I can think of that can do all of the following at the same time:
Center text horizontally and vertically;
Stretch to contents horizontally and vertically;
Not wrap to next line when items are starting to overflow.
Anything else that can do the same will probably be more convulted anyway. And before anyone has the idea - no, I don't need search engine support. It's an internal web application. It'd be pretty bad if Google could index that...
clickable anywhere is easy: you can either bind the onclick event trigger (and hopefully some cursor styling) to the atomic cell element, or you can make the atomic cell elements <a> tags (or more likely wrap these in <li>) and link and style appropriately (padding, margin, foo).
e.g. case 1:
<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>
(obviously I don't really recommend inline styling or script handlers but you get the idea)
Applying padding will effectively centre the text, and having no width assigned they'll naturally stretch to fit their content.