Hi there! I'm currently facing a challenge with mobile Safari - I need to disable the automatic zoom when users interact with input fields. From my research, it seems that keeping the font size of input fields at 16px prevents this zoom issue. However, my designers are pushing for smaller input sizes. I've found a temporary fix by setting the input to 16px and then scaling them down, but this creates issues with dropdowns and icons, leading to a less than ideal solution. I would love to hear any tips or alternatives to solve this problem without sacrificing accessibility!
5 Answers
Definitely push back on the design team! It's not just a preference but something mandated by law in many countries. It's also worth showing them evidence on the importance of accessibility in design—this isn't a niche concern anymore!
Accessibility isn't just nice to have—it's a necessity! If designers push back, they really need to understand the potential repercussions. You could suggest that if they still want to ignore these guidelines, they should sign off on some sort of liability waiver regarding any legal issues that might arise from it.
I think it's really important to stick to accessibility standards. Designers should be reminded that there's a good reason for the 16px rule – it's all about helping users with vision impairments. A common compromise I've seen is using smaller fonts for desktop layouts while ensuring everything is at least 16px on mobile. It improves usability across all devices!
Exactly! Those who argue against accessibility aren't taking the broader impact into account.
Trying to reduce the font size under 16px will lead to zoom issues, and that's not a bug, it's actually a feature meant to aid users! A better approach is to meet the requirements by keeping the text at 16px and getting creative with your input styling—work with padding to make them look smaller without lowering the font size. That way you still maintain accessibility.
Honestly, just let Safari do its job. If inputs are smaller than 16px, it will zoom in for a reason. Instead of scaling down font sizes, think about achieving the desired look with adjustments to your layout that respects these rules.
100% agree, it’s shocking how some designers overlook this.