From 370ada4ba77ce06b984536c7bad8e2f64cccacf3 Mon Sep 17 00:00:00 2001 From: EJ Mason Date: Sun, 9 May 2021 16:37:36 -0700 Subject: [PATCH] Fix missing key --- src/_data/checklists.json | 76 ++++++++++++++++++++++++++++++++++++++- src/js/checklist.js | 40 +++++++++++++++++++++ 2 files changed, 115 insertions(+), 1 deletion(-) diff --git a/src/_data/checklists.json b/src/_data/checklists.json index 08cea7277..4d2adaedb 100644 --- a/src/_data/checklists.json +++ b/src/_data/checklists.json @@ -29,7 +29,81 @@ ] }, "global code": { - "preface": "Global code is code that affects your entire website or web app." + "preface": "Global code is code that affects your entire website or web app.", + "tasks": [ + { + "title": "Validate your HTML.", + "checkboxId": "validate-html", + "wcag": "4.1.1 Parsing", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html", + "description": "Valid HTML helps to provide an consistent, expected experience across all browsers and assistive technology.", + "wcagLevel": "A" + }, + { + "title": "Use a lang attribute on the html element.", + "checkboxId": "use-lang-attribute", + "wcag": "3.1.1 Language of Page", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html", + "description": "This helps assistive technology such as screen readers to pronounce content correctly.", + "wcagLevel": "A" + }, + { + "title": "Provide a unique title for each page or view.", + "checkboxId": "provide-unique-page-title", + "wcag": "2.4.2 Page Titled", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html", + "description": "The title element, contained in the document's head element, is often the first piece of information announced by assistive technology. This helps tell people what page or view they are going to start navigating.", + "wcagLevel": "A" + }, + { + "title": "Ensure that viewport zoom is not disabled.", + "checkboxId": "dont-disable-zoom", + "wcag": "1.4.4 Resize text", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html", + "description": "Some people need to increase the size of text to a point where they can read it. Do not stop them from doing this, even for web apps with a native app-like experience. Even native apps should respect Operating System settings for resizing text.", + "wcagLevel": "AA" + }, + { + "title": "Use landmark elements to indicate important content regions.", + "checkboxId": "use-landmark-elements", + "wcag": "4.1.2 Name, Role, Value", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html", + "description": "Landmark regions help communicate the layout and important areas of a page or view, and can allow quick access to these regions. For example, use the nav element to wrap a site's navigation, and the main element to contain the primary content of a page.", + "wcagLevel": "A" + }, + { + "title": "Ensure a linear content flow.", + "checkboxId": "linear-content-flow", + "wcag": "2.4.3 Focus Order", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html", + "description": "Remove tabindex attribute values that aren't either 0 or -1. Elements that are inherently focusable, such as links or button elements, do not require a tabindex. Elements that are not inherently focusable should not have a tabindex applied to them outside of very specific use cases.", + "wcagLevel": "A" + }, + { + "title": "Avoid using the autofocus attribute.", + "checkboxId": "avoid-autofocus", + "wcag": "2.4.3 Focus Order", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html", + "description": " People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, autofocus can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locations on the page/view.", + "wcagLevel": "A" + }, + { + "title": "Remove session timeouts.", + "checkboxId": "remove-timeouts", + "wcag": "2.2.1 Timing Adjustable", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html", + "description": "If you cannot, let the person using your site know the timeout exists ahead of time, and provide significant notice before the timer runs out.", + "wcagLevel": "A" + }, + { + "title": "Remove title attribute tooltips.", + "checkboxId": "remove-title-attribute", + "wcag": "4.1.2 Name, Role, Value", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html", + "description": "The title attribute has numerous issues, and should not be used if the information provided is important for all people to access. An acceptable use for the title attribute would be labeling an iframe element to indicate what content it contains.", + "wcagLevel": "A" + } + ] }, "keyboard": { "preface": "It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for hovering or precise clicking.", diff --git a/src/js/checklist.js b/src/js/checklist.js index 26a0304f9..9aae8998f 100644 --- a/src/js/checklist.js +++ b/src/js/checklist.js @@ -8,6 +8,25 @@ Element.prototype.matches = Element.prototype.msMatchesSelector; } +var checklistCategoryExpanded = { + "content": false, + "global-code": false, + "keyboard": false, + "images": false, + "headings": false, + "lists": false, + "controls": false, + "tables": false, + "forms": false, + "media": false, + "video": false, + "audio": false, + "appearance": false, + "animation": false, + "color-contrast": false, + "mobile-and-touch": false +} + /** * If someone opens the checklist page using a checklist item's "Share link" (ex: a11yproject.com/checklist/#validate-your-html) the item with the corresponding id will scroll into view. Then, if JS is enabled, this function will open its associated
element */ @@ -65,3 +84,24 @@ function processChecklist() { openLinkedCheckListItem(); processChecklist(); + +function toggleChecklistGroup() { + document.addEventListener("click", function (event) { + var target = event.target; + if (target.matches("[data-toggle-category]")) { + var categoryName = target.getAttribute("data-toggle-category"); + var categoryWrapper = target.closest( + '[data-checklist-category="' + categoryName + '"]' + ); + var checklistItems = categoryWrapper.querySelectorAll("details"); + var willExpandAll = categoryWrapper.querySelectorAll('details[open]').length === 0 + console.log(willExpandAll) + for (var i = 0; i < checklistItems.length; ++i) { + var item = checklistItems[i]; + item.open = willExpandAll + } + } + }); +} + +toggleChecklistGroup();