4.1.1 Parsing actually covers very little

The parsing guideline, requires that:

In content using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique…

The impact of these issues is relatively limited. In my experience, they typically surface when an id attribute has been duplicated, leading to the incorrect label or description being linked to a form element.

When checking for these issues using HTML validators and conformance checkers, it’s only a very small number of issues that fail against this success criterion (SC). As Steve Faulkner says, parsing is a PITA:

… the errors that need fixing for accessibility purposes can often be needles in a haystack

Patrick Lauke, summarises the fundamental problems with this SC concisely in the following post:

Misinterpretation of this SC is where I have found myself struggling previously. It can be tempting to include a load of other validation or conformance fails under this SC, but at that point, you’re no longer assessing against the WCAG standard.

This is frustrating.

It can feel like by not reporting problems, you’re letting people down, and allowing inaccessible websites/products to pass. However, Eric Bailey provides really helpful insight as to why sticking to the SCs is important:

By scoping your work to the actual, objectively demonstrable problems in an inaccessible digital experience you are able to help facilitate a trusted remediation process.

It’s a small stepping stone in the right direction.

Validation can still allow us to find problems

With all of that said, you’re probably not fussed about the removal of 4.1.1 Parsing (depending on whether you were a staunch supporter of it before). However, validation can still play a really important part in web development.

You can use the W3C’s HTML validator to identify problems such as:

• Missing alt attributes, for when images do not have a text alternative for people using assistive technologies
• You’ve used an element that doesn’t exist, maybe due to misspelling it
• You’ve referenced a non-existent id attribute, so elements may not be related as intended

I’ve also encountered problems in the past as a web developer where there’s been odd behaviour, which has been resolved by fixing validation errors.

Additionally, there’s a benefit to using the W3C’s validator due to it being easy to access. Having worked in the UK’s Civil Service, I know that some devices are tightly locked down to prevent additional downloads and software from being added. Being able to take a large web page and validate it to quickly check for missing alt attributes is really handy for getting an overview of problems.

Furthermore, while it’s not always the case, a massive list of validation errors can be symptomatic of larger development problems, such as a bloated, developer-focused, JavaScript framework, which may introduce other accessibility problems.

Of course, there are other solutions that can help address the issues I’ve raised here. Browser extensions can be used to find both validation issues, as well as colour contrast, role, ARIA, and a whole host of other issues. There are also automated tools such as pa11y which can be used during development to identify similar issues.

This post is a long winded way of saying proofread or check your work

In short, validating your HTML helps to ensure that your website is going to work as expected for everyone. It’s not the secret sauce to help you catch lots of accessibility issues that prevent people from using your website, but it can help make sure that your websites do the basics right.

Check your code like you give a crap.

Related posts

• The 411 on 4.1.1 by Adrian Roselli - this post further details other 4.1.1 issues and how they can be caught by other SC
• These aren’t the SC you’re looking for… by Patrick Lauke - this is a really fantastic presentation that helps anyone working with WCAG to stick to the standard and feel more confident in checking for the right criteria
• Accessibility Testing with pa11y by Ire Aderinokun - this guide is a great introduction to using pa11y and identifying problems

Changes to this post

• Updated 24th September to include Patrick's fantastic post summarising the issues with the 4.1.1 Parsing SC

It's great that social media has given rise to short videos of people designing things so quickly. It helps to demonstrate that complex designs can be broken down into more simple, individual steps.

There's videos that are less than 30 seconds that can help you:

• Animate text
• Create a loading spinner
• Make a carousel

The videos go through the visual designs of the components in prototyping software very quickly, but don't stop to ask why.

Why would a user want their text animated? It could be distracting if used incorrectly.

Why would a user want a loading spinner? It doesn't convey any progress to a user, it just loops infinitely, expecting that a user will wait patiently.

Why would a user want a carousel? Carousels seem to be used when content has not been designed and prioritised thoughtfully.

You're not designing as entertainment

The key question should be, what do your users need?

if all you have is a hammer, everything looks like a nail

If you go into designing, planning on using lots of these quick designs, you'll find lots of places to add them. Visually, they look interesting and capture your attention, but is that helpful for people who need to use your website or app?

