From d3f2c0ee8706ad961b216bf91b2f285b21516202 Mon Sep 17 00:00:00 2001 From: msharkey Date: Sun, 17 Dec 2023 12:47:23 -0600 Subject: [PATCH] Tabs WCAG & reference files --- ...in-nav.access.yml => il-main-nav.wcag.yml} | 0 src/il-tabs/README.md | 44 --------------- src/il-tabs/il-tabs.wcag.yml | 54 +++++++++++++++++++ src/il-tabs/il-tabs.yml | 12 +++++ 4 files changed, 66 insertions(+), 44 deletions(-) rename src/il-main-nav/{il-main-nav.access.yml => il-main-nav.wcag.yml} (100%) create mode 100644 src/il-tabs/il-tabs.wcag.yml create mode 100644 src/il-tabs/il-tabs.yml diff --git a/src/il-main-nav/il-main-nav.access.yml b/src/il-main-nav/il-main-nav.wcag.yml similarity index 100% rename from src/il-main-nav/il-main-nav.access.yml rename to src/il-main-nav/il-main-nav.wcag.yml diff --git a/src/il-tabs/README.md b/src/il-tabs/README.md index 0f0d5267..b9a5e25c 100644 --- a/src/il-tabs/README.md +++ b/src/il-tabs/README.md @@ -65,47 +65,3 @@ By default, the first tab is selected on page load. To change which tab is initi ``` -## Accessibility -In compliance with WCAG 2.2 Level AA this component implements the following accessibility features, referencing the [Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): - -Success Criterion 1.3.1 Info and Relationships -The contents are contained in a tablist role and items in the tab slot are given the tab role. Guidance is given to use headings to signify headings and aria-controls to show relationships between the tab buttons and the area the tab controls. Orientation is defined using aria-orientation. - -SC 1.3.2 Meaningful Sequence -Content displayed in the markup matches the sequence generated by the web control. - -SC 1.4.1 Use of Color -Tabs are displayed in a higher prominence to indicate they are clickable - -SC 1.4.3: Contrast (Minimum) -There is a minimum contrast ratio of 4.5:1 between the text and the background, following color themes. - -SC 1.4.10: Reflow -The tab list reduces to an accordion style set of items on smaller screens. - -SC 1.4.13 Content on Hover or Focus -Information does not disappear when items are hovered or focus. A mouse click or Enter is required to display the information. - -SC 2.1.1: Keyboard -When the user would tab into the tab area, focus is given to the active tab button in the tab area. When the tab area is focused, arrow keys are used to change to alternate tabs. Enter or space is used to activate the tab. Tab will move to the next available item inside the tab panel, or the tab panel if there are no focusable elements inside the tab panel. - -SC 2.4.3 Focus Order -The tab area is considered one focusable item. Items inside the tab panels will receive tab focus as dictated by the source code order. - -SC 2.4.4 Link Purpose (In Context) -Guidance is given to ensure tabs in the tab area match the headings in the tab panels. - -SC 2.4.6 Headings and Labels -Guidance is given to ensure headings are used in the tab panels. - -SC 2.4.7: Focus Visible -Focus with the component is clearly indicated. - -SC 2.5.8: Target Size (Minimum) -Buttons maintain a minimum size of 24×24 pixels. - -SC 3.2.1 On Focus -The buttons in the tab area do not change the tabpanel by focusing on them. - -SC 4.1.2 Name, Role, Value -Guidance is given to use aria-control on the tab buttons and aria-labelledby on the tab panel to link it to a header. The component will assign the aria-selected name to signify the selected tab, and the aria-labelledby on each tab panel to tie the panel back to the tab button. diff --git a/src/il-tabs/il-tabs.wcag.yml b/src/il-tabs/il-tabs.wcag.yml new file mode 100644 index 00000000..1aa99989 --- /dev/null +++ b/src/il-tabs/il-tabs.wcag.yml @@ -0,0 +1,54 @@ +- criteria: 1.3.1 + techniques: [ARIA11, H42] + description: The contents are contained in a tablist role and items in the tab slot are given the tab role. Guidance is given to use headings to signify headings and aria-controls to show relationships between the tab buttons and the area the tab controls. Orientation is defined using aria-orientation. + +- criteria: 1.3.2 + techniques: [C27] + description: Content displayed in the markup matches the sequence generated by the web control. + +- criteria: 1.4.1 + techniques: [G182] + description: Tabs are displayed in a higher prominence to indicate they are clickable + +- criteria: 1.4.3 + techniques: [G18, G145] + description: There is a minimum contrast ratio of 4.5:1 between the text and the background, following color themes. + +- criteria: 1.4.10 + techniques: [C32] + description: The tab list reduces to an accordion style set of items on smaller screens. + +- criteria: 1.4.13 + description: Information does not disappear when items are hovered or focus. A mouse click or Enter is required to display the information. + +- criteria: 2.1.1 + techniques: [G202] + description: When the user would tab into the tab area, focus is given to the active tab button in the tab area. When the tab area is focused, arrow keys are used to change to alternate tabs. Enter or space is used to activate the tab. Tab will move to the next available item inside the tab panel, or the tab panel if there are no focusable elements inside the tab panel. + +- criteria: 2.4.3 + techniques: [G59, C27] + description: The tab area is considered one focusable item. Items inside the tab panels will receive tab focus as dictated by the source code order. + +- criteria: 2.4.4 + techniques: [G91] + description: Guidance is given to ensure tabs in the tab area match the headings in the tab panels. + +- criteria: 2.4.6 + techniques: [G130] + description: Guidance is given to ensure headings are used in the tab panels. + +- criteria: 2.4.7 + techniques: [G149] + description: Focus with the component is clearly indicated. + +- criteria: 2.5.8 + techniques: [C42] + description: Buttons maintain a minimum size of 24×24 pixels. + +- criteria: 3.2.1 + techniques: [G107] + description: The buttons in the tab area do not change the tabpanel by focusing on them. + +- criteria: 4.1.2 + techniques: [ARIA4, ARIA5] + description: Guidance is given to use aria-control on the tab buttons and aria-labelledby on the tab panel to link it to a header. The component will assign the aria-selected name to signify the selected tab, and the aria-labelledby on each tab panel to tie the panel back to the tab button. diff --git a/src/il-tabs/il-tabs.yml b/src/il-tabs/il-tabs.yml new file mode 100644 index 00000000..63eaa4b1 --- /dev/null +++ b/src/il-tabs/il-tabs.yml @@ -0,0 +1,12 @@ +slots: + - name: tabs + description: Tab elements + - default: true + description: Tab panel elements +attributes: + - name: direction + type: string + values: + - value: horizontal + default: true + - value: vertical