{"id":18311827,"url":"https://github.com/geemanjs/a11y-links","last_synced_at":"2026-03-19T03:51:49.235Z","repository":{"id":50520518,"uuid":"86695506","full_name":"geemanjs/a11y-links","owner":"geemanjs","description":"Collection of useful accessibility links","archived":false,"fork":false,"pushed_at":"2017-05-20T18:08:53.000Z","size":11,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T12:13:53.808Z","etag":null,"topics":["a11y","accessibility","links","testing","tools","useful","web"],"latest_commit_sha":null,"homepage":"","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/geemanjs.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":"2017-03-30T11:35:16.000Z","updated_at":"2024-04-11T02:48:25.000Z","dependencies_parsed_at":"2022-09-22T09:35:20.415Z","dependency_job_id":null,"html_url":"https://github.com/geemanjs/a11y-links","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/geemanjs/a11y-links","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geemanjs%2Fa11y-links","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geemanjs%2Fa11y-links/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geemanjs%2Fa11y-links/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geemanjs%2Fa11y-links/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geemanjs","download_url":"https://codeload.github.com/geemanjs/a11y-links/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geemanjs%2Fa11y-links/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28667373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T17:07:18.858Z","status":"ssl_error","status_checked_at":"2026-01-22T17:05:02.040Z","response_time":144,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["a11y","accessibility","links","testing","tools","useful","web"],"created_at":"2024-11-05T16:20:41.777Z","updated_at":"2026-01-22T17:08:21.746Z","avatar_url":"https://github.com/geemanjs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# a11y-links\nA collection of useful accessibility links\n\n**Table of Contents**\n* [How this list was formed](#how-this-list-was-formed)\n    * [Learn more sections](#learn-more-sections)\n    * [Libraries sections](#libraries-sections)\n    * [Content](#content)\n       * [Headings](#headings)\n       * [Typography](#typography)\n       * [Tables](#tables)\n       * [Colour](#colour)\n    * [Forms](#forms)\n       * [Inputs](#inputs)\n       * [Select](#select)\n       * [Radios \u0026amp; Checkboxes](#radios--checkboxes)\n       * [Buttons](#buttons)\n       * [Validation](#validation)\n    * [Navigation](#navigation)\n    * [General Components](#general-components)\n       * [Tabs](#tabs)\n       * [Dialogs](#dialogs)\n * [Testing](#testing)\n    * [Tools](#tools)\n       * [In Browser](#in-browser)\n       * [CLI](#cli)\n       * [IDE (Could be considered CLI)](#ide-could-be-considered-cli)\n    * [Tool Testing](#tool-testing)\n\n## How this list was formed\nThe articles/libraries were tested in Google Chrome with:\n   * JAWS\n   * Dragon\n   * Zoomtext\n   * OSX Voiceover\n   \n### Learn more sections\n* Could someone with a basic grasp of JS,CSS,HTML understand it?\n* Is it well written?\n* Is it well presented?\n* Are coding samples supplied?\n* Do the coding samples follow 'best' practice?\n* Do the coding samples follow WCAG Guidelines/advice?\n* Does the output from the coding samples work well with the tools?\n* Does the guidance come from a 'well known' resource?\n\n### Libraries sections\n* Does the recommended output work well with the tools?\n* Is it easy to produce errors?\n* Library size?\n* Library usability?\n* Library extension points?\n\n### Content\n#### Headings\n##### Learn more\n|Links|\n|-|\n| [W3](https://www.w3.org/WAI/tutorials/page-structure/headings/) |\n| [BBC](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/structure/headings#HTML)|\n| [Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)  |\n##### Libraries\nYou should be using HTML, CSS only for these\n\n#### Typography\n##### Learn more\n| Links | Description |\n|-|-|\n| [WebAIM](http://webaim.org/techniques/fonts/) | Font considerations |\n| [Hemming Way] (http://www.hemingwayapp.com/)| Improve content readability |\n| [Penn State university](http://accessibility.psu.edu/boldfacehtml/)| `\u003cb\u003e` vs `\u003cstrong\u003e` \u0026 `\u003ci\u003e` vs `\u003cem\u003e` |\n| [UK Government](https://accessibility.blog.gov.uk/2017/02/08/advice-for-creating-content-that-works-well-with-screen-readers/)| |\n##### Libraries\nYou should be using the semantics of HTML for text\n\n#### Tables\n##### Learn more\n| Links | Description |\n|-|-|\n| [WebAIM](https://www.w3.org/WAI/tutorials/tables/) | Comprehensive Guide | \n| [Hong Kiat](http://www.hongkiat.com/blog/html-table-accessibility/) | Good write up with good content | \n| [Usability.com](http://usability.com.au/2005/06/accessible-data-tables-2005/) | Old, but covers complex tables | \n##### Libraries\n| Links | Description |\n|-|-|\n| [Pivotal Table](http://styleguide.cfapps.io/react_base_tables.html) | Great Library from an accessibility perspective, limited extension | \n| [React Bootstrap Table](http://allenfang.github.io/react-bootstrap-table/) | Apart from Headers been in a seperate table, the rest of the markup is pretty good!  |\n\n##### Bad Tables\n| Links | Description |\n|-|-|\n| [React Tables](https://github.com/tannerlinsley/react-table) | See [Issue 130](https://github.com/tannerlinsley/react-table/issues/130) |\n| [Facebook Fixed Data Table](https://github.com/facebook/fixed-data-table)| See [Issue 129](https://github.com/facebook/fixed-data-table/issues/129) for more details | \n\n#### Colour\n##### Learn more\n|Links|Description|\n|-|-|\n| [WCAG2.0 colour](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html) | WCAG advice |\n| [Contrast Checker](https://colour-contrast.github.io/)| - |\n| [WEBAIM Contrast Checker](http://webaim.org/resources/contrastchecker/)| - |\n| ['We Are Color Blind'](http://wearecolorblind.com/)| A movement to try and raise awareness of colour blindness |\n| [Designing for colour blindness](http://blog.usabilla.com/how-to-design-for-color-blindness/)| Good blog post on designing for colour \nblindness |\n| [How users change colours](https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/)| gov.uk research \narticle on how users change colours in the browser |\n##### Libraries\n\n### Forms\n#### Inputs\n##### Learn more\n|Links|Description|\n|-|-|\n| [W3 WAI advice](https://www.w3.org/WAI/tutorials/forms/) | More general than just input fields but solid tutorials |\n| [WebAIM form advice](http://webaim.org/techniques/forms/controls#input) | |\n| [Building accessible forms](http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/) | In depth write up \nincluding the why |\n##### Libraries\nStandard HTML/CSS/JS recommended\n\n#### Select\n##### Learn more \n| Links | Description |\n|-|-|\n|||\n##### Resources\nStandard HTML/CSS/JS recommended\n\n#### Radios \u0026 Checkboxes\n##### Learn more\n| Links | Description |\n|-|-|\n| [GDS Improving Radios \u0026 Checkboxes](https://gdstechnology.blog.gov.uk/2015/08/27/making-radio-buttons-and-checkboxes-easier-to-use/) | Good write up by GDS with well backed up research |\n| [W3 grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/)| Using fieldset/legends to group content |\n| [Multi level grouped checkboxes](http://oaa-accessibility.org/example/6/)| Interesting method of 'select all' | \n##### Libraries\nStandard HTML/CSS/JS recommended\n\n#### Buttons\n##### Learn more\n| Links | Description |\n|-|-|\n|[Mozilla 'Button role'](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role)| |\n##### Libraries\nStandard HTML/CSS/JS recommended\n\n#### Validation\n##### Learn more\n| Links | Description |\n|-|-|\n|[WebAIM advice](http://webaim.org/techniques/formvalidation/)| Covers the basics well |\n|[Deque advice](https://www.deque.com/blog/accessible-client-side-form-validation-html5/) | Good explanation of HTML5\n methods |\n|[Andrew Burton Blog Post](https://medium.com/@andrew.burton/form-validation-best-practices-8e3bec7d0549)| Helps set \nyou in the right mindset |\n##### Libraries\n\n### Navigation\n#### Learn more\n| Links | Description | \n|-|-|\n| [W3 Guidance](https://www.w3.org/WAI/tutorials/menus/) | Fantastic resource from W3 with a collection of recommendations \u0026 best practices |\n| [Heydon works guidance](http://heydonworks.com/practical_aria_examples/#submenus) | Navbar with dropdown, works really well! |\n| [Terril Thompson guidance](http://terrillthompson.com/blog/474) | Slightly outdated, but very relevant recommendations |\n#### Libraries\n| Links | Description |\n|-|-|\n| [React Router](https://reacttraining.com/react-router/)| When combined with advice above can produce great menus |\n| [React Bootstrap](https://react-bootstrap.github.io/components.html#navigation)| Accessible bootstrap navigation bar |\n| [React Tray](http://instructure-react.github.io/react-tray/basic/) | Instructure library - Very well made! |\n\n### General Components\n#### Tabs\n##### Learn more \n| Link | Description |\n|-|-|\n| [Smashing Magazine](https://www.smashingmagazine.com/2009/06/module-tabs-in-web-design-best-practices-and-solutions/)| Good writeup which links out to further examples |\n| [OAA Accessibility](http://oaa-accessibility.org/example/34/)| Good example with well marked up ARIA |\n|[W3](https://www.w3.org/TR/wai-aria-practices/#tabpanel)| How users expect tabs to behave |\n\n##### Libraries\n| Link | Description |\n|-|-|\n| [React tabs](https://github.com/reactjs/react-tabs) | Extensible and well marked up |\n| [React accessible tabs](https://github.com/stowball/react-accessible-tabs) | Uses ARIA, but worked well |\n\n###### Bad Libraries\n|Link |Why?|\n|-|-|\n| [MUI CSS](https://www.muicss.com) | No Keyboard Navigation |\n| [Material UI](http://www.material-ui.com/)| No linking between title \u0026 content. See [Issue 61 for updates](https://github.com/callemall/material-ui/issues/61) |\n\n#### Dialogs\n##### Learn more\n| Link | Description | \n|-|-|\n| [Mozilla Guidance](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role) | Mozilla's advice on managing dialogs |\n| [Smashing Magazine Guidance](https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/) | Detailed post by smashing magazine recommending best practices |\n\n##### Libraries\n| Link | Description |\n|-|-|\n| [A11y Dialog](http://edenspiekermann.github.io/a11y-dialog/) | Lightweight library, html, js api  |\n| [React Modal](https://github.com/reactjs/react-modal) | Good community who actively test with assistive tools |\n| [React Overlays](https://react-bootstrap.github.io/react-overlays) | Twitter bootstrap implementation |\n\n###### Bad Libraries\n| Link | Why? |\n|-|-|\n| [Material UI](http://www.material-ui.com/) | No ARIA and poor markup |\n\n\n## Testing\n### Tools\n#### In Browser\n| Link | Description | \n|-|-|\n| [aXe](https://www.deque.com/products/aXe/) | Chrome/Firefox extension, pretty in depth | \n| [Google Lighthouse](https://developers.google.com/web/tools/lighthouse/) | Chrome extension for Progressive Web Apps. Uses aXe for accessibility assesment |\n| [Html CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/)| Bookmark with different levels of WCAG | \n| [Tenon](https://tenon.io/) | (Online only) Type your url in and off you go |\n| [Tota11y](http://khan.github.io/tota11y/)| Bookmark covers the very basics |\n\n#### CLI \n| Link | Description | \n|-|-|\n| [aXe Cli](https://github.com/dequelabs/axe-cli)| Uses aXe framework - Any browser supported using Webdriver |\n| [Pa11y](http://pa11y.org/)| Collection of tools uses PhantomJS |\n\n#### IDE (Could be considered CLI)\n| Link | Description | \n|-|-|\n| [ESLint - JSX](https://github.com/evcohen/eslint-plugin-jsx-a11y)| ESLint plugin for spotting issues in JSX | \n\n### Tool Testing \n| Link | Description |\n| --- | --- |\n| [Terrible HTML page](https://alphagov.github.io/accessibility-tool-audit/test-cases.html) | Useful tool to test the effectiveness of accessibility testers |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeemanjs%2Fa11y-links","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeemanjs%2Fa11y-links","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeemanjs%2Fa11y-links/lists"}