This is my personal website that I started building in 2020 to further my understanding of accessible web development. Its's built from scratch using Gatsby and is a constant work in progress. If you have any suggestions for improvement, I'm happy to hear them!
Fix the height issue on mobile devices where the vh is smaller than computed and content is hidden behind the navbar- Make the embedded pdf of my resume accessible to screen reader users
- List some of the intentional choices I've made to improve site accessibility on my accessibility page
- Atkinson Hyperlegible
- Accessible color palettes
- Focus indicators w/ focus-visible pseudo class
- Add an easily-accessible way to contact me (like a form or smth)
- Figure out if/how to add skip links back in
- Create a way to automatically display and filter cool sites/resources on the resources page
- Make sure the default font size is 16px, 18px, or 20px
- Keep line lengths around 70 characters at most by setting
max-width: 70ch;in the css - Add AAC Shim to this site to improve the experience for users of AAC
Give the mobile and web navbars the tag or otherwise specify that they are nav elements to make them more accessible- Make sure all images/logos are svg elements and not font glyphs, which are very inaccessible
- Redo landing page with a photo of ME !
- Add animation for navbar links
- Add an option to switch the site to the dyslexia-friendly font
- Upgrade npm packages/dependencies
- Add a page with they/them pronoun examples and FAQs
- Use info from https://lgbtresourcecenter.uccs.edu/pronouns-101
- https://brucelawson.co.uk/
- https://www.matuzo.at/
- https://www.tatianamac.com/
- https://cariefisher.com/
- so, so, so many more
- flash of light when loading page
- especially noticeable on dark mode
- common issue, should be an easy fix
-
Start developing with Gatsby.
Navigate into your new site’s directory and start it up.
gatsby develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.
Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:
-
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
-
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.