From e22b089db14afb49f82510d9dee321de35008ffa Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Sun, 9 May 2021 18:59:23 -0400 Subject: [PATCH 1/2] Add initial conference resources (#1272) --- src/_data/resources.json | 73 +++++++++++++++++++++++++++++++++ src/_includes/card/resource.njk | 2 + src/resources.njk | 14 +++++++ 3 files changed, 89 insertions(+) diff --git a/src/_data/resources.json b/src/_data/resources.json index 5fc91016f..011cddf80 100644 --- a/src/_data/resources.json +++ b/src/_data/resources.json @@ -592,6 +592,79 @@ "url": "http://webaim.org/discussion/" } ], + "conferences": [ + { + "title": "#a11yTO Camp", + "description": "Opening the doors for a free day of accessibility learning.", + "url": "https://camp.a11yto.com/" + }, + { + "title": "#a11yTO Conf", + "description": "A curated playlist of talks, focused on digital accessibility.", + "url": "https://conf.a11yto.com/" + }, + { + "title": "ACCESS", + "description": "ACCESS is an annual conference by 3Play Media celebrating video, accessibility, & the people who make it happen.", + "url": "https://www.3playmedia.com/company/access-by-3play/" + }, + { + "title": "Assistive Technology Industry Association (ATIA)", + "description": "Over the past 22 years, ATIA has been a community gathering for assistive technology practitioners, teachers, parents and caregivers, persons with disabilities and more to learn, network and share on the best in assistive technology.", + "url": "https://www.atia.org/conference/" + }, + { + "title": "axe-con Digital Accessibility Conference", + "description": "Axe-con is an open and inclusive digital accessibility conference that welcomes developers, designers, business users, and accessibility professionals of all experience levels to a new kind of accessibility conference focused on building, testing, and maintaining accessible digital experiences.", + "additional": "March 10–11", + "url": "https://www.deque.com/axe-con/" + }, + { + "title": "CSUN Assistive Technology Conference", + "description": "Known as a forum that showcases cutting edge technology and practical solutions that can be utilized to remove the barriers that prevent the full participation of persons with disabilities in educational, workplace and social settings, the conference is the largest of its kind in the world.", + "url": "https://www.csun.edu/cod/conference/" + }, + { + "title": "The Digital Accessibility Legal Summit", + "description": "We bring together experts from the fields of accessibility and legal to discuss current trends, and to provide insights that will be helpful to practitioners in their work on digital accessibility.", + "url": "https://www.accessibility.legal/" + }, + { + "title": "Funka Accessibility Days", + "description": "Funka Accessibility Days is northern Europe’s largest conference on accessible ICT. We are proud to welcome some of the world´s leading experts on web accessibility.", + "url": "https://www.funka.com/en/we-offer/funka-accessibility-days/" + }, + { + "title": "Future Date", + "description": "Future Date is a free, volunteer-led, virtual accessibility conference. Our goal is to expose our audience to the pioneering work and lived experiences of disability and accessibility leaders.", + "url": "https://afuturedate.herokuapp.com/" + }, + { + "title": "Global Accessibility Awareness Day", + "description": "The purpose of GAAD is to get everyone talking, thinking and learning about digital access and inclusion, and the more than One Billion people with disabilities/impairments.", + "url": "https://globalaccessibilityawarenessday.org/" + }, + { + "title": "Inclusive Design 24 (#id24)", + "description": "A free 24-hour online event for the global community. It celebrates inclusive design and shares knowledge and ideas from analogue to digital, from design to development, from planners to practitioners, and everything and everyone in between.", + "url": "https://inclusivedesign24.org/" + }, + { + "title": "John Slatin Virtual AccessU", + "description": "Whatever your role in digital accessibility, wherever you are on your journey, there is simply no better place to learn and connect to the global community than the annual John Slatin AccessU conference.", + "url": "https://knowbility.org/programs/accessu-2021" + }, + { + "title": "Magnify Conference", + "description": "The Magnify Conference was created from a surge of inspiration when seeing so many talented people practicing inclusive design practices daily across the globe.", + "url": "https://www.magnifyconference.com/" + }, + { + "title": "Web4All", + "description": "The conference focuses on all aspects of web accessibility. Areas of general interest include, but are not limited to the following: age, cognition, culture, education, emotions, dexterity, disability, diversity, health, hearing, income, infrastructure, language, learning, literacy, mobility, situation, society, and vision.", + "url": "http://www.w4a.info/2021/" + } + ], "courses": [ { "title": "Accessibility Courses", diff --git a/src/_includes/card/resource.njk b/src/_includes/card/resource.njk index aecd36e35..4c89e5575 100755 --- a/src/_includes/card/resource.njk +++ b/src/_includes/card/resource.njk @@ -29,6 +29,8 @@ {% elif resourceType == "Images and icons" %} + {% elif resourceType == "Conferences" %} + {% elif resourceType == "Meetups" %} {% elif resourceType == "Mobile apps" %} diff --git a/src/resources.njk b/src/resources.njk index c65305c49..b87c78465 100755 --- a/src/resources.njk +++ b/src/resources.njk @@ -352,6 +352,20 @@ templateClass: template-resources Groups and organizations + {% set resourceType = "Conferences" %} +

+ {{ resourceType }} +

+

+ Annual events about accessibility and inclusion. +

+
+ {% set resource = resources.conferences %} + {% for resource in resource %} + {% include "card/resource.njk" %} + {% endfor %} +
+ {% set resourceType = "Meetups" %}

{{ resourceType }} From 1d72c219d35cb09620371d12452f2b107b2752fc Mon Sep 17 00:00:00 2001 From: EJ Mason Date: Sun, 9 May 2021 16:05:13 -0700 Subject: [PATCH 2/2] Restructure checklist data (#1268) --- src/_data/checklists.json | 1056 +++++++++-------- .../{checklist.njk => checklist__task.njk} | 18 +- src/checklist.njk | 215 +--- src/css/utilities/_text-transform.scss | 18 + 4 files changed, 594 insertions(+), 713 deletions(-) rename src/_includes/{checklist.njk => checklist__task.njk} (73%) diff --git a/src/_data/checklists.json b/src/_data/checklists.json index 4cc14238f..6f92604dc 100644 --- a/src/_data/checklists.json +++ b/src/_data/checklists.json @@ -1,505 +1,555 @@ { - "content": [ - { - "title": "Use plain language and avoid figures of speech, idioms, and complicated metaphors.", - "checkboxId": "use-plain-language", - "wcag": "3.1.5 Reading Level", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html", - "description": "Write content at an 8th grade reading level." - }, - { - "title": "Make sure that button, a, and label element content is unique and descriptive. ", - "checkboxId": "make-sure-interactive-content-is-unique", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Terms like “click here” and “read more” do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated." - }, - { - "title": "Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.", - "checkboxId": "use-ltr-rtl", - "wcag": "1.4.8 Visual Presentation", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html", - "description": "Centered-aligned or justified text is difficult to read." - } - ], - "global": [ - { - "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." - }, - { - "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." - }, - { - "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." - }, - { - "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." - }, - { - "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." - }, - { - "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." - }, - { - "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." - }, - { - "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." - }, - { - "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." - } - ], - "keyboard": [ - { - "title": "Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.", - "checkboxId": "visible-focus-style", - "wcag": "2.4.7 Focus Visible", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html", - "description": "Can a person navigating with a keyboard, switch, voice control, or screen reader see where they currently are on the page?" - }, - { - "title": "Check to see that keyboard focus order matches the visual layout.", - "checkboxId": "focus-matches-layout", - "wcag": "1.3.2 Meaningful Sequence", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html", - "description": "Can a person navigating with a keyboard or screen reader move around the page in a predictable way?" - }, - { - "title": "Remove invisible focusable elements.", - "checkboxId": "remove-invisible-focusable-elements", - "wcag": "2.4.3 Focus Order", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html", - "description": "Remove the ability to focus on elements that are not presently meant to be discoverable. This includes things like inactive drop down menus, off screen navigations, or modals." - } - ], - "images": [ - { - "title": "Make sure that all img elements have an alt attribute.", - "checkboxId": "use-alt-attributes", - "wcag": "1.1.1 Non-text Content", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", - "description": "alt attributes (alt text) give a description of an image for people who may not be able to view them. When an alt attribute isn't present on an image, a screen reader may announce the image's file name and path instead. This fails to communicate the image’s content." - }, - { - "title": "Make sure that decorative images use null alt (empty) attribute values.", - "checkboxId": "null-decorative-images", - "wcag": "1.1.1 Non-text Content", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", - "description": "Null alt attributes are also sometimes known as empty alt attributes. They are made by including no information between the opening and closing quotes of an alt attribute. Decorative images do not communicate information that is required to understand the website's overall meaning. Historically they were used for flourishes and spacer gif images, but tend to be less relevant for modern websites and web apps." - }, - { - "title": "Provide a text alternative for complex images such as charts, graphs, and maps.", - "checkboxId": "text-alternatives", - "wcag": "1.1.1 Non-text Content", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", - "description": "Is there a plain text which lists points on the map or sections of a flowchart? Describe all visible information. This includes graph axes, data points and labels, and the overall point the graphic is communicating." - }, - { - "title": "For images containing text, make sure the alt description includes the image's text.", - "checkboxId": "images-containing-text", - "wcag": "1.1.1 Non-text Content", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", - "description": "For example, the FedEx logo should have an alt value of “FedEx.”" - } - ], - "svg": [ - { - "title": "Make sure that svg elements include the code focusable=\"false\" when they are the child element of a focusable element.", - "checkboxId": "svg-focusable-false-child-element", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "This prevents Internet Explorer from allowing focus to navigate through the child elements of a SVG that is meant to be decorative." - }, - { - "title": "Add aria-hidden=\"true\" to SVG that is decorative.", - "checkboxId": "decorative-svg", - "wcag": "4.1.2 Name, Role, Value", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html", - "description": "This is equivalent to an empty/null alt value on a non-svg image." - }, - { - "title": "Make sure that SVG utilizing the use element has whitespace between the svg and use elements.", - "checkboxId": "svg-use-whitespace", - "wcag": "2.1.2 No Keyboard Trap", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html", - "description": "This solves a bug in Safari which sometimes creates hidden, unanticipated tab-stops when navigating." - }, - { - "title": "Ensure that img elements with an svg source includes the role=\"img\" attribute.", - "checkboxId": "svg-image-src", - "wcag": "4.1.2 Name, Role, Value", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html", - "description": "VoiceOver on macOS and iOS will not correctly convey the element as an image if role=\"img\" is not present." - } - ], - "headings": [ - { - "title": "Use heading elements to introduce content.", - "checkboxId": "use-heading-elements", - "wcag": "2.4.6 Headings or Labels", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", - "description": "Heading elements construct a document outline, and should not be used for purely visual design." - }, - { - "title": "Use only one h1 element per page or view.", - "checkboxId": "use-only-one-h1", - "wcag": "2.4.6 Headings or Labels", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", - "description": "The h1 element should be used to communicate the high-level purpose of the page or view. Do not use the h1 element for a heading that does not change between pages or views (for example, the site's name)." - }, - { - "title": "Heading elements should be written in a logical sequence.", - "checkboxId": "logical-heading-sequence", - "wcag": "2.4.6 Headings or Labels", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", - "description": "The order of heading elements should descend, based on the “depth” of the content. For example, a h4 element should not appear on a page before the first h3 element declaration. A tool such as headingsMap can help you evaluate this." - }, - { - "title": "Don't skip heading levels.", - "checkboxId": "dont-skip-heading-levels", - "wcag": "2.4.6 Headings or Labels", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", - "description": "For example, don't jump from a h2 to a h4, skipping a h3 element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead." - } - ], - "lists": [ - { - "title": "Use list elements (ol, ul, and dl elements) for list content.", - "checkboxId": "use-list-elements", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "This may include sections of related content, items visually displayed in a grid-like layout, or sibling a elements." - } - ], - "controls": [ - { - "title": "Use the a element for links.", - "checkboxId": "use-links", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Links should always have a href attribute, even when used in Single Page Applications (SPAs). Without a href attribute, the link will not be properly exposed to assistive technology. An example of this would be a link that uses an onclick event, in place of a href attribute. " - }, - { - "title": "Ensure that links are recognizable as links.", - "checkboxId": "recognizable-links", - "wcag": "1.4.1 Use of Color", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", - "description": "Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content." - }, - { - "title": "Ensure that controls have :focus states.", - "checkboxId": "form-focus-states", - "wcag": "2.4.7 Focus Visible", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html", - "description": "Visible focus styles help people determine which interactive element has keyboard focus. This lets them know that they can perform actions like activating a button or navigating to a link's destination." - }, - { - "title": "Use the button element for buttons.", - "checkboxId": "use-button-element", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Buttons are used to submit data or perform an on-screen action which does not shift keyboard focus. You can add type=\"button\" to a button element to prevent the browser from attempting to submit form information when activated." - }, - { - "title": "Provide a skip link and make sure that it is visible when focused.", - "checkboxId": "provide-skip-link", - "wcag": "2.4.1 Bypass Blocks", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html", - "description": "A skip link can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget." - }, - { - "title": "Identify links that open in a new tab or window.", - "checkboxId": "identify-new-window", - "wcag": "G201: Giving users advanced warning when opening a new window", - "url": "https://www.w3.org/TR/WCAG20-TECHS/G201.html", - "description": "Ideally, avoid links that open in a new tab or window. If a link does, ensure the link's behavior will be communicated in a way that is apparent to all users. Doing this will help people understand what will happen before activating the link. While this technique is technically not required for compliance, it is an often-cited area of frustration for many different kinds of assistive technology users." - } - ], - "tables": [ - { - "title": "Use the table element to describe tabular data.", - "checkboxId": "use-table-elements", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Do you need to display data in rows and columns? Use the table element." - }, - { - "title": "Use the th element for table headers (with appropriate scope attributes).", - "checkboxId": "use-th-element", - "wcag": "4.1.1 Parsing", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html", - "description": "Depending on how complex your table is, you may also consider using scope=\"col\" for column headers, and scope=\"row\" for row headers. Many different kinds of assistive technology still use the scope attribute to help them understand and describe the structure of a table." - }, - { - "title": "Use the caption element to provide a title for the table.", - "checkboxId": "use-caption-element", - "wcag": "2.4.6 Headings or Labels", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", - "description": "The table's caption should describe what kind of information the table contains." - } - ], - "forms": [ - { - "title": "All inputs in a form are associated with a corresponding label element.", - "checkboxId": "associate-inputs-with-labels", - "wcag": "3.2.2 On Input", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html", - "description": "Use a for/id pairing to guarantee the highest level of browser/assistive technology support. " - }, - { - "title": "Use fieldset and legend elements where appropriate.", - "checkboxId": "use-fieldset-and-legend", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Does your form contain multiple sections of related inputs? Use fieldset to group them, and legend to provide a label for what this section is for. " - }, - { - "title": "Inputs use autocomplete where appropriate.", - "checkboxId": "use-autocomplete", - "wcag": "1.3.5 Identify Input Purpose", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html", - "description": "Providing a mechanism to help people more quickly, easily, and accurately fill in form fields that ask for common information (for example, name, address, phone number)." - }, - { - "title": "Make sure that form input errors are displayed in list above the form after submission.", - "checkboxId": "display-form-errors", - "wcag": "3.3.1 Error Identification", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html", - "description": "This provides a way for assistive technology users to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input." - }, - { - "title": "Associate input error messaging with the input it corresponds to.", - "checkboxId": "associate-error-messages", - "wcag": "3.3.1 Error Identification", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html", - "description": "Techniques such as using aria-describedby allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it." - }, - { - "title": "Make sure that error, warning, and success states are not visually communicated by just color.", - "checkboxId": "dont-use-just-color-for-states", - "wcag": "1.4.1 Use of Color", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", - "description": "People who are color blind, who have other low vision conditions, or different cultural understandings for color may not see the state change, or understand what kind of feedback the state represents if color is the only indicator. " - } - ], - "media": [ - { - "title": "Make sure that media does not autoplay.", - "checkboxId": "avoid-autoplay", - "wcag": "1.4.2 Audio Control", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html", - "description": "Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders." - }, - { - "title": "Ensure that media controls use appropriate markup.", - "checkboxId": "media-controls-use-appropriate-markup", - "wcag": "1.3.1 Info and Relationships", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", - "description": "Examples include making sure an audio mute button has a pressed toggle state when active, or that a volume slider uses <input type=\"range\">." - }, - { - "title": "Check to see that all media can be paused.", - "checkboxId": "pause-media", - "wcag": "2.1.1 Keyboard", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html", - "description": "Provide a global pause function on any media element. If the device has a keyboard, ensure that pressing the Space key can pause playback. Make sure you also don't interfere with the Space key's ability to scroll the page/view when not focusing on a form control." - } - ], - "video": [ - { - "title": "Confirm the presence of captions.", - "checkboxId": "use-captions", - "wcag": "1.2.2 Captions", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html", - "description": "Captions allow a person who cannot hear the audio content of a video to still understand its content." - }, - { - "title": " Remove seizure triggers.", - "checkboxId": "remove-seizure-triggers", - "wcag": "2.3.1 Three Flashes or Below Threshold", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html", - "description": " Certain kinds of strobing or flashing animations will trigger seizures." - } - ], - "audio": [ - { - "title": "Confirm that transcripts are available.", - "checkboxId": "confirm-transcripts", - "wcag": "1.1.1 Non-text Content", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", - "description": " Transcripts allow people who cannot hear to still understand the audio content. It also allows people to digest audio content at a pace that is comfortable to them." - } - ], - "appearance": [ - { - "title": "Check your content in specialized browsing modes.", - "checkboxId": "check-specialized-modes", - "wcag": "1.4.1 Use of Color", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", - "description": "Activate modes such as Windows High Contrast or Inverted Colors. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?" - }, - { - "title": "Increase text size to 200%.", - "checkboxId": "increase-text-size", - "wcag": "1.4.4 Resize text", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html", - "description": "Is the content still readable? Does increasing the text size cause content to overlap?" - }, - { - "title": "Double-check that good proximity between content is maintained.", - "checkboxId": "good-proximity-of-content", - "wcag": "1.3.3 Sensory Characteristics", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html", - "description": "Use the straw test to ensure people who depend on screen zoom software can still easily discover all content. " - }, - { - "title": "Make sure color isn't the only way information is conveyed.", - "checkboxId": "no-color-alone", - "wcag": "1.4.1 Use of Color", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", - "description": "Can you still see where links are among body content if everything is grayscale?" - }, - { - "title": " Use a simple, straightforward, and consistent layout.", - "checkboxId": "consistent-layout", - "wcag": "1.4.10 Reflow", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/reflow.html", - "description": "A complicated layout can be confusing to understand and use." - } - ], - "animation": [ - { - "title": "Ensure animations are subtle and do not flash too much.", - "checkboxId": "avoid-flashes", - "wcag": "2.3.1 Three Flashes or Below Threshold", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html", - "description": "Certain kinds of strobing or flashing animations will trigger seizures. Others may be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD." - }, - { - "title": "Provide a mechanism to pause background video.", - "checkboxId": "pause-background-video", - "wcag": "2.2.2 Pause, Stop, Hide", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html", - "description": "Background video can be distracting, especially if content is placed over it." - }, - { - "title": "Make sure all animation obeys the prefers-reduced-motion media query.", - "checkboxId": "prefers-reduced-motion", - "wcag": "2.3.3 Animation from Interactions", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html", - "description": "Remove animations when the “reduce motion” setting is activated. If an animation is necessary to communicate meaning for a concept, slow its duration down." - } - ], - "colorContrast": [ - { - "title": "Check the contrast for all normal-sized text.", - "checkboxId": "normal-text-contrast", - "wcag": "1.4.3 Contrast", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", - "description": "Level AA compliance requires a contrast ratio of 4.5:1." - }, - { - "title": "Check the contrast for all large-sized text.", - "checkboxId": "large-text-contrast", - "wcag": "1.4.3 Contrast", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", - "description": "Level AA compliance requires a contrast ratio of 3:1." - }, - { - "title": "Check the contrast for all icons.", - "checkboxId": "icon-contrast", - "wcag": "1.4.11 Non-text Contrast", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html", - "description": "Level AA compliance requires a contrast ratio of 3.0:1." - }, - { - "title": "Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).", - "checkboxId": "input-contrast", - "wcag": "1.4.11 Non-text Contrast", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html", - "description": "Level AA compliance requires a contrast ratio of 3.0:1." - }, - { - "title": "Check text that overlaps images or video.", - "checkboxId": "overlap-contrast", - "wcag": "1.4.3 Contrast", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", - "description": "Is text still legible?" - }, - { - "title": "Check custom ::selection colors.", - "checkboxId": "selection-contrast", - "wcag": "1.4.3 Contrast", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", - "description": " Is the color contrast you set in your ::selection CSS declaration sufficient? Otherwise someone may not be able read it if they highlight it. " - } - ], - "mobile": [ - { - "title": "Check that the site can be rotated to any orientation.", - "checkboxId": "device-rotation", - "wcag": "1.3.4 Orientation", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/orientation.html", - "description": "Does the site only allow portrait orientation?" - }, - { - "title": "Remove horizontal scrolling.", - "checkboxId": "remove-horizontal-scrolling", - "wcag": "1.4.10 Reflow", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/reflow.html", - "description": "Requiring someone to scroll horizontally can be difficult for some, irritating for all." - }, - { - "title": "Ensure that button and link icons can be activated with ease.", - "checkboxId": "easy-activation", - "wcag": "2.5.5 Target Size", - "url": "https://www.w3.org/WAI/WCAG21/Understanding/target-size.html", - "description": "It's good to make sure things like hamburger menus, social icons, gallery viewers, and other touch controls are usable by a wide range of hand and stylus sizes." - }, - { - "title": "Ensure sufficient space between interactive items in order to provide a scroll area.", - "checkboxId": "space-between-clickable-items", - "wcag": "2.4.1 Bypass Blocks", - "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html", - "description": "Some people who experience motor control issues such as hand tremors may have a very difficult time scrolling past interactive items which feature zero spacing." - } - ] + "content": { + "preface": "Content is the most important part of your site.", + "tasks": [ + { + "title": "Use plain language and avoid figures of speech, idioms, and complicated metaphors.", + "checkboxId": "use-plain-language", + "wcag": "3.1.5 Reading Level", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-supplements.html", + "description": "Write content at an 8th grade reading level." + }, + { + "title": "Make sure that button, a, and label element content is unique and descriptive. ", + "checkboxId": "make-sure-interactive-content-is-unique", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "Terms like “click here” and “read more” do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated." + }, + { + "title": "Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.", + "checkboxId": "use-ltr-rtl", + "wcag": "1.4.8 Visual Presentation", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html", + "description": "Centered-aligned or justified text is difficult to read." + } + ] + }, + "global code": { + "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." + }, + { + "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." + }, + { + "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." + }, + { + "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." + }, + { + "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." + }, + { + "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." + }, + { + "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." + }, + { + "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." + }, + { + "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." + } + ] + }, + "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.", + "tasks": [ + { + "title": "Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.", + "checkboxId": "visible-focus-style", + "wcag": "2.4.7 Focus Visible", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html", + "description": "Can a person navigating with a keyboard, switch, voice control, or screen reader see where they currently are on the page?" + }, + { + "title": "Check to see that keyboard focus order matches the visual layout.", + "checkboxId": "focus-matches-layout", + "wcag": "1.3.2 Meaningful Sequence", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html", + "description": "Can a person navigating with a keyboard or screen reader move around the page in a predictable way?" + }, + { + "title": "Remove invisible focusable elements.", + "checkboxId": "remove-invisible-focusable-elements", + "wcag": "2.4.3 Focus Order", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html", + "description": "Remove the ability to focus on elements that are not presently meant to be discoverable. This includes things like inactive drop down menus, off screen navigations, or modals." + } + ] + }, + "images": { + "preface": "Images are a very common part of most websites. Help make sure they can be enjoyed by all.", + "tasks": [ + { + "title": "Make sure that all img elements have an alt attribute.", + "checkboxId": "use-alt-attributes", + "wcag": "1.1.1 Non-text Content", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", + "description": "alt attributes (alt text) give a description of an image for people who may not be able to view them. When an alt attribute isn't present on an image, a screen reader may announce the image's file name and path instead. This fails to communicate the image’s content." + }, + { + "title": "Make sure that decorative images use null alt (empty) attribute values.", + "checkboxId": "null-decorative-images", + "wcag": "1.1.1 Non-text Content", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", + "description": "Null alt attributes are also sometimes known as empty alt attributes. They are made by including no information between the opening and closing quotes of an alt attribute. Decorative images do not communicate information that is required to understand the website's overall meaning. Historically they were used for flourishes and spacer gif images, but tend to be less relevant for modern websites and web apps." + }, + { + "title": "Provide a text alternative for complex images such as charts, graphs, and maps.", + "checkboxId": "text-alternatives", + "wcag": "1.1.1 Non-text Content", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", + "description": "Is there a plain text which lists points on the map or sections of a flowchart? Describe all visible information. This includes graph axes, data points and labels, and the overall point the graphic is communicating." + }, + { + "title": "For images containing text, make sure the alt description includes the image's text.", + "checkboxId": "images-containing-text", + "wcag": "1.1.1 Non-text Content", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", + "description": "For example, the FedEx logo should have an alt value of “FedEx.”" + } + ] + }, + "svg": { + "tasks": [ + { + "title": "Make sure that svg elements include the code focusable=\"false\" when they are the child element of a focusable element.", + "checkboxId": "svg-focusable-false-child-element", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "This prevents Internet Explorer from allowing focus to navigate through the child elements of a SVG that is meant to be decorative." + }, + { + "title": "Add aria-hidden=\"true\" to SVG that is decorative.", + "checkboxId": "decorative-svg", + "wcag": "4.1.2 Name, Role, Value", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html", + "description": "This is equivalent to an empty/null alt value on a non-svg image." + }, + { + "title": "Make sure that SVG utilizing the use element has whitespace between the svg and use elements.", + "checkboxId": "svg-use-whitespace", + "wcag": "2.1.2 No Keyboard Trap", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html", + "description": "This solves a bug in Safari which sometimes creates hidden, unanticipated tab-stops when navigating." + }, + { + "title": "Ensure that img elements with an svg source includes the role=\"img\" attribute.", + "checkboxId": "svg-image-src", + "wcag": "4.1.2 Name, Role, Value", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html", + "description": "VoiceOver on macOS and iOS will not correctly convey the element as an image if role=\"img\" is not present." + } + ] + }, + "headings": { + "preface": "Heading elements (h1, h2, h3, etc.) help break up the content of the page into related “chunks” of information. They are incredibly important for helping people who use assistive technology to understand the meaning of a page or view.", + "tasks": [ + { + "title": "Use heading elements to introduce content.", + "checkboxId": "use-heading-elements", + "wcag": "2.4.6 Headings or Labels", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", + "description": "Heading elements construct a document outline, and should not be used for purely visual design." + }, + { + "title": "Use only one h1 element per page or view.", + "checkboxId": "use-only-one-h1", + "wcag": "2.4.6 Headings or Labels", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", + "description": "The h1 element should be used to communicate the high-level purpose of the page or view. Do not use the h1 element for a heading that does not change between pages or views (for example, the site's name)." + }, + { + "title": "Heading elements should be written in a logical sequence.", + "checkboxId": "logical-heading-sequence", + "wcag": "2.4.6 Headings or Labels", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", + "description": "The order of heading elements should descend, based on the “depth” of the content. For example, a h4 element should not appear on a page before the first h3 element declaration. A tool such as headingsMap can help you evaluate this." + }, + { + "title": "Don't skip heading levels.", + "checkboxId": "dont-skip-heading-levels", + "wcag": "2.4.6 Headings or Labels", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", + "description": "For example, don't jump from a h2 to a h4, skipping a h3 element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead." + } + ] + }, + "lists": { + "preface": "Lists elements let people know a collection of items are related and if they are sequential, and how many items are present in the list grouping.", + "tasks": [ + { + "title": "Use list elements (ol, ul, and dl elements) for list content.", + "checkboxId": "use-list-elements", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "This may include sections of related content, items visually displayed in a grid-like layout, or sibling a elements." + } + ] + }, + "controls": { + "preface":"Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action.", + "tasks": [ + { + "title": "Use the a element for links.", + "checkboxId": "use-links", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "Links should always have a href attribute, even when used in Single Page Applications (SPAs). Without a href attribute, the link will not be properly exposed to assistive technology. An example of this would be a link that uses an onclick event, in place of a href attribute. " + }, + { + "title": "Ensure that links are recognizable as links.", + "checkboxId": "recognizable-links", + "wcag": "1.4.1 Use of Color", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", + "description": "Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content." + }, + { + "title": "Ensure that controls have :focus states.", + "checkboxId": "form-focus-states", + "wcag": "2.4.7 Focus Visible", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html", + "description": "Visible focus styles help people determine which interactive element has keyboard focus. This lets them know that they can perform actions like activating a button or navigating to a link's destination." + }, + { + "title": "Use the button element for buttons.", + "checkboxId": "use-button-element", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "Buttons are used to submit data or perform an on-screen action which does not shift keyboard focus. You can add type=\"button\" to a button element to prevent the browser from attempting to submit form information when activated." + }, + { + "title": "Provide a skip link and make sure that it is visible when focused.", + "checkboxId": "provide-skip-link", + "wcag": "2.4.1 Bypass Blocks", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html", + "description": "A skip link can be used to provide quick access to the main content of a page or view. This allows a person to easily bypass globally repeated content such as a website's primary navigation, or persistent search widget." + }, + { + "title": "Identify links that open in a new tab or window.", + "checkboxId": "identify-new-window", + "wcag": "G201: Giving users advanced warning when opening a new window", + "url": "https://www.w3.org/TR/WCAG20-TECHS/G201.html", + "description": "Ideally, avoid links that open in a new tab or window. If a link does, ensure the link's behavior will be communicated in a way that is apparent to all users. Doing this will help people understand what will happen before activating the link. While this technique is technically not required for compliance, it is an often-cited area of frustration for many different kinds of assistive technology users." + } + ] + }, + "tables": { + "preface": "Tables are a structured set of data that help people understand the relationships between different types of information.", + "tasks": [ + { + "title": "Use the table element to describe tabular data.", + "checkboxId": "use-table-elements", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "Do you need to display data in rows and columns? Use the table element." + }, + { + "title": "Use the th element for table headers (with appropriate scope attributes).", + "checkboxId": "use-th-element", + "wcag": "4.1.1 Parsing", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html", + "description": "Depending on how complex your table is, you may also consider using scope=\"col\" for column headers, and scope=\"row\" for row headers. Many different kinds of assistive technology still use the scope attribute to help them understand and describe the structure of a table." + }, + { + "title": "Use the caption element to provide a title for the table.", + "checkboxId": "use-caption-element", + "wcag": "2.4.6 Headings or Labels", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html", + "description": "The table's caption should describe what kind of information the table contains." + } + ] + }, + "forms": { + "preface": "Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.", + "tasks": [ + { + "title": "All inputs in a form are associated with a corresponding label element.", + "checkboxId": "associate-inputs-with-labels", + "wcag": "3.2.2 On Input", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html", + "description": "Use a for/id pairing to guarantee the highest level of browser/assistive technology support. " + }, + { + "title": "Use fieldset and legend elements where appropriate.", + "checkboxId": "use-fieldset-and-legend", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "Does your form contain multiple sections of related inputs? Use fieldset to group them, and legend to provide a label for what this section is for. " + }, + { + "title": "Inputs use autocomplete where appropriate.", + "checkboxId": "use-autocomplete", + "wcag": "1.3.5 Identify Input Purpose", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html", + "description": "Providing a mechanism to help people more quickly, easily, and accurately fill in form fields that ask for common information (for example, name, address, phone number)." + }, + { + "title": "Make sure that form input errors are displayed in list above the form after submission.", + "checkboxId": "display-form-errors", + "wcag": "3.3.1 Error Identification", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html", + "description": "This provides a way for assistive technology users to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input." + }, + { + "title": "Associate input error messaging with the input it corresponds to.", + "checkboxId": "associate-error-messages", + "wcag": "3.3.1 Error Identification", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-identified.html", + "description": "Techniques such as using aria-describedby allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it." + }, + { + "title": "Make sure that error, warning, and success states are not visually communicated by just color.", + "checkboxId": "dont-use-just-color-for-states", + "wcag": "1.4.1 Use of Color", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", + "description": "People who are color blind, who have other low vision conditions, or different cultural understandings for color may not see the state change, or understand what kind of feedback the state represents if color is the only indicator. " + } + ] + }, + "media": { + "preface": "Media includes content such as pre-recorded and live audio and video.", + "tasks": [ + { + "title": "Make sure that media does not autoplay.", + "checkboxId": "avoid-autoplay", + "wcag": "1.4.2 Audio Control", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html", + "description": "Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders." + }, + { + "title": "Ensure that media controls use appropriate markup.", + "checkboxId": "media-controls-use-appropriate-markup", + "wcag": "1.3.1 Info and Relationships", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html", + "description": "Examples include making sure an audio mute button has a pressed toggle state when active, or that a volume slider uses <input type=\"range\">." + }, + { + "title": "Check to see that all media can be paused.", + "checkboxId": "pause-media", + "wcag": "2.1.1 Keyboard", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html", + "description": "Provide a global pause function on any media element. If the device has a keyboard, ensure that pressing the Space key can pause playback. Make sure you also don't interfere with the Space key's ability to scroll the page/view when not focusing on a form control." + } + ] + }, + "video": { + "preface": "Video-specific checks.", + "tasks": [ + { + "title": "Confirm the presence of captions.", + "checkboxId": "use-captions", + "wcag": "1.2.2 Captions", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html", + "description": "Captions allow a person who cannot hear the audio content of a video to still understand its content." + }, + { + "title": " Remove seizure triggers.", + "checkboxId": "remove-seizure-triggers", + "wcag": "2.3.1 Three Flashes or Below Threshold", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html", + "description": " Certain kinds of strobing or flashing animations will trigger seizures." + } + ] + }, + "audio": { + "preface": "Audio-specific checks.", + "tasks": [ + { + "title": "Confirm that transcripts are available.", + "checkboxId": "confirm-transcripts", + "wcag": "1.1.1 Non-text Content", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html", + "description": " Transcripts allow people who cannot hear to still understand the audio content. It also allows people to digest audio content at a pace that is comfortable to them." + } + ] + }, + "appearance": { + "preface": "How your website app content looks in any given situation.", + "tasks": [ + { + "title": "Check your content in specialized browsing modes.", + "checkboxId": "check-specialized-modes", + "wcag": "1.4.1 Use of Color", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", + "description": "Activate modes such as Windows High Contrast or Inverted Colors. Is your content still legible? Are your icons, borders, links, form fields, and other content still present? Can you distinguish foreground content from the background?" + }, + { + "title": "Increase text size to 200%.", + "checkboxId": "increase-text-size", + "wcag": "1.4.4 Resize text", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html", + "description": "Is the content still readable? Does increasing the text size cause content to overlap?" + }, + { + "title": "Double-check that good proximity between content is maintained.", + "checkboxId": "good-proximity-of-content", + "wcag": "1.3.3 Sensory Characteristics", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-understanding.html", + "description": "Use the straw test to ensure people who depend on screen zoom software can still easily discover all content. " + }, + { + "title": "Make sure color isn't the only way information is conveyed.", + "checkboxId": "no-color-alone", + "wcag": "1.4.1 Use of Color", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html", + "description": "Can you still see where links are among body content if everything is grayscale?" + }, + { + "title": " Use a simple, straightforward, and consistent layout.", + "checkboxId": "consistent-layout", + "wcag": "1.4.10 Reflow", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/reflow.html", + "description": "A complicated layout can be confusing to understand and use." + } + ] + }, + "animation": { + "preface": "Content that moves, either on its own, or when triggered by a person activating a control.", + "tasks": [ + { + "title": "Ensure animations are subtle and do not flash too much.", + "checkboxId": "avoid-flashes", + "wcag": "2.3.1 Three Flashes or Below Threshold", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html", + "description": "Certain kinds of strobing or flashing animations will trigger seizures. Others may be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD." + }, + { + "title": "Provide a mechanism to pause background video.", + "checkboxId": "pause-background-video", + "wcag": "2.2.2 Pause, Stop, Hide", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html", + "description": "Background video can be distracting, especially if content is placed over it." + }, + { + "title": "Make sure all animation obeys the prefers-reduced-motion media query.", + "checkboxId": "prefers-reduced-motion", + "wcag": "2.3.3 Animation from Interactions", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html", + "description": "Remove animations when the “reduce motion” setting is activated. If an animation is necessary to communicate meaning for a concept, slow its duration down." + } + ] + }, + "color contrast": { + "preface": "Color contrast is how legible colors are when placed next to, and on top of each other.", + "tasks": [ + { + "title": "Check the contrast for all normal-sized text.", + "checkboxId": "normal-text-contrast", + "wcag": "1.4.3 Contrast", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", + "description": "Level AA compliance requires a contrast ratio of 4.5:1." + }, + { + "title": "Check the contrast for all large-sized text.", + "checkboxId": "large-text-contrast", + "wcag": "1.4.3 Contrast", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", + "description": "Level AA compliance requires a contrast ratio of 3:1." + }, + { + "title": "Check the contrast for all icons.", + "checkboxId": "icon-contrast", + "wcag": "1.4.11 Non-text Contrast", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html", + "description": "Level AA compliance requires a contrast ratio of 3.0:1." + }, + { + "title": "Check the contrast of borders for input elements (text input, radio buttons, checkboxes, etc.).", + "checkboxId": "input-contrast", + "wcag": "1.4.11 Non-text Contrast", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html", + "description": "Level AA compliance requires a contrast ratio of 3.0:1." + }, + { + "title": "Check text that overlaps images or video.", + "checkboxId": "overlap-contrast", + "wcag": "1.4.3 Contrast", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", + "description": "Is text still legible?" + }, + { + "title": "Check custom ::selection colors.", + "checkboxId": "selection-contrast", + "wcag": "1.4.3 Contrast", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html", + "description": " Is the color contrast you set in your ::selection CSS declaration sufficient? Otherwise someone may not be able read it if they highlight it. " + } + ] + }, + "mobile and touch": { + "preface": "Things to check mobile experiences for.", + "tasks": [ + { + "title": "Check that the site can be rotated to any orientation.", + "checkboxId": "device-rotation", + "wcag": "1.3.4 Orientation", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/orientation.html", + "description": "Does the site only allow portrait orientation?" + }, + { + "title": "Remove horizontal scrolling.", + "checkboxId": "remove-horizontal-scrolling", + "wcag": "1.4.10 Reflow", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/reflow.html", + "description": "Requiring someone to scroll horizontally can be difficult for some, irritating for all." + }, + { + "title": "Ensure that button and link icons can be activated with ease.", + "checkboxId": "easy-activation", + "wcag": "2.5.5 Target Size", + "url": "https://www.w3.org/WAI/WCAG21/Understanding/target-size.html", + "description": "It's good to make sure things like hamburger menus, social icons, gallery viewers, and other touch controls are usable by a wide range of hand and stylus sizes." + }, + { + "title": "Ensure sufficient space between interactive items in order to provide a scroll area.", + "checkboxId": "space-between-clickable-items", + "wcag": "2.4.1 Bypass Blocks", + "url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html", + "description": "Some people who experience motor control issues such as hand tremors may have a very difficult time scrolling past interactive items which feature zero spacing." + } + ] + } } diff --git a/src/_includes/checklist.njk b/src/_includes/checklist__task.njk similarity index 73% rename from src/_includes/checklist.njk rename to src/_includes/checklist__task.njk index 493f59ef6..74cc5ae2d 100755 --- a/src/_includes/checklist.njk +++ b/src/_includes/checklist__task.njk @@ -1,18 +1,18 @@ -{% set slugifiedTitle = checklist.title | slugify %} -{% set description = checklist.description | safe %} -{% set title = checklist.title | safe %} -{% set url = checklist.url %} -{% set wcag = checklist.wcag %} +{% set slugifiedTitle = task.title | slugify %} +{% set description = task.description | safe %} +{% set title = task.title | safe %} +{% set url = task.url %} +{% set wcag = task.wcag %}
-
diff --git a/src/checklist.njk b/src/checklist.njk index b729b3c07..db27d54eb 100755 --- a/src/checklist.njk +++ b/src/checklist.njk @@ -84,213 +84,26 @@ templateClass: template-checklist
-

- Content -

-

- Content is the most important part of your site. -

-
- {% set checklist = checklists.content %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Global code -

+ {% for category, content in checklists %} + {# 6 May 2021: We don't publish our guidelines about SVGs #} + {% if category !== 'svg' %} +
+

+ {{ category }} +

- Global code is code that affects your entire website or web app. + {{ content.preface | safe }}

- {% set checklist = checklists.global %} - {% for checklist in checklist %} - {% include "checklist.njk" %} + {% set tasks = content.tasks %} + {% for task in tasks %} + {% include "checklist__task.njk" %} {% endfor %}
+
+ {% endif %} + {% endfor %} -

- Keyboard -

-

- 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. -

-
- {% set checklist = checklists.keyboard %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Images -

-

- Images are a very common part of most websites. Help make sure they can be enjoyed by all. -

-
- {% set checklist = checklists.images %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Headings -

-

- Heading elements (h1, h2, h3, etc.) help break up the content of the page into related “chunks” of information. They are incredibly important for helping people who use assistive technology to understand the meaning of a page or view. -

-
- {% set checklist = checklists.headings %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Lists -

-

- Lists elements let people know a collection of items are related and if they are sequential, and how many items are present in the list grouping. -

-
- {% set checklist = checklists.lists %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Controls -

-

- Controls are interactive elements such as links and buttons that let a person navigate to a destination or perform an action. -

-
- {% set checklist = checklists.controls %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Tables -

-

- Tables are a structured set of data that help people understand the relationships between different types of information. -

-
- {% set checklist = checklists.tables %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Forms -

-

- Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders. -

-
- {% set checklist = checklists.forms %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Media -

-

- Media includes content such as pre-recorded and live audio and video. -

-
- {% set checklist = checklists.media %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Video -

-

- Video-specific checks. -

-
- {% set checklist = checklists.video %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Audio -

-

- Audio-specific checks. -

-
- {% set checklist = checklists.audio %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Appearance -

-

- How your website app content looks in any given situation. -

-
- {% set checklist = checklists.appearance %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Animation -

-

- Content that moves, either on its own, or when triggered by a person activating a control. -

-
- {% set checklist = checklists.animation %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Color Contrast -

-

- Color contrast is how legible colors are when placed next to, and on top of each other. -

-
- {% set checklist = checklists.colorContrast %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -
- -

- Mobile / Touch -

-

- Things to check mobile experiences for. -

-
- {% set checklist = checklists.mobile %} - {% for checklist in checklist %} - {% include "checklist.njk" %} - {% endfor %} -

Next steps diff --git a/src/css/utilities/_text-transform.scss b/src/css/utilities/_text-transform.scss index 326c40c96..944db9948 100644 --- a/src/css/utilities/_text-transform.scss +++ b/src/css/utilities/_text-transform.scss @@ -42,3 +42,21 @@ // .u-text-transform-initial { // text-transform: initial; // } + +// u-text-transform-sentence-case +// +// Converts the text of an element into sentence case. +// NOTE: This utility is not recommended for elements that contain proper nouns, +// as it will convert those proper nouns to lowercase. + +// Markup: +//

The first letter in this sentence will be capitalized.

+// +// Styleguide Utilities.Type Alignment.u-text-transform-sentence-case +.u-text-transform-sentence-case { + text-transform: lowercase; + + &::first-letter { + text-transform: uppercase; + } +}