From 093862eaa1f61bf636ba212eeac0b5a282b314b7 Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 20 Dec 2023 12:38:51 -0800 Subject: [PATCH 1/2] Standardize header --- .../en-us/web/accessibility/aria/roles/separator_role/index.md | 2 +- files/en-us/web/accessibility/aria/roles/tablist_role/index.md | 2 +- files/en-us/web/accessibility/aria/roles/term_role/index.md | 2 +- files/en-us/web/accessibility/aria/roles/toolbar_role/index.md | 2 +- files/en-us/web/accessibility/aria/roles/tooltip_role/index.md | 2 +- files/en-us/web/accessibility/aria/roles/treegrid_role/index.md | 2 +- files/en-us/web/css/color_value/index.md | 2 +- files/en-us/web/html/attributes/pattern/index.md | 2 +- files/en-us/web/html/element/dialog/index.md | 2 +- files/en-us/web/html/element/output/index.md | 2 +- files/en-us/web/html/element/progress/index.md | 2 +- files/en-us/web/html/global_attributes/autofocus/index.md | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/files/en-us/web/accessibility/aria/roles/separator_role/index.md b/files/en-us/web/accessibility/aria/roles/separator_role/index.md index c0980d6b8bd0f49..8642d624ae104c5 100644 --- a/files/en-us/web/accessibility/aria/roles/separator_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/separator_role/index.md @@ -110,7 +110,7 @@ From the assistive technology user's perspective, the heading does not exist sin ## Examples -## Accessibility Concerns +## Accessibility concerns ## Best Practices diff --git a/files/en-us/web/accessibility/aria/roles/tablist_role/index.md b/files/en-us/web/accessibility/aria/roles/tablist_role/index.md index 7a44967a869c53d..8a87bba4611e424 100644 --- a/files/en-us/web/accessibility/aria/roles/tablist_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/tablist_role/index.md @@ -79,7 +79,7 @@ When focus is on a tab in a tablist with either horizontal or vertical orientati -## Accessibility Concerns +## Accessibility concerns It is important for all cells to be able to receive or contain keyboard focus because screen readers are generally in application reading mode, rather than their document reading mode, when users are interacting with the grid. While in application mode, a screen reader user hears only focusable elements and content that labels focusable elements. If content can't receive focus, screen reader users may unknowingly overlook elements contained in the treegrid. diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index 380171dfb7f0e63..44a22352eab90af 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -177,7 +177,7 @@ the preprocessing procedure is: oklch(63.612% 0.1522 78.748) ``` -## Accessibility considerations +## Accessibility concerns Some people have difficulty distinguishing colors. The [WCAG 2.2](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color) recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See [color and color contrast](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for more information. diff --git a/files/en-us/web/html/attributes/pattern/index.md b/files/en-us/web/html/attributes/pattern/index.md index 7f7af8aaebce0d5..1c70b619525bf0f 100644 --- a/files/en-us/web/html/attributes/pattern/index.md +++ b/files/en-us/web/html/attributes/pattern/index.md @@ -142,7 +142,7 @@ This renders like so: {{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }} -### Accessibility Concerns +### Accessibility concerns When a control has a `pattern` attribute, the `title` attribute, if used, must describe the pattern. Relying on the `title` attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the control to match the requirements. diff --git a/files/en-us/web/html/element/dialog/index.md b/files/en-us/web/html/element/dialog/index.md index f38a5edfe20e293..3f29cb700790061 100644 --- a/files/en-us/web/html/element/dialog/index.md +++ b/files/en-us/web/html/element/dialog/index.md @@ -547,7 +547,7 @@ The code renders as follows: -## Accessibility considerations +## Accessibility concerns When implementing a dialog, it is important to consider the most appropriate place to set user focus. When using {{domxref("HTMLDialogElement.showModal()")}} to open a ``, focus is set on the first nested focusable element. Explicitly indicating the initial focus placement by using the [`autofocus`](/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute will help ensure initial focus is set on the element deemed the best initial focus placement for any particular dialog. When in doubt, as it may not always be known where initial focus could be set within a dialog, particularly for instances where a dialog's content is dynamically rendered when invoked, the `` element itself may provide the best initial focus placement. diff --git a/files/en-us/web/html/element/output/index.md b/files/en-us/web/html/element/output/index.md index d13d93def20236a..8994bfac78477b2 100644 --- a/files/en-us/web/html/element/output/index.md +++ b/files/en-us/web/html/element/output/index.md @@ -42,7 +42,7 @@ In the following example, the form provides a slider whose value can range betwe {{ EmbedLiveSample('Examples')}} -## Accessibility Concerns +## Accessibility concerns Many browsers implement this element as an [`aria-live`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results. diff --git a/files/en-us/web/html/element/progress/index.md b/files/en-us/web/html/element/progress/index.md index f8c8589b455e492..ac6097454d98ab6 100644 --- a/files/en-us/web/html/element/progress/index.md +++ b/files/en-us/web/html/element/progress/index.md @@ -79,7 +79,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib {{ EmbedLiveSample("Examples", 200, 50) }} -## Accessibility Concerns +## Accessibility concerns ### Labelling diff --git a/files/en-us/web/html/global_attributes/autofocus/index.md b/files/en-us/web/html/global_attributes/autofocus/index.md index 3510f77024ff74a..482febf99d63281 100644 --- a/files/en-us/web/html/global_attributes/autofocus/index.md +++ b/files/en-us/web/html/global_attributes/autofocus/index.md @@ -17,7 +17,7 @@ No more than one element in the document or dialog may have the autofocus attrib > **Note:** The `autofocus` attribute applies to all elements, not just form controls. For example, it might be used on a [contenteditable](/en-US/docs/Web/HTML/Global_attributes/contenteditable) area. -## Accessibility considerations +## Accessibility concerns Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When `autofocus` is assigned, screen-readers "teleport" their user to the form control without warning them beforehand. From 0b1ce5617204c5d64577b974bae8c5911d073c79 Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 20 Dec 2023 13:40:14 -0800 Subject: [PATCH 2/2] Standardize header --- files/en-us/web/api/window/open/index.md | 2 +- files/en-us/web/css/important/index.md | 2 +- files/en-us/web/html/element/a/index.md | 2 +- files/en-us/web/html/element/header/index.md | 2 +- files/en-us/web/html/element/input/number/index.md | 2 +- files/en-us/web/html/element/search/index.md | 2 +- files/en-us/web/html/global_attributes/lang/index.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/api/window/open/index.md b/files/en-us/web/api/window/open/index.md index 3b5f09dc7aeb03f..c341003acf2c331 100644 --- a/files/en-us/web/api/window/open/index.md +++ b/files/en-us/web/api/window/open/index.md @@ -254,7 +254,7 @@ console.log(sameOriginContext.origin); For more information, refer to the [Same-origin policy](/en-US/docs/Web/Security/Same-origin_policy) article. -## Accessibility +## Accessibility concerns ### Avoid resorting to window.open() diff --git a/files/en-us/web/css/important/index.md b/files/en-us/web/css/important/index.md index d71e5e6b77a93f5..dd9c43e37350553 100644 --- a/files/en-us/web/css/important/index.md +++ b/files/en-us/web/css/important/index.md @@ -142,7 +142,7 @@ Even when working to override high-specificity styles not under your control, su If you need to override an external stylesheet containing important declarations, create a cascade layer containing the needed overrides, and declare that layer first. -### Accessibility +### Accessibility concerns Important styles from a user stylesheet take precedence over the author style sheet's important declarations, meaning adding an `!important` flag to a site's styles will not prevent individual users with special requirements, such as large fonts, from being able to override your styles by adding important styles in their own user's style sheet. diff --git a/files/en-us/web/html/element/a/index.md b/files/en-us/web/html/element/a/index.md index 9166127d3114f11..b7ebf01af8659cd 100644 --- a/files/en-us/web/html/element/a/index.md +++ b/files/en-us/web/html/element/a/index.md @@ -268,7 +268,7 @@ document Using `target="_blank"` without [`rel="noreferrer"`](/en-US/docs/Web/HTML/Attributes/rel/noreferrer) and [`rel="noopener"`](/en-US/docs/Web/HTML/Attributes/rel/noopener) makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks, although note that, in newer browser versions setting `target="_blank"` implicitly provides the same protection as setting `rel="noopener"`. See [browser compatibility](#browser_compatibility) for details. -## Accessibility +## Accessibility concerns ### Strong link text diff --git a/files/en-us/web/html/element/header/index.md b/files/en-us/web/html/element/header/index.md index e8066803a261dd6..6209eb39745d3be 100644 --- a/files/en-us/web/html/element/header/index.md +++ b/files/en-us/web/html/element/header/index.md @@ -64,7 +64,7 @@ This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_a {{EmbedLiveSample('Article Header')}} -## Accessibility +## Accessibility concerns The `
` element defines a [`banner`](/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) landmark when its context is the {{HTMLElement('body')}} element. The HTML header element is not considered a banner landmark when it is descendant of an {{HTMLElement('article')}}, {{HTMLElement('aside')}}, {{HTMLElement('main')}}, {{HTMLElement('nav')}}, or {{HTMLElement('section')}} element. diff --git a/files/en-us/web/html/element/input/number/index.md b/files/en-us/web/html/element/input/number/index.md index 86289198b235bc6..f9f46de5c57259a 100644 --- a/files/en-us/web/html/element/input/number/index.md +++ b/files/en-us/web/html/element/input/number/index.md @@ -390,7 +390,7 @@ After declaring a few variables, an event listener is added to the `button` to c > > If you didn't do this, you'd have to fill in both feet/inches **and** meters to submit the form! -## Accessibility +## Accessibility concerns The implicit [role](/en-US/docs/Web/Accessibility/ARIA/Roles) for the `` element is [`spinbutton`](/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role). If spinbutton is not an important feature for your form control, consider _not_ using `type="number"`. Instead, use [`inputmode="numeric"`](/en-US/docs/Web/HTML/Global_attributes/inputmode) along with a [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute that limits the characters to numbers and associated characters. With ``, there is a risk of users accidentally incrementing a number when they're trying to do something else. Additionally, if users try to enter something that's not a number, there's no explicit feedback about what they're doing wrong. diff --git a/files/en-us/web/html/element/search/index.md b/files/en-us/web/html/element/search/index.md index 6afc31886210ebd..1c52ddec53f6ffd 100644 --- a/files/en-us/web/html/element/search/index.md +++ b/files/en-us/web/html/element/search/index.md @@ -17,7 +17,7 @@ This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_a The `` element is not for presenting search results. Rather, search or filtered results should be presented as part of the main content of that web page. That said, suggestions and links that are part of "quick search" functionality within the search or filtering functionality are appropriately nested within the contents of the `` element as they are search features. -## Accessibility +## Accessibility concerns The `` element defines a [`search`](/en-US/docs/Web/Accessibility/ARIA/Roles/search_role) landmark. This removes the need for adding `role=search` to a {{HTMLElement('form')}} element. diff --git a/files/en-us/web/html/global_attributes/lang/index.md b/files/en-us/web/html/global_attributes/lang/index.md index f33afefee6c11d0..ea8897e6fddac97 100644 --- a/files/en-us/web/html/global_attributes/lang/index.md +++ b/files/en-us/web/html/global_attributes/lang/index.md @@ -36,7 +36,7 @@ The script subtag precedes the region subtag if both are present — `ru-Cyrl-BY To find the correct subtag codes for a language, try [the Language Subtag Lookup](https://r12a.github.io/app-subtags/). -## Accessibility +## Accessibility concerns WCAG Success Criterion 3.1.1 **requires** that a page language is specified in a way which may be 'programmatically determined' (i.e. via the **`lang`** attribute).