Story
Accessible Coding: What’s Out There?
In this article, I look at three web applications to try to assess how usable they might be for people with visual impairments.
Coding is a lifestyle. In today’s digital society there are literally thousands of resources to learn the craft. Whether it be the code that controls the stuff you “see” in the form of HTML, CSS & JavaScript, or the back end languages like Ruby, Python, C# et. al, which power things like databases and applications, you will find an online course of some description that claims to teach all to you.
But what if you are really interested in the discipline and are visually impaired? What online resources are there that might be beneficial for you? Are there any that are inclusive, accessible & usable by every user of any ability? Unfortunately, due the inherently visual nature of a great deal of these programming courses, and the use of interactive graphical media, they mostly tend to not be that accessible.
In this short article we’ll look at three sites dedicated to teaching code – Codecademy, Free Code Camp and HTML Dog – with particular focus on how usable they are for people with vision loss.
Testing Metrics
In the interests of full transparency from the outset, let me just say that there is no specific industry-recognised test being utilised here. This is purely a user experience activity, an attempt to get a “feel” for the site – purely my own personal opinion on the matter. Saying that, I do try to assess with respect to the POUR ideology:
- how perceivable is the site? (does it make sense to me?),
- how operable it is with keyboard/zoom/screenreaders?
- can I understand what is going on while I navigate?
- How robust is the website / web application? (Is it susceptible to crashing?)
In terms of technology, I’m running Windows 10 professional on a 21 inch display and I have NVDA installed as my screen reader of choice. My browser of choice is Firefox which has only recently been updated to version 51. As a quick aside here it’s useful to know that NVDA is hard-coded to work best with Firefox while JAWS is hard-coded to work best with Internet Explorer.
Regarding magnification, I generally just use the built-in zoom feature which is available on all desktop computers and can be used by holding the CTRL key and pressing the equals and minus keys to zoom in and out respectively. I use CTRL + 0 to return to default view size. So with that all in mind, let’s get testing!
Codecademy
One of the oldest and most respected ‘learn code’ sites on the web today is Codecademy. This site actually helped me, a sighted coder, to start my journey into the big bad world of programming and techspeak many moons ago
Codecademy has gone through some upgrades over the last few years and I’m sorry to say this is actually to the detriment of those who are blind or experience low-vision. It has now become what we might deem a visually interactive web application, with a great deal of information packed into a number of byte-sized lessons. Basically, you’ll need to use your mouse to be a functioning user.
There is a lot going on here. On the leftmost third of the screen we see the instructions, the text editor is positioned in the middle and on the right the output of the code, allowing you to experience the changes in real time.
Default View
Magnification
From a visual perspective it’s okay. There are good contrasts in the main instructional section (although the headings could be more defined), with a clever choice of colors within the code window. Depending on the lesson you are on, the color contrasts in the output window are not the best.
In terms of responsiveness I’m sorry to say that Codecademy fails miserably. At default zoom size we can see an even split between the three sections. However, as we begin to increase the zoom factor by using the quick shortcuts mentioned above, we can begin to see the issues. At 200% zoom the text begins to become squished, especially in the code window. At 240% zoom is where the real problems begin to occur – the content begins to break the screen.
200% Zoom
240% Zoom
Screen Reading
A handy tip to assess how a screen reader will traverse through a particular webpage is to turn off all styles and strip the content back to just its plain HTML code. This is quick and easy to do and is useful for possible lesson planning etc. Turning off styles can provide sighted educators and parents with insights into how the website is laid out from the perspective of a screen reader user.
To do this in Firefox (with a webpage loaded):
- Press ALT + V.
- Press the down arrow key on the cursor keypad 3 times to bring focus to the styles menu heading.
- Press the right arrow key once to open the submenu. Select “No Style”.
The point of turning off the styles is useful in order to establish how perceivable and operable the site will be with NVDA. The styling code, known as CSS (Cascading Stylesheets) is (or should be) used purely for presentational purposes. The meaning of the website should be conveyed purely by the HTML. Essentially, a user should be able to gain the same information and understand it when styles are turned off to the same extent as they would when styles are turned on.
With respect to Codecademy, this is what it looks like. Bear in mind here that the screen reader will traverse through these lines of text one by one. There is a great deal of mess before we actually get the to the content.
As we can see above, the instructions are clearly displayed. In this particular exercise the student is asked to type a name between the
and
tags, denoting a heading. The problem is that this information is in the second half of the webpage – essentially, a screen reader will need to navigate through all of the other spurious content before it arrives at the point of the exercise.
I then ran NVDA and attempted to navigate the site. Tabbing from the address bar brings me to the page title and then into the editor window. Unfortunately all announcements which follow are :blank, blank, blank. I tried to use the “NVDA + F7” (CAPS LOCK + F7) shortcut to bring up the element list dialogue. Unfortunately there are no useful elements (links, headings) within the page (as demonstrated by the initial screenshot above).
So in relation to Codecademy I can say that it generally it’s not the best from the point of view of a magnification user or a screen reader user looking to explore the world of code. It is usable but just not to a large extent.
Free Code Camp
With Free Code Camp, my hopes were higher. This website is part of a global movement to teach individuals to learn to code JavaScript – the language of the web – and includes introductory modules on HTML, CSS and other related matters. It has been running as an open source movement for a number of years and there is a great support community. As we can see from the image below, the layout is similar to that of Codecademy. The page is split into three for instructions, a textual code editor and visual output. I particularly liked how the text editor is given a bit more screen real estate in the default view.
Magnification
Using the same tools as before, I checked for responsiveness when zooming. Free Code Camp is much more responsive and the text reflows to fit the window regardless of size. Once we hit 200% zoom, the content moves from a horizontal layout to a vertical one. The text editor and output windows slotting in below the instruction area and each other. At 500% I was still able to garner meaning from the content. This was very impressive.
Screen Reading
Free Code Camp performs better than Codecademy in this area too. The site has been set up using a variety of links and headings which work very well with NVDA. Navigating through the site using a variety of techniques, such as “NVDA + F7” element lists method and associated navigation with the headings quick keys (the letter “H”) provide for a better experience. The one downfall is that when an exercise is loaded from the menu, screenreader focus is within the text editor area and the user is greeted with “edit multi line” before even knowing what they are required to do. This will mean that the user will need to perform some navigation tasks to assess where they are within the site before proceeding.
HTMLDog
In stark contrast to Codecademy and Free Code Camp, HTML Dog provides all the functionality and features necessary for multi-modal access to a coding curriculum. The website aims to teach html (content), css(styling) and javascript (interactivity) to beginners in a fun and accessible way. It is predominantly text based with links to the various sections clearly identified, while images are used sparingly within the site. On initially loading the webpage users can identify that is it only the information that you need to see – no fancy graphics and layout techniques are used. Such as website should be very useful.
Magnification
It performs well. As we increase the zoom factor the text begins to reflow, adapting to the viewport surrounding the content and not breaking the screen. The use of breadcrumbs at the top of each page is a really useful feature as from a cognitive standpoint it provides a useful roadmap of where the user has been and how they have navigated to the page.
Default View
200% Zoom
Screen Reading
From the perspective of a screen reader user, I can say that HTML Dog is very usable. The inclusion of “skip to navigation” & “skip to main content” alongside the breadcrumb maps show that the designers of HTML Dog had usability and clarity at the forefront of their minds when setting up this site. The proper use of heading structures and paragraph layout with no fancy graphics is a useful one. When I turned off all styling page it was interesting to see that the intended meaning of the website is not lost. This is where HTML Dog excels. It’s not flashy and it’s not interactive. It’s just a learning resource. And a great one at that.
Any proficient user of a screen reader will easily be able to navigate around the website with relative ease. As in any website, some time will need to be spent on getting to know the ways in which each page is laid out. But once you load that “elements list dialog” menu by pressing NVDA + F7, the friendliness of the website for screen reader users is immediately revealed.
In terms of negative things that may cause some confusion there is a fair bit of advertising on the page. This is natural though; another way for the site to keep itself running. The advertisements are not intrusive nor are they flashy. As they state in the about us area, they want you to “enjoy playing with the website” and therefore have set it up in the most enjoyable and accessible ways possible. I really liked how there are specific advanced sections on making links and forms accessibly for users with disabilities.
By Dan
