web icon indicating copy to clipboard operation
web copied to clipboard

[a11y] 9.1.4.10 Break content

Open tschiebel opened this issue 10 months ago • 9 comments

audit: https://infinite.owncloud.com/s/PnaAukHGGsLnrMM

https://bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-1-4-10-inhalte-brechen-um

Personal

  • [ ] With a browser window width of 1280 CSS pixels and a zoom magnification of 400%, the page content does not break. This means that all information and functions are not available without users having to scroll horizontally. image

Shares

  • [ ] If the browser window width is set to 1280 CSS pixels and the zoom magnification is set to 400%, only two columns are displayed in the table: "Name" and "Actions". "Actions". Other table columns are no longer accessible to users. To ensure that all table columns are visible even at higher zoom magnification, the table should either be the table should either be designed in such a way that it adapts to the available width or offer the option of scrolling horizontally through the table columns. scroll horizontally through the table columns. image

Account

  • [x] If the browser window width is set to 1280 CSS pixels and the zoom magnification is set to 400%, the content at the bottom of the page is cut off and is no longer accessible. no longer accessible. image

tschiebel avatar Apr 05 '24 09:04 tschiebel

Assigning @tbsbdr here since I need a decision on how to handle the tables on small screens

pascalwengerter avatar Apr 23 '24 15:04 pascalwengerter

Assigning myself to test the general "break content" issues once more.

Having a reduced functionality in the table is fine according to @tbsbdr since the underlying actions are still available through the (right) sidebar on mobile

pascalwengerter avatar Apr 24 '24 08:04 pascalwengerter

  • remove text from buttons "New" and "Upload" for like 1280@400%

Image

  • Shared and Spaces should not scroll horizontally (lets make it like in personal, i.e. stack and remove)

Image

Image

tbsbdr avatar Jul 29 '24 08:07 tbsbdr

@tbsbdr at 400% zoom on a 14 inch macbook the file list is not visible at all 🙈 see screenshot:

Screenshot 2024-08-05 at 05 42 55

The table header is visible. Since the area above the table doesn't scroll I can't scroll the actual files into view. At 300% it still kind of works - I can see two rows of the file list (see next screenshot):

Screenshot 2024-08-05 at 05 46 13

Do we have to fix this or can we assume a different browser window height if someone uses 400% zoom? 🤔

kulmann avatar Aug 05 '24 03:08 kulmann

uff, how about making the files top bar scrollable eg. if a certain zoom is reached? just thinking aloud..

tbsbdr avatar Aug 05 '24 10:08 tbsbdr

Or just "unstick" the area above the table?

JammingBen avatar Aug 05 '24 10:08 JammingBen

eh, yes, thats what I wanted to say :)

tbsbdr avatar Aug 05 '24 10:08 tbsbdr

Yep, good idea. For normal desktop resolutions and 100% zoom level I like the sticky header. But for other situations that would be probably the easiest and most accessible solution.

kulmann avatar Aug 05 '24 11:08 kulmann

Yep, good idea. For normal desktop resolutions and 100% zoom level I like the sticky header. But for other situations that would be probably the easiest and most accessible solution.

I'm just not sure if we should couple this to the zoom level. Some users have a default zoom setting of e.g. 110% or 125%. I feel like we still want to have the area sticky in this case.

Maybe couple it to the screen width? Because that's what basically happens with a zoom level of 400%: the screen width gets extremely small. So I suggest only doing this for screen widths <420px or <640px.

Edit: Or even better: couple this to the vertical window size.

JammingBen avatar Aug 08 '24 09:08 JammingBen