This repository contains exercises for the Reaktor Way of Accessibility -workshop.
In CodePen, you'll want to create a new Pen. After the Pen is created, navigate to the bottom left corner and click on the "Assets" button. Here, you can upload all the static assets required for the exercise. Make sure your assets are all below 5MB in size before uploading. The assets are also shared between pens, so it makes sense to use same assets across multiple exercises.
After uploading the assets, you'll want to go back to the main pen view, and copy paste your HTML, CSS, and possible JavaScript into the editor. For the HTML, only use the markup inside the body tag.
Now for the most tedious part of this process, linking the assets. Open the "Assets" view again. Next to each of the assets, there is an option to "Copy URL". For images, you can also copy the img tag directly, but I found it easier just to copy the image URL and replace that in the HTML. For custom fonts, you'll want to replace the src property of the @font-face definition in the CSS file.
I found it easiest to just copy all the URLs in the Assets view into a notepad, and then go back to the main view of the Pen, replacing all of the URLs of the assets in the HTML and CSS. This prevents a lot of the back and forth between the Assets view and the Pen view.
After this, your images and fonts should be showing, and the Pen ready to be shared!