Write using plain language and ensure that users can find what it is they need to complete their tasks. Prioritise content appropriately and try to start with one thing per page, to avoid overloading pages with content.

Designs don't need to be made in less than 30 seconds. If you've used a lot of websites, you've probably identified some patterns or processes that feel like they've been designed in 30 seconds. Patterns come and go, but wasting somebody's time with a "flashy" design will always be shit design.

How would people interact with it

When working in design roles, the most difficult part is conveying and clearly communicating how people will interact with your designs. It's a key area where designers must focus their attention to ensure that designs are inclusive and accessible to as many people as possible.

These quick videos contain no information about user interaction at all.

• Can a user pause the animation of text if it is distracting?
• How will somebody using a screen reader know that a loading indicator is present? Will there be a text alternative?
• How will somebody using only a keyboard operate the carousel in order to access all the content within it?

Making sure that users can find information and can complete their tasks is the job of a designer.

In isolation, these interesting - albeit purposeless - designs done quickly do not solve problems. They can trivialise the design process and move the focus away from what the user needs.

An aspect of applying for work that is ever-present is the request for a portfolio or work that you would like the interviewer to see. Personally, I believe that my portfolio (showing my diverse work) really helped me to receive interview offers as it demonstrated my skills and abilities.

However, once you've got your website made to showcase your work, how do you host it?

You may be familiar with a range of large hosting companies that reel you in with low prices but then quickly increase costs and make it difficult for you to leave. This post will talk you through two different ways you can host your portfolio for free!

1. Netlify

This first method of hosting your website is my favourite as Netlify is extremely easy to use and always updating it's offering.

Visit the Netlify website.

Step 1: You'll need an account.

You can register for an account with the following:

• An email address
• An existing GitHub account
• An existing GitLab account
• An existing BitBucket account

Step 2: Uploading your website

Once signed up and logged in, you should be presented with a dashboard, titled 'Team Overview'.

The page I am presented with says, 'Joe Lamyman's team', 'Team overview', so if you see something similar to that - you're in the right place!

Next, you will need to navigate to the 'Sites' page.

Here, you should see the option to drag and drop your site folder. You may find this section towards the bottom of the page.

I understand that this method is not accessible to all users, so I have contacted Netlify to understand if there could be a button or alternative method to upload a file without the need to drag and drop.

If you drag the folder containing your website to this section, your website will begin to upload. You should be given a random name and website address. On the screen, a message to tell you that your site is being deployed should be presented.

Everything is working great!

After a short time, your site will be deployed. You will know this has been successful as the message on screen will change to: Your site is deployed.

Step 3: Set up a custom domain

