{"id":21840831,"url":"https://github.com/cmhughes/a11y-slides-math","last_synced_at":"2026-01-05T04:35:39.990Z","repository":{"id":262782362,"uuid":"887474048","full_name":"cmhughes/a11y-slides-math","owner":"cmhughes","description":"Accessibility-oriented HTML slides using MathJax. These slides are focused on giving accessible, screenreadable content.","archived":false,"fork":false,"pushed_at":"2025-02-12T14:44:56.000Z","size":48,"stargazers_count":1,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T15:48:23.079Z","etag":null,"topics":["accessibility","assistive-technology","html-css-javascript","mathematics","mathjax","nvda","screenreader"],"latest_commit_sha":null,"homepage":"https://cmhughes.github.io/a11y-slides-math/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cmhughes.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-11-12T20:05:11.000Z","updated_at":"2025-02-12T14:44:55.000Z","dependencies_parsed_at":"2024-11-14T09:19:29.892Z","dependency_job_id":"39490558-9393-4593-b773-f7014f623ca2","html_url":"https://github.com/cmhughes/a11y-slides-math","commit_stats":null,"previous_names":["cmhughes/a11y-slides-math"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmhughes%2Fa11y-slides-math","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmhughes%2Fa11y-slides-math/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmhughes%2Fa11y-slides-math/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cmhughes%2Fa11y-slides-math/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cmhughes","download_url":"https://codeload.github.com/cmhughes/a11y-slides-math/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244823457,"owners_count":20516280,"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":["accessibility","assistive-technology","html-css-javascript","mathematics","mathjax","nvda","screenreader"],"created_at":"2024-11-27T21:28:01.763Z","updated_at":"2026-01-05T04:35:39.961Z","avatar_url":"https://github.com/cmhughes.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# a11y-slides-math\nHTML template to write accessibility-oriented slides with symbolic mathematical content \nrendered using [MathJax](https://www.mathjax.org/). \n\n## usage/getting started\nYou can *view* the template at [`a11y-slides-math-template.html`](https://cmhughes.github.io/a11y-slides-math/a11y-slides-math-template.html), and use the LEFT and RIGHT arrow keys to navigate through.\n\nYou can *edit* the template by downloading the file [`a11y-slides-math-template.html`](https://raw.githubusercontent.com/cmhughes/a11y-slides-math/refs/heads/main/a11y-slides-math-template.html) and edit it as you see fit. You'll find the necessary Javascript and CSS at the bottom of the file. \n\nYou can navigate through the slides using the LEFT and RIGHT arrow keys.\n\nSee [examples](https://cmhughes.github.io/a11y-slides-math/#examples) for further examples.\n\n## version\nV0.7, 2025-02-12\n\n## testing with NVDA\nTo test `a11y-slides-math-template.html` with [NVDA](https://www.nvaccess.org/download/), use the following steps:\n\n1. open `a11y-slides-math-template.html` in your web browser (I recommend Chrome or Firefox, but others should work also);\n2. launch NVDA, note that the default NVDA key is the INSERT key, and that this can be changed;\n3. navigate through the first slide using the UP and DOWN arrow keys; on each slide, you should hear the text from the `\u003ch1\u003e` announced;\n4. press NVDA+SPACE to exit \u003ci\u003efocus\u003c/i\u003e mode, and you can now navigate through the slides by using the RIGHT and LEFT arrows;\n5. when you want to interrogate a slide, press NVDA+SPACE to enter \u003ci\u003efocus\u003c/i\u003e mode, and then use the UP and DOWN arrows to interrogate the details of the slide;\n6. on slide 3 of `a11y-slides-math-template.html` you will encounter some symbolic mathematical content:\n    * when you reach the mathematical content, press ENTER;\n    * now press SHIFT+SPACE which should allow you to interrogate this mathematical content at different levels using the arrow keys via the MathJax explorer extension; press SPACE to have NVDA announce your current level;\n    * when you're done interrogating the mathematical content, press ESC, and then NVDA+CTRL+SPACE, which should \n      return you to the next part of the slide;\n7. if you want to exit/quit NVDA, press NVDA+Q.\n\nFor reference, see the [NVDA keyboard shortcuts](https://www.nvaccess.org/files/nvdaTracAttachments/455/keycommands%20with%20laptop%20keyboard%20layout.html).\n\n## assumptions about users of this\nI assume the following two assumptions about users of this template:\n\n1. they wish to prioritise accessibility;\n2. they only wish to do the work of creating their slides once.\n\n## anticipated questions, and responses\n\u003cdetails\u003e\n\u003csummary\u003eI'm happy with the way I produce my slides, why should I use this?\u003c/summary\u003e\n\nIf you're happy with your method, keep using your method, and don't use this template. \n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ewhy not LaTeX?\u003c/summary\u003e\n\nBefore I answer, please understand that I am a supporter of LaTeX; see my tex stackexchange profile at \u003ca href=\"https://tex.stackexchange.com/users/6621/cmhughes\"\u003ecmhughes\u003c/a\u003e, and \u003ca href=\"https://github.com/cmhughes/latexindent.pl/\"\u003elatexindent.pl\u003c/a\u003e which I have authored and maintained since 2012.\n\nLaTeX produces pdf files by default. Such pdf files that contain mathematical content will, in general, not be accessible to assistive technology. Authors that choose\nto use LaTeX (with classes such as beamer) will have to do the work of creating their slides more than once if they wish to create an accessible version. If you have\na method that you're happy with, stick with it. \n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ewhy not PowerPoint?\u003c/summary\u003e\n\nI have been unable to create PowerPoint slides that I can navigate with \nassistive technology. If you have an example that works, please do link me to them.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ewhy not reveal js?\u003c/summary\u003e\n\nI have been unable to create \u003ca href=\"https://revealjs.com\"\u003ereveal.js\u003c/a\u003e slides that I can navigate with \nassistive technology. If you have an example that works, please do link me to them.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ewhy not dzslides?\u003c/summary\u003e\n\nI have been unable to create \u003ca href=\"https://github.com/paulrouget/dzslides\"\u003edzslides\u003c/a\u003e slides that I can navigate with \nassistive technology. If you have an example that works, please do link me to them.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ehow can I get my LaTeX/PowerPoint/whatever into a11y-slides-math format?\u003c/summary\u003e\n\nI have no idea, and that's not what this project is about. I only want to do work once (see assumption 2 in the above), so I *produce* my slides in a11y-slides-math format. \n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ewhat about fancy transitions and visual effects?\u003c/summary\u003e\n\na11y-slides-math is not about fancy transitions and visual effects. If you want something \nmore visually appealing, you can edit the CSS and Javascript as you see fit, or use \nsomething like \u003ca href=\"https://revealjs.com\"\u003ereveal.js\u003c/a\u003e or \u003ca href=\"https://github.com/paulrouget/dzslides\"\u003edzslides\u003c/a\u003e. \n\na11y-slides-math is deliberately simple HTML with minimal Javascript and CSS, designed to be navigated\nwith assistive technology.  I intend to keep it that way, prioritising accessibility and screen reader navigability above everything else.\n\n\u003c/details\u003e\n\n## printing your slides\nIf you press `SHIFT+P` then all slides will be presented in your browser. From here, you should be able to print to pdf, and you should receive one slide per page in the pdf.\n\n## examples\nYou can find further examples in the following files:\n\n* [1-example.html](https://cmhughes.github.io/a11y-slides-math/examples/1-example.html), automatically numbering slides\n* [2-example.html](https://cmhughes.github.io/a11y-slides-math/examples/2-example.html), automatically numbering examples\n* [3-example.html](https://cmhughes.github.io/a11y-slides-math/examples/3-example.html), automatically numbering examples and theorems\n* [4-example.html](https://cmhughes.github.io/a11y-slides-math/examples/4-example.html), automatically generate list of slides\n* [5-example.html](https://cmhughes.github.io/a11y-slides-math/examples/5-example.html), automatically generate list of slides, automatically number slide headings\n* [6-example.html](https://cmhughes.github.io/a11y-slides-math/examples/6-example.html), side-by-side div boxes that wrap onto next line with screen width adjustment\n* [7-example.html](https://cmhughes.github.io/a11y-slides-math/examples/7-example.html), codeblocks highlighted using [highlight.js](https://github.com/highlightjs/highlight.js)\n\nSee the [examples](https://github.com/cmhughes/a11y-slides-math/tree/main/examples) directory to download the files for the above.\n\n## changelog\n[changelog.md](docs/changelog.md) provides details of the history of the project.\n\n## acknowledgements\nThis project is based on the work of Utibe Udoma posted at [How to build a slideshow using HTML, CSS, and JavaScript](https://medium.com/illumination/how-to-build-a-slideshow-using-html-css-and-javascript-977ecbdbf48c)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmhughes%2Fa11y-slides-math","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcmhughes%2Fa11y-slides-math","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcmhughes%2Fa11y-slides-math/lists"}