I have a couple of div elements with a title and a read more link. When a user clicks on the read more, the div element expands, showing the content, and the "read more" link converts to a "read less" link. When a user clicks the read less link, the div element contracts showing the read more link again.
The element works as it should, but I am trying to implement accessibility.
I toggle the div's aria-expanded attribute between true/false depending on whether the div tag is
expanded or contracted
I add an aria-label to the less link with the body content of the div
The latter works when I tab off the link and tab back on the Less link. Also, when I tab back in, I can use the enter key to contract and expand the div element, and only then screen readers will read the content
I tried setting the focus on the less link using JavaScript when the div expands, but that doesn't work.
How do I ensure screen readers read the content on the div element initial expands?
My query is similar to accordions. I found two examples of accessibility accordions and noticed that my screen reader (NVDA) does not read the initial hidden content when the answer becomes visible in both cases.
Accessible accordion example 1
Accessible accordion example 2 (example at the bottom of page)
Related
I'm writing a book. My CSS styles for vertical spacing of various elements (chapter, section, subsection, etc.) work fine, except when the section, subsection, etc., element falls at the top of the page of paged-media. I can manually tweak the ones that are CURRENTLY at the top of a page, but any changes that reflow the text mess it up (move it off of the top of a page).
I'm hoping to find a selector that says, "If this element appears at the top of a page (following automatic or manual page break) then select it.
So far, all I have been able to do is use an additional class, e.g. "topofpage", which I stupidly manually add to an element.
...without limiting the scroll inside the iframe or the need to specifically name the scrollable elements.
I have a google-map-like widget that can be embedded in 3rd party websites in the form of an iframe embed code. When people use mouse wheel over my widget I want only the content of the widget to scroll and not the parent page.
My question is similar to How to prevent page scrolling when scrolling a DIV element? but my problem is that my ifrmae contains multiple elements including media and canvas that must keep listening to mouse wheel event. TLDR the solution to use e.preventDefault() and manually update the scrollTop property of all elements inside the iframe that should stay scrollable is impractical, error prone and dependent on the non-standard wheelDelta property.
Here is a JS Bin for your convenience. Thank you.
While scrolling inside an iframe, the body doesn't know anything about what happens there. But when iframe scroller reach the bottom or the top, it pass scrolling to body.
See my jsFiddle and console log there.
I've got a pretty specific issue I'm running into and the theme developer has gone MIA.
I have linked a screencap of what the issue is and I'll try and describe it as best as possible here, too. If more info is needed, just let me know and I'll provide as much as possible.
Screencap: http://tinypic.com/r/53le1l/8
I'm using a pretty modified version of this theme, but nothing that should have an affect on the functionality of the theme:
http://www.themes.red-sun-design.com/?theme=lemonchili
As you can see - the homepage is designed to display widgets, each in their own container, as opposed to a custom page layout (we're ignoring the top slider as that isn't an issue). The widgets that are included in the theme work just fine and size correctly with whatever content is displayed.
homepage layer structure is (from back to front): background image --> sidebar/menu & page background--> page content (slider and widgets)
The issue is, with third-party widgets/plugins and pretty much any interactive content, those containers do not expand correctly and end up leaving the majority of the content not visible.
I'm using the plugin EventON (www.myeventon.com) and if a month has 2 events, as shown in the screencap, it displays fine. (NOTE: when an event is clicked/selected a lightbox pops up with event info - this isn't an issue) But if a month has 2+ events, the box resizes to display the info, but does not resize to fit everything else on the page.
If you look at the original theme demo, each box has spacing between each widget.
When you look at the screencap, you'll see that the spacing goes away and the extra events are (I'm assuming) being displayed underneath the widget below the eventON widget.
What I need is to make each of those containers responsive to the content that is being displayed in each one, regardless of the placement on the page while maintaining the same spacing between each widget container. Also, the actual page background needs to expand to meet content too, which doesn't seem to happen.
I've been trying to find a fix for about a week and am completely stuck.
Does all of that make sense - if this is confusing or if I'm not explaining it correctly, let me know.
Thanks.
The template has a very stiff design because each content div section (Hours, Latest Images, Lunch Special, Next Event, The Latest, and About) are absolutely positioned within the container div, and as far as I can tell, overflowing content is even hidden at the bottom of the main content section.
Using the Red Sun Themes as an example: You are correct, the overflowing contents from the "Latest Images" section (where you have your plugin) is displaying underneath the "Next Event" section.
One quick solution is to give the "Latest Images" div (this is the one that holds your plugin) a higher z-index than "Next Event". That way, it will display on top of "Next Event", instead of underneath it. Luckily the plugin isn't overflowing by much. Remember to give a z-index to all 3 divs in the column. Example: z-index:10; for "Latest Images", z-index:9; for "Next Event", and z-index:8; for the bottom "About" div.
Next size the height of your div to always have enough room for the plugin. Min-width may work well.
Then move "Next Event" a few pixels down so the overflow from "Latest Images" won't overlap its top. You'll probably have to move "About" down too.
Once you move the other 2 divs down, the bottom div might push past the bottom of the container, and its bottom contents may be hidden. One solution is to decrease the height of the divs by reducing font sizes/padding... Another solution is to increase the height of the main div that's directly under the container div. It looks like the height is in the html code too.
Note: From this end it appears that the template holds the div styles in the html code, so you may have to make your adjustments (z-index, top positioning) there.
Another solution would be to add a scrollbar (add width, and overflow:auto;) to the "Latest Images" section, so when the plugin overflowed, there would be a scrollbar. But then the content area would be effected by the size of the scrollbar.
I'm working on Wordpress site which I have modified the main menu to have the logo placed in the center which links to the home page. I've used a <span> to achieve this. I have given it a title attribute of home so that when the responsive menu kicks in at 767px it reads Home and not blank. Until it reaches that break point, I want it not displayed so it only shows the logo. I'm having trouble finding the right CSS
you can see the page here http://s513195336.onlinehome.us/
and this is the CSS I'm trying to work with
ul#menu-main-menu li#menu-item-3377 a title{ display:none }
I feel like I'm close because if I remove a title the menu item disappears.
What you will need to do is create two elements, one with the title and one without, and show or hide the desired element with media queries. Meaning, at 767px, the element without the title attribute will be set to display:none, and the one with the title would be set to display:block (or whatever), and the opposite for over 767px. Make sense?
This is easily found with the browser inspector. I prefer Chrome. Right-click on the item you want to inspect, and make sure you have the right tag. You will see the css in the inspector for that item. If you hover the section on the top right part of item inspection, a caption will appear with the exact address in the root directory.
Use FTP to make changes or your c-Panel
I have a page with an absolute positioned header that has: a logo, anchor links to portions of a table, and table headers. Content is the rest of a table. Scrolling affects only the table content then. I CSS'd it so the scroll bar is the height of the whole page, including the absolute positioned header. However, when I click an anchor link, it scrolls to display the section up top behind the header at the top of the page.
See for yourself here: http://www.surgpath4u.com/syndromes
Any ideas on how to make the anchor links display to below the header. I know I can make the content div separate from the header, but then the vertical scroll bars are not the height of the entire page, something I really want. The section ids are in tr tags.
Stumped. Any thoughts?
Did it.
Used jquery ScrollTo plugin and used the offset feature set to the height of the . For example, to go to , I use:
<a href="#" onclick="$.scrollTo( '#F', 1000, {offset: $('#head').height()*-1, easing:\'elasout\' } );">
The easing gives a nice animated look too. Works well and with the offset feature, I can change browser window sizes and it still works well.
Hope this helps someone.