If you have already purchased a domain (I use Google Domains for all my domain names and have found it to be the most straight-forward to use, i.e. I'm not harassed by daily spam), you can now use this. If you don't have a domain, that's also fine! I'll explain how you can still get a customised domain.

Step 3.1: If you do not have a domain

From the 'Site overview' page for your website, navigate to the 'Site settings' page.

On this page you will find 'Site details' and information about your site. There should be the name of your site which will have been randomly generated.

If you select the button on this page titled, 'Change site name', a dialog will be presented. Here you can change the existing site name to something more appropriate.

Make sure to save the change!

I changed my site's name to: joe-lamymans-portfolio. As such, the address for my site now will be: joe-lamymans-portfolio.netlify.app

Without paying for a domain, you will always have the netlify.app extension on your address, but I do not think that is a problem! The benefit of this, is that your site will be using HTTPS without you needing to do anything else.

You can find the link to your site towards the top of the page. The UI will say something along the lines of: 'Settings for' and then the name you just provided. The link can be found directly after this.

There's nothing more you need to do, skip to step 4!

Step 3.2: If you have a domain

If you have a domain, from the 'Site overview' page, navigate to the 'Domain settings' page.

On the domains page, select the button titled 'Add custom domain'. You will then be asked to enter the custom domain that you'd like to use. For example, if you purchased the domain www.joe-lamymans-portfolio.co.uk, in this field you would enter www.joe-lamymans-portfolio.co.uk.

You will then need to verify this domain. For the best results, you will want to use the Netlify DNS.

To do this, when you select your domain name on the Domains page, you should be presented with four name servers, these will look like: dns1.p01.nsone.net

Head over to wherever your domain is registered and within your DNS settings, there should be an option to use custom name servers. Select this and then add the name servers presented to you by Netlify on the domains screen.

It may take a little while for the changes to be made, I've had to leave it overnight before, so do not worry if the changes are not instant.

Step 3.2.1: Set up HTTPS

Finally, you will want to use HTTPS to ensure that it can be accessed and used securely.

Still on the domains page within Netlify, towards the bottom of the page should be a 'HTTPS' section.

To use HTTPS on your site, with Netlify it is as straight forward as selecting a button. This will then request a HTTPS for your website. Once requested it may take a little bit of time for the certificate to be requested and used. However, once you've done this, the process is managed automatically.

Step 4: You are good to go!

That is it. Process over, you have now got your website hosted for free with Netlify!

Now when you go for an interview, you can casually slip in a phrase like:

"Nice to meet you. Did you know I'm FULLY utilising the frictionless array of serverless utilities and REALLY expanding on the Jamstack methodology by hosting my site on Netlify!! Q4 is going to be MASSIVE for me and I can't wait to rehydrate my DOM with those Netlify serverless functions... WHO AM I KIDDING, we all know they're really just AWS Lambda functions LOL"

If that doesn't get you a job, you didn't want to work at that company anyways.

2. GitLab Pages

This is the other method for hosting free websites that I tend to use for quickly getting a site up and running. It is also really convenient if you're already using Git to host your code. In this example, I'll be using GitLab as GitHub refuses to drop ICE and GitHub recently fired an employee who warned of Capitol attack Nazi link.

Visit the GitLab website.

Step 1: You'll need an account

You can register for a GitLab account with just an email address and you might find this the quickest way to get going.

Step 2: Make a new project

Once you've signed up and logged in. From the 'Projects' page, you need to select the button titled, 'New project'.

You'll need to enter a few details and be sure to set the visibility to public!

If you are confident enough with the command line, you can follow the instructions to push an existing folder. If not, you can select the button titled, 'New file'. This will take you to an online text editor where you can create your files and copy over all of your code into them.

Once you've added your files, you need to select the 'Commit' button to save your work. You will be asked for a commit message, just describe the files you added. Something as simple as: "This was a YOLO commit, added my whole site", will suffice for now. You can go ahead and commit this now.

If you head back to your projects page, your commit message should be on screen, as well as the files that you created.

Step 3: Setting up Pages

On your project's 'Project overview' screen, select the button titled, 'Set up CI/CD'.

This will take you to an intimidating looking screen, but we do not need to do too much here.

Select the dropdown button titled, 'Apply a template'. Then, you can filter for, or navigate through the dropdown, you are looking for the HTML option under the subheading, 'Pages'.

Select this HTML option. As in the screenshot above, a text editor will be automatically filled with YAML config. Ensure that the only: section contains the name of your branch. For example if your branch name is main, ensure that the config under this is main. Ignore everything else on the page and then select the button titled, 'Commit changes'.

It will take roughly a while for your site to be uploaded, but that is the process. When it's available, you can navigate to 'Settings' and then 'Pages' to find your website's domain. As with Netlify, you can change the existing domain or upload a custom domain.

Wrapping up

I hope that this post helps you to get set up with your own website! Once set up, send me your websites, I would really love to see them.

Additionally, if you have any trouble or find any problems with this guide - just send me a message, I'm happy to help you if you get stuck!

The World Wide Web has allowed for communication and interaction of different users and cultures like never before and it’s easy to imagine the benefits that this can bring, such as everyone being able to use their own device to have the same access to online resources. No longer are there physical barriers in place, preventing people with accessibility needs from achieving their goals.

Poor accessibility is costly for everyone

In order to make the web more accessible, the Web Content Accessibility Guidelines, also referred to as WCAG, have been developed. The aims of these guidelines are to make websites perceivable, operable, robust and understandable by anyone, no matter their accessibility needs.

Despite the opportunity that the web should afford everyone, a recent analysis of 1 million websites provides a stark contrast. In 2019, an automated test of 1 million websites, conducted by non-profit accessibility organisation WebAIM, found that 97.8% of homepages tested failed to meet the WCAG. This means that there are hundreds of thousands of websites that prevent people from being able to use them. The Click-Away Pound Report 2019, details that 71% of users with access needs in the UK click-away when presented with a website that is not accessible. Due to this, the report estimates £11.75 billion was lost by inaccessible websites in 2016. For an individual, though, this may mean they do not have a way to purchase goods and services that may be essential, as the website is not accessible to them.

How can we improve accessibility?

You may be wondering: if a website were to meet all of the Web Content Accessibility Guidelines, would it be accessible?

In short, the answer is no, not necessarily.

The majority of testing tools are automated, so they’re limited in what they can test for. Automated tools can test for things such as correct colour contrast between text and its background or even whether a language has been specified by the developer. However, there are things that automated tools cannot check for, such as whether the site can be used with only a keyboard, or whether certain features (i.e. skip links, for keyboard and screen reader users to navigate through content) have been used correctly during development. Because of this, the best approach to ensure accessibility and usability is to conduct a test of the website, with real users that have different disabilities and access needs, to get a better understanding of whether the website is accessible to as many people as possible.

In 2012, researchers presented an argument that the Web Content Accessibility Guidelines alone were not enough to make websites accessible to people. As part of this research, 16 websites were tested by participants, who were asked to identify any problems during their use of the sites. The researchers found that 49.6% of problems identified were not covered by the WCAG 2.0 guidelines at the time. Therefore, there could be websites that meet all of the WCAG, yet still contain problems that make them difficult to use.

Building upon WCAG with personalisation

How can websites that meet the Web Content Accessibility Guidelines not be accessible?

The WCAG guidelines state:

Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. From this, we can understand that in order to make websites as accessible to as many people as possible, the WCAG have been developed with specific disabilities in mind, rather than the needs of individuals.

There are solutions that already exist which attempt to allow people to personalise websites. A prominent example can be found within most modern web browsers such as Google Chrome, Safari and Firefox. These browsers allow users to change the default appearance of websites within their settings. For example, you could set the font size to appear bigger by default. However, the success of such approaches can depend on the way that a website has been implemented by its developer. Websites may have been styled and implemented in a certain way, so that some of these settings may not take effect, even when changed.

It’s important that we remember that as individuals, our needs change depending on how we’re feeling and depending on our context of use. The Government Digital Service published an article providing examples where a user’s ability could be affected, including:

• location – they could be in a noisy cafe, sunny park or area with slow wifi
• health – they may be tired, recovering from a stroke or have a broken arm
• equipment – they could be on a mobile phone or using an older browser

As such, it makes sense that as an individual, you should be able to change and adapt websites to meet your own accessibility needs. This is the aim with my research into personalisation. Text reads 'research opportunity' Take part in the research

As part of my research, I’ve created an example e-commerce fast fashion website, replicating the content and structure of the current, most popular fashion websites. Within this site, I’ve developed different ways for people to personalise the design to meet their individual accessibility needs. The entire design of the site can be personalised, as well as individual elements. I am currently in the process of concluding this study and as such I am looking for people with different disabilities that are also users of assistive technology to take part in the research and to help me understand if personalisation is useful.

Earlier in the year I also conducted a study inviting people to design their own version of a toilet roll-selling e-commerce website. While the study is no longer running, you can still create your own bog roll business site.

To take part in the study, you will be invited to complete a series of tasks on the website while providing feedback on your experience. Following the tasks, you will be asked a few short questions. It will take roughly an hour to complete and payment will be provided in the form of a £20 Amazon voucher.

This research is being conducted as part of the MSc by Research in Interactive Media at the University of York and is being supervised by Dr Anna Bramwell-Dicks and Dr Debbie Maxwell. If you have a shared interest in web accessibility, I strongly recommend getting involved with the Interactive Media degree. It has given me the opportunity to investigate this avenue of research and the staff have supported me and encouraged me every step of the way.

A massive thank you to the York Disability Rights Forum for helping me with my research and for the fantastic work they do for the community and in particular, Elki, who provided me with the opportunity to write this post.

Survey tools

If you are looking for an easy way to create a quick survey, there are a lot of fantastic options. In my experience, I encounter Google Forms the most. Google Forms allow you to quickly create forms with defined question formats (such as multiple choice questions, sliders). This is great! Within a few minutes you can have a survey, hosted and ready to share. However, you're limited to asking questions that are afforded to you by the functionality that Google Forms offers and it also leaves you with the task of recruiting participants.

These quick to create surveys therefore tend to be a digital reincarnation of traditional paper surveys that came before them. The benefit of the web is the interactivity that we are afforded to us as designers and developers, let's make us of it!

Designing better experiences

In the past few months I have been inspired by two great examples of participatory design, involving the user and making them a part of the design experience.

1. Is this a Sandwich? 🥪 by Sarah Drasner - It's a really fun project where you look at photos and decide whether the object in question is a sandwich or not (you'll quickly end up questioning everything). At the end, Sarah tells you your score, ranging from 'Chaotic Evil' to 'Lawful Good', depending on your choices. Then, you can share your results to Twitter and see who your friends really are.
2. User Inyerface by Bagaar - This is a game that challenges you to make it through a user interface that reverses commonly understood user interface patterns. The balance between frustration, as you struggle to understand where on earth to click, and whimsy with comical interactions (see The Whimsical Web for more fantastic examples of this), is perfect.

