Comments (7)
Which parts were mentioned?
Basically the size of clickable elements, which makes everything else huge. Especially lists and action groups
I often read exactly the opposite
That's more about horizontal sizing of elements (sidebar width, paragraphs width)
As per:
- AA is considered "Strong accessibility", if we were to aim at AAA, our UI would look radically different. If we ever do it, we should include it with the high contrast theme option and call it "enhanced accessibility".
- We have many other clickable elements that are smaller (e.g. links, buttons in multi-selects) and for some reason the 44 target size rule does not apply to them.
But if we really want to shrink everything then 32px x 32px is probably the minimum
Exactly, it would be totally fine if we had some elements like that, some 44, and maybe one main action even bigger
As an example, have a look at the range of target sizes in dropbox and google drive. They range from 17px (a link) to 74px (main actions) and a hierarchy is established. Conversely almost all our elements have a 44px minimum target size, even the table header.
![Screenshot 2024-06-10 at 12 46 34](https://private-user-images.githubusercontent.com/26852655/338153025-4795d513-9e5a-4ba2-8fbf-470feade3af2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE0MzYzMjEsIm5iZiI6MTcyMTQzNjAyMSwicGF0aCI6Ii8yNjg1MjY1NS8zMzgxNTMwMjUtNDc5NWQ1MTMtOWU1YS00YmEyLThmYmYtNDcwZmVhZGUzYWYyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIwVDAwNDAyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM0Y2FhMDYxMWMzMDlkYzI3ZDA3NWIwNWNkNGI0ZGRlN2E1NmM5ZTIzNTE1YzIxMjA4Yzc4ZTc3YmQ5MmJiMmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Z4uj0RkEZzz1W5n2L0trbtyI5HDYuPSLxIxMivxR6sU)
![Screenshot 2024-06-10 at 13 43 58](https://private-user-images.githubusercontent.com/26852655/338171004-90d68ee4-cde6-4242-9a9b-6383ab888103.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE0MzYzMjEsIm5iZiI6MTcyMTQzNjAyMSwicGF0aCI6Ii8yNjg1MjY1NS8zMzgxNzEwMDQtOTBkNjhlZTQtY2RlNi00MjQyLTlhOWItNjM4M2FiODg4MTAzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIwVDAwNDAyMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk0MjE0ZTE5YTNiN2ZkYmFhNmFiNDQyNTJkYWZlZDg4ZTEyMzBhNzk5MzM0MzU4NWJlOTQyOGU3NGQ4NTFkMzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ff-XzDunC9MVpUo3XsdAEkYoWT95I0eVRMKUvE13oBU)
Note: since I added these screenshot I'm going to remove all previous ones as outdated
from server.
@marcoambrosini additionally what has to be done is to inform the community developers about this change so they can update their apps, just like the
- Update the documentation about these changes
- Add it to the App upgrade guide: https://github.com/nextcloud/documentation/blob/master/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst
- Post on the forum in the Development category about this update. Good examples are these posts by Daphne: https://help.nextcloud.com/t/on-the-roadmap-deprecation-of-php-7-4/149848 and https://help.nextcloud.com/t/update-on-32-bit-support-decision-to-block-the-update-on-nextcloud-26-reverted/153345
from server.
Which parts were mentioned? Because I often read exactly the opposite, that the UI is too compact and you end up with a lot of dead space on desktop screens.
Reasons to stick with 44px:
- We also satisfy WCAG AAA requirements
- Much less error prone for wrong clicking (e.g. limited dexterity or mobile)
But if we really want to shrink everything then 32px x 32px is probably the minimum:
15px font size * 1.5 + 2 * 4px padding = 31.5px
from server.
Can anyone explain the difference between :)
- https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
- https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced
from server.
Can anyone explain the difference between :)
afaik It's just 2 different levels. With bibv we aim at en enhanced AA for our certification. All of our competitors also aim at AA.
from server.
With bibv we aim at en enhanced AA for our certification
Enhanced is 44px :)
from server.
No we basically need WCAG AA with smaller exceptions (BITV has slighly other rules for pages like login).
from server.
Related Issues (20)
- Detect changes to files (using custom hooks) HOT 2
- CPU Utilization jumped from 1% to 3-4% on average with 28.0.6. HOT 2
- Array to string conversion at /var/www/nextcloud/apps/dav/lib/CalDAV/Activity/Backend.php#561 HOT 2
- [Bug]: new name of renamed file only shown after page reload
- [Bug]: occ admin-delegation:add allows adding the same delegation multiple times HOT 2
- Please add JSON output to admin-delegation:show HOT 1
- Enable WebP preview generation without Imaginary
- [Bug]: Notifications should have an "x" button to close them
- [Bug]: Server does not utilize system CA Certificates through specified HTTP Proxy HOT 3
- [Bug]: Video preview causes crash
- [FeatureRequest] Add an option to set oAuth2 applications as trusted, for own external apps which uses oAuth2 sessions
- [Bug]: File comments broken HOT 2
- i18n: Need context for placeholders HOT 3
- [Bug]: No UserChangedEvent emitted for LDAP users that are disable via markRemnantsAsDisabled config
- [Bug]: App permission for groups - broken group list HOT 2
- [Bug]: Missing breadcrumb ellipsis -> Grid view button pushed out of view HOT 6
- [Bug]: Used memory grew by more than 50 MB when executing job OCA\DAV\BackgroundJob\RefreshWebcalJob
- [Bug]: Delayed visual feedback when uploading a large folder via drag and drop HOT 2
- [Bug]: "Cannot delete the video part of a live photo" error message while deleting .mov file on server HOT 14
- [Bug]: No visual feedback for move operations
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from server.