Accessible Net Directory

Section one of the guidelines is mandatory for all sites listed on the directory. They ensure user safety and are basic accessibility steps everyone should be taking. Click on each item to understand their significance and learn how to apply them to your own site. (for keyboard users: skip directly to section two)

• Site can not have autoplaying music or video. (click for more info)

  • Autoplaying media can startle, distract, and confuse people with disabilities, while also interfering with screenreading software and hindering site navigation. Additionally, videos containing flashing or rapidly movingimages can pose issues for people with motion or photosensitivity.
  • “Why Autoplay Is an Accessibility No-No”
  • W3 Understanding: Audio Control
• Site can not have quickly moving/brightly flashing backgrounds, text, or images unless they are hidden or separated from main content and preceded by a clearly labeled warning. (click for more info)

  • Flashing lights and rapid motion on your websites can be an issue as they can result in eyestrain, distraction, confusion, nausea, migraines, oreven seizures. Please use them with caution. Note that providing a general warning for the entirety of your site does not meet this criteria.
  • W3 Understanding: Three Flashes or Below Threshold
  • W3 Understanding: Animation from Interactions
  • MDN Web Docs: Web accessibility for seizures and physical reactions
  • “Designing Safer Web Animation For Motion Sensitivity”
  • @media (prefers-reduced-motion)
  • Building a website like it's 1999... in 2022
  • Code for starting and stopping images on hover or click (let me know if you have issues with this)
  • Gif speed changer and gif loop count changer
  • How to use a details element to hide gifs by default (code snippet)
• Site has proper color contrast for backgrounds, text, and links, as well as conveying information in more ways than just by color.(click for more info)

  • Color contrast is crucial for individuals with low vision to distinguish text from backgrounds and links from regular text. Additionally, it is important to avoid relying solely on color for conveying information.
  • W3 Understanding: Use of color.
  • W3 Understanding: Contrast (Minimum level AA) and W3 Understanding: Contrast (Enhanced level AAA)
  • Color contrast checker and another color contrast checker
  • The contrast triangle (for checking contrast and accessibility of links with and without underlines )
• Site has clearly labeled warnings for graphic depictions of sex or violence. (click for more info)

  • NSFW sites are allowed on the directory and will be marked as "Mature", but it is generally good practice to provide specific warnings so that anyone viewing your site will know what to expect, and if they wish, to avoid your site or certain parts of your site.
  • How to use a details element to hide potentially triggering content.
• Sites with high contrast light text on dark background/dark text on light background allow reverse contrast to be enabled. (click for more info)

  • For various reasons, people can find certain color schemes difficult to read on or look at for long periods of time. For this reason it is good practice to allow people to view your site in reversed contrast, or alternatively, to have a dark/light mode version of your site built into your css.
  • CSS Variables - The var() Function
  • “How to Give Your Website a Dark (or Light) Mode With CSS”
  • “Light/dark mode done fast”
• Site uses scaleable units such as rem/em instead of fixed px units for font sizes. (click for more info)

  • Users with low vision may need to increase the size of the text in order to be able to read and see better. Therefore it is important to always use scaleable units for text. More info on using zoom in the next section.
  • “The amazing em unit and other best practices”
  • W3 Understanding: Resize Text
  • “Pixels vs. Relative Units in CSS: why it’s still a big deal”
  • px to rem converter
• Font is not overly small or hard to read by default, and uses all caps, italics, and bold sparingly. (click for more info)

  • It's important to choose fonts that are easy to read, as some may pose challenges for people with low vision or cognitive issues like dyslexia. Additionally, excessive use of bold, italics, and all-caps can hinder readability. To avoid confusion, text-transform should be used when using all-caps to prevent misinterpretation by screenreaders.
  • How to choose a font for accessibility
  • WebAIM: Typefaces and Fonts
  • Download Atkinson Hyperlegible and Intel One Mono
• Site uses proper semantic HTML and is navigable using solely a keyboard. (click for more info)

  • Some people may use their keyboards along with tools like screenreaders to navigate websites. It is important for these people to be able to navigate the website without the use of a mouse.
  • W3 Understanding: Keyboard Accessible
  • WebAIM Keyboard Accessibility and Testing
  • Keyboard Access: Testing, Examples, and Keyboard Traps
  • MDN Web Docs: HTML elements reference
  • “Don’t forget keyboard navigation”
  • “The right tag for the job: why you should use semantic HTML”
  • HTML semantics cheat sheet
  • “Accessible JavaScript: Beyond the Mouse”
