Blender Website Accessibility Audit

For this weeks assignment I have reviewed the Blender website with regards to the Web Content Accessibility Guidelines. I used the Chrome extension WAVE.

The results of the WAVE test are not exactly outstanding. At first glance there are 22 errors and a number of alerts and notes thrown in to boot.

Screenshot of Blender webite frontpage with WCAG errors overlaid

The errors all have to do with missing metadata: all of the image on the page are missing alt text, and there are a few links which do nothing.

Screenshot of Blender website listing detailed accessibility errors

The alerts are also of concern, since they point to a number of structural flaws in the page. The most notable alert is that the page doesn’t have an h1 tag. Given that the WCAG  suggest a strict heirarchy of information, the fact that the page does not have a ‘top-level’ of information is a cause for concern. The second alert notes that there are two elements which seem like headings (the “About” and “Get Involved” sections), but they are not tagged as headings. These elements are definitely headings of their respective sections, and should be tagged as such. The final alerts note a number of redundant links and text elements, where the same links or metadata are repeated twice or more. This creates unnecessary repetition for screen readers navigating the page.

Screenshot of Blender website with alerts overlaid

Finally, the additional notes on structure of the page point to further areas of potential difficulty for screen readers. WAVE points out three heading level 3s next to each other, although from the look of the page that structure makes sense since they are similarly-important sections. The system also points out that ordered lists should be used in cases where order of information in the list matters.

Screenshot of Blender website with structural notes

The real indictment of the website, however, happened when I actually tried to use a screen reader on the site, Windows 10’s built in Narrator. In comparison to the Microsoft Help page, the blender page is a lot more difficult to navigate. Without clearly defined ‘Landmarks’ it is difficult to navigate to the particular section that you would like, whereas on the Microsoft page clearly defined sections allow quicker and clearer navigation across the whole page. In addition, the lack of link descriptions becomes more apparent, when the narrator reads out “Link” with no more information. Finally, on the Microsoft help page is it relatively easy to navigate across the body of the page using the header tags (h1, h3, etc), but on the Blender site the only three header tags are arbitrarily in the middle of the page, so there is no way to use the headings scan function to quickly scan the content. Here is a screen capture of me trying to use various scan functions of the Windows 10 Narrator on the Blender website, occasionally switching to the Microsoft Help page for comparison.

2018-10-16 10-48-21

Overall, navigation on the Blender page with a screen reader is possible, in that you could search through every single item to find the one you want, or listen to the full url description for every link. However, the Microsoft Help page, although not perfect, makes it clear how important thoughtful structure and WCAG guidelines are. With clear sections, links that have helpful names, and without redundancies in title and link names, it is a lot less tedious to navigate the Microsoft page than the Blender page.

Visual Language Postcards Assignment

Part 1:  Poster Composition

Poster v1 Poster v2 Poster v3

Part 2: ITP Show Postcard draft

This design is a total shot in the dark. I wanted the initial grab to be simple and reflect the physicality of attending an ITP show; the playfulness. The image here is just a stock, I’m hoping over the next week to replace it with an ITP- specific image. I also, however, wanted there to be some depth; to describe the more intimate nature of the shows. Inspired by Danny Rozin’s mirror, I thought each pixel of the larger image could be made of the letters forming a variety of descriptive words about the show..

The code to generate the text-based background is on GitHub

The Most Useless Dataset

The prompt was simple: create an open-source data set and publish it to GitHub.

In an effort to make the world a less serious place the dataset that I’ve tried to create is an entirely useless one: it is a dataset of the people who have viewed the dataset.

That was the intention, at least. In it’s current state it’s barely a proof-of-concept, although I think I have carved most of the foundations for the project out at this stage.

The code lives here, and the (currently broken) resulting website lives here.

This project is a total experiment in the workings of git, GitHub, and servers. I’m running a node server on Heroku, which uses a GitHub repo of your server files to build your server.

The server is also running a node-based wrapper for git, so it sees itself as a git repo, a branch of the original. The server fetches data from the GitHub repo that it is built off (the original) and updates its local files based on that, while on the client side the raw.txt data is rendered on screen.

Finally, once a user navigates to the site, the server makes a change to its local raw.txt based on user information, commits it to its local branch, and pushes that to the remote branch (main branch/origin/master?). I have hidden my credentials in the environment variables of the server to allow  for authorised pushing.

The problem is it doesn’t really work that well. Partly because the way I’m updating files is a bit slow, and there seem to be chunks of data missing out, but mostly because I think something is going wrong with Heroku, node.js, git, and their interactions. The process works fine when I run it locally, but once I push to Heroku, although I receive no errors or crashes, the GitHub files do not update.

I’ve learned a lot about navigating git in the command line, so I don’t consider this a complete failure, but I’m a little disappointed that the final step in the process was the one that broke everything…

It’s a sign.

New York is a spectrum of signage, from aesthetic, informative, and concise information delivery systems to the most confusing array of seemingly random assortments of words and icons (the NYC street parking signs come into mind).

A short walk around the Village garners a number of examples from across this spectrum.

Blue poster with black text. Slightly crumpled

From within our own walls at ITP comes my first example; an advertisement for a class. I have blurred out names and the QR code for privacy.

