Accessibility Plugin for Bootstrap 3 and Bootstrap 3 as SubModule
Home Page: http://paypal.github.io/bootstrap-accessibility-plugin/demo.html
License: BSD 3-Clause "New" or "Revised" License
This is in the context of https://github.com/patrickhlauke/bootstrap/commit/3425f961eed0f74695ca5f92f8e2bc1017febc4c#commitcomment-8379233 where I propose to drop the various role="tablist" from the "Navs" code as, in most cases, I'd argue those .nav-tabs and .nav-pills won't be used for actual tab panels, but to quickly style up a mini navigation (in which case role="tablist" would be wrong).
However, your tab.js is quoted as a counter-example
... anything with .nav-tabs and .nav-pills automatically gets the role="tablist"i do call out the fact that if it is in fact used for a tablist, it should have the additional roles in line 24 https://github.com/patrickhlauke/bootstrap/commit/3425f961eed0f74695ca5f92f8e2bc1017febc4c#diff-4807a8cd0881fb6cce944561f89bce81L24
In short: any thoughts on this? If people do use the "Navs" for something other than real tab panels (which I would argue they would), should it still be given role="tablist" which seems incorrect?
Hi,
A line 245 and 248 of the js file, you use :
colltab.attr({ 'aria-controls': colltab.attr('href').substr(1),.......Or with bootstrap , it's possible to use a data attribute to specify href ("data-target" ).
We need to change lines 245 and 248 as follows:
colltab.attr({ 'aria-controls': collpanelattr.substr(1),.....and add in the statements (after line 234) :
, collpanelattr = (colltab.attr('data-target')) ? (colltab.attr('data-target')) : (colltab.attr('href'))Guillaume
Focus is trapped in the dialog if the user presses the tab key to cycle through the elements but focus is lost if you press shift-tab to cycle through backwards.
Steps:
Hello,
I'm trying to figure out which js and css files I shall use. "plugins/js/bootstrap-accessibility.js" and "plugins/js/bootstrap-accessibility.min.js" do not have the same code. The Javascript adaptations of alert, tooltip and popover components are not present in "plugins/js/bootstrap-accessibility.js".
Could you please help me choosing the right files for BS 3.1.1 ?
Greetings,
I could not find a list of screen readers that were used for testing with the plugin. Could you provide a list of what the support is like or what screen readers were tested with this plugin?
Thanks,
Hi,
Bootstrap 3 has improved some of its accessibility, Is there any doco on how relevant this plugin is ? how much it is still needed?
This plugin is over a year old, although there are commits in the last few weeks, but i cant find recent documentation.
From quick usage it appears it still adds better keyboard nav to things like tabs and accordions
Is the css still required? why? what does it add?
were the comments made in issue 74 addressed?
Thanks heaps for the plugin and making bootstrap more accessible
cheers,
Ben
P.S. does anyone know why after a year bootstrap didnt just include the code from this plugin in their core code?
Could you register this project with Bower? http://bower.io/
Our company has been designed using the older version of BS. Upgrading to 3+ would required alot of changing both front and back.
After using paypal/bootstrap-accessibility-plugin, select2 and fullcalendar components stop working on IE9.
We use heavily modified Bootstrap and I'd like to test this before suggesting teams add another layer to their applications. Could you create a bookmarklet that would inject the plugin for testing to see if it will have a positive impact on our pages?
The last set git tag 1.0.2 does not reflect the latest changes in this repo. Could you bump the version number please? :)
Would make an install through bower way easier.
Thanks.
Hello,
Would you consider changing the software license for this plugin to a standard license, e.g. MIT like Bootstrap has, that is GPL 3+ compatible? That would make it easier for other projects to use the plugin. We maintain an open source codebase and would most likely not be able to use your plugin under its current license.
Thank you
Kristina
I'm curious why you are including :hover CSS rules in this plugin? It looks like you are overriding the default :hover with "outline: dotted 1px black;", but it seems like Bootstrap already has a ":hover" defined.
I am working with a system which uses a mixture of bootstrap and other technologies. On certain pages, the plug-in does not work as expected and the UI is modified in a way that it is not fully usable. I would like to know whether there is any way to override this script on specific pages? The framework being used loads the script on each page and there is no way at present from our framework to do this, so wanted to know if there is a built-in function.
It would be really nice to have a CDN out there so we could create little Plunker examples for Stack Exchange type technical support.
We use the Bootstrap LESS (CSS prepropessor) as the basis for our web development, and it would be great if you provided LESS files for your changes as well.
On my own test page and the plugin's demo page:
http://paypal.github.io/bootstrap-accessibility-plugin/demo_3.1.1.html#tabs
The tab content sorta jumps when fading in. If i disabled the plugin, the content fades in nicely - no shifting.
If no fade option set it loads fine. So it may have something to do with the "fade" option.
Why not use EditorConfig plugin to standards code?
Currently you have:
element.find('[data-toggle=tab]').attr({ 'tabIndex' : '0','aria-selected' : true,'aria-expanded' : true })
in the tabs enhancement implementation.
Under NVDA, when I click a tag, this speaks "expanded."
This is rather confusing since tabs are selected, not expanded. I had a dropdown on the same page, and the fact that this provided the same spoken feedback as the dropdown had me very confused about what was happening. Tabs should be selected, not expanded, so the solution is at least partially correct.
See this article for what appears to be a correct tabs implementation:
http://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
In the extension for the modal 'hide' function (begins line 68).
I believe the var modalOpener, the place the close modal function should return focus to, is incorrect. It does not return keyboard focus correctly.
This is to blame:
var modalOpener = this.$element.parent().find('[data-target="#' + this.$element.attr('id') + '"]')
Instead, I can suggest setting a DEFAULTS.opener in the constructor and returning there - which is what I have done in my code. Happy to contribute this - but wanted to check if I was missing something first.
As it is now in collapse.js if a element has data-toggle="collapse" it will unconditionally get role=tab, but if it misses a data-parent="parentid" no element will be given role=tablist.
In bootstrap it isn't required to have a parent but in The Roles Model it is stated that "Authors MUST ensure elements with role tab are contained in, or owned by, an element with the role tablist."
My conclusion is that we only should put role=tab on a collapse if they have a data-parent.
Link to The Roles Model: http://www.w3.org/TR/wai-aria/roles#tab
Link to bootstrap collapse documentation: http://getbootstrap.com/javascript/#collapse
I nested a nav-tabs into a colapse. After selecting a tab in the tablist, it is impossible to navigate with the arrow keys between the tabs.
At the moment you have to bower install bootstrapaccessibilityplugin to install bootstrap-accessibility-plugin (I.e. the value of the name attribute in bower.json.) Noted in mquandalle/meteor-bower#66.
How should this be fixed? Should the package designation be changed to bootstrap-accessibility-plugin in the Bower registry? bootstrapaccessibilityplugin in the name: attribute? I can submit a PR if the latter.
Thanks.
Great work guys.
However, your folders and files have bland generic names, which will force everyone to rename them in their projects.
I suggest adopting a clear name like bootstrap-accessibility, and make a distribution folder like
- bootstrap-accessibility
- bootstrap-accessibility.css
- bootstrap-accessibility.js
You might add separate css and js folders within the distribution folder, but if your plugin is 2 files I wouldn't worry about that.
Thanks for sharing this plugin.
I installed the plugin with Bower, as suggested on the Github page.
When I try to point to the .scss src, I have an error: "compass/css3/transition" not found.
Thanks you guys for doing this, I think this is a great project to help bring better accessibility to Bootstrap. I am helping maintain kalatheme, a Drupal theme, and would like to use this project to bundle some of these files to help improve access to many sites using it, in the future it would be nice to only include the components we need to try to keep the theme's assets as light as possible, would it be possible to break up the individual plugins into small single purpose JS files? ( similar to how bootstrap itself is organized)
I'm probably missing something really dumb here, but I don't understand the correct way to load this plugin.
The default instructions say just add to your scripts section after bootstrap.
However the plugin contains lots of DOM manipulation code like:
$('.alert').attr('role', 'alert')
This runs before our dom is ready so none of these DOM manipulations get applied.
What am I not understanding?
Thanks
Martin
When selecting a tab in a nav-tabs the plugins sets the tabindex of the selected tab to 0 and all other tabs to -1. This makes navigating tabs with the TAB key impossible.
Using the demo page, open the modal dialog example. Note that when you tab and reach the save changes button, pressing tab one more time does not show anything visibly focused. Pressing tab again with cycle to the close X button at the top of the dialog. The extra tab stop is problematic and should be removed. In my use of the modal in Readium, the extra tab stop goes to the URL bar (tested in Safari).
The same problem happens when shift-tabbing through the modal dialog. With focus on the close x, pressing shift-tab causes focus to be lost. Pressing shift-tab again will reach the Save Changes button in the modal dialog.
I've just begun to use this in Wordpress with the http://shoestrap.org theme
I have enqueued here: http://yoyo.io you will see upon inspection there are a couple of errors I get that beyond my knowledge scope:
Uncaught TypeError: Cannot read property 'Constructor' of undefined bootstrap-accessibility.min.js:4 (anonymous function) bootstrap-accessibility.min.js:4 (anonymous function) bootstrap-accessibility.min.js:4
Hello. I'm working for Zugang für alle - Access for all, an accessibility experts foundation in Switzerland. We do reviews on simple and complex websites on a regular basis, and we have blind expert users here too, so I think we know what we are talking about.
I'm in the process of creating an accessible web app for internal use, and I'd like to use Bootstrap. I was very happy to find this plugin, but I think there are some things that should be optimised. All in all, I'm not very sure whether this plugin is really better then the original Bootstrap, as in some respects, the original seems better, and in other respects it sometimes is hard to say what exactly the plugin adds to the original.
I hope the following list is useful to you.
By the way, I'm using NVDA.
role="button"). This is nasty, because I have to press Esc twice to close the menu.Both of the issues above don't seem to be the case on the original Bootstrap Navbar demo. In this case, I'd prefer the original over the "accessified" one. In fact, what exactly are you trying to optimise here?
The demo doesn't seem to be initialised properly. When I first browse through the links, they are only announced as "links" without any information about collapsed/expanded status. When I activate the links, they are announced as expanded though. So I think the initialisation process isn't correctly done at the time being.
This also looks better to me on the original demo. For example, the buttons are labelled with "next" and "previous" in the original, while in your demo, they are just blank.
I have an input field inside a button dropdown menu. With plain BS3 I can focus it by clicking with the mouse. With BS Accessibility the dropdown menu closes once I click the input field. The problem is this part (from line 117 in bootstrap-accessibility.js):
.on('focusout.dropdown.data-api', '.dropdown-menu', function(e){
var $this = $(this)
setTimeout(function() {
if(!$(document.activeElement).is($this.find("a"))){
$this.parent().removeClass('open')
$this.parent().find('[data-toggle=dropdown]').attr('aria-expanded','false')
}
}, 150)
})
Only if the clicked element is a link ("a" tag), the dropdown stays open.
Safari, Chrome & Firefox all have problem with tabs content animation. It seems to quickly show both current and new content before removing the current and fading in the new.
https://github.com/wpmu/maera/issues/44
Example: http://kahi.co/
when using other browsers the drop-downs are accessible via up and down arrows
However using Chrome, will close the drop-down and scroll the page rather than moving down the drop-down list.
Safari and Firefox work well - page scrolls, but at least the you can traverse the drop-down with up and down arrows
In the "live demo" for the Alerts example, the text for button to dismiss the alert is an 'x.' NVDA ignores the 'x' entirely. Recommend providing some sort of text alternative, perhaps in clipped/off-left hidden text for best compatibility with screen readers.
When I reduce the width of test page in the "live demo" to trigger the mobile view, the drop down (three horizontal lines) button fails to trigger expansion of the menu. I have confirmed this in latest Firefox and Chrome on Windows.
Just discovered this project - so pleased to find it, too. However, I notice that the example pages are including BS 3.1 while I've built around 3.2, and the following accessibility changes have been made since 3.1
#13493: Improve accessibility of .close buttons in docs examples.
#13024: Add role="alert" to alert examples to improve accessibility.
#13557: Add aria-describedby attribute to tooltips and popovers to improve accessibility
#13060, #13481: Add role="tooltip" to tooltips & popovers by default to improve accessibility.
#13854: Darken @Gray-Light and .lead to meet accessibility guidelines.
So, I was just wondering, is it "safe" to use this over the top of 3.2? Or should I wait a bit?
I know the obvious answer is "just try it" - but I'm quickly learning that unexpected issues lie down that road!
The state on the button remains aria-expanded="false" regardless of whether the menu is expanded or collapsed. (Should have caught this last time I checked the issue. Sorry guys. Thanks for the work on this. Already being used in projects at my university!)
When you open the demo, reduce the width of your browser and go to the navbar example then you see the collapse / expand button but when you click this button the collapsed menu does not get shown.
/* This specifically refers to the dropdown section of bootstrap-accessibility.js, but seems like similar patterns used elsewhere. Instead of leveraging bootstrap's event system (specifically responding to shown and hidden), the code instead watches for clicks on the trigger elements and then responds by waiting an arbitrary amount of time via setTimeout and then responding to changes in the class of the parent (existance of the "open" class) effectively duplicating what the framework already does. Leveraging the shown and hidden events instead makes this far simpler and more maintainable.
In addition, the code adds keyboard behavior for spacebar which is great, but again one can simply translate this to a click on the trigger and leverage the framework to do the heavy lifting. See my example code at:
http://www.mit.edu/~rjc/aria/bootstrap/dropdown.js
*/
// -- from bootstrap-accessibility.js --
// dropdown triggers
var toggle = '[data-toggle=dropdown]'
...
// respond to clicks on trigger - why not use bootstraps shown and hidden events instead
$(toggle).on('click',function(e){
/* the handler waits an arbitrary amount of time, then responds to changes on the widgit (i.e. does it have class "open"
using the shown and hidden events lets the framework handle this
*/
...
$par = $tar.parent()
setTimeout(function(){
if($par.hasClass('open')){
...
},200) // arbitrary time interval (will most likely fail on slower machines)
})
On the same day as @mpnkhan answered #44
Yes now you can use it with BS 3.2.0
BS 3.3 was released.
http://blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/
Bootstrap 3.3.0 is here! This release has been all about bug fixes, accessibility improvements, and documentation updates.
So, same question again, but for 3.3 now!
Or does this mean that BS 3.3 and this project are now at the same level as this project always seems to be one compatibility release behind BS?
Just wondering, as the approach seems to be that this plugin retrofits accessibility on top of bootstrap, why it was not instead submitted as patches directly into core bootstrap project itself?
I initially installed the plugin through npm, but found this issue referenced here: #40.
It looks like you made a fix for this 80fd9db which has not been updated in the node version.
Installing current version from this repo, made the dropdown have some very weird behavior, mainly skipping every other link when using the arrow keys.
I changed $toggle.on('keydown.bs.modal', $.proxy(function (ev) {
to $toggle.on('keydown.bs.dropdown', $.proxy(function (ev) {
and it works as it should. Is this a bug?
Hello,
I'm using "bootstrap-accessibility-plugin" on a website on which each page does not include the whole Bootstrap framework.
And this makes the below error happen :
TypeError: $.fn.modal is undefined
bootstrap-accessibility.js
Line 98
It looks like Bootstrap accessibility plugin does not check if Twitter Bootstrap functions are available before prototyping them. Or maybe I do not include it correctly.
Do you have any idea about that problem ?
The close button is modified for accessibility which works great. Part of this fix is using the word "Close" instead of "×". To enhance for internationalization, suggest adding the option to use a variable or a data attribute to get the text "Close" (or its translated text).
$('.close').removeAttr('aria-hidden').wrapInner('<span aria-hidden="true"></span>').append('<span class="sr-only">Close</span>')
If JavaScript is unavailable for any reason (delayed, broken, turned off, no client-side support), the user experience breaks (code is misleading) because that functionality is not present. The ARIA roles and the tabindex=-1 attributes should be injected via the JavaScript, as opposed to currently where it's in the HTML.
Should we be managing the focus for mouse events on the dropdowns?
I would think that this code should only be fired if a keyboard event occurs.
First, I would like to say the Accessibility Plug-In does add enough really nice keyboard navigation features, and that I intend to continue to use it in my app, and continue to work with it in the future!
I am having difficulty getting Bootstrap 3.2 dropdown to behave like (maybe I think) it should. I am expecting that when tabbing to dropdown, then pressing Enter/Spacebar that first item gets selected (and it does) and then, the down-arrow key should highlight next items in menu until end (and then cycle up top) BUT it does NOT. I suppose the ultimate behavior would be: http://www.w3.org/TR/wai-aria-practices/#menu
There are many potential reasons why my app might not work well with your plugin. I am using jQuery 1.11.1 (for IE8), AngularJS 1.2.26 (for IE8), and UI-Router (yikes!) rather then standard Anglar $router for URL management. I have heard that Angular does work very well with jQuery but maybe not perfectly. I am also using Bootstrap 3.2
I have tried both 1.0.3 and 1.0.4 of accessibility plugin, and 1.0.3 (with BS 3.2) will move one item down menu list while 1.0.4 (with BS 3.2) will NOT move via down-arrow at all.
I could very well be that I am misusing the role labels as well. I have a Plunker that shows how I use roles: presentation, menu, menuitem, tablist, tab. Unfortunately, I could not find CDN of your plugin to use with Plunker.
http://plnkr.co/edit/TKq3MQdSaK3aTXJgSirU
I do have a full blown GitHub, Yeoman, Bower, Grunt app that is up to date with everything. To run would git clone, npm install, bower install, grunt serve.
https://github.com/bradsturtevant/swks-gencg-seed.git
I added a feature to GitHub that allows tabs in tablist of navbar to be invoked via spacebar, but have been [edit 11/4/14] Unable to invoke an href change and page reload via spacebar inside the dropdown menu.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.