w3c / wai-website-design

WAI Website Design and Redesign
3 stars 7 forks source link

spacing and proximity #72

Closed shawna-slh closed 6 years ago

shawna-slh commented 6 years ago

Let's do an awesome job of using spacing and proximity to improve accessibility and usability, including for people with cognitive disabilities. (https://www.w3.org/WAI/gettingstarted/tips/designing.html#use-headings-and-spacing-to-group-related-content :-) This will require some extra CSS for spacing.

  1. Around headings -- more space above headings and less space after headings so there is clear separation between the content above the heading and closer proximity with the content below the heading.

  2. Lists and their introductory paragraph. I prefer the default to be like "to get" in https://www.w3.org/WAI/EO/wiki/Style#listspace We should also have a class for cases where the list should be separated from the paragraph above it.

yatil commented 6 years ago

On 3. Aug 2017, at 02:30, shawn_slh notifications@github.com wrote:

Let's do an awesome job of using spacing and proximity to improve accessibility and usability, including for people with cognitive disabilities. (https://www.w3.org/WAI/gettingstarted/tips/designing.html#use-headings-and-spacing-to-group-related-content :-) This will require some extra CSS for spacing.

Around headings -- more space above headings and less space after headings so there is clear separation between the content above the heading and closer proximity with the content below the heading.

Unfortunately this issue as well as the tip above do not have concrete information on what to do. I want to avoid a long back and forth with this, so how much space before and after would be preferred? 3rem before and 1rem after? I can try to make it visually pleasing, but a designer should have a better feel for spacing.

Lists and their introductory paragraph. I prefer the default to be like https://www.w3.org/WAI/EO/wiki/Style#listspace We should also have a class for cases where the list should be separated from the paragraph above it.

This always confuses me personally, I don’t know when to use what style and when they are on the same page it looks broken or cluttered.

I’d prefer if we used one of the existing boxes for calling out lists that have a heading as they are then clearly labeled using a head element and potentially aria-labelled-by.

Happy to discuss in a separate thread or acting on a provided design where the spacing is defined in a visually pleasing way.

aliciafrausto commented 6 years ago

Currently, space above header is twice that of space below. https://visa.invisionapp.com/share/47CY9PQQU#/223719078_Text Is the request to increase the difference further? Or does this work?

yatil commented 6 years ago

I just noted that I had not added @aliciafrausto’s spacing to the headings. I have now done that, see the result, for example here: https://w3c.github.io/wai-website-components/components/preview/example-generic.html

James-Green commented 6 years ago

look good to TF