The most striking aspect of this poster in its current state is how crumpled it is. Of course, once you release your poster into the ‘wild’ there’s not much you can do to protect it from such cruel acts of vandalism (intentional or otherwise), but I do think that it is important to consider the physical space(s) your poster will be, not just the content of the poster itself.

In this case, the poster is pasted haphazardly in a corridor that many people walk through, and on an electrical box that may require access. The placement itself is questionable as the poster may be subject to people brushing by in a rush, or people moving it to access the electrical box.

In addition, the untidy, ripped electrical tape that has been used to secure the poster does no favours. Perhaps this is a stretch, but there’s a concept in social behaviour known as the Broken Window Theory. Distilled down to its usefulness in this case, the theory suggests that visible minor problems encourage, or at least don’t discourage, more serious problems. I propose that in the case of the above poster the haphazard and untidy placement of the poster made it seem less of a problem once the poster was accidentally (or intentionally) crumpled.

In essence: the unintentional crumpled paper fits the aesthetic of the original ripped tape. Perhaps if the poster was more neatly placed, a passer-by would have more incentive to ‘fix’ the placement if they walk by and accidentally displace it.

The environment of the poster is not the only concern that I have with it. The design itself is, undiplomatically speaking, boring.  Three paragraphs of black text on blue paper. There are no graphic elements to catch attention, there is no information hierarchy save the top-down nature of prose, and frankly if the poster were not so crumpled I probably would have passed it by completely oblivious.

The only design element that I can vaguely comment positively on is the choice of yellow tape with blue paper. The hint of yellow does complement the blue background. That said, with such little thought put into the rest of the design I would not be surprised if this was nothing more than a happy accident.

Venturing outside we soon come upon another example of ‘bad’ design, or rather design that does not do well in capturing attention and conveying information clearly.

I do not yet have much experience with the NYC bus system. This bus stop signage is certainly not beginner-friendly. Perhaps there is some logic to this system that makes sense to transit veterans, but it is obscure to me.

What is clear to me, to be fair, is that the M101, M102, and M103 busses stop here. What is less clear is why “East Village” and “City Hall” are labelled with different colour codes. I assume they are the end point of each bus line, but that is not explicit.

What is far less clear is the sign on the top. There is an arrow pointing towards the street, perhaps indicating the boarding side (which seems redundant given the placement of the sign), an accessibility icon on the other side of the bus (does that mean the accessible entrance is on the left?), and a large red banner indicating “No Standing“. Does that mean no standing at the bus stop? That seems confusing since it’s a bus stop. Perhaps the message is for cars? That is not made clear.

A design that I take a little more kindly to, even if I think the message is off-putting, is this no cycling/skateboarding sign.

It is simple and conveys its message. It understands its environmental context – that it must quickly convey clear instructions to many rushing people.  Perhaps the text is a little redundant given the icons, but the case could be made that the icons are there to catch the attention of passers-by, and the text clarifies the message.

Certainly the aesthetics could use some work; there seem to be three different typeface-spacings on such a short sign. But at the very least this sign conveys its message clearly.

Finally, I came across this instructional sign on the ubiquitous Citibike. I have never used Citibike, but I found these instructions far more clear and beginner-friendly compared to the bus sign I mentioned above.

There are clear, concise instructions central on the dock, with extra information supported by consistent icons to the sides.

On the bike itself is one key piece of information, supported by an easy to understand graphic.

Open Source Responsibility

The uniting theme that I noticed among this week’s many readings is the idea of responsibility.

The Joreen piece speaks of the responsibility of a movement or group to structure itself in a manner most beneficial to the movement itself, not just the elite within the movement.

The Turner interview spans many varieties of responsibility, from the responsibility of engineers to consider the ethics inherent in the tools they design, through the responsibility of society to recognise tech institutions such as Facebook as potentially huge threats to political power distribution, to the responsibility of art and artists to provide a cultural compass in times of political turmoil, and many more examples.

The Choi article covers the short term responsibilities of creator communities to consider the networks and institutions they build, as well as the longer term responsibilities of the same to act as “cultural stewards” for future generations.

In contrast to the vast sweeping nature of the other articles, the Kulkarni guide lays out the specific responsibilities of submitting code to a project.

That’s a lot of responsibility to put on one person. How can one individual both consider what specific emoji to use that will convey polite dissent, as well as contemplate how their pull request will be interpreted by an Ethics of 21st Century Code high school class in year 2318.

The answer is that they can’t, really. All these pieces, even the relatively straightforward code submission guide, read to me in the spirit of ‘best intention.’ There’s no one way to build ethical institutions, there’s no one way rage against the evil machine. It’s as if they collectively say “at least give it a shot, with humanity’s best intentions in mind, and you’ll be on the right track.”

Of course each author has a different way to go about this ‘best intention’; a different contribution so to speak. By publishing their considered thoughts on accessible media, they are each contributing to a growing resource on responsible use of technology.

I see these four vastly different articles as submissions to an Open Source Responsibility project. By no means are these the only submissions; I’m sure we could find many more different considered opinions on the ethical use of technology. Perhaps this project in its current state would be considered unstructured by Joreen. Or, perhaps Choi might say the project has a very organic distribution. That is not the point. 

The point is, however indefinite the bounds, there seems to be a call across the open source world to truly reflect on how the ideology and practice of open source can and will change current institutions, and shape future ones.

What will your contribution be?