When it comes to accessibility, what is the proper design pattern or technique for appending an inline panel that would have a header, body text, and optional close button?
For context, I've been tasked with creating an accessible multi-select quiz question that appends a correct or incorrect feedback panel under the question after the user presses submit. I think normally this sort of feedback would appear in a modal popup that covers the other content and traps focus, but this particular design needs the feedback panel to appear in the page directly under the submit button, and still allow the user the tab back through the answer options (even though they would be aria-disabled after submitting).
The feedback panel would have a title header, body text, and an optional close button. There would be no close button if the user got it all correct or they ran out of attempts.
Is there a suitable aria-role or known design pattern for this sort of appended panel? And what should I send focus to once the feedback panel appears, the header? The close button?
In case its relevant, for the multiselect answer options I am using native checkboxes with <label>s
Option 1
The first would be to add role="alert" to the appended box (assuming you will only add it once per page as otherwise we would use aria-live).
This would then be announced to screen reader users.
Option 2
Option 2 is that you can just append the box to the page and use focus management. So the box appears and you would move focus to the heading of the box via JavaScript (with tabindex="-1" on the heading for example). This needs to happen from an expected action (so "submit answer" button that you said you have).
I would probably go with option 2 as it is the easiest way to not introduce more accessibility issues by mistake.
There are other ways you can achieve this with aria-live, aria-labelledby etc. etc. but the above two options are the most straight forward.
Related
I am working on a project in which I need to make an HTML page with couple of radio buttons.
First button is, INSERT. As soon as I click INSERT button, I would like to show three text box just below the INSERT button. First textbox is datacenter, second textbox is node and third textbox is data.
Second button is, UPDATE. As soon as I click UPDATE button, I would like to show same above three text box just below the UPDATE button.
Third button is, DELETE. As soon as I click DELETE button, I would like to show only one text box just below the DELETE button. In this one text box will be node.
Fourth button is, PROCESS. As soon as I click PROCESS button, I would like to show four text box just below the PROCESS button. In this first textbox will be datacenter, second textbox will be node, third textbox will be data and fourth textbox will be conf
And lasttly there will be submit button which I will be pressing.
I am able to come up with this design in the jsfiddle
Problem Statement:-
But somehow, few things are not working such as Submit button is not getting shown when I click Process button for the first time. Meaning for the first time, if you click Process button, then it shows only three textbox which is datacenter, node and data but in general it should show four textbox as shown above. And also submit button is not shown as well.
It will be of great help if anyone can provide jsfiddle example?
And also is there anything wrong I am doing in my jsfiddle which I should not be doing? Meaning instead of hiding the elements, I should delete them?
I am following up on previous question here. In my previous question, my design was something else but after that I was able to come up with my new design as shown in my jsfiddle above.
We talked about it some in a discussion and came up with http://jsfiddle.net/4Nmqk/12/
It's simpler to have forms for each type of submission, rather than trying to hide and show the right parts of the forms. Unless you have a method for abstracting the data (which sections to show ) from the logic ( how to show/unshow them ) it ends up being a mess, just like the OPs original Fiddle.
My fiddle creates a lot more html, but the javascript is as simple as:
$('.btn-primary').click( function(){
$( '.btn-primary').removeClass( 'currentButton' )
$( this).addClass('currentButton')
$( 'form' ).hide()
$( "#form_" + $(this).attr('id') ).show();
})
Also added a bit of cleanup, just for fun.
Of course the most sophisticated implementation of this would probably be heavily integrated into the server side code and be generated a lot more dynamically, but for the purposes of answering the question, this technique seems more straight forward and more capable (note how easy it is to add additional content, like the headers I added to each form. IT would be equally easy to add descriptive text, disparate form elements, etc).
I have a lot on my site text boxes whose content is a date
So I will not have to check correctness did it read-only
Until now next to each text box was two buttons, one to add date opened popup calendar, second to delete the date (values not required)
Now I wanted to go to ajax calendarextender that the buttons were just ugly
My problem is that this control is not have delete button, and I do want to allow the user to deleted but not cancel the properties read-only to text box And I do not want to leave the ugly button.
My question:
If calendarextender ajax or something similar with a delete button from the popup
Alternatively if you have the option text box with a delete button inside( as text boxes IE10)
With the help of css and java-script you can easily do it.
Here is an example How do I put a clear button inside my HTML text input box like the iPhone does?
Instead of all that work to make it read-only and avoid validation, why not combine a FilteredTextBoxExtender with the CalendarExtender. Use the filter to block all non-numeric characters. I still think it's better to do the validation. It's as simple as DateTime.TryParse(), or you could do it client-side with the built-in FieldValidators.
I have a filter I am using based off of Twitter's Alert, Collapse, and Modal Plugin. The conflict comes with using the Alert plugin and my custom code to get it to function how it should.
The filter functions like a sort, when clicking a selection, it creates a field (in the case of the BCN and Account filters which are my problem children) within the sort menu below its heading.
EX: Clicking on accounts pulls up a modal window from there, the user selects an account name. That name appears outside of the modal window and in the filter section below Account. The selection can be dismissed when clicking on the X beside it or dismiss all of them by clicking the reset button at the bottom.
This is where the bugs occur:
After selecting one account name, it requires a double click for each subsequent selection made. It should only require one click
When clicking on an account selection (several), dismissing it via the X, then reclicking the same option tha that was previously selected causes all dismissed
selections to appear in the filter section.
My question is how to tamper out the bugs. I am open to using another method that isn't the alert plugin so long as it works properly.
Link to the code: http://jsfiddle.net/rsxavior/ccvEw/2/
My issue is that when the page is refreshed, I want the 'select' to be scrolled all the way to the top. However, if the user has scrolled the select box down to view the options (without necessarily even clicking on any of them) prior to the refresh, the 'select' box doesn't return to the top.
I've seen answers where people say to simply use selectedIndex to select the first option in the list, and thus it will automatically scroll to the top, but this is NOT an option. When the page is refreshed, nothing must be selected and thus, the only code I have at the moment is:
document.form1.componentselect.selectedIndex = -1;
Which is effective at clearing out any selections in the 'componentselect', but does not reset the scroll position.
FYI, I am using straight HTML and JS, no JQuery or anything like that. Thanks.
All you need to do is first select the top item (as you said you don't want to do), but then set it to -1!
document.form1.foo.selectedIndex=0;
document.form1.foo.selectedIndex=-1;
While I was looking at this, I also figured out how to have it remember what was selected, in case that becomes an issue:
http://jsfiddle.net/ryleyb/qPJ4S/
I think it's impossible to change the scroll position in traditional selects (select from the tag, no box generated by javascript plugins) because this box is controlled directly by the user's browser and theme, without direct interference by javascript.
I believe the only way to "reset" the display is to force the user to click on the field again, hiding and redisplaying the select tag. But you will need to click to open the box again and it hinders more than helps the user.
This is a 2 part question:
1)
click on one of the demo dropdowns on this page. when you tab over to the next input, the text is selected/highlighted in firefox. how can i prevent this from happening?
2) bonus: can you review my code that is hosted on google and tell me what i can improve?
Well, that is just default behavior on Firefox. A possible workaround is to have the input fields execute a JavaScript or jQuery function on select, have the function blur the field (which would deselect the text) and then refocus on the field. Very basic and I'm sure it'd need a couple extra hacks. Unfortunately without scripting, no there is nothing you can do to prevent that.
I honestly recommend that you leave it alone. That functionality was put in place so you wouldn't have to use your mouse when typing into forms, hitting tab would select all the text so you can easily retype it or hit the right arrow key to go to the end of the field. Removing the functionality will only irritate some of your visitors. If they're using the tab key to get to the next field, they probably want that functionality.