Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ianmcburnie/bones
Accessible HTML code patterns for common UI widgets such as tabs, menus, dialogs, etc.
https://github.com/ianmcburnie/bones
a11y accessibility html
Last synced: 3 months ago
JSON representation
Accessible HTML code patterns for common UI widgets such as tabs, menus, dialogs, etc.
- Host: GitHub
- URL: https://github.com/ianmcburnie/bones
- Owner: ianmcburnie
- License: mit
- Created: 2015-02-09T22:58:31.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-06-07T16:51:35.000Z (5 months ago)
- Last Synced: 2024-06-07T18:17:54.702Z (5 months ago)
- Topics: a11y, accessibility, html
- Homepage:
- Size: 70.3 KB
- Stars: 83
- Watchers: 5
- Forks: 28
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# BONES
> Widgets are stronger with bones. Does *your* widget have bones?
## Contents
1. [Introduction](#user-content-introduction)
1. [Accordion](#user-content-accordion)
1. [Alert Dialog](#user-content-alert-dialog)
1. [Breadcrumbs](#user-content-breadcrumbs)
1. [Carousel](#user-content-carousel)
1. [Checkbox](#user-content-checkbox)
1. [Combobox](#user-content-combobox)
1. [Confirm Dialog](#user-content-confirm-dialog)
1. [Details](#user-content-details)
1. [Fake Menu](#user-content-fake-menu)
1. [Fake Tabs](#user-content-fake-tabs)
1. [Flyout](#user-content-flyout)
1. [Fullscreen Dialog](#user-content-fullscreen-dialog)
1. [Icon Button](#user-content-icon-button)
1. [Infotip](#user-content-infotip)
1. [Inline Notice](#user-content-inline-notice)
1. [Input Dialog](#user-content-input-dialog)
1. [Input Validation](#user-content-input-validation)
1. [Lightbox Dialog](#user-content-lightbox-dialog)
1. [Listbox](#user-content-listbox)
1. [Listbox Button](#user-content-listbox-button)
1. [Menu](#user-content-menu)
1. [Menu Button](#user-content-menu-button)
1. [Page Notice](#user-content-page-notice)
1. [Pagination](#user-content-pagination)
1. [Panel Dialog](#user-content-panel-dialog)
1. [Radio](#user-content-radio)
1. [Select](#user-content-select)
1. [Switch](#user-content-switch)
1. [Tabs](#user-content-tabs)
1. [Toast Dialog](#user-content-toast-dialog)
1. [Tooltip](#user-content-tooltip)
1. [Tourtip](#user-content-tourtip)
## Introduction
Bones provides lean, mean, semantic HTML markup for widgets; ensuring maximum Accessibility, SEO and Site Speed performance. Bones markup uses [ARIA](http://www.w3.org/WAI/intro/aria) only where strictly necessary.
Bones is not intended to be an exhaustive set of instructions for creating accessible components. The primary intention of bones is to detail the structural and semantic markup requirements. For further guidance, please visit [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns) and/or [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1).
Bones advocates the [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) web-design strategy; building the web in a layered fashion that allows **everyone** to access the **most important** content and functionality.
Bones favors the the [BEM](http://getbem.com) (block, element, modifier) methodology and naming convention.
## [Accordion](https://ebay.gitbooks.io/mindpatterns/content/disclosure/accordion.html)
The accordion is simply a list of [details](#user-content-details) widgets. Each details summary should include a relevant heading-level tag.
```html
```
## [Alert Dialog](https://ebay.gitbooks.io/mindpatterns/content/messaging/alert-dialog.html)
A [lightbox dialog](#user-content-lightbox-dialog) with a single button to acknowledge the alert content.
Try to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.
```html
Alert Dialog Title
```
## [Breadcrumbs](https://ebay.gitbooks.io/mindpatterns/content/navigation/breadcrumbs.html)
The content is an ordered list of links inside a navigation landmark region.
```html
You are here
```
While CSS can be used to generate a separator image or glyph using the `::after` pseudo element, we find that inline SVG offers a more accessible and flexible approach.
## [Carousel](https://ebay.gitbooks.io/mindpatterns/content/disclosure/carousel.html)
A carousel is a list of items. These items may contain anything - text, images, links, tiles, cards, etc. - but each item is responsible for managing its own markup and accessibility (e.g. tab-order, semantics, etc).
```html
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
- ...
```
JavaScript must maintain the tabindex and aria-hidden state of items as they scroll in and out of view.
## [Checkbox](https://ebay.gitbooks.io/mindpatterns/content/input/checkbox.html)
Native HTML checkboxes are 100% accessible by default.
To ensure correct grouping semantics, checkboxes should be placed inside of a fieldset with legend.
```html
Auction Type
Free Shipping
Ends soon
Zero bids
```
For vertically stacked checkboxes, simply switch the spans to divs.
### Custom Checkbox Icon
A foreground SVG, combined with CSS, can be used as a facade over the real checkbox.
```html
```
This markup assumes that the symbol definitions for `#icon-checkbox-unchecked` and `#icon-checkbox-checked` exist on the page. The hidden property ensures that the SVG icon is not visible alongside the native icon when the page is in a non-CSS state. This hidden property should be over-ridden by CSS.
## [Combobox](https://ebay.gitbooks.io/mindpatterns/content/input/combobox.html)
A textbox plus listbox combination.
### Collapsed State
```html
```
### Expanded State
```html
```
JavaScript must update the `aria-activedescendant` attribute on the textbox to reflect the state of the currently active descendant listbox item.
## [Confirm Dialog](https://ebay.gitbooks.io/mindpatterns/content/messaging/confirm-dialog.html)
A [lightbox dialog](#user-content-lightbox-dialog) with buttons to cancel or confirm an action.
Try to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.
```html
Confirm Dialog Title
```
## [Details](https://ebay.gitbooks.io/mindpatterns/content/disclosure/details.html)
Uses the native HTML `` tag.
```html
Details
```
## [Fake Menu](https://ebay.gitbooks.io/mindpatterns/content/navigation/fake-menu.html)
A fake menu is styled like a regular menu, but it contains a list of links and/or buttons instead of menu items.
```html
```
If the `href` value of a fake menu item matches the current page url, then add `aria-current="page"` to that anchor tag.
## [Fake-Menu Button](https://ebay.gitbooks.io/mindpatterns/content/navigation/fake-menu-button.html)
A button that opens a fake menu.
```html
```
## [Fake Tabs](https://ebay.gitbooks.io/mindpatterns/content/navigation/fake-tabs.html)
Fake tabs are simply a list of links styled to look like tabs.
```html
Fake Tabs Heading
```
## [Flyout](https://ebay.gitbooks.io/mindpatterns/content/disclosure/flyout.html)
A flyout might open on click, focus or hover, on any kind of host button, input or link.
For correct reading order, and to minimize accessibility defects, the overlay element and its content should always immediately follow the host element in the DOM.
```html
Host Button
```
If the overlay element cannot be immediately adjacent to the button element, then an additional class will be required for styling purposes:
```html
```
## [Fullscreen Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/fullscreen-dialog.html)
A fullscreen dialog takes over the entire screen.
NOTE: Fullscreen dialog is an adaptive pattern with its roots in mobile app architecture. For a fully responsive web pattern we recommend lightbox dialog instead.
Try to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.
```html
Fullscreen Dialog Title
```
Note that Menu Button, Listbox Button, Tooltip & Combobox are special instances of flyouts, but follow the same general pattern and rules.
## [Icon Button](https://ebay.gitbooks.io/mindpatterns/content/input/icon-button.html)
Using a hamburger menu as an example, for button behaviour:
```html
```
For link behaviour:
## [Infotip](https://ebay.gitbooks.io/mindpatterns/content/disclosure/infotip.html)
An infotip is expanded and visible on click event of host element.
Infotip is a specific type of [flyout](#user-content-flyout). The markup becomes a little more convoluted due to the presence of a visual "pointer". This additional markup allows enough hooks for styling & masking with CSS.
```html
```
## [Inline-Notice](https://ebay.gitbooks.io/mindpatterns/content/messaging/inline-notice.html)
If the inline notice is rendered or updated on the client, wrap it within a [live-region](https://ebay.gitbook.io/mindpatterns/techniques/live-region) element.
```html
Notice Copy
```
## [Input Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/input-dialog.html)
A [lightbox dialog](#user-content-lightbox-dialog) with one or more form inputs.
Try to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.
```html
Input Dialog Title
Input Label
```
## [Input Validation](https://ebay.gitbooks.io/mindpatterns/content/messaging/input-validation.html)
Input validation messages rendered on the client are considered an *enhancement* to full, server-side form validation.
### Valid State
The error message container is a live-region, and can be primed and ready in the server-side code, or injected dynamically at error-time with client-side JavaScript.
```html
Input 1
```
For Voiceover to correctly detect live-region updates, the updates must happen on direct-descendant(s) of the live-region, not on the live-region itself.
### Invalid State
Changing the content of a directly-descendant element will trigger a live-region update.
```html
Input 1
```
Notice that the `aria-described` attribute supplements the live-region, by using the same live-region content as a *description* for the input.
## [Lightbox Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/lightbox-dialog.html)
A lightbox dialog is always modal. Other types of lightbox dialog include: [alert dialog](#user-content-alert-dialog), [confirm dialog](#user-content-confirm-dialog) & [input dialog](#user-content-input-dialog).
Try to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.
```html
Dialog Title
```
## [Listbox](https://ebay.gitbooks.io/mindpatterns/content/input/listbox.html)
The listbox pattern is intended as a JavaScript alternative to the `multiselect` state of the HTML select.
```html
Option 1
Option 2
Option 3
```
When a single-select listbox receives focus for the first time, the first option should be selected if the user does not specify a selection.
An initial selection can be specified by applying the `aria-selected` state to one or more options.
## [Listbox Button](https://ebay.gitbooks.io/mindpatterns/content/input/listbox-button.html)
Opens a [listbox](#user-content-listbox) via a host button.
```html
```
## [Menu](https://ebay.gitbooks.io/mindpatterns/content/input/menu.html)
A menu contains one or more groups of commands (`menuitem`, `menuitemradio`, or `menuitemcheckbox`) that execute JavaScript.
### Single Group
```html
```
### Multiple Groups
```html
```
## [Menu Button](https://ebay.gitbooks.io/mindpatterns/content/input/menu-button.html)
A menu button opens a [menu](#user-content-menu) in a [flyout](#user-content-flyout).
```html
```
## [Page Notice](http://ianmcburnie.github.io/mindpatterns/messaging/page-notice/)
Page notices are common and prominent visual landmarks on any website. A labelled landmark element (i.e. ``) increases affordance for assistive technology.
A live-region ensure dynamic updates on the client are picked up by assistive technology. This live-region can be removed or set to "off" if the page notice is only ever rendered once on the server without any further client-side changes or updates.
```html
Copy
Title
```
## [Pagination](http://ianmcburnie.github.io/mindpatterns/pagination/)
Pagination is an important means of site navigation. A labelled landmark element (i.e. ``) increases affordance for assistive technology.
```html
```
**NOTE:** The ARIA live-region need only be enabled (set from "off" to "polite") if client-side pagination is implemented.
## [Panel Dialog](https://ebay.gitbooks.io/mindpatterns/content/disclosure/panel-dialog.html)
A modal dialog that sits flush to one side of the screen.
Try to bucket the main page content in an element that is *not* an ancestor of the dialog. This will vastly simplify the amount of DOM manipulation when implementing modal behaviour.
```html
Panel Dialog Title
```
## [Radio](https://ebay.gitbooks.io/mindpatterns/content/input/radio.html)
Native HTML radio buttons are 100% accessible by default.
To ensure correct grouping semantics, radio buttons should be placed inside of a fieldset with legend.
```html
Radio Group Title
Input 1
Input 2
Input 3
```
For vertically stacked radios, simply switch the spans to divs.
### Custom Radios
Foreground SVG can be used as a facade over the real radio.
```HTML
```
The hidden property ensures that the SVG icon is not visible alongside the native icon when the page is in a non-CSS state. This hidden property should be overriden by CSS.
## [Select](https://ebay.gitbooks.io/mindpatterns/content/input/select.html)
A native HTML select is 100% accessible by default. The "button" can be styled with CSS; the "dropdown" not so much.
```html
Option 1
Option 2
Option 3
```
## [Switch](https://ebay.gitbooks.io/mindpatterns/content/input/switch.html)
A switch is not a true form control. It typically executes JavaScript on the client when toggled (i.e. without a full page reload).
```html
```
The following version of the switch uses a checkbox under the hood. It should be used if you require the switch to store data inside of a form. As mentioned above however, this is not the intended purpose of a switch. You may wish to consider using an actual checkbox instead.
```html
```
## [Tabs](https://ebay.gitbooks.io/mindpatterns/content/disclosure/tabs.html)
```html
Tabs Heading
Tab 1
Tab 2
Tab 3
Panel 1 heading
Panel 2 heading
Panel 3 heading
```
## [Toast Dialog](https://ebay.gitbooks.io/mindpatterns/content/messaging/toast-dialog.html)
Toast dialog is non-modal and should not steal or trap keyboard focus.
Try to position the dialog immediately after the currently focussed element (i.e. the `document.activeElement`).
```html
```
If using the optional footer with call-to-action link or button, the first letter of the CTA will define the `accesskey` property.
## [Tooltip](https://ebay.gitbooks.io/mindpatterns/content/disclosure/tooltip.html)
A tooltip is expanded and visible on hover and focus of host element.
Tooltip structure is almost identical to [flyout](#user-content-flyout) structure. The markup becomes a little more convoluted due to the presence of a visual "pointer". This additional markup allows enough hooks for styling & masking with CSS.
```html
```
## [Tourtip](https://ebay.gitbooks.io/mindpatterns/content/messaging/tourtip.html)
A tourtip is expanded and visible on page load.
Tourtip structure is almost identical to [flyout](#user-content-flyout) structure. The markup becomes a little more convoluted due to the presence of a visual "pointer". This additional markup allows enough hooks for styling & masking with CSS.
```html
```