Accessible design and HTML

Contents of this article:
    Add a header to begin generating the table of contents

    From a live conversation between myself, Piccia Neri, and Michelle Frechette about web accessibility fundamentals: this episode is on HTML, and it is the first in a limited series podcast on accessible design.

    A Post Status/ Piccia Neri initiative. Broadcast live on Thursday 10 July 2025

    Watch the recording

    You can watch the entire conversation between Michelle and I below. For any questions, or suggestions on what you want to hear about next, email me at piccia at piccianeri.com or write a comment below the video.

    Read the transcript

    Open to read the podcast transcript

    [Michelle Frechette]

    Hello, Piccia. Hello, Michelle. How are you?

    Good morning. Good afternoon to you. Yes.

    I always, I always just say like, good day. Hello, because sometimes I forget what time people are joining us at, but it’s so good to see you. I am very excited.

    We’ve been talking about this a while and we actually postponed it because life happens and my life got crazy. But now is the perfect time to start talking about accessible design. I’m very excited about that.

    We have a limited edition podcast series that we’re doing and today is the first one. And today we’re talking about HTML. And we’re going to give a little bit of like, and sorry, I suddenly was hearing in my headphones that my mother was calling, so I’ll call her back later.

    [Piccia Neri]

    I’m like, wait, what was that? It’s the joy of lives. We love going live because mom can call and I’m really very much hoping a cat bombing. Michelle, I will be very disappointed if there isn’t a cat.

    [Michelle Frechette]

    She’s back there. She lives behind my monitor. For those who don’t know, she comes out for food and the pets every once in a while, but right now she is lovely behind the monitor, just having a little nap.

    So, yes. But we’ve been talking about doing a series on accessible design for a little while now. And just to give people an idea, somewhere I’ve got it, the idea.

    Oh, that’s to say it. So, today’s topic is kind of a basic overview why it’s important and a little bit into HTML. Future topics are going to include typography, text, colour and contrast, layout, legislation, which of course is very important because lots of legislation is in place to cover accessibility, captions, social posts, data visualisation, and animations.

    And I am the co-host. I’m the host. I’m the whatever you call me.

    I have limited knowledge. I am a huge proponent for accessibility, but I’m going to be learning from you as much as the rest of our audience will be learning from you because I am still kind of a newbie to the whole thing and I do my best to make sure that I have alt text on things and that I’m using proper contrast, but I’m very much looking forward to digging in deeper with you in some of the things I’ve never thought about before, like animation. I have been even putting captions in threads for videos in places where captions don’t show up so that at least people can go and read it, things like that. But I’m really excited to learn more from you about ways to do things even better.

    We’ve got some people joining us already. Let me say really quick good afternoon from the U.K. to Dave. Thanks for joining us and also to Troy from Ontario.

    Thanks for joining us today. And if y’all have questions at any time, you can put them in the chat and you can interrupt. We’re fine with that.

    We like answering questions while they’re pertinent, so go ahead and type your questions in and we will bring them up on the screen to answer them when we have a chance. But I interrupted you, Piccia. What was your next thought?

    [Piccia Neri]

    That’s quite all right. I’m sure I get my chance to say as much as I need to. I just want to reiterate, we really love getting questions and comments.

    It’s an essential part of it. That’s why we’ve decided to go with the live format rather than recording the podcast. So I think that you’re actually being a little bit too modest, Michelle, because I know that you’ve been into accessibility for a long time and you’ve even just by osmosis absorbed so much.

    Yeah, you probably know way more than you think. So why me? Why am I here talking about it?

    I’m a designer and I always say I’m a recovering creative designer. Honestly, creative designers are the worst when it comes to accessibility, but when I got into UX now years and years ago, I realised because I used to be an offline designer, mostly creative, working for lots of cinema and cultural institutions, and then I moved to WordPress and I moved to learning about digital design and user experience. And that’s when I started realising what accessibility was and also it became very, very clear to me that there can’t be any good user experience when even one single user is excluded.

    So I started learning about accessibility and championing it more and more. And now it really is the way forward. And why my focus on design? Well, because I’m a designer, but also because there are various stats that I can throw at you and here they are.

    The Deque study, Deque is one of the biggest accessibility company creating trainings and doing a lot in the world of accessibility. And they have a white paper, a serious piece of research that says that 67% of accessibility issues are related to design. And another that says the WCAG, which are the web content accessibility guidelines that are sort of the guidelines for compliance, more or less, just simplifying a lot, something like 70%, a very high percentage is – they’re design rules.

    So even though, of course, coding plays a huge part, but it needs to start from design and we need to take responsibility and start thinking about accessibility as a brief, as a creative brief and not as a hindrance to creativity. Now, that’s the rabbit hole I won’t go down. I’m actually not talking, I’m giving a workshop at the design conference in Berlin in September about how to be creative and accessible, because I’m fed up with designers telling me that by championing accessibility, I am curtailing that creativity that is …

    [Michelle Frechette]

    It’s bullshit.

    [Piccia Neri]

    We’ll just say it. You say, yeah, I’ll say.

    So why HTML? Because HTML, my friends, is design. It really is.

    When I teach typography, I start from HTML. That’s the basic, the bare bones of the web. And when we look at the principles of accessibility, which are called the four principles, it’s content on the web that needs to be perceivable, operable, understandable and robust.

    How do you achieve all of this? With HTML! That is something that is relevant to both developers and designers. And what could say, that’s pretty obvious.

    Everybody knows that. Do they, Michelle? What do you think?

    [Michelle Frechette]

    Before we dive in too deep on the HTML part of things, first of all, I know that there’s people saying, but I’m in WordPress. I don’t do HTML. Wrong.

    You do HTML, you just don’t know HTML. And in learning some HTML to be able to alter some code here and there, or enhance code, I should say, here and there, you can absolutely access block by block the HTML code on your site. And learning some of that is very, very important.

    I will also say, before we get too far into this, just to backtrack a little bit, we are live right now, so you can ask questions in the chat. If you are watching this after the fact, I will pay attention between now and next week. And if you have questions, go ahead and put them in the comments anyway, and we will address them at the beginning of next week’s episode.

    That way, you don’t have to say, oh, I missed my opportunity to ask some questions. We will absolutely answer your questions later. So go ahead and put those in the comments anyway.

    So I just wanted to kind of get that little housekeeping out of the way and make sure that people knew they could still ask questions, even if they’re not with us live this morning, but come live next week, because this is really awesome stuff, and you get to interact one-on-one or live with us. I also wanted to say that as a creative, you talk about creatives, sometimes as a creative, just alt text, like it’s a basic thing, I waffle between not even enough description and thousands of characters of too much description, because as a creative and somebody who, let’s say, is a little neurospicy, I sometimes get stuck with, well, how much description is important? And if it’s a huge picture, like the graphic we use for this has a lot of text.

    Of course, I put the text in the alt text. And then I put things like, you know, the post-status logo and Michelle and Piccia’s headshots are also included. Do I then say, Michelle is a white woman with purple hair, blah, blah, blah, blah, blah?

    Or is it enough when you have all this other information? And so when we get to that point, I know that’s not our topic today, but those are some of the kinds of questions that as a creative, you think to yourself, how deep do I go on this graph? If it was just a picture of Piccia, I would describe Piccia.

    If Piccia is part of a huge graphic, and that’s not the pertinent information, but I just mentioned that her photo is there. And so those are some of the kinds of questions that I’m hoping that we get to address over the next 10 weeks.

    [Piccia Neri]

    We will do this. The whole, I think we probably should have, I mean, a whole episode just on alt text will not even be enough. I have a whole workshop on alt text, in fact.

    And there is a really, for those who are interested, sorry for the slight aside into today’s topic, there’s a, on WordPress.tv, there’s a workshop from World Camp Europe, I think 22, by Alice Orrù on alt text. And it’s really, really great. I find it’s a creative outlet.

    I’m not going to answer your question now, Michelle, because we will answer on it. A total teaser of what’s to come. But alt text is one of the many ways where you can express your creativity as well as make other people’s lives much easier.

    Because we also told one another, Michelle, that we will not keep, these will not be long episodes. We’re going to keep it, you know, half an hour is going to be the max, because we know we’ve got, we don’t have, nobody has that much time these days, and we’ve got much shorter attention spans, thanks to our lives online. So, and we want to be straight to the point.

    So, I just want to say a few things about why HTML matters so much, and why I insist, as you were saying, that you make such an important point, people think, well, I’m using a page builder, I don’t need to use HTML. But you do, with every single page builder, and I don’t care if it’s Squarespace or Wix, every single page builder has a way to let you tag your content. So, tag your content, and how do you do it?

    Now, I actually, I teach, I also teach in a local school here in Valencia, in Spain, where I live, it’s a marketing master, and I teach them, they need to build their landing page for their own projects, and I start from HTML. And people go, why, how? Because they need to learn how to structure their content, and I promise you that if you start from an HTML structure, your content will be way, way better.

    And there are a few things that I want to make sure that we touch upon as regards HTML. So, I am going to share my, a few slides. It’s not going to be a boring lesson, but I just want it to make a few points.

    I want for people who are listening and to leave. So, share, I’m going to share screen. Actually, let me, let me, so it’s going to be view.

    Okay, play, play window. We get that. And then play.

    Here we are. Share, share screen, share screen. Here we are.

    And I think that the first, it’s not sharing though. It’s not sharing. No, it hasn’t brought it up for me to be able, oh, here it is.

    It’s just a bit slow.

    [Michelle Frechette]

    There we are.

    [Piccia Neri]

    Okay. Really hot. This is part of a workshop that I teach about typography and semantic HTML.

    What does it mean? First of all, let’s remind ourselves that actually HTML is the origins of the web. That’s where does it come from?

    It comes from Tim Berners-Lee, he’s credited to be the sort of inventor of the internet. And HTML is a markup language that was strongly based on SGML, which is standard generalised markup language. And I’m not going to go through all of it, but it basically was an internationally accepted method for marking up text into structured units, much like HTML is.

    And it was something within academia. It was to share texts widely in a way that would be understandable to everyone over academic networks. So it was always about text, always.

    That’s what HTML is about. But it was never about visual styles. That’s why it matters so much.

    And it’s like the backbone of everything that we do online. And why do we call it semantic HTML? This is the crux of why HTML is so important for the web.

    Semantic and for accessibility. Because semantic HTML, something that is semantic, semantics as a noun means that something that expresses meaning and something that conveys purpose and that gives a usage indication. So that’s why if we tag our content properly on the web, the browser and assistive technology will know immediately what that tag means and what that element is for.

    So, for instance, if you have a button, use the HTML tag button. Don’t use a class. Don’t use it.

    It already makes it interactive. It’s an interactive tag and it has a meaning and it describes the function as well. So this is why it is so important.

    And then I just I need to make sure that I also view the where are my other windows? Because I don’t need to I don’t want to sorry. So where is it where I can see?

    So show presenter display. Oh, here it is. Okay, so I can I can basically I can skip slides without going without going through.

    Yeah, you know what I mean? Because it’s like we don’t want to we don’t want to worry and boring question. So when we say use semantic HTML, what we mean is use the right element for its correct purpose.

    That’s the point. I don’t know. Did you notice that a while ago?

    I don’t know whether non designers notice this kind of thing, but not that long ago, Figma, the design tool Figma came out with Figma Sites. Basically, it’s a great you design something in Figma, which designers love. It’s a vector vector design tool that reminds us of all the other design tools that we use in our lives.

    And so now there’s you can literally create a site from your design in Figma and everybody was super excited about it. But then people started analysing the code and calling it a div soup. Div is a an element is actually not entirely true that as a tag, it’s completely not non semantic.

    But it definitely doesn’t help if everything is a div. Instead of being correctly tagged on a website, then a screen reader that relies on HTML will not know what it’s about. Because that’s the important thing to say that all the assistive technology that is used, which is, you know, people who can’t use a mouse and will use a keyboard to navigate the web or screen readers and lots of other assistive technology rely on HTML.

    They completely rely on HTML to present information. So that is why. So I was saying, for instance, talking about the button tag, it’s natively, natively accessible, because it has it has a clear function, I’ve gone wait, I’ve gone too quick, doesn’t matter.

    It has a clear function, it is Macable [? unintelligible], and it’s interactive. And we know what it does. Okay, so that’s, that’s why it’s so important.

    [Michelle Frechette]

    So trying to use other things to describe about this overly complicating it, and making it less accessible, actually, completely.

    [Piccia Neri]

    So there’s no need that knowing what semantic HTML is, means that if you use the right semantic element for the right purpose, you will get a lot of accessibility for free, which is why we start from here, because people say often, accessibility is complicated, it’s expensive. It can be, but if you start from best practice, and from the basics, then it won’t be. This there’s a quote on the screen by Sara Souedan, who’s a great developer that has a wonderful accessibility course, which I am not a developer, but I went through it because it’s very, very well explained.

    There are a few things that go over my head, but, and it’s called Practical Accessibility Today. And her quote says, “Using the right semantic element for the right purpose will give you a lot of accessibility for free.” I know I just said it, but it bears repeating, Michelle.

    [Michelle Frechette]

    Absolutely, absolutely. And for anybody who’s listening and not watching, Piccia is reading you the slides that she has up here. You’re not missing anything visually.

    There is a bit of design in colour, blocking on the slide itself, but Piccia is giving you everything that you would need to see orally from the slide, so you’re able to understand and take everything in that way.

    [Piccia Neri]

    Absolutely. And I want to thank my friend, Bud Kraus, because he’s the first one that may be really aware of this, that you can never assume when you’ve got something on the screen, you cannot assume that everybody will be able to see it. So always make sure that it’s treated as radio, really.

    That’s what the point is. And there’s another reason why besides the operability of a website that uses HTML correctly, there’s something else. So this is a WebAIM is an accessibility initiative, and they always do a screen reader user survey.

    And according to this survey, 71.6% of respondents to their survey report that on a lengthy web page, they navigate through headings first, because you have to imagine that when you use your eyes, you can scan a web page with your eyes and decide what you’re interested in or not, because there are visual cues everywhere. There’s a layout, well, hopefully there is, in a lot of web pages there isn’t, but if you can’t see a web page, you need other ways of skimming through the content. And that’s how a lot of screen reader users use headings.

    And another way is, and actually 88.8% of the respondents to the survey also say that they find heading levels very useful or somewhat useful. That is almost all of them. So that’s why it’s really, really, really important to make sure that you use your headings correctly.

    And it’s really simple. Just follow a logical structure for your headings. I mean, I’m skipping a lot, but I’m just saying, most of us have heard about headings.

    You start from an H1, then H2, H3, H4, up to H6. I don’t normally, I usually get as far as H4. It’s rare that I go as deep as H6.

    It’s just too much. But if you think that this is obvious and everyone truly knows how to do it, I’m just slightly astonished. So I’m going to change my, so I’m going to stop this screen share, stop sharing, and I’m going to start another screen share.

    [Michelle Frechette]

    Well, you do that. I will say that when I was a new builder, back in the early, let’s say late 20s and early 2010s, I was one of those people who thought, oh, that just is a way to control the size of the font. And so I was using them absolutely inappropriately.

    And so learning the structure and learning how that works. I am a visual person. I, especially when I’m reading on my phone, I’ll scan down through all of the headings as well.

    And so the idea between the age one, two, three structure is to replicate for a screen reader what those who are using their vision are automatically doing. We want it to replicate that so people are having that same experience. Okay.

    You’ve got the site up on the screen now.

    [Piccia Neri]

    But you said something that’s really important. Basically a concept that’s at the basis of accessibility is that everybody should have the same experience regardless of ability, regardless of whatever tool they’re using to experience the web. Troy is saying love the Stripe page, but I hate how the hero text is under the effect.

    So there’s a heading one, but let’s see what this heading one is underneath a gradient slash a lava lamp kind of effect?

    [Michelle Frechette]

    Yes, it’s definitely some kind of a, I don’t know if it’s a gif or a movie or something, but there’s definitely movement, colourful movement. Colourful movement. Over the words, not behind them.

    [Piccia Neri]

    Over the words, not behind them. Even though it’s really big, it still shows, but also it’s a contrast violation. This is not enough contrast because the type is also a little bit transparent.

    So there’s definitely not enough contrast. Like now it’s gone very red and it moves. I mean the movement, I have a serious vestibular disorder.

    So anything that moves and that I can’t stop makes me sick. Like at the bottom of the screen, there are some micro animations that I can’t stop. And that’s enough to make me sick.

    This effect, this lava lamp effect at the top doesn’t make me sick, but maybe makes someone else sick. You can never do something else that we need to, you know. So I just want to show you, I’m using the WAVE tool, which is a free web browser extension that gives you a few of the issues and it’s always really interesting.

    So it detects 244 contrast errors on this. Was that all? Because it’s like you’ve got one job.

    I mean, it really… contrast… I have a whole workshop on colour and contrast because it’s my favourite thing, but it’s so easy to get it right. And yet about 90% of the internet doesn’t get it right.

    And I think I’m being generous. WebAIM does a yearly report on the top 1 million web pages. So the 1 million web pages that are at the top of the internet.

    And this year, I think it was 84% of contrast errors on the home page. So this is now stopped in a 3D effect for the text, which is like, I can’t even look at it. But I just want to show you this structure.

    Apart from the contrast errors, it shows you also that in total, apart from the contrast errors, this automated accessibility evaluation tool WAVE only says that it’s got only five errors. We wish it doesn’t have only five errors. These tools give you a sort of an overview, but they never…

    So if I look at this structure, look at this. It’s showing, I once can’t… It’s basically almost all of them are H1s.

    So there are occasionally H2s, but almost all of them are H1s. And I once counted them, or maybe I used the tool that actually does know does know counts them automatically, which… And these are all…

    It’s not… They’re all H1s. And this is one of the things that makes a page really, really inaccessible, but it’s not actually using a more than one H1.

    It’s not actually a WCAG violation. WCAG are remind everyone is web content accessibility guidelines, which are the benchmark for accessibility for compliance normally. It doesn’t mean that you’re not compliant, which is why I say, you know, WCAG and compliance are important, but not that important because they ‘re a work in progress.

    And definitely, there’s a school of thought that says you may want… You can have more than one h1 when you have very clear sections that have different topics, but not like this

    [Michelle Frechette]

    So it reminds me of the people when I was in college with their highlighters and how they would highlight almost every single word on every single page. And I’m like, basically, you just coloured your book because the whole purpose of a highlighter was to show the most important things to draw your eye back to. So if you’ve highlighted the whole book, you’ve just made it really hard to read.

    If everything is an H1 tag, then there is no hierarchy. You’ve basically just said, I want this big and bold.

    [Piccia Neri]

    Completely, I couldn’t agree more. That’s exactly it. So a page that looks so tidy and so, you know, in theory, well-designed because they use a very tight grid and they use nice typography, but it’s not accessible at all.

    And so now, for instance, in the section of page that we’re showing now, because I turned the wave tool off, it’s got an unstoppable animation of one of their screens. I don’t know what it really adds to the narration, but I have to leave because it makes me sick. So that’s very important.

    Now, I want to address Troy’s question because we said that we would. How does a screen reader handle the Canvas tag? And I will be very honest with you, Troy, I do not know.

    So if anyone who’s listening knows, thank you for telling us, I admit my ignorance in that point because I am a beginner screen reader user. I always use disabled testers because you can’t fake, you can’t simulate disability anyway. And using a screen reader, there’s an art to it.

    I often, when I do lives or even in my talks, there’s a friend of a blind doesn’t really use a screen reader, but he has his own way of using the web. And a friend who’s also an accessibility tester, Lazar Bulatovic, he’s a WordPress speaker as well. I often ask him to demonstrate how he uses a screen reader.

    And specifically on this website, he says it’s… it’s a nightmare.

    [Michelle Frechette]

    Troy, what we will do is we’ll find the answer for you by next week. We have a follow up, say curious on the whole animation aspect. As I know, there are requirements to include a pause button for videos, but curious on this style of animation.

    [Piccia Neri]

    So it’s basically the same Troy. There is a requirement – you should never have background videos that are on autoplay. Also, why would you want your website to be so slow and unperformant?

    Because there’s a big overlap between accessibility, sustainability and performance. So don’t do that. But also in micro animations, you have to be really, really, really careful because they can even they trigger my vestibular disease.

    And it’s the same thing. I mean, there’s actually I don’t recall the letter of the guideline. It’s I think it mentions five seconds.

    There are provisos. But the thing is that I don’t care. I get sick.

    I don’t know whether that I can always check the letter of the requirement. But it’s like, why would you make me run away from your web page? Do an animation animations are lovely.

    I’m not saying that you shouldn’t do them. But please make them stop. Do it once.

    I’ve seen it once. It’s all right. Because it doesn’t really serve any kind of purpose.

    We have one at the bottom of the screen. I’ve lost my mouse. Here it is.

    And it doesn’t really serve any kind of purpose. Just do it once, run it once and then make it stop because it’s not adding anything to the narration. There’s no advantage to it.

    And however you put it, it’s definitely a drain on resources. And if you’re interested in animation, oh, sorry, I thought sort of play on, say, a hero banner as a background element was OK providing you include the pause button. No, you’re not incorrect, actually.

    But it still makes me sick. If you put a pause button, I think you’re OK with compliance. I’m still not OK because you’re making me scramble to find the stop.

    And unless it’s really obvious, usually I miss it. And I’m like, I’ve got to leave instantly. And at least I’m not, you know, I don’t suffer from a PFC or worse things.

    There are people that get triggered very, very quickly. And the performance side and sustainability side still remains. And it’s very, very important.

    Why do you want that? Also, I would like to know in this case, I would like proof that your background video and actually increase your conversions because actually, background videos are like sliders. It’s only the client that wants them.

    No one else needs them or wants them at all. So I’m going to stop sharing, talking about.

    [Michelle Frechette]

    So so it is the struggle, right? Following the guidelines versus going that extra mile and going beyond the requirements. And referring back to the canvas data says you should add a fallback text inside the canvas, which will be read by screen readers.

    [Piccia Neri]

    Thank you very much. Thank you. That’s more of a dev thing.

    So that’s why it’s slightly outside my knowledge area. Thank you.

    [Michelle Frechette]

    One of the things I wanted to add to when we talk about accessibility as a whole, you know, we tend to think about it for people who have disabilities. We think primarily people think about blind people or people with low vision for sure, right? Because it just makes sense.

    It’s a visual, you know, the web feels like a visual thing to people who can see it. But it’s not just people who are blind. It’s for basically a lot of people.

    There’s people who are using keyboards one handed or people who are using voice to activate how they work through a website. But down to like the bare minimum, as I was designing even 10 years ago in my 40s, there was a popular page builder. I’m not going to name names, but I would have to constantly change the font on it, because the default font was a size 12.

    And it was grey, as opposed to a even a charcoal or black and at least a 14. And in my 40s, I was already struggling to see those without being somebody who’s blind. I weren’t wearing glasses.

    You’re wearing glasses. There’s a lot of people in the world who wear glasses for sure, which means I can see it. But even with my glasses, if I’m struggling, that’s an issue.

    We are dealing with an ageing population. We’re dealing with people who are, you know, on their phones and accessibility really does help when you are using on your phone. We’re dealing with people who are holding children with one hand and trying to work with the other.

    We’re dealing with people who have, oh, shall I say, fallen off their roller skates and hurt themselves like you have done in town. Conda, who are you thinking about? Yeah, I have no idea.

    But even temporary disability is something that affects the way that people use the internet. And so it’s way more than just the blind people. And first of all, we should care about everybody, even if it’s a small number of people.

    But accessibility extends far beyond visual components, for sure. And I just want to make sure that people who are listening who may not be aware of that are thinking beyond their blind people who are possibly on their website.

    [Piccia Neri]

    I always mention the same example because it’s fascinating. I mentioned Lazar earlier, who’s a blind accessibility professional and tester. And there’s a website that he uses every day.

    And it’s his favourite website. It’s called blindhelp.net. And it’s designed, conceived for blind people to navigate the internet.

    It is terrible for sighted people because the contrast issues galore, it’s got layouts, layout really wonky and visually really hard to understand. And I think it’s a great example because we all access the web in different ways. And as regards what you were saying, who isn’t somehow disabled, even for five minutes a day, you’re going to be disabled, you’re going to be on a train and unable to listen to something and you will need captions.

    There are, by the way, in September, I can’t remember the dates, but I’m doing the Equalized Digital meetup. And I will be talking about captions, which are one of my pet loves or pet hates, however you want to call it. But another very important point to make is that, and it’s what you’re saying that accessibility, it’s for a wide range of people, but it is really for everyone because almost every single innovation that I can think of started because of accessibility.

    One big thing is Siri and Alexa, those are systems that were created because of accessibility. And so innovation and accessibility go completely hand in hand. And James is saying very interesting things about educating clients who are not aware of the rules for accessibility.

    And I always, that’s why I think, yeah, adding accessibility to the discovery process, James is saying, which is very important. And educating the client, but also educating the staff to create accessible content because what I see happening again and I’m a huge champion of accessibility education, and it’s kind of what I do most these days, and what I want to do most. So hit me up.

    Actually, I’m coming out with a big course very soon, which I will announce when I’m ready. But the point is that you can create a completely accessible or completely, you know, there’s never 100% accessibility to clear that out. And we’re only ever doing our best, but you can create something that is a good result for a client.

    And then the marketing department starts adding articles to the blog. And they do that. They don’t use HTML tags.

    They don’t use our text. They add videos without captions. They add animations.

    They use the wrong contrast.

    [Michelle Frechette]

    So properly use their links. They don’t label their links properly. Click here means nothing to people.

    [Piccia Neri]

    Absolutely. Click here means nothing because screen reader users will isolate links and get them out of context. So it always needs to be something.

    But we’ve already gone way over. So we probably need to stop soon. So I think that I want to perhaps end my bit with this, which is education, education, education.

    And no AI isn’t enough yet, because AI is also fed whatever is on the Internet. And right now, 4% of the Internet is accessible. So not yet.

    Yeah. Yeah. So that for sure.

    [Michelle Frechette]

    For sure.

    [Piccia Neri]

    Education. Education education.

    [Michelle Frechette]

    I will also add, there are there are things you can turn on on social media, specifically on X, formerly Twitter, that will remind you before you post anything with an image or a GIF to it’s like, are you sure you want to post that without alt text? Don’t you want to describe this image for people? And that saves me more than once when I’m not in the mode of thinking properly and I go to push, I’m like, yes, of course, I want to describe that.

    And it’s so easy to get lazy and just be like, oh, this time, this one time, it doesn’t matter. But I always think of my friend Alex, and I know that he follows me across social media. And I think to myself, and all you have to have is one blind friend, right?

    To say to yourself, Alex would be so disappointed in me if he, if I’m here with a picture, and I didn’t describe it for him. And I, and he’s not really going to be just, I mean, he might be disappointed, but he’s not going to come after me. He’s not going to say, oh, Michelle, how could you do that to me?

    But in my mind, I say to myself, how could I do that to Alex? And so I always make sure that what I’m putting out there has a description. So that friends like Alex, and of course, there’s more people than Alex, but he’s the one that sticks in my mind the most, because he is a good friend of mine.

    I want to make sure that anything I put out there, he can partake of as well. And so even if you have to make up a friend, just even if you have to say to yourself, Michelle would be so disappointed in me that I didn’t do this for her friend, Alex. So make sure that you do that because it’s, it’s, it’s simple to do.

    It doesn’t really take that long to describe an image that you’re putting out anywhere. And it’s, it’s just the right thing to do.

    [Piccia Neri]

    And it’s great for SEO, if that wasn’t enough.

    [Michelle Frechette]

    And there’s legal requirements coming as well. So there’s lots of reasons. If you don’t want to be altruistic and do it for the right reasons, do it for other reasons, do it for selfish reasons, because it still accomplishes the same thing.

    Okay, we’re going to wrap it up because we did definitely. But we thought we would, which is not difficult, you and I start talking, this is what happens, especially about things we’re passionate about. Next week, we’re going to dive into typography.

    And so come prepared to learn a little bit more about that. As I said, if you have questions, you’re watching this after we’re live, please put them in the comments anyway, or message me or Piccia separately, we’ll make sure to address those in next, you know, before we start next week’s topic. We’ll try to be brief.

    We’ll try to keep this to half an hour going forward. We do hope this has been educational and that you’ll want to come back for the rest of the series. But thank you so much, Piccia, for joining me today and getting us kicked off.

    I think this is all really good information. And I’m excited to share with the rest of the world.

    [Piccia Neri]

    Thank you, Michelle, for being such a wonderful host. And thank you everyone for being there. I hope to see you next week.

    Thank you.

    [Michelle Frechette]

    Thanks for all the comments. We appreciate it. All right, we’ll see you all next week.

    Summary of the conversation on accessible design and HTML

    We finally did it! After postponing our accessibility series a few times (because life happens), Michelle and I kicked off our limited edition podcast series on accessible design. And let me tell you, starting with HTML was exactly the right choice. Even though I know some of you are already thinking, “But Piccia, I use WordPress/Squarespace/whatever, I don’t do HTML!”

    Wrong. You absolutely do HTML, you just don’t know it yet.

    Why we’re here talking about HTML (and why you should care)

    Let me be upfront with you: I’m a recovering creative designer. And honestly? Creative designers are the worst when it comes to accessibility. I used to be one of those people who thought accessibility would kill my creativity – until I got into UX design and realised something crucial: there can’t be any good user experience when even one single user is excluded.

    That’s when I started learning about accessibility and championing it more and more. And here’s the thing that really opened my eyes: according to a Deque study, 67% of accessibility issues are related to design decisions. Plus, about 70% of WCAG (Web Content Accessibility Guidelines) are essentially design rules.

    So even though coding plays a huge part, accessibility needs to start from design. We designers need to take responsibility and start thinking about accessibility as a creative brief, not as something that limits our creativity.

    HTML is design (yes, really)

    When I teach typography workshops, I always start with HTML. People look at me like I’m crazy, but here’s the thing: HTML is the bare bones of the web. It’s about text, structure, and meaning – it was never about visual styles.

    Tim Berners-Lee (credited as the inventor of the internet) based HTML on SGML, which was an internationally accepted method for marking up text into structured units within academia. The whole point was to share texts widely in a way that would be understandable to everyone over academic networks. It was always about accessible communication.

    The magic of semantic HTML

    Here’s where it gets really interesting. Semantic HTML means using the right element for its correct purpose. It’s that simple. When you do this, the browser and assistive technology immediately know what that element is for and what it means.

    For example, if you have a button, use the HTML <button> tag. Don’t use a div with a class. The button tag is already interactive, it’s already accessible, and it describes its function. As Sara Soueidan (who has a wonderful accessibility course for developers) says: “Using the right semantic element for the right purpose will give you a lot of accessibility for free.”

    And trust me, you want accessibility for free, because people often tell me accessibility is complicated and expensive. It can be, but if you start from best practices and basics, it won’t be.

    The heading hierarchy reality check

    Michelle made a great point during our conversation about this being like people in college with highlighters who highlight almost every word. If you highlight everything, you’ve basically just coloured your book and made it harder to read. Same with headings – if everything is an H1, there’s no hierarchy.

    Here’s a stat that should make you pay attention: according to WebAIM’s screen reader user survey, 71.6% of respondents navigate through lengthy web pages using headings first. And 88.8% find heading levels very or somewhat useful. That’s almost everyone!

    Think about it – when you scan a webpage with your eyes, you can decide what interests you because there are visual cues everywhere. If you can’t see a webpage, you need other ways of skimming content. That’s exactly what headings provide.

    The real-world reality check

    During our live session, I showed everyone a website that looked beautifully designed: the Stripe website. Tight grid, nice typography, very polished. But when I used the WAVE accessibility tool on it, it had 244 contrast errors. And almost all the headings were H1s. It was a complete nightmare for screen reader users.

    The site also had this lava lamp effect over the hero text that not only created contrast violations but made me physically sick because of my vestibular disorder. And there were unstoppable micro-animations at the bottom. It’s like they had one job – contrast – and they completely failed at it.

    Who are we really designing for?

    Michelle brought up something really important: this isn’t just about blind people. I mean, we should absolutely care about making things accessible for blind users, but accessibility extends way beyond that.

    We’re dealing with:

    • An aging population (and trust me, in our 40s we were already struggling with size 12 grey text)
    • People using phones with one hand while holding a child
    • People with temporary disabilities (Michelle mentioned someone who fell off roller skates – that would be me, in November 2024: I was one-handed for months)
    • Users in challenging environments who need captions
    • Anyone who’s ever been on a train and couldn’t listen to audio

    I always mention my friend Lazar, who’s a blind accessibility professional. His favorite website is blindhelp.net, which is designed for blind users. It’s terrible for sighted people—contrast issues everywhere, wonky layout—but it works perfectly for him. We all access the web differently.

    The innovation connection

    Here’s something that might surprise you: almost every innovation I can think of started because of accessibility needs. Siri? Alexa? Those systems were created because of accessibility. Innovation and accessibility go hand in hand.

    And if you need more motivation, only 4% of the internet is currently accessible. So no, AI can’t fix this yet – it’s being fed the same inaccessible content that already exists.

    Making it personal (because it should be)

    Michelle shared something that really stuck with me. She said she always thinks of her friend Alex when posting on social media. She’ll be about to post an image and think, “Alex would be so disappointed in me if I didn’t describe this for him.” Even if you have to make up a friend, having that personal connection makes all the difference.

    Michelle set up reminders on her social media to prompt her about alt text before posting. It’s saved her more times than she can count when she’s in a hurry and about to hit post.

    The practical stuff

    Here’s what you can start doing today:

    • Structure your content properly: Use H1 for your main title, H2 for major sections, H3 for subsections. Follow a logical hierarchy.
    • Use semantic elements: Button tags for buttons, nav tags for navigation, main tags for main content. Stop making everything a div.
    • Write better links: Instead of “click here,” use “read our accessibility guide.” Screen reader users often pull links out of context.
    • Add alt text: Describe what’s in the image and why it matters. And yes, it’s great for SEO too.
    • Test with your keyboard: Navigate your site using only the Tab key. If you can’t reach everything, neither can keyboard users.

    The education problem

    One thing that frustrates me is when teams create something accessible, then the marketing department starts adding blog posts without proper HTML tags, videos without captions, animations that can’t be stopped, wrong contrast ratios.

    Education, education, education. That’s what we need. No shortcuts, no AI magic bullets (yet), just good old-fashioned learning and implementing best practices.

    What’s next

    We’re planning to cover typography next week (my favourite topic!), then color and contrast, layout, legal requirements, captions, social media accessibility, data visualisation, and animations. Each topic builds on the HTML foundation we talked about today.

    The key thing to remember is that there’s no such thing as 100% accessibility – we’re always just doing our best.

    But if you start with semantic HTML and think about accessibility as part of your creative process instead of a constraint, you’ll create better experiences for everyone.

    And honestly? Once you start thinking this way, it becomes second nature. Just like Michelle checking for her friend Alex, or getting those social media reminders: it becomes part of your workflow, not an extra burden.

    This was our first episode in a limited series on accessible design. If you have questions about anything we covered, drop them in the comments: we’ll address them in next week’s episode about typography. Make sure you click on the “notify me” button on the scheduled YouTube event page, so you won’t accidentally miss it!

    Review Your Cart
    0
    Add Coupon Code
    Subtotal

     
    Scroll to Top