Adding notes about responsive design/smaller screens

content/carousels/styling.md

@@ -24,7 +24,7 @@ wcag_success_criteria:
 
 metafooter: true
 first_published: "May 2015"
-last_updated: 2018-08-30
+last_updated: 2024-05-13
 editors:
   - Eric Eggert: "https://www.w3.org/People/yatil/"
   - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
@@ -44,7 +44,7 @@ Use appropriately sized buttons and links, and provide whitespace around them, t
 ![Example using semi-transparent background colors to ensure sufficient contrast.]({{ "/content-images/wai-tutorials/carousels/carousels-styling-contrast.png" | relative_url }}){:.left} Ensure sufficient contrast between the foreground and the background of text, links, and buttons. This can be a challenge when text or buttons are positioned on top of images. In that case, a (semi-) opaque background color can help to maintain the contrast regardless of the image used.
 
 
-{% include ednote.html note="The following paragraph was show in a side column before." %}For more information on contrast requirements, see [Provide sufficient contrast between foreground and background](https://www.w3.org/WAI/gettingstarted/tips/designing.html#provide-sufficient-contrast-between-foreground-and-background).
+{% include ednote.html note="The following paragraph was show in a side column before." %}For more information on contrast requirements, see [Provide sufficient contrast between foreground and background](/tips/designing/#provide-sufficient-contrast-between-foreground-and-background).
 
 ## Indicate Button Status
 
@@ -117,3 +117,7 @@ In the following example, a filled square is used for buttons associated with it
 {:/}
 
 {% include ednote.html note="The following paragraph was show in a side column before." %}A [working demo example](/tutorials/carousels/working-example/) for this code is available.
+
+## For smaller screens/small viewports
+Ensure all text is readable and not cut off or unnecessarily truncated. Make sure that [navigation buttons](/tutorials/carousels/functionality/#add-navigation-buttons) to control the slides are available, since some people cannot use swipe gestures.
+

content/changelog.md

@@ -27,17 +27,23 @@ This changelog lists substantive content edits. It does **not** list typo fixes
 {::nomarkdown}
 {% include box.html type="end" %}
 {:/}
-## April 16 2024
-In [Forms tutorial](https://www.w3.org/WAI/tutorials/forms/)
-* Fixing a broken link in [Form Instructions](https://www.w3.org/WAI/tutorials/forms/instructions/#placeholder-text)
+## May 2024
+In [Forms tutorial](/tutorials/forms/)
+* Fixing a broken link in [Form Instructions](/tutorials/forms/instructions/#placeholder-text)
   * [GitHub PR #735](https://github.com/w3c/wai-tutorials/pull/735)
-* Fixing a color contrast issue in [Multi-page Forms](https://www.w3.org/WAI/tutorials/forms/multi-page/#using-the-html5-progress-element)
+* Fixing a color contrast issue in [Multi-page Forms](/tutorials/forms/multi-page/#using-the-html5-progress-element)
   * [GitHub PR #732](https://github.com/w3c/wai-tutorials/pull/732)
 
-In [Tables tutorial](https://www.w3.org/WAI/tutorials/tables/)
-* Fixing a table header issue in [Tables with Multi-Level Headers](https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column)
+In [Tables tutorial](/tutorials/tables/)
+* Fixing a table header issue in [Tables with Multi-Level Headers](/tutorials/tables/multi-level/#table-with-multiple-column-headers-in-each-column)
   * [GitHub PR #726](https://github.com/w3c/wai-tutorials/pull/726)
 
+Added notes about responsive design/smaller screen considerations to:
+* [Page Structure > Page Regions](/tutorials/page-structure/regions/)
+* [Menus > Structure](/tutorials/menus/structure/)
+* [Forms > Labeling Controls](/tutorials/forms/labels/)
+* [Carousels > Styling](/tutorials/carousels/styling/)
+
 ## February 2023
 
 * In Tables main page, corrected WCAG links under [Related WCAG resources](https://www.w3.org/WAI/tutorials/tables/#related)

content/forms/labels.md

@@ -38,7 +38,7 @@ wcag_techniques:
   - ARIA16
 
 metafooter: true
-last_updated: 2024-04-10
+last_updated: 2024-05-13
 editors:
   - Eric Eggert: "https://www.w3.org/People/yatil/"
   - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
@@ -305,3 +305,10 @@ If the image button (`<input type="image">`) is used, the label is set in the `a
 In left-to-right languages, it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left or directly above other form fields. Maintaining this practice increases predictability and understandability of your form for all users.
 
 In general, placing labels above the form fields helps reduce horizontal scrolling for people with low vision and mobile device users. However, the usefulness of this approach depends on other design aspects, such as the proximity of other nearby form fields and content, and needs to be assessed individually. The aim should be to maintain a close and distinct visual relationship between the label and the form control.
+
+
+## Form field controls for mobile
+When HTML5 form fields are used, a virtual keyboard appears making it easier to input data.
+For example, a `number` field shows a numeric keyboard, a `date` field a native date picker.
+
+Sometime designers propose not including visual field labels. However, most users prefer or even need visible labels to understand the form.

content/menus/structure.md

@@ -23,7 +23,7 @@ wcag_techniques:
   - ARIA11
 
 metafooter: true
-last_updated: 2017-04-13
+last_updated: 2024-05-13
 editors:
   - Eric Eggert: "https://www.w3.org/People/yatil/"
   - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
@@ -191,3 +191,6 @@ In the following example the link in the navigation points to the main content o
 {::nomarkdown}
 {% include box.html type="end" %}
 {:/}
+
+## Responsive design
+Menu structure should be consistent across screen sizes. Some menu items may be collapsed or even hidden in sub navigation menus, but items that show should appear in the same order and with the same wording and destination.

content/page-structure/regions.md

@@ -29,7 +29,7 @@ wcag_techniques:
   - ARIA11
 
 metafooter: true
-last_updated: 2022-02-08
+last_updated: 2024-05-13
 editors:
 - Eric Eggert: "https://www.w3.org/People/yatil/"
 - Shadi Abou-Zahra: "https://www.w3.org/People/shadi/"
@@ -183,9 +183,12 @@ The [Menus tutorial](/tutorials/menus/) provides more details on creating menus.
 {% include box.html type="end" %}
 {:/}
 
+## Responsive design
+Components may be collapsed or even hidden on smaller screens, but components that show should appear in the same order for a particular view (set size and orientation). If possible, page structure should be consistent across different screen sizes and orientations, though not a specific WCAG requirement.
+
 {% include ednote.html note="Remove or drastically simplify the next two sections." status="proposed" %}
 
-## Page Regions in HTML5 Using WAI-ARIA
+## Page regions in HTML5 using WAI-ARIA
 {:#accessupport}
 
 Most current web browsers support the above HTML5 elements and convey the information to assistive technology through the accessibility APIs. However, to maximize compatibility with web browsers and assistive technologies that support WAI-ARIA but do not yet support HTML5, it is currently advisable to use both the HTML5 elements and the corresponding WAI-ARIA roles.
@@ -212,7 +215,7 @@ Explore other WAI-ARIA resources:
 * [WAI-ARIA Overview](https://www.w3.org/WAI/intro/aria)
 * [Notes on Using ARIA in HTML](https://www.w3.org/TR/aria-in-html/)
 
-## Page Regions in HTML4 Using WAI-ARIA
+## Page regions in HTML4 using WAI-ARIA
 {:#accessupport-html4}
 
 If HTML5 cannot be used or if an HTML4 page is retrofitted to improve accessibility, add WAI-ARIA code to `div` elements that function as their HTML5 counterparts, for example: