This site (http://blindsa.org.za/) has been created for the Blind and needs to be fully accessible, however the screen reader is only reading 'Clickable' for the next & previous buttons on the revolution slider images that are at the top of the home page. Is there any way that I can change this to next slide and previous slide?
I can't tab to the next/prev buttons so I can't hear what the screen reader will say when focus goes to them. They're just <div> tags. There are several things you can do to help, if you have access to the html. These should all be added to the <div> tag.
add tabindex=0 so that I can tab to the buttons
add role=button so that I know it's a button
add aria-label='previous slide' and aria-label='next slide' so that I know what the buttons are for
add a keyboard handler (probably for onkeyup) so that I can hit space or enter to activate the button
Related
On my website, and seeimingly on every page on the internet that I'm searching on this problem exists, and I am wondering if anyone has a solution to this.
If a website has a navbar at the top, then you click your cursor on a textbox, scroll down on the page so the textbox is out of view. Start typing and the page will scroll back to the tetbox that you are typing on, except the navbar will be blocking the actual text, there is no offset to account for that navbar height.
Here it is in action on w3schools.com for example:
https://www.w3schools.com/html/html_forms.asp
I have set my cursor to the "Last name:" field.
Now I scroll down so the field is out of view.
Now start typing again. You will see the website scroll back to the field so it can be in view at the top of the page. But note that the navbar at the top is blocking it.
This is prevalent all over the internet. w3schools for example and even facebook.
Has anyone every noticed and solved this issue? I don't even know where to start.
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');
I have created a page containing a list of items. Each item has an image corresponding to it which when clicked directs the user to a new page containing more information about the item. For some reason, when I asked my friends to go through the site, most of them thought that these were non-clickable images. What can I do to make it more obvious that a user can actually click on the image? Below you can find a screenshot of the page I am talking about and this is a link to the actual page. Thanks in advance for your help.
1.You can add a title attribute to a link, like this:
<a title="Read more" href="https://thechallengeclub.wordpress.com/challenge-1-just-water/">
Then when user hover over the image a tooltip will appear:
2.You can add an easy to see "More" button. It's up to you where you add this button, but it may be necessary to change the layout a little bit.
For example:
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!
I have a webhierarchicaldatagrid and its first column is a template column which is a hyperlink. So onmouseover on the data of that column I want a small popup window to be open right next to that data so that user can drag the mouse on that popup window. The window contains few links which on click will navigate to another page. I want to know how to get the popup window to be open right next to the data and also how to keep it open only when the mouse is on it. as soon as the mouse is not on the popup I want the popup to close.
qTip is a pretty popular jQuery plugin that can do what you are wanting. Here is the demo page for the type of functionality you are describing:
Demo Fixed tooltips on hover
Here is another link, with 30 popular tooltip plugins:
30 Stylish jQuery Tooltip Plugins For Catchy Designs