• Site uses alt text and captions where needed, and text is screenreader friendly. (click for more info)

  • People who use screenreaders should not only be able to understand the text of a site, but also have context for and understand any pertinent links, images, videos, or audio. An empty or null alt tag (ex: alt=“ ”) should be used for purely decorative images.
  • “How To Write Alt Text and Image Descriptions for the Visually Impaired”
  • >“Alt-texts: The Ultimate Guide>”
  • “How To Write Alt Text For Amateur Art”
  • Hiding Content from Screen Readers (Good for ASCII art)
  • “Writing good alt text”
  • “Bring on the tables” (How to use tables in an accessible way.)
  • Setting up a screen reader testing environment on your computer
  • Screen reader testing. (Note that sighted people might still make mistakes and not notice things a person who relies on screenreaders might.)
• Site is functional on screens as small as 800x600 at least. (click for more info)

  • Having a fully responsive site is ideal, but a good place to start is by making your site functional on screens as small as 800x600. Not everyone has large screens and disabled individuals rely on touch screen devices for accessibility. A site that works on 800x600 screens will usually function fairly decently in mobile browsers set to desktop mode. More info on responsive design in the next section.
  • Responsive Design checker
  • Accessible hamburger menus
  • Open responsive design mode in Firefox and Chrome.

Section two of the guidelines covers accessibility features that may require additional effort or may not apply in some cases. As such, these are heavily suggested, but not immediately mandatory. However, we ask that anyone joining the directory not settle for doing the "bare minimum" Again, no site will ever be 100% perfectly accessible, but it's important that we still make an active effort towards making indie web spaces more inclusive to people with all needs. (for keyboard users: go back directly to section one)

• Site is fully responsive and mobile friendly or has a mobile alternative to the site. (click for more info)

  • As was mentioned before, it's very important for sites to work on various screen sizes,including smaller devices like tablets or smartphones. In my opinion, most indie sites can be made fully responsive and mobile friendly without a separate mobile site, which may lack effort or style compared to the desktop version. Be mindful of your choices to provide equal quality to people using smaller screens.
  • Mobile Accessibility at W3C and How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
  • MDN Web Docs: Responsive design, Basic concepts of flexbox, and Viewport Meta Tag
  • W3 Schools HTML Responsive Web Design - Introduction and Responsive Web Design
  • Flexbox Froggy
  • “Your Website Needs to Work on Phones” + retrofitting a layout for mobile
• Site is functional up to 200% text zoom. (click for more info)

  • We established how using scaleable units is crucial for people with low vision to be able to view websites. However, if a site breaks or requires horizontal scrolling when the text size is increased for someone with low vision, the purpose is largely defeated. Having a site be responsive can help, but it's still important to ensure that your site works well at up to 200% zoom.
  • W3 Understanding: Resize Text and W3: Reflow
  • Check your design with text size increased to 200 percent
  • How to change your font size in Firefox and Chrome. Note that you are changing the FONT size, not simply zooming in on the page.
• Site has built in switches/toggles for things like light and dark mode, different fonts, or movement and animation. (click for more info)

  • Offering users the choice to customize their website viewing experience using toggles/switches is helpful. However, these tools usually rely on Javascript which can break or be disabled by users. Therefore, it is important to present them as an option and not as a replacement for other accessibility measures.
  • Kalechips' styleswitcher
  • Dark Mode Revisited
  (Javascript Dark/Light mode toggles, NOTE: to make this keyboard accessible, the switcher should be a button element, not a link element as shown in the tutorial)
  • Start and stop gifs on button click (let me know if you have issues with this)
  • Font changer HTML and Font changer Javascript (to be used together)
• Site allows reader mode to be enabled for pages with large amounts of text such as essays, articles, blog posts. (click for more info)

  • Even if your site follows all of the above guidelines, there will still be some people who find some layouts distracting or otherwise inaccessible when trying to read. Allowing reader mode to be enabled lets people see just the text of the page, resize and change fonts as needed, and even have the text read aloud.
  • How to enable reader mode in Chrome and Firefox
  • Please Let Me Use Reader Mode
  • Web Reading Mode: Title, author, and date metadata extraction (about reader mode in different browsers)
  • Design for reading: tips for optimizing content for Reader modes and reading apps
  • Building websites for Safari Reader Mode and other reading apps.

Note: Sites made by TERFS, MRA's, and all other people who devalue groups such as LGBT people, women, people of color, sex workers, and other vulnerable groups need not apply. Sites containing illegal and immoral content such as the sexualization of minors and romanticization of abuse, or supporters of that content are also not allowed.

Still confused about any of these requirements or want to know more about accessibility as a whole? Check out our Resources page where you can find all the links from this page and more or reach out to the admin through any listed methods of contact.