How Sightless Chef is Implemented

Sightless Chef is made with Flask MongoSQL and hosted on Heroku.

Front End

HTML

Sightless Chef follows the w3c standards of accessible html formatting.

Our webpages have all links descriptively marked, and follow accessible heading protocol. Each page has only 1 heading level 1, and the following headings categorize appropriately between heading levels 2 and 3. Users should be able to use screen reader hotkeys to jump between sections of each page.

Equipment, ingredient, and procedure lists are all html ordered lists, input through a standardized form interface. Screen readers easily navigate separate items in lists, so users can navigate recipe and tip needs with ease.

Supplemental media is linked via YouTube, which has standardized interactions. This is embedded with a link in the html.

CSS

Sightless Chef uses Skeleton css. This is a minimalist package that takes a mobile-first approach to webpage styling. We avoided cluttering our website with extra icons and elements that would be noise when read via screenreader. We only use css for font control, spacing, and flexibility for mobile devices.

Skeleton creates a grid-based layout of 12 columns based on screen percentages. This makes skeleton pages flexible for mobile devices, because the display updates to accomodate the smaller screens of mobile devices. We have a navigation bar that takes up 3 of these columns, while the main body of the page is assigned to the remaining 9 columns. On smaller mobile devices, these proportions stay the same, but the header moves to the top of the page, while the body text wraps for a smaller screen.

layout.html contains a header that imports skeleton.css and normalize.css for all pages. Our GitHib repo has Skeleton imported into app/static/css/. You can read more about Skeleton at getskeleton.com.

Back End

The back end server of Sightles Chef is written in Python using Flask.

Once a recipe or tip has been submitted, some postprocessing of the submission is done on the backend in order to automatically format the recipes to be more accessible. This includes changing fraction symbols into full words that can be read correctly by a screen reader. For example, one half is commonly typed as 'one slash two', which is how a screen reader interprets the text instead of saying the more natural 'one half'. Screen readers also do not naturally read out fraction glyphs. We also automatically format ingredients, equipment, and instructions into lists on the back end and create embed codes for YouTube video links. Recipe and tip pages are generated dynamically by the back end upon navigatng to the correct url, instead of each page being stored individually.

Database

Sightless Chef uses a flask module known as Flask-MongoAlchemy to interface with a mongo database hosted by mLab. We have two main structures (known as documents) stored in this database: Recipes and Tips. As the user uploads information, searches the website, and looks at content, these documents are fectched from the database and displayed. Some information—such as recipe and tip names, description, and difficulty—are required, whereas others may vary.

Documents are referred to by their unique ID, which is assigned when a new document is saved to the database. This lets us link tips by connecting the tip ID with a line in equipment, ingredients, or instructions. It also allows us to have unique URLs for each tip and recipe without actually creating individual pages for each, instead displaying the referred-to recipe in a template.

Mongo allows for flexibility in the schema (general database struccture), so going forward, accounts could also be created and stored as documents, which would let us do things such as limit editing to moderators and the original submitter, favorite recipes, and submit comments.