BS4/Bootstrap-Vue Accessibility recommendations

Bootstrap V4 is addressing some of the accessibility issues: https://github.com/twbs/bootstrap/issues/22549, Of which bootstrap-vue has started to already address.

Here is little list of items that are complete or need work for aria and/or keyboard navigation (to be updated as we progress through them):

Components - ARIA / Keyboard Navigation

• b-form-radio input wrapped in label (which negates need for for on label)
• b-form-checkbox input wrapped in label (which negates need for for on label)
• b-progress ARIA progress attributes
• b-modal attributes aria-labelledby and aria-describedby. Section roles & semantic elements. (PR #247)
• b-modal Focus first input/button on open (PR #247). Allow page author to specify input to be focused when opened via @shown event (PR #378)
• b-modal focus the modal content when opened
• b-tabs & b-tab attributes aria-controls and aria-labelelledby. Section roles (PR #339)
• b-tabs & b-tab keyboard navigation (PR #339)
• b-alert has aria role="alert", aria-live and aria-atomic (PR #340)
• b-form-file Needs focus styling in custom-file-input mode for keyboard users (PR #1033)
• b-form-fieldset attribute for when ID supplied on ,form-control. Has role="alert", aria-live, aria-atomic on feedback. and aria-describedby (PR #340)
• b-breadcrumb ~should have role of navigation (PR #340)~ Add aria-current to active crumb (PR #526)
• b-input-group needs role="group" (PR #340)
• b-button-group role="group", make new toolbar component (PR #367)
• b-button-toolbar role="toolbar" + optional keyboard navigation (PR #367)
• b-nav & b-nav-link aria attributes (PR #358)
• b-dropdown keyboard navigation (PR #274)
• b-nav-dropdown aria- attributes (PR #358)
• b-nav-dropdown open on ENTER or SPACE (see Issue #348) (PR #349)
• b-nav-toggle aria- attributes (PR #358, #410, #411, #412)
• b-nav & b-nav-link keyboard navigation (leave as standard TAB key navigation)
• b-collapse Reflect expanded/collapsed state on trigger element (PR #358 & #519)
• b-pagination aria-[label|current|setsize|posinset] attributes. (Note: aria-controls should be set manually in the <b-pagination>markup) (PR #364)
• b-pagination keyboard navigation (PR #364 & #377)
• b-carousel aria-[controls|label|current|setsize|posinset] attributes and roles. (PR #380)
• b-carousel keyboard left/right control (PR #380, #420)
• b-carousel Pause slide scrolling on mouseenter and resume on mouseout.
• b-tooltip aria- attributes (aria-live, aria-describedby, etc
• b-popover aria- attributes (aria-live, aria-describedby, etc. Also needs ability to change role from tooltip to popover or dialog
  • Popovers can have some issues with regards to accessibility, especially for interactive popover content, and possibly should have a role other than tooltip (configurable). https://github.com/twbs/bootstrap/issues/18618

Directives

• v-b-modal return focus to open trigger element.
• v-b-toggle attributes aria-controls and aria-expanded. (PR #519)

Documentation

• Create ARIA best practices for Bootstrap-Vue - sections added to each compoent
• Add documentation where needed

[tmorehouse]

Ah, I see that b-collapse is not rendering the ID on it’s root div. I’ll create a quick PR for this.

[LaurenceRLewis]

Thats because it does not exist. I suggest it should be aria-controls 😁