{"id":17802894,"url":"https://github.com/geometricpanda/accessibiliity-in-responsive-design","last_synced_at":"2025-04-02T04:41:54.894Z","repository":{"id":66051842,"uuid":"465271687","full_name":"geometricpanda/Accessibiliity-in-Responsive-Design","owner":"geometricpanda","description":"Accessibility Demo to talk through a few simple enhancements which greatly improve accessibility","archived":false,"fork":false,"pushed_at":"2022-03-02T18:52:22.000Z","size":8612,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T19:24:17.886Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://accessibility-in-responsive-design.geometricpanda.dev/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geometricpanda.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-02T11:10:59.000Z","updated_at":"2022-03-02T11:18:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"821bf102-961c-41fc-827a-e15c527cbf5d","html_url":"https://github.com/geometricpanda/Accessibiliity-in-Responsive-Design","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2FAccessibiliity-in-Responsive-Design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2FAccessibiliity-in-Responsive-Design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2FAccessibiliity-in-Responsive-Design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geometricpanda%2FAccessibiliity-in-Responsive-Design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geometricpanda","download_url":"https://codeload.github.com/geometricpanda/Accessibiliity-in-Responsive-Design/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246758279,"owners_count":20828919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-27T12:44:51.671Z","updated_at":"2025-04-02T04:41:54.873Z","avatar_url":"https://github.com/geometricpanda.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive Accessibility CSS\n\n## Media Queries in EMs\n\nMost users don't change their browser font sizes, however for many reasons we have users that do.\n\nWe've been embracing this in our typography for years, and we're all fairly comfortable with font sizes in REMS/EMS.\n\nHowever this has meant for many users who have changed their font size, that when they visit our websites, the content\ndoesnt really fit. Like you can read the text, but it doesnt quite look right.\n\nWe can see a great example of this on this bootstrap example page: https://getbootstrap.com/docs/5.1/examples/features/\n\n### So how can we solve this?\n\nThe great answer is we kinda already have, for small screens, using media queries.\n\nWe know that a media query based in pixels is fixed based on viewport size, as long as the viewport meets that minimum\nsize then the media query will activate. And we've seen this work exceptionally well when people use the browser zoom\nfeature.\n\nHowever changing the browser font size, isnt the same as browser zoom - yet we'd probably want a similar behaviour in\nterms of the breakpoint changing.\n\nWhat if we considered changing our media queries to be based in EMs instead of pixels, meaning we start thinking about\nthem in relation to both our screen size, and the size of our content.\n\n### Breakpoints\n\nSo I'm going to use a few older values here because they compute nicely, but you really can use any you like, lets say\nwe've got a simple site, with a single column layout on our smaller screens, and when our screen exceeds 768px we want\nto swap out to a two column layout, and then at 1024px we want to swap to a three column layout.\n\nWe know that most - if not all - browsers, have a default 16px base font size, so we can use that as our basis for\ncalculating our media queries.\n\nLets call this our medium breakpoint -- Medium 768px / 16px = 48em\n`@media all(min-width: 48em)`\n\nAnd lets call this our large breakpoint -- Large 1024px / 16px = 64em\n`@media all(min-width: 64em)`\n\nAnd in chrome let's set our font size to large, which computes in Chrome to 20px. This means that our medium breakpoint\nnow needs a viewport size of 960px before it activates instead of 768px and that our large breakpoint now needs a\nviewport size of 1280px before\n\nGiving us a much closer behaviour to browser zoom right?\n\nThis also works the other way, so if we set our font size to small, which computes in Chrome to 12px That our medium\nbreakpoint now activates much earlier at 576px instead of 768px, And that our large breakpoint now activates at 768px\ninstead of 1024px.\n\n### Chrome Size Values\n\n| Size             | px          | 48em           | 64em            |\n|------------------|-------------|----------------|-----------------| \n| Medium (Default) | 16px        | 768px          | 1024px          |\n| ---------------- | ----------- | -------------- | --------------- |\n| Very Small       | 9px         | 432px          | 576px           |\n| Small            | 12px        | 576px          | 768px           |\n| Large            | 20px        | 960px          | 1280px          |\n| Very Large       | 24px        | 1152px         | 1153px          |\n\n### Gotchas\n\nNow there are a few things we should probably consider at this point,\n\n- Anyone setting the font-size using CSS, so the `:root`, `html` or `body` selectors may cascade into your font styles,\n  however it wont be computed by your media queries. So we need to be aware of this.\n\n- Max screen size, we often set our maximum container widths using a pixel value, they'll also need updating to use EM\n  values else we'll might still have content trying to squeeze into a space it's not necessarily designed for.\n\n- A few sites have started setting paddings, margins, column/row gaps, gutters etc. using `ems` or `rems` and whilst\n  that may still be right for your content, we may want to consider reverting those to pixel values - as usually that's\n  more about how we lay out the entire screen rather than individual content items - there's no absolute rule here as\n  it's down to your design.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeometricpanda%2Faccessibiliity-in-responsive-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeometricpanda%2Faccessibiliity-in-responsive-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeometricpanda%2Faccessibiliity-in-responsive-design/lists"}