June 12, 2025

User Experience, Accessibility, and Interface Design

Pre-Activities

Readings:

Chapter 1, A web for everyone by Sarah Horton
Don’t Make Me Think! by Steve Krug

Session Activities

Accessibility and interface design are just aspects of the user experience, which means that your interface design and accessibility should be designed with your holistic user experience in mind. In this session, we’ll look at some examples of terrible UI and UX and work through how to build an accesible, functional user interface.

Discussion

There’s a common quote in the business world, which has snuck its way into the library and information science sphere, that if you try to serve everyone, you serve know one; or pleasing everyone pleases no one. Considering our readings about accessibility and good UX, which stress making web content as accessible for as many people as possible, what do you think about these seemingly divergent perspectives? Here are some questions to consider:

Should datasets and projects have intended audiences?
- If yes, should these audiences be explicit or implicit?
In the context of academia, which has a history of gate-keeping, do fit-for-purpose user experience and interfaces create wider audiences or accessibliy challenges?
Is an accessibility challenge still a challenge if it doesn’t affect your intended audience?

Terrible UI/UX Examples

In pairs, go through the sites below and ask yourselves the following questions:

What aspects of this user interface are terrible? What about it makes the user experience terrible?
What accessibility needs does this site not meet?
Is the UI static or dynamic?
Is the UX fixable, or would the whole thing need to be scrapped to fix the issues?

Meet WCAG (Web Content Accessibility Guidelines)

In pairs, skim the following list of WCAG principles for web accessiblity: WCAG Quick Ref.
Now, return to the list of terrible UX/UI examples above and write down what specific WCAG principles each site fails to follow and/or succeeds in meeting.

Web Accessibility Tools

There’s no reason to go through your website page by page and try to scan with your eyes for accessibility issues. For one, you’re bound to miss things, since we all have blindspots and biases that are subconscious. There are also so many tools available that can scan your website for accessibility concerns, including checking for alt text, color constrast checks, and more. Here are just a few:

In order to see how these checks work, run the URL for the webpage you built on Day 4, one of the examples above, or your favourite webpage through the Free Accessbility Checker and WCAG Color Constrast Checker. What are the results?
If there are any accessibility issues you need to address, brainstorm how you could fix them.

Now, let’s run the 2025 Summer DH Fellowship website through the same checks and see how embarrassed Kiran will be. What are the results?
Let’s work together to fix the accessibility issues on the fellowship website! Use the resources below for help, or visit the Resources > For Web Programming page on this site.

Break (15 minutes)

Combining UI and Accessibility for UX Design

Thinking about your project website, write down five keys things you want to have in your user experience. Each thing should start with the phrase “I want users to” or “I want users to be able to”. Think about what you want the users to have access to, how you want them to interact with your collection, what you want them to see on the homepage, how you want them to navigate, what aesthetics you want for your site, etc. Use the Laws of UX for inspiration!

Now, pass your paper of your laptop to the person to your left. Using their UX outline, identify one issue/concern they would have to address for each of the four WCAG principles. How could they do to address these principles? What kinds of user interface elements could they add to make their site more accessible?

From the list below, choose at least five UI elements that you would include in your partner’s site. After each element, write down or share with them why you choose that element. What kind of user experience does it help create? What accessibilty needs does it help address?

User-Interface Elements: Glossary

Notes on Accessibility and Maintenance

$$$

People forget how much the web costs. In the next five minutes, look up how much it would cost for you to:

Purchase a custom domain for a website.
Host your website.
Use your custom domain on your website.

You can pick any web host or domain service you want, except GitHub Pages or Netlify.

Environmental Sustainability

Websites have environmental costs too. Run your GitHub pages website and the 2025 Summer DH website through the Website Carbon Calculator. Then run a social media site like Instagram. What are the results?

Check-In, Catch Up, and Questions (30 minutes)

Given that this is our last workshop session before co-working begins next week, let’s take some time to debrief, field any questions or concerns you have, tease out what you’ve learned so far, and figure out what particular resources might be helpful for you as you move forward into starting your projects. This is a time to ask questions, of the CoLab team, the other fellows, and yourselves, and to check-in with how you’re doing mentally, physically, and with the “shoving lots of stuff in your brain at once” thing.