+
+
+ Contributing to the APG
+
+
+
+
+
+
+
+
+
+
+
+
Contributing to the APG
+
+
+
Introduction
+
+ Continuous improvement to the utility and quality of the ARIA Authoring Practices Guide (APG) depends on broad community input and participation.
+ Anyone may contribute feedback, suggestions, or code via the channels described below.
+ However, if you would like to contribute regularly, please consider
+ joining the Authoring Practices Task Force.
+ As a task force participant, you and your organization have greater influence over APG development, and are listed as contributors where appropriate.
+
+
+
+
+
Providing feedback
+
+ The APG provides two public feedback channels -- GitHub and email.
+ Links to both are provided at the bottom of every page in the APG.
+
+
+ GitHub issues are the best way to ask a question, make a suggestion, or report a problem.
+ Before creating a new issue, it is helpful if you first review existing issues to determine whether there is an issue addressing the same concern.
+ If so, please comment on that issue rather than raising another.
+ If the concern you would like addressed is related to an example implementation of an APG pattern, at the bottom of the page, next to the revision date, there is a link named "Related Issues".
+ That link opens a GitHub project containing all issues associated with the relevant pattern and its examples.
+
+ The task force also uses the aria-practices public mailing list for email discussion.
+ Meeting announcements, agendas, and links to minutes are sent to the mailing list.
+ While GitHub issues are the preferred place to discuss APG content, the mailing list is available to anyone who would prefer to communicate by
+ sending email to the ARIA Authoring Practices public mailing list.
+
+ The APG is developed by the
+ ARIA Authoring Practices Task Force,
+ which is a sub-group of the
+ ARIA Working Group.
+ The task force meets weekly to coordinate work on development of the APG.
+ Task force participants are expected to regularly attend meetings and to actively contribute.
+ Examples of contributions include:
+
+
+
Testing the functionality and accessibility of example implementations of the APG patterns
+
Fixing bugs and implementing enhancements in example implementations of the APG patterns
+
Helping write responses to community feedback
+
Reviewing and editing documentation
+
Designing or engineering pattern implementation examples
+
Creating and editing patterns and practices for ARIA usage
+
+
+ To participate in the Authoring Practices Task Force, you first need to
+ become a participant in the ARIA Working Group.
+ If you are already a participant in the ARIA Working Group, contact
+ Daniel Montalvo
+ and request membership in the Authoring Practices Task Force.
+
+
+
+
+
+
+
diff --git a/content/images/pattern-accordion.svg b/content/images/pattern-accordion.svg
new file mode 100644
index 0000000000..4ee0b682b6
--- /dev/null
+++ b/content/images/pattern-accordion.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-alert.svg b/content/images/pattern-alert.svg
new file mode 100644
index 0000000000..68937594ad
--- /dev/null
+++ b/content/images/pattern-alert.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-alertdialog.svg b/content/images/pattern-alertdialog.svg
new file mode 100644
index 0000000000..9e3ba6a1cc
--- /dev/null
+++ b/content/images/pattern-alertdialog.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-breadcrumb.svg b/content/images/pattern-breadcrumb.svg
new file mode 100644
index 0000000000..0a92ff66bc
--- /dev/null
+++ b/content/images/pattern-breadcrumb.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-button.svg b/content/images/pattern-button.svg
new file mode 100644
index 0000000000..38df7318c0
--- /dev/null
+++ b/content/images/pattern-button.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-carousel.svg b/content/images/pattern-carousel.svg
new file mode 100644
index 0000000000..ead4504eba
--- /dev/null
+++ b/content/images/pattern-carousel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-checkbox.svg b/content/images/pattern-checkbox.svg
new file mode 100644
index 0000000000..e4cdc2e5cd
--- /dev/null
+++ b/content/images/pattern-checkbox.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-combobox.svg b/content/images/pattern-combobox.svg
new file mode 100644
index 0000000000..bb3f87adb2
--- /dev/null
+++ b/content/images/pattern-combobox.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-dialog-modal.svg b/content/images/pattern-dialog-modal.svg
new file mode 100644
index 0000000000..7fca36b9f8
--- /dev/null
+++ b/content/images/pattern-dialog-modal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-disclosure.svg b/content/images/pattern-disclosure.svg
new file mode 100644
index 0000000000..f926d87cad
--- /dev/null
+++ b/content/images/pattern-disclosure.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-feed.svg b/content/images/pattern-feed.svg
new file mode 100644
index 0000000000..c50ca4f408
--- /dev/null
+++ b/content/images/pattern-feed.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-grid.svg b/content/images/pattern-grid.svg
new file mode 100644
index 0000000000..4b3c38a720
--- /dev/null
+++ b/content/images/pattern-grid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-landmarks.svg b/content/images/pattern-landmarks.svg
new file mode 100644
index 0000000000..3a744dc689
--- /dev/null
+++ b/content/images/pattern-landmarks.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-link.svg b/content/images/pattern-link.svg
new file mode 100644
index 0000000000..26049b2472
--- /dev/null
+++ b/content/images/pattern-link.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-listbox.svg b/content/images/pattern-listbox.svg
new file mode 100644
index 0000000000..16561e92fa
--- /dev/null
+++ b/content/images/pattern-listbox.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-menu-button.svg b/content/images/pattern-menu-button.svg
new file mode 100644
index 0000000000..1924f15f45
--- /dev/null
+++ b/content/images/pattern-menu-button.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-menubar.svg b/content/images/pattern-menubar.svg
new file mode 100644
index 0000000000..3a75d84688
--- /dev/null
+++ b/content/images/pattern-menubar.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-meter.svg b/content/images/pattern-meter.svg
new file mode 100644
index 0000000000..b508bb3e71
--- /dev/null
+++ b/content/images/pattern-meter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-radio.svg b/content/images/pattern-radio.svg
new file mode 100644
index 0000000000..3339928eb9
--- /dev/null
+++ b/content/images/pattern-radio.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-slider-multithumb.svg b/content/images/pattern-slider-multithumb.svg
new file mode 100644
index 0000000000..ad4c28a5de
--- /dev/null
+++ b/content/images/pattern-slider-multithumb.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-slider.svg b/content/images/pattern-slider.svg
new file mode 100644
index 0000000000..d63b1fa78b
--- /dev/null
+++ b/content/images/pattern-slider.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-spinbutton.svg b/content/images/pattern-spinbutton.svg
new file mode 100644
index 0000000000..cd1c58f008
--- /dev/null
+++ b/content/images/pattern-spinbutton.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-switch.svg b/content/images/pattern-switch.svg
new file mode 100644
index 0000000000..f2d2c170a0
--- /dev/null
+++ b/content/images/pattern-switch.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-table.svg b/content/images/pattern-table.svg
new file mode 100644
index 0000000000..c86d280200
--- /dev/null
+++ b/content/images/pattern-table.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-tabs.svg b/content/images/pattern-tabs.svg
new file mode 100644
index 0000000000..32653c370d
--- /dev/null
+++ b/content/images/pattern-tabs.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-toolbar.svg b/content/images/pattern-toolbar.svg
new file mode 100644
index 0000000000..f19d72c3d8
--- /dev/null
+++ b/content/images/pattern-toolbar.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-tooltip.svg b/content/images/pattern-tooltip.svg
new file mode 100644
index 0000000000..92198927e1
--- /dev/null
+++ b/content/images/pattern-tooltip.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-treegrid.svg b/content/images/pattern-treegrid.svg
new file mode 100644
index 0000000000..7aa19e66b3
--- /dev/null
+++ b/content/images/pattern-treegrid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-treeview.svg b/content/images/pattern-treeview.svg
new file mode 100644
index 0000000000..24de583f0d
--- /dev/null
+++ b/content/images/pattern-treeview.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/pattern-windowsplitter.svg b/content/images/pattern-windowsplitter.svg
new file mode 100644
index 0000000000..1527dff856
--- /dev/null
+++ b/content/images/pattern-windowsplitter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/images/read-this-first.svg b/content/images/read-this-first.svg
new file mode 100644
index 0000000000..69323df5ed
--- /dev/null
+++ b/content/images/read-this-first.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html
index fc316164a8..c39f4e1745 100644
--- a/content/patterns/accordion/accordion-pattern.html
+++ b/content/patterns/accordion/accordion-pattern.html
@@ -37,6 +37,7 @@
About This Pattern
+
Example
Accordion Example: demonstrates a form divided into three sections using an accordion to show one section at a time.
The below example demonstrates the Alert Pattern.
Activating the Trigger Alert button causes a message to be inserted into the example alert element.
diff --git a/content/patterns/alertdialog/alertdialog-pattern.html b/content/patterns/alertdialog/alertdialog-pattern.html
index 99e4953121..0cfa66ee6e 100644
--- a/content/patterns/alertdialog/alertdialog-pattern.html
+++ b/content/patterns/alertdialog/alertdialog-pattern.html
@@ -26,6 +26,7 @@
The below example of a confirmation prompt demonstrates the Alert Dialog Pattern.
It also includes an example of the Alert Pattern to make comparing the experiences provided by the two patterns easy.
diff --git a/content/patterns/breadcrumb/breadcrumb-pattern.html b/content/patterns/breadcrumb/breadcrumb-pattern.html
index e42aa27e7b..3cb30aa572 100644
--- a/content/patterns/breadcrumb/breadcrumb-pattern.html
+++ b/content/patterns/breadcrumb/breadcrumb-pattern.html
@@ -26,6 +26,7 @@
The following examples of the Button Pattern demonstrate a new JavaScript syntax for coding ARIA attributes.
The JavaScript for the example buttons on this page uses the IDL Interface defined in ARIA 1.2.
diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
index d9ca9c7d4e..1388a086d4 100644
--- a/content/patterns/carousel/carousel-pattern.html
+++ b/content/patterns/carousel/carousel-pattern.html
@@ -54,6 +54,7 @@
About This Pattern
+
Examples
Auto-Rotating Image Carousel with Buttons for Slide Control: A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with buttons for previous and next slide.
Auto-Rotating Image Carousel Example with Buttons for Slide Control
About This Example
+
The following example implementation of the Carousel Pattern demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
For instance, rotation stops when users either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons.
diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index c13a8b029a..c94d95c335 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -29,6 +29,7 @@
Auto-Rotating Image Carousel with Tabs for Slide Control Example
About This Example
+
The following example implementation of the Carousel Pattern demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
This example also illustrates how to use the tabs pattern to provide users with a way to skip slides in the sequence by directly choosing which one to view.
diff --git a/content/patterns/checkbox/checkbox-pattern.html b/content/patterns/checkbox/checkbox-pattern.html
index 73b1cccab6..f8477d0fb7 100644
--- a/content/patterns/checkbox/checkbox-pattern.html
+++ b/content/patterns/checkbox/checkbox-pattern.html
@@ -40,6 +40,7 @@
This example demonstrates using the Checkbox Pattern to create a tri-state, or mixed-state, checkbox.
In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes.
diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html
index 3321c47d8c..1bdc4aba71 100644
--- a/content/patterns/checkbox/examples/checkbox.html
+++ b/content/patterns/checkbox/examples/checkbox.html
@@ -29,6 +29,7 @@
Checkbox Example (Two State)
About This Example
+
This example implements the Checkbox Pattern for a two state checkbox using div elements.
Editable Combobox With Both List and Inline Autocomplete Example
About This Example
+
The below combobox for choosing the name of a US state or territory demonstrates the Combobox Pattern.
The design pattern describes four types of autocomplete behavior.
@@ -143,7 +144,7 @@
Accessibility Features
To help people with visual impairments identify the combobox as an interactive element, the cursor is changed to a pointer when hovering over the combobox or list.
To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.
- Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
+ Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels.
When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html
index c6fa786364..63a7a80772 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-list.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html
@@ -29,6 +29,7 @@
Editable Combobox With List Autocomplete Example
About This Example
+
The below combobox for choosing the name of a US state or territory demonstrates the Combobox Pattern.
The design pattern describes four types of autocomplete behavior.
@@ -143,7 +144,7 @@
Accessibility Features
To help people with visual impairments identify the combobox as an interactive element, the cursor is changed to a pointer when hovering over the combobox or list.
To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.
- Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
+ Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels.
When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html
index 5464853eb0..e57fc1d249 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-none.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html
@@ -29,6 +29,7 @@
Editable Combobox without Autocomplete Example
About This Example
+
The below combobox that enables users to choose a term from a hypothetical list of previously searched terms demonstrates the Combobox Pattern.
The design pattern describes four types of autocomplete behavior.
@@ -96,7 +97,7 @@
Accessibility Features
To help people with visual impairments identify the combobox as an interactive element, the cursor is changed to a pointer when hovering over the combobox or list.
To make it easier to distinguish the selected listbox option from other options, selection creates a 2 pixel border above and below the option.
- Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
+ Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels.
When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.
diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html
index 07ae85cc8c..cb8ecaeef7 100644
--- a/content/patterns/combobox/examples/combobox-datepicker.html
+++ b/content/patterns/combobox/examples/combobox-datepicker.html
@@ -30,6 +30,7 @@
Date Picker Combobox Example
About This Example
+
The below date picker demonstrates an implementation of the Combobox Pattern that opens a dialog.
The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing Down Arrow or Alt + Down Arrow.
diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html
index 5839b3abee..cc32f80ffa 100644
--- a/content/patterns/combobox/examples/combobox-select-only.html
+++ b/content/patterns/combobox/examples/combobox-select-only.html
@@ -29,6 +29,7 @@
Select-Only Combobox Example
About This Example
+
The following example implementation of the Combobox Pattern demonstrates a single-select combobox widget that is functionally similar to an HTML select element.
Unlike the editable combobox examples, this select-only combobox is not made with an <input> element, and it does not accept freeform user input.
diff --git a/content/patterns/combobox/examples/css/combobox-autocomplete.css b/content/patterns/combobox/examples/css/combobox-autocomplete.css
index 72f0f113d6..cef393bd3b 100644
--- a/content/patterns/combobox/examples/css/combobox-autocomplete.css
+++ b/content/patterns/combobox/examples/css/combobox-autocomplete.css
@@ -13,7 +13,7 @@
background-color: white;
color: black;
box-sizing: border-box;
- height: 24px;
+ height: 30px;
padding: 0;
margin: 0;
vertical-align: bottom;
@@ -46,7 +46,7 @@ ul[role="listbox"] {
padding: 0;
position: absolute;
left: 4px;
- top: 28px;
+ top: 34px;
list-style: none;
background-color: white;
display: none;
diff --git a/content/patterns/combobox/examples/css/grid-combo.css b/content/patterns/combobox/examples/css/grid-combo.css
index 5484f8f7b4..8c86a4f3be 100644
--- a/content/patterns/combobox/examples/css/grid-combo.css
+++ b/content/patterns/combobox/examples/css/grid-combo.css
@@ -23,7 +23,7 @@
margin: 0;
padding: 0;
position: absolute;
- top: 1.7em;
+ top: auto;
z-index: 1;
}
diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html
index c12a0f033e..888136b506 100644
--- a/content/patterns/combobox/examples/grid-combo.html
+++ b/content/patterns/combobox/examples/grid-combo.html
@@ -31,6 +31,7 @@
Editable Combobox with Grid Popup Example
About This Example
+
The following example combobox implements the combobox pattern using a grid for the suggested values popup.
The example below includes a date input field and a button that opens a date picker that implements the Dialog (Modal) Pattern.
The dialog contains a calendar that uses the grid pattern to present buttons that enable the user to choose a day from the calendar.
diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
index 25dc42dce4..d53a65d079 100644
--- a/content/patterns/dialog-modal/examples/dialog.html
+++ b/content/patterns/dialog-modal/examples/dialog.html
@@ -30,6 +30,7 @@
Modal Dialog Example
About This Example
+
Following is an example implementation of the Dialog (Modal) Pattern.
The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs.
diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index 8cb67466c3..c6ccdefbb2 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -27,6 +27,7 @@
Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions
About This Example
+
The following example demonstrates using the Disclosure Pattern to create a set of frequently asked questions where the answers may be independently shown or hidden.
@@ -106,7 +107,7 @@
Accessibility Features
To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.
- Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
+ Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index ee7e1e6cb0..86c312f1e2 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -29,6 +29,7 @@
Example Disclosure (Show/Hide) for Image Description
About This Example
+
The following example demonstrates using the Disclosure Pattern to provide a way of revealing a table of data that complements an image.
@@ -249,7 +250,7 @@
Accessibility Features
To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.
- Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements.
+ Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index fd728c89cd..29d8d4331a 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -38,7 +38,7 @@
The following example demonstrates using the Disclosure Pattern to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
Unlike the other disclosure navigation menu example, this example includes top-level links alongside the disclosure buttons.
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 705ce57336..822540e47f 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -38,6 +38,7 @@
The following example demonstrates using the Disclosure Pattern to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section.
diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html
index e3f688d7e0..5eb04dcfc3 100644
--- a/content/patterns/feed/examples/feed.html
+++ b/content/patterns/feed/examples/feed.html
@@ -25,6 +25,7 @@
Feed Example
About This Example
+
NOTE: The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
This page provides a proposed implementation of a feed component.
@@ -191,8 +192,8 @@
Role, Property, State, and Tabindex Attributes
JavaScript and CSS Source Code
The following Javascript and CSS is used by the feed-display.html page:
Following are three example implementations of the Grid Pattern that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation of tabular information.
Each of the following three grids presents a set of financial transactions.
diff --git a/content/patterns/grid/examples/layout-grids.html b/content/patterns/grid/examples/layout-grids.html
index ae6ac0d932..5644821366 100644
--- a/content/patterns/grid/examples/layout-grids.html
+++ b/content/patterns/grid/examples/layout-grids.html
@@ -31,6 +31,7 @@
Layout Grid Examples
About This Example
+
The following examples demonstrate how the Grid Pattern can be used to group a collection of interactive widgets into a single tab stop.
In these examples, each widget, such as a link or button, is in a separate cell of the grid, and the user can navigate between them with the arrow keys.
diff --git a/content/patterns/grid/grid-pattern.html b/content/patterns/grid/grid-pattern.html
index 65448f3aca..7becf71747 100644
--- a/content/patterns/grid/grid-pattern.html
+++ b/content/patterns/grid/grid-pattern.html
@@ -52,6 +52,7 @@
About This Pattern
+
Examples
Layout Grid Examples: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.
Landmark roles can be nested to identify parent/child relationships of the information being presented.
+
+ Note that wrapping the content of a modal dialog in a landmark region is unnecessary.
+ A landmark that wraps modal content cannot provide any benefit to users because it is not perceivable unless the modal is open.
+ In addition, when a modal is open, a landmark containing its content is superfluous because the modal itself is a container that provides both a name and boundaries.
+
The examples below demonstrate three variations of the Link Pattern.
The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors.
diff --git a/content/patterns/link/link-pattern.html b/content/patterns/link/link-pattern.html
index dc34f95282..1b18f20ce4 100644
--- a/content/patterns/link/link-pattern.html
+++ b/content/patterns/link/link-pattern.html
@@ -31,6 +31,7 @@
note
+
Examples
Link Examples: Link widgets constructed from HTML span and img elements.
The following example implementation of the Listbox Pattern demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML select input with the attribute size="1".
The widget consists of a button that triggers the display of a listbox.
diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html
index 2a2f89936a..37f8237441 100644
--- a/content/patterns/listbox/examples/listbox-grouped.html
+++ b/content/patterns/listbox/examples/listbox-grouped.html
@@ -30,6 +30,7 @@
Listbox Example with Grouped Options
About This Example
+
The following example implementation of the Listbox Pattern demonstrates a single-select listbox widget with grouped options.
This widget is functionally similar to an HTML select element with size greater than 1 and options grouped into categories with labeled optgroup elements.
diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html
index f8d52e2261..a9500377ce 100644
--- a/content/patterns/listbox/examples/listbox-rearrangeable.html
+++ b/content/patterns/listbox/examples/listbox-rearrangeable.html
@@ -31,6 +31,7 @@
Example Listboxes with Rearrangeable Options
About This Example
+
The following two example implementations of the Listbox Pattern demonstrate differences between single-select and multi-select functionality.
In both examples, users can use action buttons to move options from one list to another.
diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index 40848ccf79..56683c29c0 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -30,6 +30,7 @@
Scrollable Listbox Example
About This Example
+
The following example implementation of the Listbox Pattern demonstrates a scrollable single-select listbox widget.
This widget is functionally similar to an HTML select input where the size attribute has a value greater than one.
diff --git a/content/patterns/listbox/listbox-pattern.html b/content/patterns/listbox/listbox-pattern.html
index 70afe576e6..3988a66f2a 100644
--- a/content/patterns/listbox/listbox-pattern.html
+++ b/content/patterns/listbox/listbox-pattern.html
@@ -47,6 +47,7 @@
About This Pattern
+
Examples
Scrollable Listbox Example: Single-select listbox that scrolls to reveal more options, similar to HTML select with size attribute greater than one.
diff --git a/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js b/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js
index 35472f1e00..a1165150d5 100644
--- a/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js
+++ b/content/patterns/menu-button/examples/js/menu-button-actions-active-descendant.js
@@ -162,9 +162,9 @@ class MenuButtonActionsActiveDescendant {
closePopup() {
if (this.isOpen()) {
- this.buttonNode.removeAttribute('aria-expanded');
+ this.buttonNode.setAttribute('aria-expanded', 'false');
this.menuNode.setAttribute('aria-activedescendant', '');
- for (var i = 0; i < this.menuitemNodes.length; i++) {
+ for (let i = 0; i < this.menuitemNodes.length; i++) {
this.menuitemNodes[i].classList.remove('focus');
}
this.menuNode.style.display = 'none';
diff --git a/content/patterns/menu-button/examples/js/menu-button-actions.js b/content/patterns/menu-button/examples/js/menu-button-actions.js
index 7f81486f5f..cd69d5621f 100644
--- a/content/patterns/menu-button/examples/js/menu-button-actions.js
+++ b/content/patterns/menu-button/examples/js/menu-button-actions.js
@@ -156,7 +156,7 @@ class MenuButtonActions {
closePopup() {
if (this.isOpen()) {
- this.buttonNode.removeAttribute('aria-expanded');
+ this.buttonNode.setAttribute('aria-expanded', 'false');
this.menuNode.style.display = 'none';
}
}
diff --git a/content/patterns/menu-button/examples/js/menu-button-links.js b/content/patterns/menu-button/examples/js/menu-button-links.js
index 90f4146da1..757aac2268 100644
--- a/content/patterns/menu-button/examples/js/menu-button-links.js
+++ b/content/patterns/menu-button/examples/js/menu-button-links.js
@@ -153,7 +153,7 @@ class MenuButtonLinks {
closePopup() {
if (this.isOpen()) {
- this.buttonNode.removeAttribute('aria-expanded');
+ this.buttonNode.setAttribute('aria-expanded', 'false');
this.menuNode.style.display = 'none';
}
}
diff --git a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
index 6eddb08178..5c7bde9003 100644
--- a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
+++ b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
@@ -29,6 +29,7 @@
Actions Menu Button Example Using aria-activedescendant
About This Example
+
This example demonstrates how the Menu Button Pattern can be used to create a button that opens an actions menu.
In this example, choosing an action from the menu will cause the chosen action to be displayed in the Last Action edit box.
@@ -51,7 +52,7 @@