I am using bootstrap-table extensively and my application needs to be 508 compliant.
The search text field is displayed to the left of the button toolbar but in the html it is rendered afterwards.
This causes the search field to be skipped over when tabbing and it first cycles through all the buttons in the toolbar and then jumps back to the search field.
Is there an easy way to either make the search field display to the right of the toolbar or render the search field first so it tab's first?
Thanks for the help.
Related
I need to take screenshots of a web page. I want to highlight certain areas of the page before taking the screenshot. I am visually impaired, so using the mouse is out of the question.
I generally use shift and the arrow keys to select text. While this works on web pages, the text is selected, but not highlighted. IE I know it is selected, but someone who will look at the screenshot won't be able to see it.
Q: is there a way of highlighting text on a web page using the keyboard?
I am using Windows 11 with NVDA as my screen reader.
This appears to be possible with Google Chrome if the accessibility option "Navigate pages with a text cursor" is enabled—also known as "caret browsing". Here is a Google Chrome help article about it: "Use a text cursor to navigate & select text".
The article states that this setting can be toggled by pressing F7, or by opening the "Customize and control Google Chrome" menu, opening "Settings", navigating to the "Advanced" tab, then selecting "Accessibility".
This mode allows you to use the arrow keys to move the text cursor around the page, similar to if you were editing a block of text. Text can be visually highlighted by navigating to the start of the text you want to highlight, holding the Shift key, and then arrowing to the end of the text.
I'm not sure how well this will work in conjunction with NVDA though.
I am using CKEditor Standard Package Version 4.16.1/4.16.2, I am trying to make this CKEditor control as 508 Accessibility feature.
In order to be compliant with 508 standards CKEditor must be accessible by keyboard. So we need to be able to use the TAB button using keyboard to navigate through CKEditor's toolbar buttons.
Currently we couldn't get cursor focus on any of the CKEditor's toolbar buttons by using keyboard tab key.
If the cursor is in the input for Display Sequence and you press TAB the CKEditor's toolbar buttons will be skipped and the cursor focus will go straight to the text area of the CKEditor control. We want to make this CKEditor control and CKEditor's toolbar buttons as 508 accessibility standards compliant.
Please let me know if there is any easy to achieve this or if we need to make any config changes or code changes in order to make this CKEditor as 508 accessibility standards compliant. Thanks!
You need to press Alt+F10
Accessibility Support in CKEditor 4
I really like the EA 'Table of Content'. Info on it here: https://essential-addons.com/elementor/docs/table-of-content/
The problem is that when a person visits the page with the TOC enabled, the TOC opens fully which covers the text on the page. So the user has to close the TOC to read the content. Depending on your site design, this is not a problem on desktops.
But it is a real problem on mobile devices - most of the page gets covered.
All I want is the TOC to display as the standard collapsed button on the side. Then, if the user wants to look at the TOC, they can click on the button and it will open as normal.
That is, the initial state of the TOC should be closed (showing just the button on the side).
Is this possible?
This is how I want the control to initially display on the page
Here is a possibility using HTML5:
document.getElementById("eael-toc").classList.toggle('collapsed');
Was wondering if it was possible to have a drop down widget in app maker be required. In other words, users could not click submit unless they had selected a value from a down down menu. Kind of like how validation on text boxes.
When looking at the property editor for a drop down widget I don't see anything that will allow me to set the above requirement out of the box.
Below is the property editor for a drop down, you will notice there is no validation options.
Below that is the text box property editor with the validation option expanded. I basically need the same functionality for my drop down menu.
If anyone dealt with a similar issue I would appreciate any input.
Of course you have that option.
Look under DropDown menu you will find option called allowNull, deselect that option. Also select validationDisplay check box from 'Other' menu and users will have to choose from a drop down menu always.
Below are the screen for your reference,
Dropdown menu allowNull option,
Other menu validationDisplay option,
I have a responsive layout where the desktop view shows search, logo, login. In the xs/mobile view I would like the search and login to collapse into buttons. I can get this layout working just fine. The issue is that in the desktop view, I have a Search Options link that opens a popover with tabbed search forms. I'd like to still have that once you click the collapsed search button. My issue is that the popover is being created inside the tag instead of after it.
How can I set it up so that there is one div holding the search options that can be displayed from either the desktop view (search bar, Go button, search options link) as well as the mobile view (just a button with a search icon).
I am not tied to the popover- I just liked the look of it and I am not sure how to deal with the data-toggle as it currently is set to "collapse" and it seems I might need it to be able to also somehow be set to "dropdown."
Hopefully there is an easier/better way to do this!