Adding notes about responsive design/smaller screens #721
Conversation
content/forms/labels.md
Outdated
| 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. | ||
|
|
||
| While some designs want visual field labels to be dropped, users prefer visible labels as they make the form easier to understand. |
There was a problem hiding this comment.
Maybe: "Sometime designers propose not including visual field labels. However, most users prefer or even need visible labels to understand the form."
rationale: ... sorry, I've limited typing ability right now. happy to explain by voice.
There was a problem hiding this comment.
I agree with your wording and have updated.
content/menus/structure.md
Outdated
| @@ -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. Menus should be accessible by touch and keyboard. | |||
There was a problem hiding this comment.
Menus should be accessible by touch and keyboard.
seems like a separate point from the rest of the paragraph?
Should it be a separate paragraph?
Also, is it just related to "Responsive design" or more broadly?
And, does it need more explanation? e.g., If I'm using app on desktop, then does "touch" apply?
There was a problem hiding this comment.
I presume it was included because a small screen size often means a mobile/touch device. I think it can actually be removed from here to keep things simple.
There was a problem hiding this comment.
I have removed that line.
content/menus/structure.md
Outdated
| @@ -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 | |||
There was a problem hiding this comment.
looks like the tutorials are using sentence-style capitalization for headings, so:
Responsive design
content/carousels/styling.md
Outdated
| @@ -117,3 +117,6 @@ 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 | |||
There was a problem hiding this comment.
This also applies to people with large screens who use zoom. That makes it a direct accessibility issue. Is there a smooth way to include both?
There was a problem hiding this comment.
I added "/small viewports"
There was a problem hiding this comment.
I revisited this and I don't think zoomed screens applies because we are talking about small text. The small text would be larger when zoomed (ideally)
content/carousels/styling.md
Outdated
| @@ -117,3 +117,6 @@ 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 | |||
| Avoid use of text that is too small for easy reading or that is cut off. [Navigation buttons](https://www.w3.org/WAI/tutorials/carousels/functionality/#add-navigation-buttons) to control the slides should still be present to avoid the reliance on swipe gestures. | |||
There was a problem hiding this comment.
Avoid use of text that is too small for easy reading
This is so subjective, and of course is different for different people. I don’t know how to address it, though?
Navigation buttons to control the slides should still be present to avoid the reliance on swipe gestures.
Suggest re-wording this to active voice, e.g., maybe something like:
Make sure that navigation buttons to control the slides are available, since some people cannot use swipe gestures.
There was a problem hiding this comment.
I have updated the navigation button text, but am unsure how to update the small text comment.
There was a problem hiding this comment.
I replaced "Avoid use of text that is too small for easy reading or that is cut off." with "Ensure all text is readable and not cut off or unnecessarily truncated."
✅ Deploy Preview for wai-tutorials2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@shawna-slh do you have any further comments/suggestions before merging? |
Sorry, I cannot find time to review all of this. Feel free to publish without my reviewing it. Or, if you have a specific question, let me know. |
brianelton
added
ready to merge
|
@shawna-slh please merge this PR. |
|
Thanks Brian! |
Single PR to cover #528, #529, #530, #531
Added notes about responsive design/smaller screen considerations to: