Using Code Pen

Goal

This guide will walk you through basic features of Code Pen using a screen reader. When you complete this guide, you should know:

  • How to create and edit a pen–a code example using HTML, CSS, and Javascript.
  • How to change settings for your pen.
  • How to comment on a pen.
  • How to share a pen.
  • How to export a pen to your local system.
  • How to delete a pen.

This guide is written in a manner to allow you to use whatever screen reader you favor. This means that the guide will be telling you which features of your screen reader you will want to use–rather than telling you specifically what keyboard commands to use. To give you an idea of what I mean, here is a list of the screen reader features you will be using in this guide:

  • Navigating on a web page by headings, landmarks, frames, and form controls.
  • Interacting with form controls, like links, buttons, and textfields.
  • Identify the font size for a character or word
  • Refreshing the browse or document view in your screen reader.
    (For example, using JawsKey-ESC in JAWS and NVDA-F5 with NVDA.)

What is Code Pen?

Code Pen allows people to create code examples, using HTML, CSS, and Javascript, and share those code examples with others. Code Pen refers to these code examples as pens–and that is the terminology we will use in this guide.

Some of the things for which people use Code Pen include:

  • teaching others HTML, CSS, or Javascript techniques.
  • Demonstrate how to achieve specific effects using CSS or Javascript.
  • Share a code example with others in order to trouble shoot a bug.
  • Provide a way to have multiple people on multiple devices test code examples.
  • Showcase coding talent.

Creating a New Pen

When you are ready to create your first pen, you should go to Code Pen and click the link titled “+ new pen”.
If you have not created a user account and logged in, the page title will be “A Code Pen by Captain Anonymous”. If you have logged in before you create your new pen, “Captain Anonymous” will be replaced with your name.

General Pen Layout

Before we start creating your first pen, let’s get a mental picture of the page layout. Fortunately, the general layout of the page is pretty clean. We’ll start from the top and work our way down.

Banner Landmark

At the top of the page, you will find a banner region. Amongst the content it includes are the title of your pen, which is a level 1 heading, and some buttons that perform actions on the page. Right now, you will likely have just 3 buttons: “Save”, “Settings”, and “Change View”. As you start working on your pen, additional buttons will show up here.

HTML, CSS, and Javascript

After the banner section, there are 3 level 2 headings. These mark the main sections of your editor. Under the HTML heading, you will find all the elements related to editing your HTML. Under the CSS heading, you will find all the elements related to editing your CSS. And under the JS heading, you will find all the elements related to editing your–everyone say it together now!–javascript.

Each of these sections is lain out in a similar fashion. After the section heading, you will find some buttons related to that section. To start with, all three sections have the same types of buttons. There is a settings, tidy, and close button.

While the very first button in each section is always the settings button, they are labelled differently. In the HTML section, the button label is “Open Settings”. In both the CSS and JS sections, your screen reader will either think there is no label on the button or that the label of the button is “unlabeled 0”.
clicking any of the settings buttons on the page (whether it is in the banner landmark, HTML, CSS, or JS sections) will open the same settings section. We’ll go over the settings section later. The tidy button will tidy your HTML, CSS, and JS code and make it look neat. The close button will close that section of the page.

After the buttons, you will find an edit field. This is where you will enter your HTML, CSS, or JS code. There are a few things you should know about the edit field.
First, it is not labelled. If you navigate the page by edit or textfields, all 3 fields will be unlabelled. The best way to tell which field you are in is by locating the heading that appears above that field. Second, it can be difficult to edit text in this field. For this reason, I suggest creating and editing your code in the local editor of your choice (such as NotePad, NotePad+, or TextPad) and then copying and pasting the code into the edit field.

Below the edit field, you will find a listing of whatever code you entered in the edit field. This listing will include line numbers. It also appears that this listing may include some functionality, but I was never able to get it to work in an accessible fashion–so I am unaware of what that functionality might be.

Results Frame

After the JS section, you will sometimes find a frame. When you first create a new pen, the frame will be absent from the page. After you start writing code, the frame will appear. Depending on the settings you use, the contents of the frame will automatically be updated as you add more HTML, CSS, and javascript. The frame will have a name based on the URL, but since it is the only frame on the page you can just navigate to the frame without needing to know its name.

Content Info Landmark

At the bottom of the page, you will find a ContentInfo or Content Information landmark. This contains some links and buttons that also apply to the page. It includes functionality such as comments, sharing, and exporting pens.

Naming Your Pen

If you are not there already, move your screen reader’s focus to the top of the page. We are going to give your pen a name and description. After we do that, we will explore the Pen Settings section a bit.

After moving to the top of the page, locate the settings button in the banner region. Go ahead and click on this button.

A new section will open on the page. While the new section starts with a level 2 heading titled “Pen Settings”, your screen reader most likely will move focus to the “PEN TITLE” text field. Give your pen the title of “First Pen” and then tab to the next field.

The next field is the description. You enter text here that provides some kind of description regarding the pen and its purpose. Go ahead and enter some kind of description in this field. I chose to enter “This is my first pen.” as my description. Now tab to the next field. This is the tags field. You can enter tags for your pen here. This can help you categorize your pens as well as help others when they are searching for certain types of pens. You can enter a tag here if you wish. I won’t be entering a tag for my example. Now tab to the next field.

The last field is the template checkbox. We won’t be covering templates here. You can create pens that can serve as templates for other pens. Now, lets tab to the last control in this section.

The last control is a button labelled “Save and Close”. It is probably no surprise that clicking this button will save your changes and close the Pen Settings section.

Pen Settings

As mentioned earlier, when you click the settings button it opens up a “Pen Settings” section. The pen settings section starts with a level 2 heading that appears after the banner region. Typically, no matter whether you click the settings button in the banner region or one of the settings buttons under the HTML, CSS, or javascript sections, this same panel is displayed. Also, focus will be placed in the pen title field However, there is more to the Pen Settings section than the pen title, description, tags, and template fields.

