Colophon

Thanks #

The creator of this site is indebted to The Ilinois Braille Series and their braille instructor as well as Andy Bell for his incredible 11ty course. Without them, this site wouldn’t exist as it currently does.

Braille Resources #

Typing and editing in Braille #

• Braille Blaster : text editor to convert print to UEB, including Nemeth
• Braille Zephyr: Allows one to type using six key entry. However, be warned, JAWS will read the keystroke entry and not the dot entry (ex: f is dot one which by itself is the letter a however JAWS will read f to you).
• PerkyDuck by Duxbury: Allows for six dot entry and JAWS will read the input correctly but it does not work well with JAWS 2022.

Braille References #

• Braille Authority of North America
• Nemeth Tutorial
• UK Association for Accessible Formats Braille Chess Code and Layout

Displaying Braille on your website #

1. Download Simbraille and add it to your website assets.
2. Add this line of code to your CSS file

@font-face {
  font-family: "simbraille"; // name of the font
  src: url("src/css/SIMBRL.TTF") format("ttf"); //the text before simbrl.ttf //is the location of the font yours might differ
  }
.braille {
  font-family: 'simbraille'; //font
  font-size: 26px; //font size Braille consists of dots so the general rule 
  // is to have this be larger than your print font
  color: black; // this is the color of the braille dots
}

In your html file, wrap any text you want to show in braille in a braille class

<div class="braille">
    hellow world
    </div>

@font-face {
  font-family: "simbraille";
  src: url("/css/SIMBRL.TTF") format("ttf");
  src: url("/css/SimBraille.woff") format("woff"),
url("/css/SimBraille.woff2") format("woff2");
}

Resources for the Web #

• Creating a Simple Search Filter
• Custom Ordering of Items for 11ty
• Learn Eleventy From Scratch
• Tatiana Mac’s Beginner’s Guide to Eleventy Part 2
• Free Code Camp
• Brad Traversy’s Git and Github for Beginners
• Atlassian Bitbucket Guide to Git and Version Control
• CSS Grid Guide

Site Creation #

Assets #

• Simbraille by Duxbery
• Atkinson Hyperlegible
• Spectral
• Palanquin
• TailwindCSS

For testing #

• Google Developer Web Tools
• Firefox Web Tools
• Responsively for testing the responsivenes of a site. I also use an Ipad, ThinkPad and a Google Pixel
• Wave for visual accessibility.
• NVDA for accessibility for low vision and blind.
• JAWS
• I try to make sure the site looks and works decently accross Chrome, Firefox, Edge and Safari although this site does not support IE.

Plugins #

• Table of Contents
• HTML minifier
• Footnotes
• Markdown-It

Build #

This site is styled using TailWindCSS, built with 11ty, hosted on Github and deployed with Netlify.