{"id":18632294,"url":"https://github.com/zurb/f5-accessibility-audit","last_synced_at":"2026-01-21T09:32:12.398Z","repository":{"id":18947490,"uuid":"22167499","full_name":"zurb/F5-accessibility-audit","owner":"zurb","description":null,"archived":false,"fork":false,"pushed_at":"2014-08-25T18:13:35.000Z","size":290,"stargazers_count":5,"open_issues_count":1,"forks_count":3,"subscribers_count":23,"default_branch":"master","last_synced_at":"2024-12-27T07:42:20.954Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zurb.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}},"created_at":"2014-07-23T18:16:20.000Z","updated_at":"2020-08-28T10:37:59.000Z","dependencies_parsed_at":"2022-07-16T17:16:52.519Z","dependency_job_id":null,"html_url":"https://github.com/zurb/F5-accessibility-audit","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/zurb%2FF5-accessibility-audit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurb%2FF5-accessibility-audit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurb%2FF5-accessibility-audit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurb%2FF5-accessibility-audit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zurb","download_url":"https://codeload.github.com/zurb/F5-accessibility-audit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239426987,"owners_count":19636656,"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-11-07T05:11:13.043Z","updated_at":"2025-11-04T07:30:21.234Z","avatar_url":"https://github.com/zurb.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accessibility Audit\nThe following is guidelines and tips to consider with the upcoming changes to\nmake Foundation to be more accessible out-of-the-box.\n\nMore technical recommendations and examples will be in separate documents; if\nthey can be conveniently in digital form, they should be within this repo.\n\n\n**Note this audit is currently in Alpha. This does not in anyway reflect the\nfinal plan towards accessibility for Foundation, and isn't edited yet for\noptimal brevity, redundancy, or readibility—nor does it yet adheres to the typical tone Zurb attaches to its entities.**\n\n## Tips I’m seeing\n- Follow the three rules of ARIA\n- Change .button to button and a\n- Change disabled to [disabled] , style to use:  [disabled], a:not([href])\n- “Links without `href`s, like buttons which include disabled, do not and should not receive focus”\n- Buttons should never be left empty, there’s specific ways to meet this requirement we don’t meet yet (pg. 28)\n- Our tooltips should show during hover *and* focus\n- alt should read like what the label would read like as standard text; \"it express the function, not a description of something someone can’t see\"\n\n## General\n- We must follow the [three golden rules of ARIA at all\n  times](http://www.w3.org/TR/2013/WD-aria-in-html-20131003/#notes-on-aria-use-in-html)\n- Everything must be accessible keyboard.\n- We must seriously consider augmenting `progress`, `meter`, and `dialog` for\n  the relevant components; on top of that we still must use `aria-notations` for\n  maximum compatibility\n\n- All components that churn out dynamic content, specifically post-page-load\n  interactions should at least have `live-region` set to true for maximum\n  compatibility with browsers FFS supports\n\n- Any component that makes sense to be focusable and uses\n  semantically-meaningless div containers should use `tab-index=-1`\n\n\n## Visibility/Disabling\n- Visiblity classes need to have or add `aria-hidden=true`\n- Disability hidden on links is useless unless you remove the `href` value for\n  accessibility; we may consider using a `data` attribute to then use to store\n  and unstore an `href`'s value.\n- If some of our components need to be \"disabled\", they need the appropriate\n  role value defined *and* which may in fact be role=\"button\" (additional\n  research required on my part); **a disabled class is useless outside of\n  visually making it appear disabled; you must use the\n  [disabled] attribute.\n- with our display none calls, we should use aria-hidden as well.\n- For input elements, use other visbility techniques to make the input invisible\n  but still focusable. \n- If you must dramatic change a form input, do not use `display:none` or\n  `visibility:none`, use `opacity`, `clip`, \u0026 strategic use of valid positioning and\n  z-index values instead\n\n## Tooltips\n- We should use alt with tooltips to make it useable for keyboard users as well.\n- `aria-describedby` for the tooltips' targets and the toggling of its `aria-hidden`\n  value\n- `role=tooltip`\n\n## Off-Canvas\n- Must support the use of anchor tags and buttons to trigger offcanvas\n- aria-expanded is needed for the button that triggers the offcanvas effect\n- `aria-role = navigation` is needed for the navigation area\n- `aria-hidden` is needed for the navigation area\n- role = button has to be used the navigation anchor tag **and** aria-controls\n  with the id passed of the navigation area\n- navigation portion must be duplicated and visibiliy hidden at the bottom of\n  the page for PE reasons\n- We needed an `aria-label` sign for our hamburger sign. Daresay we may need to\n  consider for Foundation for Apps or version 6 to add \"menu\"\n- `aria-haspopup` must be set to `true` for the default\n\n## Icon-bar\n- All the icons should use aria-label to defined what they are (unless text\n  later in the dom explains what it is).\n- If text are needed for the icons, we need to give it an id to then pass into the\n  icon bar's `aria-labeledy` attribute.\n\n## Top Bar\n- Same feedback as above with nested links having to be `[role=button]`,\n  aria-expanded,  **and** have its parent element (li) annotated  as `menuitem`\n  or `presentational`\n- `aria-controls` values that make sense.\n\n- List items w/ nested menus must use `aria-haspopup`\n\n# Reveal\n- We must change reveal to listen for anchor tags with role=button and buttons\n\n- If an anchor tag is used, we must annotate it with role=button\n\n- We need to have `aria-hidden=false/`true pattern with the link\n  be hidden with aria-hidden\n\n- `aria-controls` have to be added to the link and the corresponding *id* used for\n  the modal.\n\n- Support `\u003cdialog\u003e` and the `show()`, `showModal()`, and `close()` methods. This\n  includes supporting the open attribute with how reveal is executed.\n  `(HTMLDialogElement)`\n\n- Using dialog, we use `display: none` by default, and `display:block` when it\n  is ready to be showed\n\n- `role=alertdialog` or `role=dialog` *must* be used. NO exception. For warning and\n  errors, as well as the benefit of using `aria-live-regions` (`live-regions` get read aloud the moment they change), we should consider\n  using by default and then have an accessibility section on the Foundation docs\n  (an accessibility branch during the beta of Zurb Foundation 5.4/5.5) that also\n  recommend (or a snippet) to use `role=\"dialog\"` for scenarios where the\n  `role=alertdialog` declaration would make the dialog box too powerful.\n\n- `aria-describedby` is necessary in order for the dialog text to be respected\n  as being associated with the dialog; The dialog must refer\n\n- While open, it *must* not be possible for other elements to be in focus. This\n  is actually harder than it sounds. Heydon's recommendation from past work\n  is aria-hidden \u0026 a custom class of visibility:hidden (elements retain their\n  layout, so they don't \"jump\" back into place in an inelegant way after the\n  dialog box is close)\n  `$('body \u003e *:not(dialog').addClass('mod-hidden');` (If we use `showModal()`,\n  this isn't a problem)\n\n- We must return focus back to whatever triggered reveal;\n\n- For Reveal modals using AJAX, we must use `aria-busy` and `aria-atomic=true`\n\n- We will likely create an Accessibility section that goes into details on when\n  to use such states as an opportunity to educate them in order for us to do\n  less guesswork on how certain classes of alert we support now and in the\n  future adheres to the rules.\n\n## Magellan\n- Magellan will be a somewhat hard component to make accessible.\n- We must make sure the links\n- We must add tabindex=\"-1\" in order to make the things that Magellan transfers\n  to focusable.\n- Decide whether or not role=\"toolbar\" better describes the behavior of Magellan\n  or nav (research on my part)\n\n## Toggler Bars\n- Must have `aria-checked` and `aria-checked` if we allow non form element to have\n  similar functionality.\n\n- `aria-pressed`\n\n## Range  Sliders\n- `aria-valuemax`, `aria-valuemin`, `aria-valuenow` must be used\n- `aria-valuetext` must be used if we're going to have visual text show what\n  value is the range slider at any moment like some of our examples.\n- Consider a version or have the styles applied to an `input` tag with\n  `type=value`\n\n## Modals (General Gotchas)\n- `role=alertdialog` makes sense for these elements since they are important for\n  the user to acknowledge before proceeding further alone the document.\n- Accordingly, this then focuses us to make sure we have JS to make sure other\n  things aren't focusable until modals are  closed.\n\n- We must allow escape to close the dialog.\n\n## Alert\n- Alerts meant to be errors or critical information need to use `role=\"alert\"`\n  and `aria-live=assertive`\n\n- Other alerts will need to have `aria-live=polite` and `role=\"status\"`\n\n- You may have to poll to get this to work correctly for alerts that can be used\n\n- `aria-atomic` must also be refined to have `aria-live` work the way it should\n  react for alerts that can change in value significantly (or related ones)\n  inside a particular block of content.\n\n## Panel\n- N/A\n\n## Typography\n- We should have a section explaining that the \"use h1 wherever now due to\n  sectioning\"\" is no longer a recommendation\n\n- A section of `aria-level` WAI-ARIA attribute must be created and accounted\n  for.\n\n## Joyride\n- # Hardest one to get right; I'll have to think about this some more.\n\n## Progress bar\n- Must get a `tab-index` value of -1 so it can be focused; it must then have a\n  `aria-label` or `aria-valuetext` to represent what what its percentage\n  ultimately resolves to (I have to do research what works best for it)\n- I have a hunch that `\u003cprogress\u003e` has a `role` alternative to use since we're\n  for some reason not using native `progress` elements to then style. My guess by using such a role + `aria-valuemax`, `aria-valuemin`, `aria-valuenow` can then be used, simplifying making our progress bars accessible.\n\n## Tables\n- Must use the role of `grid` where necessary;\n- Accessibility section on `thead`, `tfoot`, `tcaption`, and `tbody` despite\n  them being already accounted for with CSS.\n\n## Tabs\n- Our tabs will likely have to slightly re-engineered.\n- Use `role=tablist`, `role=tabpanel` and  `role=tab` for the container of the links, for each tab\n  link and individual panels\n  tabs.\n- `aria-hidden` must be toggled true/false for each tab when they get focus.\n- `aria-selected` must be used for the open tab\n- Remove the default accessibility features of `li`, `dl`, and so on to a special\n  role dedicated for widgets such as tabs: `presentation`.\n\n## Interchange\n- `aria-atomic=true` \u0026 `aria-live=\"assertive\"`\n- `aria-busy` being toggled true and false may also be needed if content will be\n  Ajaxed extensively.\n- An Accessibility section written on the implications of using `aria-atomic` to\n  be `false` instead of `true`.\n\n## Side-nav, Pagination, Subnav, Breadcrumb\n- `role=navigation`\n- Disabled has to have anchor tags without `href`\n\n# Thumbnails\n- `aria-expanded` used on the link that's annotated with the\n- anchor tags need to link to the actual image, even with its advanced usage and\n  have the `role=\"button\"`\n- aria-label is needed to inform the user of the intent of this component\n- `aria-hidden=true` needed for the image available.\n\n# Abide\n- `aria-describedby` must be used by the error tooltips.\n- They must also have `[role=tooltip]`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurb%2Ff5-accessibility-audit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzurb%2Ff5-accessibility-audit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurb%2Ff5-accessibility-audit/lists"}