If you are currently on the pen title field, switch back into browse or document mode (if you are not already in that mode. Now, move back one heading. This should place you on the Pen Settings heading. If you start moving down the page from here, the first thing you will encounter is a navigation region. This region consists of a series of links: HTML, CSS, JS, and behavior. If you click one of these links, new content will appear after the navigation region but before the pen title field.

When you click on the settings button in the banner or HTML sections, the settings related to HTML will be displayed. This may be obvious, but if you click on settings under the CSS section, it displays the CSS related settings. And the JS settings button will display the JS related settings in this same area. Clicking HTML, CSS, and JS will provide you with options related to those things. This will typically involve such things as pre-processor settings or the URL’s of external css or javascript files.

If you currently have the Pen Settings section open, go ahead and click the behavior link in the navigation section. Now, navigate pass the navigation region to the behaviour settings.

Here you will find 4 types of settings. The first 2 have to do with indentation in your code. You can choose to indent code using either tabs or spaces. You can also select how many tabs or spaces are used for each nesting level. When you click a Tidy button for a section, Code Pen will use these settings to indent the code.
Another setting allows you to save automatically. It is on by default. After the first time you click the Save button, Code Pen will make sure to automatically save the current pen at a certain interval. This helps avoid situations where you might lose your work either because you closed your browser or your browser crashed.

The last field is a checkbox labelled “Auto Update Preview”. By default, this checkbox is checked. This means that any time you add code to the HTML, CSS, or JS sections, the preview frame at the bottom of the page will update. If you uncheck this option, Code Pen will place a Run button in the banner region of the page (at the top.) You will need to click this Run button any time you want the preview frame to update.

Now, go ahead and click the ssave and close button, if the Pen Settings section is open.

HTML

Let’s go to the edit field in the HTML section. You can do this by jumping to the HTML level 2 heading and then navigating by forms control to the first edit field in this section. Once there, go into forms/application mode and type:

<h1>Hello World!</h1>

If you have trouble with the edit field, then open your favorite local editor and type the code there–then just copy and paste it into the editor on the web page.

Once you finish adding the code to the edit field, put your screen reader back in browse/document mode. If you continue reading, you will now come across a listing of the HTML code you have entered so far. The way this part works is that the line number for the code is read before the code.

If you turned off the “Auto Update Preview” option, you will now need to navigate to the top of the page and click the Run button to update the preview frame before navigating to the preview frame. If you didn’t change that option, you can just navigate down to the preview frame. Remember, it is the only frame on the page.

Now, take a look at the contents of the frame. You will notice that it has a level 1 heading titled “Hello World!”

CSS

Before you continue, you should use your screen reader to determine what the font size is for the Hello World! heading. Amongst other font information, my screen reader tells me the font size of the heading is 24 points. Next, move back up the page to the CSS level 2 heading. Now, move down to the edit field. You will want to add the following text to the edit field.

h1 {
  font-size: 64pt;
}

If you are using the Run button in your Code Pen window, you are now going to want to click it in order to update the preview frame. If you are letting Code Pen automatically update the preview frame, you are going to want to refresh your screen reader’s browse or document mode. For example, with Jaws you would press JawsKey-ESC and with NVDA you would press NVDA-F5. If you fail to refresh the document mode on your screen reader, you will not see the updated font size. This was the mistake I made the first time I used Code Pen. I spent about 15 minutes changing font sizes in the CSS editor before I realized why the font size was not updating in the preview frame.

Like the HTML section, if you move your screen reader focus to after the edit field, you will find a listing for the CSS you have entered. It will include line numbers.

If you now jump down to the frame, you will see that the font-size for the level 1 heading is now 64 points.

In case you are wondering, changes you make to the CSS code only impacts the contents of the preview frame and not anything on the rest of the page.

JS

Let’s now alter the contents of the h1 from “Hello World!” to “Yo Dudes!”. By now, you are probably getting the idea. We need to move our focus to the edit field under the JS section heading. here you will enter:

document.querySelector("h1").innerHTML = "Yo Dudes!";

For those of you not familiar with javascript, this code will search the document for the first occurrence of the h1 element. It will then set the innerHTML attribute value to “Yo Dudes!”

Like the previous sections, you will find a listing of the javascript code with line numbers after the edit field. Again, press the Run button to update the preview frame (if you have Code Pen set up that way.) If not, the contents of the frame are already updated. Take a look and you will see that the text has changed.

If you unchecked the checkbox for “automatically update preview” in Behaviors under the Pen Settings, you will need to click the Run button which will appear in the banner landmark at the top of the page. If you did not change this setting, the results of the HTML code will automatically be displayed in the preview frame towards the bottom of the page. Navigate your way to the frame. The name of the frame will be a URL. Just ignore this and browse inside the frame where you will now find a level 1 heading of “Yo Dudes!” You just completed your first pen!

Saving the Pen

This may be the easiest step yet. To save your pen, just click the Save button in the banner region at the top of the page. You may or may not hear a confirmation of the save. However, you can always check by looking for the save message down in the content info region at the bottom of the page. Typically, the message appears after the shortcut link and before the Share button.

Commenting on a Pen

Let’s go ahead and comment on your own pen. You do this by moving to the content info region at the bottom of the page and clicking the comments link.

Most of the time, it appears that when you click on the links in the content info region of the page, new content will appear on the page for that link after the preview frame and before the content info region.

In this case, there is an h1 after the preview frame with the title of the pen. It also tells you who wrote the pen, the pen description, pen tags, and displays any comments made so far. After this content comes the content for adding your comment. Go ahead and type in a comment. Perhaps something like “This is my very first attempt at creating a pen.” Now click the submit button after the edit field.

If you now move back up the page from the edit field, you will find an h4 titled comments. Your comment will now be listed under this section.

You can close this comment section by clicking the Close button that appears after the submit button.

Sharing a Pen

Now move back down to the content info region. Next find and click on the Share button.

The Share and Export buttons work a bit differently than the links in the content info region. Any time you click one of these buttons, new content appears after the button. If you move down the page after clicking the Share button, you will now find options to let you share your pen on Twitter, Facebook, Google Plus, and even text yourself with the link to the pen.

If you click the Twitter, Facebook, or Google+ links, they will open a new tab where you can add comments to the link you are posting. When you are done sharing your pen, you just click the Share button again to hide the options.

Exporting a Pen

If you click the Export button, you will see options for exporting your current pen. The export options allow you to do things like save the Pen as a gist on Github, download the pen as a zip file, or embed the pen on another web page. Again clicking the export button will hide the options again.

Deleting a Pen

I want to cover one more function on this page–deleting a pen. In the content info region, you will find a link titled “times delete”. You use this link to delete your current pen. It works a bit differently from the other links in this section. When you click it, an h1 will appear after the content info region asking you if you want to delete this pen. It will warn you that deleting the pen will also delete all associated comments and hearts.

Conclusion

While Code Pen provides many more features, you are now familiar with the basic features that will allow you to create and share pens. While the pen in this guide was overly simple and didn’t get into debugging pens, you now know the basics to get you started. If you found this guide useful, I would ask you to express your appreciation by sharing any tips you learn for working better with Code Pen with others.

Author: Tim Harshbarger

Leave a Reply