Web Accessibility for Artists

Wojtek Kutyla 2023

Stills Centre for Photography, Edinburgh

Who's this dude?

Wojtek pronounced {voy-tech}, he/him

I am a photographer.

Visit wojtekkutyla.com to learn more.

Insta is @wojtekkutyla

By the way...

I am currently working on a long-term project about the experiences of immigrants in the UK. If you are one and aren't shy of being photographed — give me a shout.

I am also a web accessibility and user experience (UX) expert.

That's the money that pays the bills. Blah.

Why am I doing this?

Usability? Web Accessibility? Inclusion?

  1. A digital product (be it a website) offers a good experience when it's usable — easy to use.
  2. If and when anyone can use it, regardless of their needs, it is accessible.
  3. If they feel welcomed and included, it's inclusive.

Good user experience cannot exist without accessibility and inclusion at the core.

We aren't bad people!

But sometimes we lack awareness and skills.

Disability and marginalisation

  1. Folks are marginalised for all sorts of reasons.
  2. Not all disabilities are visible.
  3. When we care about accessibility, everyone benefits.
  4. We are just temporarily able.

How do marginalised folks use the web?

Just as we do, but they struggle more.

Web browsers, mobile devices, assistive technology.

Assistive technology

  1. Keyboard and mice,
  2. Browser controls and screen controls,
  3. Screen readers,
  4. Special pointing devices,
  5. Eye Gaze and eye-tracking devices,
  6. Voice control and input,
  7. A mix of all the above and more.

A demo of a screen reader

  • This could be used by visually impaired users or those who prefer to have the text read out to them.
  • I am using VoiceOver on MacOS, but on Windows, you can use Narrator or NVDA.
  • Let's look at a BBC website and then at a photography-related site.

How does all this work?

  1. Websites are built with HTML language that has a semantic nature. All its tags have meaning.
  2. For example: <p> for a paragraph, <h1> for the most crucial heading on a page, <img> for an image.
  3. Assistive technologies access this structure and rely on it entirely.

Separation of presentation from the content

HTML is responsible for the content, whilst CSS takes care of presentation.

The way something looks doesn't mean it'll work the same way for an assistive technology.

Devil's advocate

But blind people don't want to look at photos!

Yes, they do. It is just that they can't.

Typical issues that affect accessibility

Lack of keyboard control

Keyboard users use TAB and other keys to navigate websites. They can't access the content when it is unavailable to them.

Lack of text descriptions for non-text content

This means that photos and videos (and other visual and audio things) can't be understood by those who don't see. And search engines, too.

Ambiguous content and use of language

Let's face it; often, our written stuff is hard to understand by someone who's not necessarily an academic or a photography critic.

Lack of content structure

Headings, paragraphs, links; every web page should have a hierarchy. HTML tags should be used semantically (don't sweat; more on this in a minute).

Low contrast and font size issues

Vision-impairment folks, and many of us struggle with this.

Badly optimised images, long waiting times and delays

Our websites are often slow to access and render. This also impacts the environment.

Links without context

'Click here' links are toxic. Users can't understand them. Always make link labels meaningful.

Forms that aren't accessible

Forms that lack labels and don't report errors in a usable fashion are hard to use by everyone, especially visually impaired users.

Why don't we have a little break?

Please, come back.

Important fact: our websites are not for us.

Our websites (and social media content) are there for our viewers.

We can't assume what they can do

And that's why we need to prepare to serve the most marginalised groups. The rest will follow.

What can we all do to make this work?

Plan your website structure

  1. Consider what you want to communicate,
  2. Remember that the Internet isn't a book!
  3. Put everything on paper first. Headings, paragraphs, photos — how do you want to display them? And how many?
  4. When adding it to your website, keep the heading structure and remember about other elements.

Quick cheatsheet

  1. There are six levels of headings, from h1 to h6. You shouldn't skip them. Rethink your structure if you need more levels than 4.
  2. Text should be included in paragraphs.
  3. Don't use 'click here' links.

Give alternative text to non-text elements

  1. Provide 'alt' text for images or leave it empty if you want them to be skipped.
  2. Provide subtitles for your videos (use Whisper) and make audio transcripts.
  3. Never publish long text as images. Unless you provide an alternative or want it to be skipped.

Test your website with a keyboard

  1. Try using your website with just the keyboard. TAB should move you forward. SHIFT+TAB should move you back. And use ENTER to interact with things that can be clicked.
  2. Everything that could be done with a mouse should be possible with just the keyboard.

Test your website with a screen reader

Use VoiceOver, Narrator or NVDA to check how everything sounds. Close your eyes. You should be able to understand what's going on.

Remember about poor contrast and make things contrasty!

If you can't see it or have difficulty reading it, others will. Pro tip: text-to-background contrast ratio should be no less than 4.5:1.

Write in a human language!

Sorry, but the academic jargon is for academics — so unless your work is for them, speak in a way that people understand. Yer choice.

Is it possible to build an accessible website using Wordpress or Squarespace?

Long story short: if you have control over the template, yes. If you don't — you should still try.

Social media — a quick note

  1. Give all your images and videos alternative descriptions.
  2. Add video subtitles (use the VidCap app or something similar).
  3. When using tags, #capitaliseWordsLikeThis, i.e. #myFantasticPhotographyProject. Dyslexic folks will thank you for it!

Accessibility and search engines

When you care for accessibility, you also improve your SEO (Search Engine Optimisation). This means that Google will find you way more easily!

Things we haven't explored

  1. The Web Content Accessibility Guidelines (WCAG),
  2. The law — why do we have to do this? EAA and UK regulations plus ADA and Section 508(USA),
  3. Hypertext Markup Language (HTML) in detail.

Recommended resources

  1. W3C Perspectives on how disabled folks use assistive technologies,
  2. Free and excellent W3C courses on EdX (HTML, accessibility, JavaScript and CSS),
  3. Easy accessibility checks for everyone from W3C,
  4. Harvard University tips on accessibility for social media ,
  5. "Web Accessibility for Everyone", a book by Laura Kalbag,
  6. "Mismatch. How Inclusions Shapes Design", a book by Kat Holmes.

Question time

Please, ask anything.

A little gift for you

A practical checklist!

17 things you can check to make sure your website is accessible.

Access with the QR code.

Thanks so much, folks!

Email me on wojtek@kutyla.com.

And follow me on Instagram: @wojtekkutyla