Both of these projects provide delightful experiences. They put the participation and experience of the user before anything else.

Adapting interaction for surveys

As a student at the University of York, I'm currently researching whether we can use personalisation of user interfaces to increase the accessibility of websites. I wanted to conduct research to understand how people would want to personalise a website. What options would they choose? What would their personalised site look like?

Inspired by the two projects mentioned above and the support and guidance from my supervisors, I set out to create an interactive survey: Bog roll business builder. It's a website that challenges you with creating the perfect user interface for a website selling toilet roll (there's a pandemic story hidden in there somewhere).

Designing an accessible, interactive survey

My initial idea was simple, you would answer questions along the lines of:

• How big should the font be?
• How should product options be displayed?
• Where should the product image sit?

Then based on the answer you selected, a 'live' representation of the user interface you were creating would appear on the left of the screen.

I attended Cassie Evans' fantastic workshop on scalable vector graphics (SVGs) and SVG animation earlier this year and thought that this project would be a great opportunity to use SVGs to build the 'live' representation.

However, when I started implementing the site I quickly realised that using SVGs would not give the user the experience that I wanted. I needed the 'live' representation to be interactive, so that users could click around and understand how it worked and see if they were satisfied with the answers that they were choosing. In order to make the representation realistic and accessible to as many people as possible, I decided just to use HTML and CSS. Using these languages means that people can access the representation as they would any website on the internet. There is little JavaScript used, this was a conscious decision to make the website lightweight and more accessible to users who may not have a great internet connection.

