I have header and navigation and then next section with slider. since the slider section is having aria-live, screen readers read the slider contents directly. When i tab the menu navigation links, slider contents are read aloud and interuppted.
VoiceOver already reads in DOM order. If you have aria-live on an element and you update that element, you are telling VoiceOver to read the contents of that element. That's the whole point of aria-live.
I'm guessing by "slider" you mean something like a carousel and not something like:
<input type="range" min="1" max="100" value="50">
When a carousel rotates in new content, depending on how it's implemented, it might be updating the DOM and causing aria-live to be triggered. However, most carousels already have all the elements and just hide/unhide them as the scroll into view. Unhiding an element does not trigger an aria-live region.
If you have a carousel that rotates content in automatically, you will need a pause button to stop the carousel, otherwise you'd be violating WCAG 2.2.2 Pause, Stop, Hide
Related
I'm not sure who here is familiar with using custom CSS styling within the Mendix Low-Code Development platform, but I'm running low on ideas so I figured it was worth the shot.
So for the app we’re working on, one of the things we have is a popup that comes up that users can input information on. It has an autocomplete widget, two date pickers, a radio buttons widget, and a template grid, and then below all of these input widgets are two buttons (Continue and Cancel). The template grid has the paging buttons active on it, and has some custom CSS styling active on it to set it to a specific height, enable y-axis scrolling on autoflow, and move the paging buttons to the bottom of the template grid instead of the top.
Clicking to go anywhere but the first or last page works fine, however clicking the “last page” button, or clicking the “next page” button to go to the last page, will result in everything but the template grid, and the continue and cancel buttons disappearing, and the template grid’s height shrinks to an unusable level. In the opposite direction, clicking the “first page” button, or clicking the “previous page” button to go the the first page, will result in essentially the entire popup being wiped out, with all the input widgets and action buttons disappearing, and leaving just a white page.
After looking around, it seems it’s due to some custom CSS that I had taken from a Mendix community forum post that I used to move the paging buttons on the template grid to the bottom of the grid as opposed to the top that’s causing the issue. If it’s because of issues with the paging buttons trying to readjust, is there a way to edit this CSS code so that these issues do not happen? The CSS code I used is shown below, any critiques on it would be super appreciated. Thank you!
.mx-grid.mx-templategrid{
display: flex;
flex-direction:column;
}
.mx-grid-searchbar{
order: 1;
}
.mx-grid-controlbar{
order: 2;
}
.mx-grid-content{
order: 1;
}
I have a dialog box in my application which displays a list of cards. I made a jsbin simplified version of it
http://jsbin.com/qopocej/edit?html,output
If I click on the blue outline on any of the cards a nice dialog box pops up with a short menu item in it. Particularly click on the blue outline below 'Joe' and see how the dialog box covers the current card and those surrounding it.
I need to refactor the code so that this current element in each card action is a new custom element, which brings with it all the functionality of displaying the menu dialog box. In the real application this does some ajax calls to the serve to update information.
The problem I have is that the very fact of refactoring has destroyed the way the dialog box displays. This is shown is this jsbin
http://jsbin.com/vecoxuh/edit?html,output
Click on the red box under 'Joe' and see how the dialog box is above the current card, but slips under the other cards nearby
I assume it is something to do with "stacking context", since the explicit styles that has added a z-index to each of the two dialog boxes should imply it still works, but it doesn't
The .item with an active dialog needs to be set a z-index that's higher than its siblings. The child dropdown menu's z-index is relative to that of its parents, no matter what it's explicitly set to. So if the furthermost parent does not have a z-index that enables it to overlap the other cards, none of its children will be able to do the same.
I have run into an issue with the paper-dropdown-menu component, where it's expansion height seems to be limited by an enclosing core-collapse on its containing element. Is there a way to prevent this from occurring? (see images demonstrating symptoms below) Another related side effect seems to be that when the number of items in the dropdown creates a dropdown height that would normally expand below the bottom of the containing collapsible element, it causes the CSS top styling of the dropdown to be overridden, nudging the top of the element higher within the collapsible container element itself while it is expanded. Irregardless of its new top alignment, it still doesn't show the entire list of options as the height of the dropdown itself remains the same. Has anyone run into similar issues? I can post a jsbin, but its a bit convoluted due to me using a custom polymer element that consists of the icon, input control, and an optionally displayed/selectable unit of measure. So before doing that I was hoping someone might recognize this issue right away and be able to point me in the right direction. This is using chrome v38 and the latest paper-dropdown-menu and core-collapse components (bower ^0.4.0)
Unexpanded (note the top alignment):
Expanded (there should be 5 options, but they are being cut off by core-collapse and note the altered top alignment as well):
Proper operation (when dropdown height is same or less than containing collapsible element height):
In core-collapse there is new property 'allowOverflow' to allow collapsible element to overflow when it's opened. This should help paper-dropdown-menu to expand inside core-collapse. The new property is only in core-collapse#master branch and will be available in the next release.
<core-collapse allowOverflow>
<div class="content">
<paper-dropdown-menu>
...
</paper-dropdown-menu>
</div>
</core-collapse>
The new 'layered' attribute of the latest version of paper-dropdown resolves this issue.
I've developed a static advert ticker that sits at the bottom of the window. This is in an <iframe> to make it easier for other people to place the unit on their sites. Another <span> around the <iframe> keeps it fixed to the bottom of the screen. The script has a help window which is within a tag - within the <iframe> and uses the visible / hidden property to show or hide text.
Now since the code is in an <iframe>, the help text would not appear on main window. To get around this, I made the <iframe> larger,and set it to transparent.
Visually, everything is fine. When the user clicks a button on the ticker, the help menu appears over the data in the background. However, I've just discovered that if there is a link on the main page that passes under the <span><iframe> section, it cannot be clicked. I've tried CSS pointer-events, but can't get that to work, (links within the <iframe> must also remain clickable)
Not sure which is causing the "fault", ie the <iframe> or the tag around it. Is it a security thing to stop "click jacking" (??) or more to the point, is there a work around.
If push came to shove, I COULD reduce the size of the <iframe> and use a javascript pop-up window to display help text, but those windows show the URL and status windows, and are not exactly elegant!
Here is the code before anyone asks:
This span covers the entire screen to the height of the underlying <iframe> I did this so the data could be centred
<span style="position:fixed;bottom:10px;display:inline;width:100%">
<center>
<iframe src="http://www.xxx.com/cgi-bin/ticker/run_tick.pl?s=xzy" frameborder=0 align=top width=800px height=330px marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no allowtransparency=true></iframe>
</center>
</span>
Set a height to the span the same as the iframe (330px)
Let me know how that goes
Oh boy, what FUN I've had getting this to work!! (Twelve hours on Wed 23rd, and about three hours today)
Originally, I had an <iframe> that filled virtually 3/4 of screen, (so that I could display the help window to uses in a '' rather than use a modal popup. But, for security reasons, the browsers will not let you click through text that covers links underneath.
I had to literally redesign the whole layout.
Now, I have the help file in a separate <span> window which has its visibility set to hidden till user needs it. But that still left the ticker code at the bottom.
I had to divide that into three <divs> one on either side of the main ticker. But again, the ones on the side are effectively masking the page underneath, so I had to set both <divs> so that they used "pointer-events:none" meaning the <div> was not clickable, and mouse events would pass through to the code underneath. The mid section for the ticker was set to the opposite, namily "pointer-events:auto" so that the TOP window got the clicks, but not the page underneath.
Next problem: Because the ticker shows graphics that extend into the main text, that left a 1/2" area where clicks on main page couldn't be accessed. Another span was added to the code which covered the area with a transparent gif. When the user places their mouse over this graphic, a swap takes place and displays a semi transparent checkerboard. They can then read what this means in the help file.
Finally, when user's click the minimize button, the <div> holding the ticker code is hidden (giving accesss to all the links on the page) and ANOTHER <div> displays "Restore" graphic. When they click that, it gets hidden whilst the main ticker window - and the two <divs> on either side are made visible again.
And it was only meant to be a simple script!! (Oh, and don't check the website or my blog 'cos I won't be uploading the changes till eve of Sat 26th)
Using a default/vertical form, the bootstrap documentation suggests that the submit button sits underneath the various inputs but that's not the case in my form.
When the browser has a large viewing space, it sits beside the last input field and is not in line. If you resize the browser to a phone or tablet width, Responsive takes over and it displays correctly.
Changing the wrapping div from .span12 to .span3 pushes the button down, but it seems like a hackish fix because adding .span3 to the inputs and buttons to make them uniform in size yields the button pushed off to the side.
Am I missing some markup or is there an issue with Bootstrap? In their docs, the button is preceded by a checkbox label and some help text wrapped in a p - so that could be affecting their styling to make it look correct.
You have to put your submit button in a div with the class controls.
If you check the source on the Bootstrap documentation page, they even divide all the inputs and buttons in control-groups and controls.