Getting started

Overview:

Reading time: 7 minutes

Content warnings: None

Content Summary: “This post details the setup of the Axis research project’s website, including accessibility-focused design, data visualizations for accountability, a glossary for knowledge sharing, and the challenges of managing scope and inclusivity over the project’s timeline”. Summary generated by chatGPT 4o.

---

I worked this weekend to set up the website. I was excited to start and relieved that we received the funding to allow me to do this work and engage others throughout the next 52 weeks.

A new website – process and setup

I started by taking the grunt.ca CSS and doing a review against WCAG 2.1 best practices.If possible, I would maintain a common brand look and feel. Once finished, I popped my new CSS into a chatGPT session and queried:

Kay: I have created the subdomain axis.grunt.ca as a play on access x ai x art. I mean to organize it such that my subdomain site has a visual similarity to grunt so that the brand is recognizable but to build from the ground up, a new commented stylesheet that focuses on screenreader readability, leverages ARIA and the WAI best practices, and that may create a framework from which a new website for grunt.ca could be modelled.

I would like to begin by cleaning up this css so that it is readable, identify any redundancies, identify any selectors that overwrite other selectors (and understand why) and begin commenting the css for clarity. Can you assist with this task?

ChatGPT 4o: I can help with your request to clean up and prepare the CSS file for your subdomain. Here’s how we’ll proceed:

1. Readability: We’ll structure the CSS with proper formatting (consistent indentation, grouping related styles) to make it easier to follow.
2. Commenting: I’ll add comments to clarify the purpose of different sections and rules.
3. Redundancy Identification: We’ll identify and consolidate redundant styles, ensuring there’s no unnecessary repetition.
4. Conflict Analysis: We’ll identify selectors that overwrite others, explaining why and how to handle conflicts.
5. Accessibility Enhancement: We’ll add comments or adjustments for ARIA and Web Accessibility Initiative best practices where applicable.

Let me start by analyzing the file and organizing it.

Once I completed this initial CSS review, I decided to stick with the Twenty Twenty-Five WordPress theme. Reading the documentation, I saw that ARIA tags were employed (when needed), and it was tagged as accessibility-ready. This generally means less work to customize and get to an AA level of conformity to WCAG 2.0 standards. With a new WordPress and a clean theme installed, I reviewed my custom CSS pulled from grunt.ca. Sadly, there was little I could keep from the grunt.ca website. Even the colours failed to pass most of the WCAG contrast practices. So, while I have kept some hues, I have settled on making this website its own thing.

Accountability

grunt gallery published an accessibility statement last year. I reviewed it, and then set to building my statement for this project and website. You can read my statement on this page.

Next, I set about authoring this project’s “about” page. I knew what I wanted to accomplish, but looking back and forth between the blank page and the sprawling, multi-page grant worksheet we had submitted last summer, I wasn’t quite sure what to share so early in the project. How would I tackle this project, especially as I moved into the middle and my energy began to flag? What if I became overwhelmed by the amount of information I needed to digest while constantly being outpaced by new technology?

I made a list of the challenges I anticipate facing as I move forward:

• How do I ensure active participation from underrepresented communities while managing their diverse needs and schedules?
• How do I respect my own access needs and energy?
• How will I identify and mitigate biases in AI tools?
• How will I identify my own biases?
• How can I adapt inherently biased tools to be genuinely useful for disabled and capital d Disabled artists?
• How will I balance the project’s ambitious goals with funding and resource constraints?
• How will I balance my excitement and open-minded approach to AI with the genuine fears felt by my peers?
• How will I remain agile as new AI technologies emerge during the project’s timeline?

The project sprawl seemed like the best thing to tackle first. By setting scope, I could make a wishlist, and when things start to spiral or get too big, I can put wants and hopes there to either sustain this project in a new phase or hand this off to other people in our sector who are doing this work. My scope is a year – what can I do in a year? What are my primary goals beyond testing the hypotheses I had named in my grant worksheet?

After a bit more thinking (and more notepad scratch lists – my way of thinking through ideas), I distilled it down to two outcomes:

1. Learn more about how AI and automation have addressed and are addressing access while working with artists and arts workers with disabilities, Disabled artists, and Deaf members in my community.
2. Share what I learn.

From there, I got a little nerdy. I, like many sighted folks, enjoy good data visualization. I redefined my two project outcomes as “Improved Understanding” and “Sharing Findings” and created task lists on two pages. These are organized as unordered lists with the bullets styled through CSS classes to either show as in progress or completed, which also drives the javascript behind my data visualizations on the front page. As things are checked off, the accountability charts on the front page show an increase towards completion. As I add items to and complete things on the list, the numbers will shift back and forth. I’ll also link to specific blog posts within these lists as I explore each task and goal.

My goal is 100% completion. We’ll see how things are going in 30 or so weeks into the project. Since time is both a container for this project (I have funding for a year), and an antagonist (aka: where does the time go or what even is time?), I also created an hourglass data visualization on the front page.

Glossary

Since reading this article in the New York Times (behind their paywall), I have wanted to employ an embedded glossary system. To start, I intend only to use it to define acronyms or words that are more challenging as I attempt to share knowledge using simple language at a grade-12 reading level. However, as we go, I am curious about the ability to embed ASL and how that will affect screen readers. For non-English words, I want to try embedding audio with a pronunciation key and again see how that affects assistive technology.

I previously employed tooltip javascript on my personal website, which was a mess. It would work for voice-over but would break up the content visually depending on the browser. I removed it, briefly explored using the <aside> element, and have since started adding content directly into the main text. This leads to extremely lengthy texts and challenges the definition of “simple language” as I trade concise and specific vocabulary for sprawling but expanded definitions using short and simple words.

The plugin I have chosen also allows me to connect to chatGPT, Wikipedia, and other systems. I look forward to learning more as I go. The glossary, also found in the header, will be updated with new terms.

Technology and transparency

When I finished writing this post, I used Grammarly to check my grammar and spelling (using their English Canada library). I then used readable.com to check whether or not I had adhered to my goals of simple language with this article matching a grade 9 reading level per the Flesch-Kincaid test.

WordPress estimated that my 1,309 word post would take someone 7 minutes to read.

I used chatGPT 4o (free) to ask it to review my CSS against WCAG 2.0. I used chatGTP 4o (PLUS) to review the entire article, create a single-sentence summary, and suggest content warnings.

chatGPT generated the feature image based on the post text and my query: “make an image that summarizes this post.” I asked it to give me a visual description. Here is the description:

An abstract image representing progress and interconnected systems: A vibrant circular data chart in the center symbolizes accountability and tracking, surrounded by abstract glowing shapes representing accessibility and inclusivity. The background features subtle gradients of blue and green, symbolizing growth and openness, with faint outlines of gears and nodes to represent technology and collaboration.

My image description is that it looks like a UFO made out of piecharts and a colour wheel. It also vaguely reminds me of the Trivial Pursuit board game floating in space.