Looking back, I decided that a hand-written HTML and CSS approach to this project would be fine, I thought that I would create 2-3 pages and as such, setting up a static-site generator or using a templating language would be overkill. I was very wrong. I would really recommend using a static-site generator when starting any project now. Personally I use Eleventy, it's straight-forward and really quick. It doesn't bloat your webpages with additional content like some generators do.

I was apprehensive to try to create an interactive study as while I am familiar with accessibility best practice and the Web Content Accessibility Guidelines, I knew that with the study I wanted to create, it would require shifting the user's focus between elements of the page. For keyboard and screen reader users this can be problematic for a few reasons. If you haven't structured your content properly or used incorrect semantic HTML, it makes navigating a site difficult. The other reason being that explaining focus shifts and making them clear and apparent, without confusing users, can be difficult.

My approach to this was to create a standard HTML5 form with a <fieldset> containing each question and answers. A field-set is a semantic way of grouping items within a form. As my form contains questions with multiple answers for the same question, grouping them with a <fieldset> makes it easy to understand which answers relate to which questions.

Within each <fieldset> is a <legend>, this tag provides a caption for the fieldset. In my website, I use the legend to display the question. For example:

<legend>How big should the font be?</legend>

I have 3-4 different options that the user can select from for each question. These are displayed to the user as a large button, however, semantically they are HTML5 radio inputs (radio inputs as you can only select one per question). With some CSS styling, I use CSS Grid to quickly overlay the label on top of the radio input. The button that the user sees is actually the label (that's why there's no radio input in sight, they're just hidden behind the labels) styled to look like a button. Within HTML5, as long as you give a radio input a unique ID, you should use the for attribute on a <label> to create a semantic link. For example:

<input type="radio" id="my-cool-button">
<label for="my-cool-button">This is a great option</label>

However, once a user selects an option, how do they review their choice and see what it's like in the 'live' preview?

Some users may be able to see the preview on the left of the screen and interact with it using their mouse. Other users, such as keyboard users and those using screen-readers may not be able to do this. As such, I use skip links to direct participants to the live preview, and then a skip link to quickly get them back to the questions. If you were to use the tab button to navigate through the site, you'll reach the questions, navigate through the multiple choice answers and after this, you'll hit a button that's visually hidden, 'Test this in the live website view'. Using HTML5 anchor elements, we can specify an ID for an element on the page, that the link will take the user to. The link above directs the user's focus upon the 'live' preview. As mentioned before, the preview is just HTML elements, so the participant can interact with these, as they would a normal website. Upon reaching the end of the representation, the user will tab onto another skip link, 'Back to questions', directing their focus to the start of the current question. This simple approach allows the survey to be as accessible to as many people as possible, regardless of their accessibility needs.

When trying to implement a site to make it as accessible as possible, it's key to focus on the semantic structure of the HTML. If you can really nail this, it goes some way towards making the website usable. Using simple methods such as skip-links can then bridge over any gaps to make the site more accessible.

How do the changing styles work?

I use a little bit of JavaScript to identify when a user has selected a radio input. Each radio input has a specific attribute applied to it, explaining what the option is. With JavaScript, I look at the attribute of the radio input that has been clicked, for example c-shopDisplay__bodyText--size-medium. While this may look nonsensical, it follows a pseudo structure and means that we can apply the styling the user has selected. This structure follows the CSS BEM naming principles (a way of naming your CSS classes for better understanding), we have a block, 'c-shopDisplay', an element 'bodyText' and a modifier, 'size-medium'. Breaking it down like this, we can see that the styling should be applied to the shop display (the 'live' display that I keep referring to), it relates to the body text and the size will be medium.

With this information, I apply a CSS class to the shop display. Doing so will then make the relevant option display in the case that the answer's different options have different HTML markup. However, if it's for something simple like changing the colour-scheme which doesn't require a change in HTML markup, I make use of CSS Custom Properties. These are essentially CSS variables, where you can give them a value and modify it elsewhere in your CSS. I do this by setting a default value in the CSS and then using CSS selectors, override this accordingly to display the colour that the user has selected. This method makes it quick and easy to allow for a personalised user interface. It's just a case of setting and removing CSS classes, there is nothing else involved.

How is the most popular design displayed?

Once a user creates their design, I submit their answers to a database, providing them with a 3 word randomly generated ID (a bit more user friendly than some crazy 16 digit number and it's funny to get IDs like stinky-mouse-thief). I store an individual record for the user so that their design can be quickly picked up displayed later on. I also have a record for each question which contains the number of times that an answer has been selected, the user's answers will contribute to these records. I do this so that I can quickly query a single record as to the most frequently selected answer for a single question and quickly display the most popular site to users.

To make this possible, I hosted the site with Netlify. Netlify hosts personal static-sites for free (I'm hosting this website for free)! This is great for prototyping or individual portfolios. Netlify's free tier is super generous and allows you to use functions, this is really important. A traditional static site is exactly that, static. It can't do much as the HTML and CSS has already been written. However, it can use JavaScript to change and update the HTML in the user's browser. My site does exactly this, it uses JavaScript to send user's answers and request the most popular site using Netlify's functions. You can see this in practice once you have created your design and it is compared against the most popular site. The information for the most popular site has been passed from my database, through a function and displayed using JavaScript.

How do Netlify functions work?

Netlify's functions provide us with an API endpoint which we can access through JavaScript. For example, when a user submits their survey answers, we can say to our API (that we've just created), "here's a bunch of data". Netlify will then pass this data to functions that you've created. I created JavaScript functions (using a framework called Express) to take data and store it in the database, once done it redirects the user. You're essentially writing your own API to process data requests however you want. If any part of that sounds nonsensical to you, that's probably because it is. I did not know how to do any of this before starting my website (it was a very steep learning curve).

After the user has designed their site

At the end of the interactive survey, I then make use of a quick Google Form to capture contextual data from participants. I ask questions about their purchasing habits and accessibility needs.

By creating better experiences that further engage users, you may get richer feedback and information from participants. They have felt involved in the process and will want to explain their answers.

Following this, I then show them the design that they have created alongside the most popular design made up of the most frequently selected choices from the bog roll hive mind. This is purely for the participants' experience so that they can compare their own design to the most popular.

A great thing about interactive studies is that they have an output that can be shared on social media, which works as an entry for other potential participants. I found Sarah's 'Is This A Sandwich' project through a lot of people I follow on Twitter sharing their results, which in turn, made me want to take part!

In fact, here's a bog roll design I made earlier.

Reception

I am super appreciative that people have taken the time to share my work online, here's a few tweets about the work.

For all my students. This questionnaire created using @Netlify by @JoeLamyman is a great example of how to design questionnaires that people actually want to complete. https://t.co/IGRTLeOkFk

— Francis Muir (@francismuir) August 14, 2020

definitely do this 👇 https://t.co/yXfyRId0TY

— Andy Bell (@hankchizljaw) August 12, 2020

Wrapping up

I hope that this article inspires you to create more interactive surveys that people will want to complete. I look forward to seeing and partaking in them in the future!

If you are about to go out and create interactive surveys, make sure you do the following:

• Accessibility test your survey to ensure that as many people as possible can easily complete it, without any issues. This is key.
• Value your participants' time, ensure that the experience is quick and does not require too much of their time. Anywhere between a couple of minutes to 10 minutes seems like the sweet spot.
• Ensure that participants know how their information will be stored and used.

If you have any questions about resources for anything mentioned in this article, please feel free to get in touch with me. A lot of what I used was brand new to me, I have had to learn about Netlify Functions, AWS Lambda Functions, MongoDB and more! If you're struggling or just interested, send me a message and I'd be happy to provide more technical information.

How did we get here?

My site started off in 2017 using more colours than the human eye can see. While so many people's sites make use of different colours in a fantastic way, I had done so in a confusing and inaccessible manner.

Sources of inspiration for colourful sites (I think these sites are the bee's knees):

• Tatiana Mac's site
• a11y project's site
• Sarah L Fossheim's site
• Aga Naplocha's site

Fast-forward to 2018, James Jing-Yi Mitchell managed to convince me that using 51273 colours wasn't a great idea. This was the beginning of the blue era.

I then spent a bit of time last August making my site with Eleventy, learning how to use Sass, using version control so that I do not accidentally overwrite a Sass file losing 4 hours of work (whoops) and hosting it with Netlify. You can read my woefully inexperienced blog post: Eleventy Personal Site.

Improving the site

After a solid year of learning, I decided it's time to re-do the site. A large part of this was inspired by learning from the Piccalilli Learn Eleventy from Scratch course. I would really recommend it, the course is really well designed, allowing you to pick up where you left off easily and quickly understand advanced features. Thanks to this course, my new site includes:

• An RSS feed
• Smart data stuff
• An easy way to view posts with shared tags
• Recommended posts

Regardless of your skill level, the course accommodates for all and makes it straight forward to get your own site working.

Moving forward

So what's next?

I'm on my way to completing a Master's degree in Interactive Media at the University of York, I am researching whether as web designers and developers we can use personalisation to make the web more accessible to individuals. Website accessibility is really poor in general, with it either not implemented at all or the quickest way possible. I am hoping to understand if personalisation of user interfaces will go any way to improving accessibility in an easy to implement way.

I have also been thinking a lot recently about how technology is inherently political. The choices and decisions or even lack thereof reflect an individuals education and motivations. As human beings, I do not believe that there can be such an abstraction so that technology is not political. I'd like to use this blog to write about these issues.

In the past weeks, this has been more evident than ever with issues of artificial intelligence (AI) being rammed into every product. The following articles illustrate these issues.

• Sarah L Fossheim's article on 'Genderify', a problematic and discriminatory product using AI.
• Adrian Roselli's article on how an accessibility widget, 'accessiBe', will get you sued, this article highlights moral issues with the approach taken to accessibility and a capitalist solution.

As it comes to the end of the year, I see lots of people sharing their Spotify Wrapped and Instagram users posting their 9 most liked posts, I thought I'd use my site to share my year! I've tried to summarise my year in 36 pictures (3 for each month) comprised of photos I have taken, or have stolen from Naomi.

January

wintery walks to work

at stone roses

brighter evenings

February

snowy clifford's tower

york ice trail

snowy strolls

March

we walked sid!

@adelaide, aus🇦🇺

watching the internet

April

pre easter lunch

at whitby

at the museum gardens

May

roses are white

taxi disco

🌷🌷🌷

June

im showcase

at the design museum

in pula, croatia🇭🇷

July

english summer

naomi's graduation✨

botanical gardens

August

birthday escape drinks

at junkyard golf⛳️

family wedding

September

late summer!

sausage dog cafe

first web dev conf👨‍💻

October

celebratory meal

york ghost hunt👻

our 4 year anniversary

November

christmas market🎄

in cambridge

winning a uxuk award!

December

at mansion house

frog detective 2!🐸

2nd game of handball

To be able to create blog posts without having to set everything up in my source code, I wanted to find a way to use a CMS to update my site and write blog posts.

I decided that I would make use of my existing skillset and try to learn templating languages such as Nunjucks and Handlebars to create my new site.

I used a static-site generator called eleventy to build my site, pairing Nunjucks with Markdown. Hosted with Netlify and utilising Netlify-CMS, I'm hosting my site for free and making use of CI/CD to automatically build and update my website.

I hate copying code, so I spent 5 days copying code

Inspired by @JamesJingYi's blog post on the new Apple Card, I decided that I wanted to try my hand at blogging and thought that my new website would be a great place to do so.

I recently updated my site, using just HTML and SASS, so if I was going to write blog posts, I'd just simply have to make a new HTML file, copy the head, footer and navbar in, line up the links and I'd be ready to go. However, for some reason I find setting the links in the navbar a really arduous task. Did I set up the right links? Do they go to the right place? Did I miss any?

I recently discovered a static site generator (ssg) called eleventy, which allows you to use handlebars, nunjucks, pug, markdown, etc. to build your website with templating! This basically means you write your navbar once and the ssg does all its magic to make it work (if you are able to write it properly unlike me).

I discovered that I could set this up with continous integration/continuous delivery (I still don't really understand what these words mean) and have my website build automatically whenever I do a git push! I then discovered I could use netlify to host the site from my gitlab project and that I could use netlify cms to write markdown to create my blog posts!

Feeling very excited and ambitious, I managed to get my new site working in about 5 days. I have layouts written in nunjucks, content written in markdown (which then uses the nunjucks layouts to render), as well as components that are frequently used (such as my pink cards) as eleventy shortcodes.

How does it work?

Following the instructions to get set up with eleventy, I found a few examples, such as this one by Keeping Up to Date.

I then started by trying to recreate my projects page. I created a base-layout.njk which contained my head and footer tags which are consistent throughout my site. I created an index.njk file (which used the base-layout.njk layout) that pretty much contained the pink background with my name on it, as well as a loop that would look for markdown files tagged 'project' and display them.

It worked!

With each individual project being a markdown file, I needed to find a way to render them differently to the main project page. To do this, I created another nunjucks layout. Using eleventy's front data matter, in the markdown file for each project, I could specify things like the title of the page the background image and the nunjuck layout would then be able to grab all of this info and render it, without me having to create a new layout for each single project page (woohoo!).

Obviously this was all very easy and I didn't run into a single problem and everything was straight-forward and it all worked straight away.

spoiler: it didn't

I ran into quite a few problems and struggled a bit with learning nunjucks and the way that eleventy expects me to work. I also couldn't figure out for the life of me how to use paired shortcodes, which would have two arguments taken from it's child elements, they would always come through as a single argument. I also ran into issues trying to get my favicon on all my pages.

I think some of these issues stem from my lack of knowledge of templating and static site generators, so I'm not 100% proud of my code, but it works on my machine.

Improvements

There's a few more things I want to improve, specifically on the blog section. I'd love to get the date and tags appearing on my blog list! I also should try and learn more templating and static site generators. I think I'll try and make another site with eleveny and see how it compares, knowing what I do now.