Accessablity of Websites

There is a serious issue on the indie web of unaccessable websites, so the Accessible Net Directory was made to gather a collection of fully accessable websites, and give the guidelines websites had to furfill before they could be included. This is a list of the guidelines (which will also serve as a checklist for me to figure out how to impliment.)They are:

  • Site cannot have autoplaying video or audio
  • 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.
  • Site has proper color contrast for backgrounds, text, and links, as well as conveying information in more ways than just by color.
  • Site has clearly labeled warnings for graphic depictions of sex or violence.
  • Sites with high contrast light text on dark background/dark text on light background allow reverse contrast to be enabled.
  • Site uses scaleable units such as rem/em instead of fixed px units for font sizes.
  • Font is not overly small or hard to read by default, and uses all caps, italics, and bold sparingly.
  • Site uses proper semantic HTML and is navigable using solely a keyboard.
  • Site uses alt text and captions where needed, and text is screenreader friendly.
  • Site is functional on screens as small as 800x600 at least.

After those is the heavily recommended but not required parts:

  • Site is fully responsive and mobile friendly or has a mobile alternative to the site.
  • Site is functional up to 200% text zoom.
  • Site has built in switches/toggles for things like light and dark mode, different fonts, or movement and animation.
  • Site allows reader mode to be enabled for pages with large amounts of text such as essays, articles, blog posts.
  • Finally, here is a list of websites that can help you start the adventure of making a more accessable website.

    • Keyboard Testing This website helps you test if your website is keyboard accessable.
    • Enable Reader Mode This is a guide on how to enable reader mode on FireFox and Chrome.
    • Free Font A font designed with accessablity in mind.
    • ARIA Devtools A tool to show you how a screenreader will read the page.
    • Accessablity Checker A Firefox extension that checks the accessablity of your site for you.
    • How to Write Alt Text An informative guide on how to write alt text image descriptions.
    • PX to REM A tool to make using rem easier.
    • This was made with info I gathered from the Accessable Net Directory. In fact, most of it is copy and pasted. I recorded this here so I would have access incase the worst happened and it went offline. I'd highly recommend checking out their website for more information, including how to impliment these changes yourself.

    ==