Blog posts - craigabbott.co.uk2024-02-01T00:00:00Zhttps://www.craigabbott.co.uk/Craig abbottWhat is 'normal' anyway?2014-10-29T00:00:00Zhttps://www.craigabbott.co.uk/blog/what-is-normal-anyway/
<h1>What is 'normal' anyway?</h1>
<p><em>I want to be normal</em>. How many people have muttered these words during times of turmoil? How many people have wanted to trade their noisy racing thoughts, for a brain that was more peaceful? A brain that was numb and void of opinion.</p>
<p>I know I have.</p>
<p>As I sit here, staring at the blank page, I can already feel my anxieties rising. As I begin to write, I find myself trying to imagine how anybody reading this will perceive my words.</p>
<p>Type. Delete. Type. Delete.</p>
<p>The problem is, I rarely talk about these issues for fear of ridicule.</p>
<p>I'm afraid that people won't take me seriously, or that they will brand me dramatic. I have suffered from depression and anxiety for as long as I can remember. Doctors, councillors, they all like to label stuff and hand out leaflets. Is it Cyclothymia. Maybe it's Bipolar 2. These are a few suggestions I've had thrown at me to try and define my troubles.</p>
<p>Professional people, friends, family, everyone has an opinion:</p>
<ul>
<li>'Cheer up mate.'</li>
<li>'What do <em>you</em> have to be down about?'</li>
<li>'Things can't be <em>that</em> bad!'</li>
</ul>
<p>Phrases like these are why I say nothing. Why I shuffle through life hiding the lows and pretending to be ok.</p>
<p>My anxieties go way back. The need for acceptance and the need to fit in is burned deep into my brain's limbic system. I can pretend to be confident. Bravado can get me so far. But then the armour cracks and that ugly viscous fluid of self-doubt slowly leaks out. It makes you forget who you are. It stains your soul and the very skin you are printed on.</p>
<h2>The problem is...</h2>
<p>I have always known I was different.</p>
<p>I grew up in Newcastle, often dubbed the party capital of the UK. Parties, fashion, clubbing, 'getting mortal', they are all part of normal life growing up here.</p>
<p>I hated it. But, if you didn't conform, people would brand you 'boring'. There is no room for introverts here. You will simply be crushed under the egos of narcissistic juggernauts.</p>
<p>Large crowds. Strangers. Drunk people. Rowdy and volatile situations. These are all things that send my anxieties through the roof. I spend most of the night on edge, analysing every detail of the room. Escape routes, possible threats, potential weapons. I have no control. And the only way to regain any is to analyse everything. To come up with a plan for every possible scenario.</p>
<p>As you can imagine, this is mentally exhausting, and I'm usually ready for home well before midnight. But of course, you can't leave before midnight, because that's <em>'boring'</em>.</p>
<p>I spent these times, the best part of a decade, finding ways to try and subdue my anxieties. Meanwhile, I was still trying to fit in and maintain the illusion that I was a <em>'normal'</em> socialite. Trying to last until 4am when the clubs closed so I could be part of the taxi-queue victory parade for full-time partiers.</p>
<p>Now comes the bit I find difficult to admit.</p>
<p>I found the only way achieve this, was to not think about anything at all. It sounds simple enough. But for me, the only way to achieve this is to get so intoxicated that my brain didn't have the ability to think of anything to worry about. Or, at least, so it couldn't remember any of it in the morning.</p>
<p>Looking back, this behaviour made me hate myself. It made me selfish, angry and often unapproachable. I would spend my nights unable to sleep and my days unable to get out of bed. I would snap at anybody that attempted to save me from myself.</p>
<p>As I look out on my past, relationships lay wrecked in my field of view. Dashed upon the rocks for failing to navigate the fierce storm of my self-destruction. I wasn't addressing the issue. I was abusing a coping mechanism.</p>
<p>The trouble with a coping mechanism is that it never addresses the problem. It doesn't ever make you feel better. It just delays the onset of despair. And amplifies it when it arrives.</p>
<p>Creative people tend to think more. And, by this, I don't mean they're more intelligent. I don't mean that if you don't identify as creative that you have nothing going on between your ears. I just mean creative people are more likely to dwell on something that others may overlook.</p>
<p>Creative people pay attention to things in far greater detail. While this is our gift, it is also our curse. Attention to detail is the difference between painting a picture and a masterpiece. But it is also this attention to detail that makes us ruminate. It is the reason we can't let go easily. The reason we play scenarios out in our heads over and over again. The reason we can always see how we could have done things better.</p>
<p>It is this ruminating that is often the catalyst for depression. Or at least, it is in my case. The constant battle with yourself to be better. The over analytical views you take of your work or yourself. The feeling that you don't deserve any credit you receive. These feelings are all too real in our industry. Because in this industry, it is rare for you to come up with anything on your own. Clients give briefs to designers. Designers then give work to developers. When you reach the end of a project, it is often easy to feel like the team has carried you, or that they have handed you an idea. My councillor would label this 'imposter syndrome'. It is the inability to accept an accomplishment, despite the external evidence staring you in the face.</p>
<h2>So how do we deal with this?</h2>
<h3>Learn to internalise any external verification</h3>
<p>When somebody compliments you, believe it and take it on board. Very few people hand out lies as compliments, so if they tell you they like your work, it's likely that they do.</p>
<p>Say thank you, pat yourself on the back, and don't always dwell on what you felt you could have done better.</p>
<h3>Surround yourself with positive, like-minded people</h3>
<p>If people are negative, stop taking their comments on board. Don't associate with those who negatively impact your life or make you feel anxious about being yourself.</p>
<p>One of the biggest problems in my life was believing I had lots of friends, when in fact, I had lots of acquaintances.</p>
<p>There's a great quote by Goi Nasu, which is:</p>
<blockquote>
<p>'An entire sea of water can't sink a ship unless it gets inside the ship. Similarly, the negativity of the world can't put you down unless you allow it to get inside you.'</p>
</blockquote>
<h3>Don't suffer in silence</h3>
<p>If you have any doubts, anxieties, or if you are feeling depressed, talk to somebody. Hell, reach out and talk to me!</p>
<p>Sometimes lifting the lid off it all makes the load seem lighter.</p>
<h3>Look for flaws in others</h3>
<p>I don't mean this in the sense that you should make things difficult for people, or point out their mistakes. But notice to yourself that they do make mistakes, and realise that this is what humans do.</p>
<p>Understand that you are not alone. Nobody is perfect, and recognising this can help you to come to terms with your mistakes when you make them.</p>
<h3>Discover your fears</h3>
<p>All anxieties stem from fear. You need to work out what it is that you're afraid of and make an action plan to try and conquer it.</p>
<h3>Discover what makes you happy</h3>
<p>Most people think more money will make them happy. But the depression doesn't go away no matter how much money they make.</p>
<p>For me, I'm most happy when I'm helping people. The Joker says 'if you're good at something never do it for free.' But, if I can donate my time, or something I'm no longer using, and it genuinely helps somebody, that brings me more joy than the token amount of money I'd probably charge for it!</p>
<h3>Don't conform</h3>
<p>If you don't want to do something, then don't do it. I am now teetotal because I don't enjoy drinking.</p>
<p>If I'm honest with myself, I never have enjoyed it. It was a coping mechanism that is no longer needed. People may think it is boring. So what? In fact, people often have more of an issue with me <em>not</em> drinking, then I do.</p>
<h3>Be true to yourself</h3>
<p>This is probably the most important point.</p>
<p>Wear the clothes you want to wear, rather than what society has told you is cool! Be passionate about the things that interest you rather that whatever is popular at the time.</p>
<p>Individuality is what makes us human. We should embrace and celebrate the fact that everybody is different.</p>
<p>How can you ever escape depression with the suppression of who you are? How can you ever be happy with yourself if you are pretending to be somebody else?</p>
<p>If you don't agree with any of these points, then that is fine. I'm at a point in my life where I don't feel like I need your approval!</p>
<blockquote>
<p>I am what I am, not what you would like me to be.</p>
</blockquote>
<p>This article was part of <a href="http://geekmentalhelp.com/">Geek Mental Help</a> Week. It's a week-long series of articles, blog posts, conversations, podcasts and events across the web about mental health issues, how to help people who suffer, and those who care for us.</p>
<p>Thanks for reading,
Craig</p>
Hear no, see no, techno2016-03-31T00:00:00Zhttps://www.craigabbott.co.uk/blog/hear-no-see-no-techno/
<h1>Hear no, see no, techno</h1>
<p>Last week I attended <a href="http://www.wearesigma.com/campdigital/2017/">Camp Digital</a>, in the beautiful Town Hall of Manchester.</p>
<p>It was your usual digital conference. Your usual crowd. But, today I saw a talk that has changed the way I think about websites and service design forever.</p>
<p>By now, we all know websites have to be responsive. They have to be malleable, so that they look crisp and well laid out on all devices, and columns should stack when the viewport becomes narrow.</p>
<p>We know the fonts need to scale on mobile devices, and that we may need to include higher resolution images for retina displays.</p>
<p>We have this all figured out. But, we still assume people are always using the same devices we use and seeing the site the way that we see it.</p>
<h2>Accessibility matters</h2>
<p>'Hear no, see no, techno', was an inspiring talk I attended by the incredible <a href="http://www.mollywatt.com/">Molly Watt</a>.</p>
<p>Molly spoke about how technology allows her to interact with the world and the web, despite the small barrier of being both blind and deaf!</p>
<p>Molly was born with <a href="https://en.wikipedia.org/wiki/Usher_syndrome">Usher Syndrome</a>. She was born deaf, then became almost completely blind due to <a href="https://en.wikipedia.org/wiki/Retinitis_pigmentosa">retinitis pigmentosa</a>.</p>
<p>In the past, this would have made a lot of tasks impossible. But, here she stood, strong, independent, and educating us on how to do better.</p>
<p>She delivered an amazing talk, interacting with the audience through the use of cochlear implants, which stream the audio straight into her head by converting sound waves into electrical impulses to stimulate the auditory nerve.</p>
<p>She also wears an Apple Watch, and uses haptic feedback to navigate the city. Something as simple as making the watch vibrate to indicate whether its time to turn left or right seems so simple, but it's something most people, myself included, would overlook.</p>
<p>Molly talked about things that are often not on a designers radar. For example, can you change the colours or the contrast of your website? Can you change the font size? The answer is probably not, unless it involves opening the stylesheet.</p>
<h2>Infinity scrolling is a damaging trend</h2>
<p>Another thing I found fascinating was something as simple as a twitter widget. Twitter uses 'infinite scrolling', which means as you're scrolling and you approach the bottom, it loads in more tweets.</p>
<p>This is fine you are able to click away from the widget and continue your interaction with the site. But what if you're trying to <kbd>tab</kbd> through the content using a keyboard.</p>
<p>Every time you <kbd>tab</kbd> down a tweet, it loads in another one. And, because it is called 'infinite scrolling', you could be seven years deep in somebodies twitter feed by the time you get out!</p>
<h2>Doing better</h2>
<p>I originally posted this on my old inaccessible WordPress blog. But thanks to Molly I've made some changes. I plan to learn as much about accessibility as I can, so that I no longer disable people through bad design.</p>
<p>As designers we often focus too much on making things look pretty. Instead, we should be making them available to everyone!</p>
How to calculate reading time, like Medium2016-03-31T00:00:00Zhttps://www.craigabbott.co.uk/blog/how-to-calculate-reading-time-like-medium/
<h1>How to calculate reading time, like Medium</h1>
<p>Recently, I took a leaf out of Medium's book and decided to add the estimated reading time to my blog posts. This was so that people could decide whether they had enough time to commit to the post before reading it.</p>
<p>The task was pretty simple. It was only 7 lines of JavaScript. I wrote it and implemented it in a single train journey to Leeds.</p>
<p>When I tweeted about it, I got a request to write an explanation of the code. So here it goes!</p>
<p>Below is the function. I'll go through each line of code and explain in detail what it does, so even if you're not using Node or Javascript, you can reverse engineer it for your language of choice.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">readingTime</span> (text) {<br /> <span class="hljs-keyword">const</span> wordsPerMinute = <span class="hljs-number">200</span><br /> <span class="hljs-keyword">const</span> noOfWords = text.<span class="hljs-title function_">split</span>(<span class="hljs-regexp">/\s/g</span>).<span class="hljs-property">length</span><br /> <span class="hljs-keyword">const</span> minutes = noOfWords / wordsPerMinute<br /> <span class="hljs-keyword">const</span> readTime = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(minutes)<br /> <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${readTime}</span> minute read`</span><br />}</code></pre>
<h2>Step 1 - Declaring the function</h2>
<p>The first line sets up the function, giving it the name <code>readingTime</code>. It also tells it to expect an input which it can refer to as <code>text</code>.</p>
<p>The <code>text</code> variable will be your article or blog post, as a string, that you want to calculate the reading time on.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">readingTime</span>(<span class="hljs-params">text</span>) {}</code></pre>
<h2>Step 2 - Setting the number of words per minute</h2>
<p>The next step is to create a variable called <code>wordsPerMinute</code>, and set it to 200. The value is 200, because according to Google, that's the average number of words per minute a person can read.</p>
<p>It's obviously not going to be the same for everybody, but it seemed like a decent punt. In testing, Medium assumes you can read more. Their read time calculations were substantially faster than my calculations.</p>
<p>I assume this is so that people aren't put off reading stuff on their platform, but I've gone for a more realistic approach.</p>
<p>I've used <code>const</code> to declare my variables as I'm using ES6 syntax, but you can also use <code>var</code> if you prefer.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">readingTime</span>(<span class="hljs-params">text</span>) {<br /> <span class="hljs-keyword">const</span> wordsPerMinute = <span class="hljs-number">200</span><br />}</code></pre>
<h2>Step 3 - Calculating the number of words</h2>
<p>The next step is the most complex. It's where we take the text and then calculate how many words it contains. There's actually 3 separate steps all chained together.</p>
<p>First, we call the <code>.split()</code> method. We can call this on any string. It works by breaking the string up on a specific character you pass in, and it returns an array.</p>
<p>For example, <code>'I-am-Craig'.split('-')</code> would return an array of <code>['I', 'am', 'Craig']</code>. This is because I told it to split on a hyphen, so it went through and used the hyphens as the marker to create the array.</p>
<p>The problem is, article text isn't joined by hyphens. It will be joined by spaces, tabs, new lines, returns etc. So we're going to need to tell it to split on more than one thing. To do this, we use a regular expression, also known as regex.</p>
<p>A regex will match a pattern rather than a single character. To define a regex, we put a pattern inside of two forward slashes. The pattern I used was <code>\s</code>. This stands for whitespace, and it will match spaces, tabs, returns and newlines.</p>
<p>However, <code>/\s/</code> would actually stop after finding the first whitespace character. So, we put a <code>g</code> after the closing slash, which stands for global. This tells the regex to keep going to the end even if it has found a match.</p>
<p>If you want to learn more about regex, You can play with patterns at <a href="https://regex101.com/#javascript">regex101.com/</a>, and you can do an online course for free at <a href="https://www.codecademy.com/courses/javascript-intermediate-en-NJ7Lr/0/1">Codecademy</a>.</p>
<p>Once we have our regex pattern, we pass that into the <code>split()</code> method from earlier. This will use any whitespace characters to break up the text, and return an array of all the words.</p>
<p>Now, the last step is to count all the words in the array. To do that, we use the <code>.length</code> property. This can be called on any array and will return a number. For example, our array from earlier <code>['I', 'am, 'Craig'].length</code> would return <code>3</code>.</p>
<p>Chain them all together and it will give you the number of words in your text.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">readingTime</span>(<span class="hljs-params">text</span>) {<br /> <span class="hljs-keyword">const</span> wordsPerMinute = <span class="hljs-number">200</span><br /> <span class="hljs-keyword">const</span> noOfWords = text.<span class="hljs-title function_">split</span>(<span class="hljs-regexp">/\s/g</span>).<span class="hljs-property">length</span><br />}</code></pre>
<h2>Step 4 - Calculate the read time in minutes</h2>
<p>In this step, create another new variable called minutes.</p>
<p>Set it to be the number of words divided by the words per minute. This will calculate the average read time based on our 200 word per minute estimate from Google.</p>
<p>For example, <code>400 words / 200 words per minute</code> would equal <code>2 minutes</code>.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">readingTime</span>(<span class="hljs-params">text</span>) {<br /> <span class="hljs-keyword">const</span> wordsPerMinute = <span class="hljs-number">200</span>;<br /> <span class="hljs-keyword">const</span> noOfWords = text.<span class="hljs-title function_">split</span>(<span class="hljs-regexp">/\s/g</span>).<span class="hljs-property">length</span>;<br /> <span class="hljs-keyword">const</span> minutes = noOfWords / wordsPerMinute;<br />}</code></pre>
<h2>Step 5 - Rounding up the read time</h2>
<p>Whenever you're doing division, it's likely you won't get nice round numbers. You will usually end up with a decimal. We don't want to tell somebody it will take them 3.34 minutes to read an article, so we round the number.</p>
<p>I've used the <code>.ceil()</code> method to do this. This stands for ceiling, and it will round any decimals up to the nearest whole number. Because we're using ceiling it will only round up.</p>
<p>Example:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(<span class="hljs-number">1</span>) <span class="hljs-comment">// 1</span><br /><span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(<span class="hljs-number">1.1</span>) <span class="hljs-comment">// 2</span><br /><span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(<span class="hljs-number">1.9</span>) <span class="hljs-comment">// 2</span><br /><span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(<span class="hljs-number">2</span>) <span class="hljs-comment">// 2</span></code></pre>
<p>I chose to round up, as I thought it was better to over estimate than to under estimate. If you want to round down you can use <code>.floor()</code> instead of <code>.ceil()</code>.</p>
<p>The only downside of using ceiling, is that passing in one word would still return a read time of 1 minute. However, I don't plan on doing any 1 word blog posts, so it shouldn't affect me.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">readingTime</span>(<span class="hljs-params">text</span>) {<br /> <span class="hljs-keyword">const</span> wordsPerMinute = <span class="hljs-number">200</span><br /> <span class="hljs-keyword">const</span> noOfWords = text.<span class="hljs-title function_">split</span>(<span class="hljs-regexp">/\s/g</span>).<span class="hljs-property">length</span><br /> <span class="hljs-keyword">const</span> minutes = noOfWords / wordsPerMinute<br /> <span class="hljs-keyword">const</span> readTime = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(minutes)<br />}</code></pre>
<h2>Step 6 - Return and finish</h2>
<p>Now that you have your rounded time in minutes, the last step is to return it from your function. To make it more readable, I've added some words so if our read time was <code>2</code>, the function would return <code>2 minute read</code>.</p>
<p>I've used backticks to declare my string, but you can do it using <code>readTime + ' minute read'</code> if you prefer.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">readingTime</span>(<span class="hljs-params">text</span>) {<br /> <span class="hljs-keyword">const</span> wordsPerMinute = <span class="hljs-number">200</span><br /> <span class="hljs-keyword">const</span> noOfWords = text.<span class="hljs-title function_">split</span>(<span class="hljs-regexp">/\s/g</span>).<span class="hljs-property">length</span><br /> <span class="hljs-keyword">const</span> minutes = noOfWords / wordsPerMinute<br /> <span class="hljs-keyword">const</span> readTime = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(minutes)<br /> <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${readTime}</span> minute read`</span><br />}</code></pre>
<h2>Step 7 - Using your function</h2>
<p>Now that we've got our function, we can call it by passing in any string to get a read time.</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-keyword">const</span> post = <span class="hljs-string">'This is a test post'</span><br /><span class="hljs-title function_">readingTime</span>(post) <span class="hljs-comment">// returns 1 minute read</span></code></pre>
<p>If you have any more questions, as always just reach out!</p>
Some thoughts on primary buttons2017-07-26T00:00:00Zhttps://www.craigabbott.co.uk/blog/some-thoughts-on-primary-buttons/
<h1>Some thoughts on primary buttons</h1>
<p>I've recently been ranting a lot about primary buttons. But people often don't understand what they are.</p>
<p>In my early days as a designer, I thought it just meant adding <code>class="btn-primary"</code> to my markup to make it pretty and blue, and this is a common mistake.</p>
<p>A primary button is the action that the user most likely going to be looking for. For example, if I'm filling in a contact form, the primary action should be to submit it.</p>
<p>Having more than 1 primary buttons on a page creates noise, and is more likely to slow me down or cause me to make mistakes.</p>
<p>If there is a need for multiple buttons, decide which one is the primary and style the other ones differently. For example, having multiple grey buttons and one green button gives more weight to what might be the primary and secondary actions.</p>
<p>Sometimes, thinking about the content a little harder will make the design much easier to use.</p>
<h2>Buttons vs. links, what's the difference?</h2>
<p>In the land of user centred design, buttons and links are not interchangeable.</p>
<p>A lot of people make this mistake and litter the Internet with bad design which is confusing for the people that have to use it. Some of my early contributions are still out there causing a nuisance. Sorry.</p>
<p>Buttons should trigger actions. They should interact with data. If you're submitting a form or deleting a comment, then a button is what to use. This is because you are taking data and doing something with it. Sending it, deleting it or saving it.</p>
<p>Links are a means of navigating between pages. You may navigate to a form using a link, then submit it using a button.</p>
<p>If you're styling links to look like buttons, you're perhaps making a mistake. But, if you're absolutely sure its not a mistake, at the very least make sure you change the role so that it remains accessible for users of assistive technology.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Subscribe to our mailing list<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
<p>By changing the role, it means if somebody using a voice controller says 'click button', it will still work.</p>
<p>As always, I'm happy to talk about this more if you're interested.</p>
Error messages are not funny2017-08-07T00:00:00Zhttps://www.craigabbott.co.uk/blog/error-messages-are-not-funny/
<h1>Error messages are not funny</h1>
<p>I'm at that age now where all my friends are into having babies. Because of this, I ended up browsing <a href="http://kidly.co.uk/">kidly.co.uk</a>. It's an eCommerce site aimed at gifts for children between 0 and 4 years old.</p>
<p>They do a great job of selling themselves as a 'by people for people' kind of company. There are fluffy images of the team looking happy. The about us section is full of references to parenting so that people can relate.</p>
<p>I get this type of marketing. It's smart. It bypasses your brain's neocortex and buries itself deep into your emotional core. If you relate to these people, and they seem like you, you're more likely to buy from them. It's genius!</p>
<p>I don't have a problem with this type of marketing, until it begins to encroach on the user experience.</p>
<p>On the page that asked for my details, I hit the submit button on the form without entering my phone number. I was then faced with the following red validation error, placed below the field I had left out.</p>
<blockquote>
<p>Oops, you forgot to pop in your number! Don't be shy.</p>
</blockquote>
<p>There are so many things wrong with this error message, and it caused a bit of a debate when I tweeted about it. You can <a href="https://twitter.com/abbott567/status/867654758588440576">read the debate on error messages on twitter</a>.</p>
<p>Out of curiosity, I deleted everything and hit submit again to see the full extent of the problem. The following screenshot shows the error messages in all their glory. For the sake of this post, I'm going to focus on the mobile number field.</p>
<p><img src="https://www.craigabbott.co.uk/posts/error-messages-are-not-funny/images/error-messages-are-not-funny.webp" alt="A screenshot of the kidly.co.uk website. It shows 3 text fields for recipient name, your mobile and recipient address. The error messages read: Please enter a recipient name. Oops, you forgot to pop in your mobile number, don't be shy. And, Doh! We need this to know where we're going." /></p>
<h2>Making assumptions about behaviour</h2>
<p>It suggests I forgot to enter my number. But, I didn't <em>forget</em>. I deliberately didn't enter my phone number, because I didn't want to. Particularly because buried in the privacy policy you can find the phrase:</p>
<blockquote>
<p>From time to time, we may also use your information to contact you for market research purposes. We may contact you by email, phone, fax or mail.</p>
</blockquote>
<p>What if I didn't own a mobile phone? What if I couldn't remember my number? By making this field mandatory, they were already excluding a set of users. They're saying, 'If you don't give us a phone number to spam you with, you can't buy this stuff you wanted.'</p>
<p>If you're truly doing user centred design, only ask for information that is essential. By forcing people to enter a mobile number for marketing purposes, you are designing for the needs of the business. This will make people drop out before paying you any money.</p>
<p>A solution is to not ask for the mobile number, or at the very least make it optional and tell the user exactly why you want it.</p>
<h2>Assuming personality</h2>
<p>'Don't be shy.' Well, this is a bit insulting. I wasn't shy. I was trying to pay for my stuff! We're not on a first date. I'm not even using Tinder. It's a website, where you offer products and I buy the ones I want. Making assumptions about peoples reasons for omitting something is an absolute minefield.</p>
<p>A solution here would be to delete this immediately. Then, have a quiet word with yourself for thinking it was a good idea in the first place.</p>
<h2>Using idioms</h2>
<p>Pop' in your number? How do you 'pop in' a number? This type of language is known as an idiom. It means you have no way of working out what it means without anybody teaching you explicitly.</p>
<p>This type of language can lead to difficulties. It is particularly difficult for people who speak English as a second language, and autistic people.</p>
<p>Autistic people can take things quite literally. Phrases such as 'Over the moon' and 'raining cats and dogs' can be confusing and stressful. It places them under unnecessary cognitive load.</p>
<p>A better solution is to tell the user exactly what they need to do to progress. If you need a phone number and there is no way round it, then explain that. The phrase 'enter a phone number' leaves no ambiguity as to what the user needs to do.</p>
<h2>Humour</h2>
<p>The language tries to sound light hearted. It's trying to be amusing.</p>
<p>In the twitter debate, somebody asked the following question.</p>
<blockquote>
<p>'Do you wonder if it breaks the user's frustration and makes them chuckle?'</p>
</blockquote>
<p>No. I don't think it does. I have no user need to be entertained. I have no user need for a chuckle during the checkout process. My need at this point is still very much to buy a gift for my friend's baby. And if I don't understand what the error message is telling me, it's going to make the process even more frustrating.</p>
<p>The solution to this again is to tell the user exactly what they need to do to progress, using as few words as possible.</p>
<h2>Inaccessible markup</h2>
<p>They have positioned the message telling you what is wrong below the field. Imagine you can't see the screen and you're using a screen reader. You will have to navigate past the thing you need to fix to find out what you did wrong. Then, you have to go back up the page again to edit the field, and this can be disorientating.</p>
<p>The solution to this is to inform the user there has been a problem. Then to give a summary to what they need to do to fix it along with clear and concise error messages on each field.</p>
<p>I'm going to base the next example on the design pattern we use for errors and validation in Government. You can <a href="https://design-system.service.gov.uk/patterns/validation/">view the GOV.UK design pattern for helping users to recover from validation errors</a>.</p>
<p>First thing to do is to state an error has occurred in the page title. For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">title</span>></span>Error: Your details<span class="hljs-tag"></<span class="hljs-name">title</span>></span></code></pre>
<p>Next, add an error container with a good heading. This can be something like 'There is a problem.' It should be the first thing in the main tag on the page. This lets the screen reader users orientate themselves quickly once the page has reloaded.</p>
<p>Add <code>role="alert"</code> to the container and add a tab index of -1.</p>
<p>Using <code>role="alert"</code> will make the screen reader announce it as soon as it's rendered on the page.</p>
<p>The tabindex allows you to fire some JavaScript when the document has loaded to set the focus to the error summary. This ensures that the user can navigate through the errors easily.</p>
<p>By default, only links and form elements are focusable. But, adding a tab index of -1 allows you to focus it them using JavaScript. Because it's -1, and not 0 or higher. it wont add it to the usual flow of links and form elements that happens when you hit the <kbd>tab</kbd> key.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"error-summary"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"alert"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>There's been a problem<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"DOMContentLoaded"</span>, <span class="hljs-function">() =></span> { <br /> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#error-summary'</span>).<span class="hljs-title function_">focus</span>()<br />})</code></pre>
<p>Next, add a list of the errors in the summary. This helps the user understand how many issues there are and how to fix each one before they even attempt to navigate the page.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"error-summary"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>There's been a problem<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Check the following:<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#mobile-number"</span>></span><br /> Mobile number cannot be blank<br /> <span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>Last but not least. Position your error messages between the label and the input instead of underneath. This gives it a more natural flow and means the user does not have to navigate past the input to find out what's wrong.</p>
<p>You can then link it to the input using <code>aria-describedby</code> to make sure the additional context is read out by screen readers.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group form-group--error"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"mobile-number"</span>></span><br /> Mobile number<br /> <span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mobile-number-error"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"error-message"</span>></span><br /> Error: Enter your mobile number<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input--error"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mobile-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"mobile-number-error"</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>Now, when the page loads, the screen reader will automatically focus the error summary. Read out there's been a problem. Give you a list the problems in a concise manner, and link each list item to the input.</p>
<p>As always, I'm happy to discussing anything I've written about in more detail, just get in touch.</p>
Death of the notes box2017-08-14T00:00:00Zhttps://www.craigabbott.co.uk/blog/death-of-the-notes-box/
<h1>Death of the notes box</h1>
<p>As a designer, it's not my job to design the things people <em>want</em>. It's my job to design the things they <em>need</em>.</p>
<p>When you work in Government, you see a lot of legacy systems. These are ancient beasts, built off the back of corporate I.T contracts decades ago.</p>
<p>They're clunky, and we're unable to make changes. UX wasn't even a thing back then. The interfaces range from what looks like Teletext to an Excel spreadsheet. The font size is about 6px, because any screen resolution over 640px was unheard of when they were built.</p>
<p>There's a lot these systems have to answer for. But one of my biggest gripes is the culture of 'note-box enthusiasts' these systems have created.</p>
<h2>The problem</h2>
<p>The notes box has become a global dumping ground for anything the user thinks 'might' be useful. Whether they're processing an application or dealing with a customer query, they just fill the notes box with lines and lines of redundant information. Just in case there's a slight chance somebody else might need it in the future.</p>
<p>Some people think they're being helpful. Should anybody else want that information, it's there. Others do it out of fear. They're covering their own back, proving they're being thorough with their work.</p>
<p>For example:</p>
<blockquote>
<p>Customer rang at 14:06 to change bank details. Updated account number from 12345678 to 87654321 and sort-code from 12-34-56 to 65-43-21.</p>
</blockquote>
<p>This might look helpful, but it highlights how the notes box can be a security minefield!</p>
<p>You should always encrypt passwords, bank account details and other sensitive information. This is obvious. But, what is often overlooked, is that the notes field is not always encrypted. So, the above note would store bank details as plain text. Whilst this is a hypothetical example, it shows how you can expose information through human error. And this puts customer data and your users at risk.</p>
<p>As a designer, we should be thinking long and hard about how we design services. Having worked on an admin system for the past 12 months, removing the notes box has been a challenge. But, we managed.</p>
<p>We've replaced notes with a logging system. It captures the key information at trigger points in the journey, and creates the notes for you. This way all the need-to-know information is there, and all the redundant stuff is gone.</p>
<p>It sounds simple. And it is. But it's been a long hard fight. This is because it goes against what the user <em>wants</em> and instead only provides them with what they <em>need</em>.</p>
<p>We need to do the hard work to make it simple. As designers, we need to make sure we always challenge the status quo and design for user needs. But at the same time, we need to make sure we build trust and rapport with users through regular user research. This will allow us to understand user needs and come to the right design decisions together.</p>
<p>As always, I'm happy to discuss this further. Just get in touch.</p>
Design is not art2017-08-16T00:00:00Zhttps://www.craigabbott.co.uk/blog/design-is-not-art/
<h1>Design is not art</h1>
<p>Design and art go hand in hand. But they're not the same thing.</p>
<p>When I was younger, I identified as a graphic designer. I'd design logos and flyers for nightclubs in Newcastle. When you're doing this kind of thing, the lines between art and design blur a lot. And, I have to be honest, I didn't know the difference.</p>
<p>I'd combine art with principles such as the golden ratio, irradiation phenomenon and overshoot. I'd pick typefaces to best represent the brand of the company I was designing for. There was some science to it, but it was still open to opinion. Somebody could still decide they didn't like my work. And clients often did.</p>
<h2>Art is to be enjoyed</h2>
<p>Art is meant to inspire those that connect with it. But, by that logic, not everyone <em>will</em> connect with it. This makes art subjective.</p>
<p>You can't gather evidence to prove that art is good or bad, and even famous artwork with legendary status could be viewed as terrible.</p>
<p>I remember in school, telling my teacher Pablo Picasso was rubbish. She was furious, but this was my opinion. If you don't like something, you just don't like it. And you can't argue with somebody's opinion.</p>
<h2>Design is different</h2>
<p>The purpose of a design is to be interacted with so that somebody can do something. For example. a door, a website, or a car.</p>
<p>If you design something badly, people notice. And, if you design something well, people should never know you were there. A bad design can disable somebody from completing a task. But the good thing about this, is that you can <em>prove</em> when it's bad.</p>
<p>For example, a door you have to push to open that has a pull handle. These always catch me out. You can tell it's a bad design by observing people using it. If 10 people go through it, and 9 of them try to pull it, then your design is bad. You can't argue with the observed evidence.</p>
<p>As designers, it's important that we always consider this. It's important that we don't just design things that we think are pretty. Sure, good design should have some aesthetics to it. Anybody that's held any Apple product will know how good it feels in your hands. But all too often, the usability is sacrificed for aesthetics.</p>
<p>We're in the unique position where we design things that make a difference to peoples lives. It's important to make sure that we research often. That we do the hard work to make it simple for those that use our products.</p>
<p>Make your door ugly, or make it pretty. But make damn sure it works!</p>
Bug fixes and performance improvements2017-08-22T00:00:00Zhttps://www.craigabbott.co.uk/blog/bug-fixes-and-performance-improvements/
<h1>Bug fixes and performance improvements</h1>
<p>On my iPhone, I don't have automatic updates turned on. I'm that guy that likes to read the release notes. Or, at least, I was.</p>
<p>Release notes used to be interesting. They'd tell you what the developers had been up to. What features they were adding, or removing. But, the most important thing they brought was the ability to make an informed decision. They gave you the chance to decide whether you actually wanted to install it or not.</p>
<p>Companies such as Slack and Monzo have fun with their release notes. They're proud to show you the new features they've been working hard on. But these two companies are becoming part of a minority. A small group of companies that actually bother to write anything.</p>
<p>Today, the App Store is full of lazy release notes, and this is a huge disservice to users. The most alarming thing is the tech giants that should be leading by example are the worst offenders.</p>
<p>Here are some examples:</p>
<dl>
<dt>
Facebook
</dt>
<dd>
Thanks for using Facebook! To make our app better for you, we bring updates to the App Store regularly. Every update of our Facebook app includes improvements for speed and reliability. As new features become available, we'll highlight those for you in the app.
</dd>
<dt>
Instagram
</dt>
<dd>
Bug fixes and performance improvements.
</dd>
<dt>
Twitter
</dt>
<dd>
A few minor updates to make twitter an even better place.
</dd>
<dt>
WhatsApp
</dt>
<dd>
Bug fixes.
</dd>
<dt>
Spotify
</dt>
<dd>
We're always making changes and improving Spotify. To make sure you don't miss a thing, just keep your updates turned on.
</dd>
<dt>
YouTube
</dt>
<dd>
Fixed bugs, improved performance and included a compatibility update just for you.
</dd>
<dt>
Netflix
</dt>
<dd>
Bug fixes.
</dd>
<dt>
</dt>
<dd>
</dd>
<dt>
</dt>
<dd>
</dd>
<dt>
Google Drive
</dt>
<dd>
Performance improvements and bug fixes.
</dd>
<dt>
Gmail
</dt>
<dd>
Bug fixes and performance improvements.
</dd>
<dt>
LinkedIn
</dt>
<dd>
General bug fixes and performance improvements.
</dd>
<dt>
Kindle
</dt>
<dd>
Bug fixes and performance improvements.
</dd>
</dl>
<p>From those examples, I can't see a single piece of information that's useful. They could have added anything to the app and I'd have no way of knowing.</p>
<p>The thing is, we know companies like Facebook are not always ethical. We know a huge amount of their revenue comes from tracking and data gathering.</p>
<p>So, when companies like this are rolling out updates every other week, it makes you wonder what they've been up to. How much stuff are they sneaking in under the hood that you might not sign up to given the choice?</p>
<p>On the iPhone, there's a setting that allows apps to update themselves as soon as there's one available. Because of this, you could argue that nobody reads the release notes anyway. Why waste an hour of a developers time to write a few bullet points? Right?</p>
<p>The problem with this way of thinking is that it excludes the people that <em>do</em> read them. When it comes to release notes you only have two user groups. Those that read them, and those that don't.</p>
<p>As designers and developers, we need to always be designing for the edge case. In doing so we will make the experience better for everybody.</p>
<p>It also means you cannot say you're being transparent and working in the open.</p>
<p>If you create software that people install on their devices, at least have the decency to tell them what it does. The only reason not to be transparent is if you're doing something sinister. And if this is the case, your users should have the right to opt out.</p>
Accessibility is not an edge case2017-09-27T00:00:00Zhttps://www.craigabbott.co.uk/blog/accessibility-is-not-an-edge-case/
<h1>Accessibility is not an edge case</h1>
<p>There's a common misconception that people using assistive technologies are an edge case. That they fall into that 1% where people disable Javascript. But, this couldn't be further from the truth.</p>
<p>I'm going to show you why it's important to make your website accessible.</p>
<p>There are a few disclaimers:</p>
<ul>
<li>
<p>I'm combining figures from reports in 2014, 2016 and 2017. So the results won't be representative of a single historic year. Instead, they will be the most up to date figures I could find.</p>
</li>
<li>
<p>The reports will only capture those with a diagnosis. Those in receipt of a disability related benefit. Or, those who took part in research by the Office for National Statistics. It's likely there are more people who have disabilities but are not included in the data.</p>
</li>
<li>
<p>Of those people with a disability who do use the internet, not all will need to use assistive technology.</p>
</li>
<li>
<p>I'm only using UK statistics. People can access websites from anywhere in the world, so the figures will actually be far higher.</p>
</li>
</ul>
<h2>Lets do some math</h2>
<p>Last year, 65,648,054 lived in the UK.</p>
<p>Of these, 63% were aged 16-64, and 18% were over 65. Combined, this is around 53.2 million adults.</p>
<p>Working out:</p>
<pre class="language-less"><code class="language-less"><span class="hljs-number">63%</span> <span class="hljs-selector-tag">of</span> <span class="hljs-number">65</span>,<span class="hljs-number">648</span>,<span class="hljs-number">054</span> = <span class="hljs-number">41</span>,<span class="hljs-number">358</span>,<span class="hljs-number">274</span><br /><span class="hljs-number">18%</span> <span class="hljs-selector-tag">of</span> <span class="hljs-number">65</span>,<span class="hljs-number">648</span>,<span class="hljs-number">054</span> = <span class="hljs-number">11</span>,<span class="hljs-number">816</span>,<span class="hljs-number">649</span><br /><span class="hljs-number">41</span>,<span class="hljs-number">358</span>,<span class="hljs-number">274</span> + <span class="hljs-number">11</span>,<span class="hljs-number">816</span>,<span class="hljs-number">649</span> = <span class="hljs-number">53</span>,<span class="hljs-number">174</span>,<span class="hljs-number">923</span></code></pre>
<p>In 2014, 16% of working age people and 45% of people over state pension age were living with a disability. Combined, that's 11.9 million people in the UK alone. Around 1 in 5, or 20%.</p>
<p>Working out:</p>
<pre class="language-less"><code class="language-less"><span class="hljs-number">16%</span> <span class="hljs-selector-tag">of</span> <span class="hljs-number">41</span>,<span class="hljs-number">358</span>,<span class="hljs-number">274</span> = <span class="hljs-number">6</span>,<span class="hljs-number">617</span>,<span class="hljs-number">323</span><br /><span class="hljs-number">45%</span> <span class="hljs-selector-tag">of</span> <span class="hljs-number">11</span>,<span class="hljs-number">816</span>,<span class="hljs-number">649</span> = <span class="hljs-number">5</span>,<span class="hljs-number">317</span>,<span class="hljs-number">492</span><br /><span class="hljs-number">6</span>,<span class="hljs-number">617</span>,<span class="hljs-number">323</span> + <span class="hljs-number">5</span>,<span class="hljs-number">317</span>,<span class="hljs-number">492</span> = <span class="hljs-number">11</span>,<span class="hljs-number">934</span>,<span class="hljs-number">815</span></code></pre>
<p>Now, in 2017, only 22% of adults living with a disability said they had never used the internet.</p>
<p>So, of our 11.9 million people, we can remove 22% This leaves us with the number people living with a disability that do use the internet. Which is 9.3 million.</p>
<p>Working out:</p>
<pre class="language-less"><code class="language-less"><span class="hljs-number">22%</span> <span class="hljs-selector-tag">of</span> <span class="hljs-number">11</span>,<span class="hljs-number">934</span>,<span class="hljs-number">815</span> = <span class="hljs-number">2</span>,<span class="hljs-number">625</span>,<span class="hljs-number">659</span><br /><span class="hljs-number">11</span>,<span class="hljs-number">934</span>,<span class="hljs-number">815</span> <span class="hljs-selector-tag">-</span> <span class="hljs-number">2</span>,<span class="hljs-number">625</span>,<span class="hljs-number">659</span> = <span class="hljs-number">9</span>,<span class="hljs-number">309</span>,<span class="hljs-number">155</span></code></pre>
<p>That is almost 10 million people in the UK alone are surfing the web with a disability. <em>Definitely NOT an edge case.</em></p>
<p>One thing I have seen repeatedly from research, is that people always find a way to do things. People are amazing, and will learn and adapt. Those with visual impairments may use screen readers. Those with motor impairments may use a keyboard or voice activation software.</p>
<p>We have no way of detecting these devices. So, as designers and developers, it is important we design with these people in mind.</p>
<p>Having semantic markup, correct tab indexes and accessible content has never been more important. And by making our websites work better for these people, we will automatically make it better for everyone.</p>
<h2>Citations</h2>
<ul>
<li><a href="https://www.gov.uk/government/publications/disability-facts-and-figures/disability-facts-and-figures">Disability facts and figures 2014 - gov.uk</a></li>
<li><a href="https://www.ons.gov.uk/peoplepopulationandcommunity/populationandmigration/populationestimates/articles/overviewoftheukpopulation/july2017">Overview of UK population 2017 - Office for National Statistics</a></li>
<li><a href="https://www.ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2017">IT and internet users 2017 - Office for National Statistics</a></li>
<li><a href="https://webaim.org/projects/screenreadersurvey6/">Screen reader survey 2015 - WebAim</a></li>
<li><a href="http://www.papworthtrust.org.uk/sites/default/files/Disability%20Facts%20and%20Figures%202016.pdf">Disability facts and figures 2016 - Papworth Trust</a></li>
</ul>
Semantics and accessibility2017-10-10T00:00:00Zhttps://www.craigabbott.co.uk/blog/semantics-and-accessibility/
<h1>Semantics and accessibility</h1>
<p>I used to think semantic HTML was only about getting that little W3C badge on your website. I thought it was bragging rights.</p>
<p>In the past, I've been guilty of using <code><div></code> elements for pretty much everything.</p>
<p>I've also been guilty of changing a <code><h1></code> element to a <code><h2></code> element because I needed it to look smaller.</p>
<p>As designers, we always like to put our stamp on things. We like to make things fancy and show off our full range of talents. Then when it comes to coding them up, we abuse our design!</p>
<p>We float things right. We use absolute positioning. We style links to look like buttons. We use fancy hover states and chuck in break tags in to create whitespace.</p>
<p>Then, we marvel at how pretty our designs look. After all, as long as it looks good, that's all that matters. Right?</p>
<p>Well, not exactly.</p>
<h2>Why semantics is important</h2>
<p>By making things pretty first and correct second, we make a major mistake. We assume that everybody navigates the web the same way. With a mouse. With no colour correction. With 20/20 vision. But, this couldn't be further from the truth.</p>
<p>There's a common misconception that people using assistive technologies are an edge case. That they fall into that 1% with those that disable Javascript. But that isn't true.</p>
<p>In my last <a href="http://www.craigabbott.co.uk/accessibility-is-not-an-edge-case">blog post: 'Accessibility is not an edge case'</a> I did some research. I found in the UK alone, the current statistics indicate that around 9.3 million people living with a disability use the internet regularly.</p>
<p>A lot of people think accessibility is all about using <a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>. But, when it comes to your markup, using the correct syntax gets you a lot of accessibility for free. Having the correct tags. The correct heading levels and the correct hierarchy on the page will give you a huge head start.</p>
<p>As <a href="https://twitter.com/nonswearyphil">Phil Sherry</a> says, don't code for 'mobile first', code for 'screen-reader first'. Removing all the CSS and JavaScript should leave something that is still coherent. Then add all the fancy stuff after.</p>
<p>We should be designing accessible websites because it's the right thing to do. But even as a business case, there's a potential 9.3 million people that can't use your service or buy your products.</p>
Own your Alpha2017-11-22T00:00:00Zhttps://www.craigabbott.co.uk/blog/own-your-alpha/
<h1>Own your Alpha</h1>
<p>In Government our digital services get assessed at each stage of their journey. From Discovery into Alpha. Alpha through Beta. And Beta into Live.</p>
<p>Every service that ends up on <a href="https://gov.uk/">GOV.UK</a> will have to go through this. Each one assessed against the <a href="https://www.gov.uk/service-manual/service-standard">Service Standard for Government</a>.</p>
<p>A panel of trained assessors will conduct the assessment. Each panel member from a different discipline within digital. The panel will cover the team setup. Their design and research, and their chosen technology stack.</p>
<p>From my time as an assessor, I've noticed teams don't always conduct Alphas correctly. It's not that the team setup is wrong. It's also not their ways of working. They work in an iterative manner and use agile methodologies well.</p>
<h2>So, what's the problem?</h2>
<p>Well, what I often see in Alpha assessments, is that teams aren't striving to find the right solution. They have a first attempt. They then continue to tweak the design. And, by the end of the Alpha they have something they can take into Beta.</p>
<p>The problem with this, is that you've conducted a Beta during your Alpha phase.</p>
<p>You have worked in an iterative manner. But, you've only iterated parts of the same design. You're missing huge opportunities to find the very best solution.</p>
<p>Sure, your design might be ok. It might do ok in research sessions. But you can't be sure it's the right solution if it's the only one you've tried.</p>
<p>As a general observation, humans often don't get things right first time. Experience can get you close, but it's still unlikely you will get it perfect. And this is why the Alpha phase is amazing for designers.</p>
<p>For me, as a designer, the Alpha phase is the best part. It's a clean slate. Blue sky thinking. It's the part where I can pull everything apart and ask challenging questions.</p>
<p>Why can't we do that? Why should the design fit the existing crappy process? Why aren't we changing the crappy process? Why don't we do something completely different instead? What can you hook into in the back-end to make this less tedious for users?</p>
<p>Alpha is the phase where I do most of my design work. Where I get it wrong, a lot! But I also learn the most. It's about huge iterations. Completely different design approaches. Alternate user journeys. And if it doesn't work? Tear the whole thing up and start again.</p>
<p>Be bold. Iterate wildly. Then, sit in front of the panel and tell them with no doubts how you know that you've designed the best solution.</p>
I've stopped calling myself vegan2018-01-26T00:00:00Zhttps://www.craigabbott.co.uk/blog/ive-stopped-calling-myself-vegan/
<h1>I've stopped calling myself vegan</h1>
<p>My new years resolution for 2017 was to move on from vegetarian and to become a legitimate vegan.</p>
<p>Now, 12 months later, my new years resolution for 2018 is to no longer call myself a vegan at all.</p>
<p>I was never a preachy vegan. I would never try and force my beliefs onto others. But if people asked me about it, I'd explain why I was.</p>
<p>My empathy for animals runs deep. If I'm honest, sometimes I'd rather hang out with animals than people.</p>
<p>There's a certain innocence you get with animals. They're always honest!</p>
<p>They:</p>
<ul>
<li>don't have ulterior motives</li>
<li>don't hold grudges</li>
<li>make it clear whether they want you around or not</li>
<li>are honest about their intentions at all times</li>
</ul>
<p>Having been vegetarian for several years, I began to realise that I wasn't doing enough. I was still consuming a lot of dairy and meat substitutes like Quorn, which often contains egg. So, it seemed like by not consuming meat was I actually doing very little to reduce any suffering at all.</p>
<p>So, on 1 January 2017 I gave myself the title of vegan and went about trying a little harder.</p>
<p>In my 12 months of being vegan, I've learned that many things trip you up. Looking through the ingredients, it's not always obvious what is vegan. E-numbers are a bit of a minefield. For example, E120 is carmine, and that it's actually made from ground up insects.</p>
<p>I've also learned that I don't like militant vegans. These are people that take great pleasure in shaming people who aren't. They even give other vegans a hard time if they get it wrong.</p>
<p>A lot of the flack vegans get from the wider society comes from this small group of people creating a super negative stereotype.</p>
<p>Then, there is the blurred lines. What are the rules exactly?</p>
<p>I have two cats, which are now 6, and I'm a firm believer that adopting a pet is a lifelong commitment.</p>
<p>Cats are obligatory carnivores. If they don't eat meat they go blind and die from renal failure. So, my cats still eat fish based foods.</p>
<p>I don't consume it, but I buy it. Does that mean I'm not a vegan? If my partner bought the cat food out of her wages, is that a loop hole or a workaround?</p>
<p>Another thing I've found hard, is that empathy for people and animals can pull in both directions at once.</p>
<p>For example, I visited a relative I hadn't seen for a while. They had went to a lot of trouble to create a separate vegetarian dish for me. This will have meant almost double the effort. Preparing some things twice, and keeping everything separated.</p>
<p>So, imagine the choice I had to make when I sat down to eat and noticed the honey-roasted parsnips.</p>
<p>Do I:</p>
<ol>
<li>refuse to eat the meal and keep my 100% vegan badge and make somebody feel awful</li>
<li>remove the parsnips and state that I can't eat them, because… honey? Again, probably making somebody feel awful</li>
<li>say nothing, eat it, feel guilty about it and question whether I'm still allowed to badge myself a vegan or not</li>
<li>say nothing. Appreciate all the effort they have went to and accept that nothing will be perfect 100% of the time</li>
</ol>
<p>The militant vegans would argue that number 1 is the only option. But you can't put the honey back in the hive. The exploitation is already done and the profits are already made.</p>
<p>I'd like to say I chose number 4, but in most cases it was number 3. I wouldn't want to upset somebody who has tried their best. So instead, I would feel like a fraud. A fake vegan. Because there is a guilt that comes with the label when you slip up.</p>
<p>So, I don't know if I have a label now. But that doesn't matter. I still eat 100% vegetarian and vegan where I can. I still buy soya based stuff and have milk alternatives on my cereal.</p>
<p>Not a lot has changed except I no longer:</p>
<ul>
<li>call myself a vegan</li>
<li>beat myself up about it when I don't get it perfect</li>
</ul>
<p>Empathy is not always black and white. Label or no label, I'm trying. And, if we all tried a little harder, maybe the militant vegans wouldn't need to be so militant!</p>
Validation for prototypes2018-02-15T00:00:00Zhttps://www.craigabbott.co.uk/blog/validation-for-prototypes/
<h1>Validation for prototypes</h1>
<p>On our Slack channel, validation comes up a lot. Designers often aren't sure how to make the prototyping kit handle validation. Is it client-side? Is it server-side? How do I edit my routes file?</p>
<p>I made a jQuery plugin a couple of years back. It picked up a data attribute called <code>data-required</code>. It also picked up an error message you passed into <code>data-error</code>. Then, it checked if the input was blank or unchecked. If it was, it would append the error messages and prevent the user from submitting the form.</p>
<p>The plugin went down well. At least, it did, until the GOVUK frontend styles got updated. Since then, a dozen or so people have tried to use the plugin but found it doesn't work any more. It's been sat in my to-do list for the best part of a year.</p>
<h2>What are we actually testing?</h2>
<p>The thing is, I thought I built the plugin off the back of a user need, and I was happy when people praised my work. But in reality, I think I missed the point. As did everybody that used it.</p>
<p>See, the plugin will throw an error if you don't fill in a text field or don't select a radio button. But what are you actually testing here? The whole point of a prototype is to go hand in hand with a given scenario so that you can learn something from it. It's an experiment, under particular conditions, from which you can draw a conclusion.</p>
<p>When we test validation, we're testing if users understand what went wrong. Whether the content in the error messages makes sense. To see whether users can fix the problem and progress.</p>
<p>Leaving something blank is often so obvious we learn nothing from it at all.</p>
<h2>What should we be testing?</h2>
<p>When we test validation, we wan't to be focussing on the difficult things. The nuances in the policy or process that might make the service behave in a way that the user isn't anticipating.</p>
<p>For example:</p>
<ul>
<li>is a sort-code and an account number an impossible combination?</li>
<li>does the date of birth make a claimant too old for a particular benefit?</li>
</ul>
<p>For these scenarios, it's often easier to force the user to see the error, whether it was their fault or not. The easiest way to do this is to duplicate the page and add the errors to the second one. Hard code them into the HTML. No matter what I do on the first page, I'm always going to hit the second one.</p>
<p>You can pull the information they entered into the first form, and use it to pre-populate the second. You can then their input on the field that you're testing so the error doesn't look out of place.</p>
<p>For example, on the first page they entered an 8 digit account number. But on the second page you play it back 7 digits long.</p>
<p>Now, when you throw the error explaining it must be a valid account number, you can see if they understand how to fix it. It's no longer a binary blank or not blank, you're actually testing if its valid!</p>
<p>One caveat is; if you get a particularly thorough or suspicious user, they'll likely know they didn't make a mistake. Also, some users can get anxious if they get things wrong. So make sure you always come clean and re-assure the user once the session is over.</p>
<h2>Overcomplicating prototypes</h2>
<p>We often over complicate prototypes. I've been guilty of this in the past. Sometimes they end up so full of logic they are simply bad production builds.</p>
<p>Most of the time putting a blanket catch all on empty fields does nothing but block you from doing demos quickly. You don't learn anything from it.</p>
<p>We need to remember to build just enough of a prototype to learn about the user needs for a given scenario.</p>
<p>Keep them simple. Keep them clean. Keep them disposable.</p>
Mental health and flexible working hours2018-02-19T00:00:00Zhttps://www.craigabbott.co.uk/blog/mental-health-and-flexible-working-hours/
<h1>Mental health and flexible working hours</h1>
<p>When I first started working for Government, I found flexi-time awkward.</p>
<p>Until this point, my entire career had been fixed working patterns and strict start times. If I was 1 minute late, my boss would dock my wages by 15 minutes.</p>
<p>So, it seemed alien to me to have any flexibility at all.</p>
<p>Because bad organisations had conditioned me for over a decade, I thought there must be a catch. I assumed it was one of those things where people say one thing but mean another.</p>
<p>I thought if I came in 30 minutes late people would act fine to my face, but there would be a secret strike against my name. If I chalked up enough strikes I'd get disciplined. The last place I worked loved this secret strike system!</p>
<p>Of course, this isn't true for every organisation. It was just my experience of employment to date.</p>
<p>Until recently, despite my contract saying my hours are flexible, I was still stuck on panic mode if I walked in later than 9am. Altering my world view was hard. It was one of the things my counsellor and I had to work hardest on. But now, I hold flexible working hours in very high regard.</p>
<p>I cycle through periods of depression and hyperfocus. When I'm depressed, I find it hard to get out of bed. I get agitated easy and I struggle to maintain focus for more than a few hours. I still do whats expected of me, but there is little left in the tank for anything extra.</p>
<p>When I'm hyperfocused, I find it hard to stop. In fact, I don't want to stop. I'm super motivated. Enthusiastic. Laser focussed. And I barely sleep without any repercussions. I get involved in anything and everything. Can I write and deliver a talk? Can I help on another project? Can I renovate an entire room in my house?</p>
<p>As you can imagine, this doesn't work well with fixed regimes. Just because an organisation forces me to be there on time, it doesn't mean that my brain is ready to go. Sometimes when I'm struggling to get out of bed, that extra half hour could be the difference between having a productive day and it being a write-off.</p>
<p>This also works both ways. If there is no flexibility then I'm going home at my finishing time. No matter how 'in the zone' I am. No matter how good the work is I'm busy doing. And, there is no guarantee that I'll hit the same flow tomorrow morning.</p>
<p>As an employer, it can be a scary prospect giving people flexibility. There's a fear that people will abuse the system and that you will lose control.</p>
<p>There's a flawed belief that micromanaging people gets more work done. But, from what I'm seeing in Government, giving people freedom and trust inspires them to do their best work.</p>
<p>Saying flexible working hours have saved my life might seem a bit drastic. But they do give me the ability to manage my own mental health on a day to day basis, and this should not be overlooked. As a by-product, I'm enjoying way more productive days and doing some of the best work I've ever done. And that is beneficial for everybody.</p>
What can Baloo teach us about design?2018-02-20T00:00:00Zhttps://www.craigabbott.co.uk/blog/what-can-baloo-teach-us-about-design/
<h1>What can Baloo teach us about design?</h1>
<p>It seems everybody is talking about design systems at the moment. And with good reason.</p>
<p>I mean, if you can meet the same user need with the same design more than once, it saves time and energy, right?</p>
<p>A defined pattern or component should have gone through plenty of research. So, it's also reassuring to know the design is likely to work with little effort.</p>
<p>I first started noticing reusable components on the web around 2011. Twitter's Bootstrap had a list of them: jumbotrons, alerts and button-groups to name a few.</p>
<p>These component are chunks of CSS, HTML and sometimes JavaScript, that go hand-in-hand, and as long as you had Bootstrap installed, it just worked.</p>
<h2>Re-usable design is not a new concept</h2>
<p>The idea of design-reuse has been around for many years.</p>
<p>Walt Disney reused many scenes. They also reused entire characters. Cartoon creators called this re-animation. It's the process of tracing over existing frames to save time and money.</p>
<p>You may not have noticed before, but Disney's Baloo and Little John are almost identical. They were even voiced by the same person, Phil Harris.</p>
<p><img src="https://www.craigabbott.co.uk/posts/what-can-baloo-teach-us-about-design/images/baloo-little-john.webp" alt="An image of Baloo and Little John side by side. They are identical apart from their clothes and the colour of their fur." /></p>
<p>When I've pointed this out, some people say they feel cheated. There's an impact on the nostalgic childhood memories of our most beloved characters. But, like identical twins, Baloo and Little John have their own loveable personalities. They may look and move the same, but they're very unique in their characters.</p>
<p>Without this re-use it would be impossible for Disney to churn out as many classic cartoons as they did, and this would arguably have made my childhood way worse!</p>
<h2>Re-usable design in digital services</h2>
<p>If you put one bear in the jungle and the other in Sherwood Forest, the fact they look alike becomes irrelevant.</p>
<p>What Disney figured out, is that people fall in love with their movies because of the story. It's not just the character design. It's their personality. The script they deliver. The way they interact with their world and the other characters in it.</p>
<p>Context is everything!</p>
<p>We design services, and every service is different. But, the interactions are often the same.</p>
<p>When we start on a new service, we shouldn't have to waste time wondering about button colour. By reusing existing components we can spend all our time looking at the real problems. This is better for us as designers, but most importantly, it's better for the people that have to use the service.</p>
<p>Reanimating a bear gave Disney more time to focus on the stuff that's important. And we should too. This is exactly why design systems are a good idea!</p>
One-page-applications are not accessible2018-03-14T00:00:00Zhttps://www.craigabbott.co.uk/blog/one-page-applications-are-not-accessible/
<h1>One-page-applications are not accessible</h1>
<p>Ok, this maybe should have been called one-page-applications are <em>rarely</em> accessible. Anything can be made accessible, it just takes a lot of effort, and very few people put the effort in.</p>
<p>One-page-applications are on the rise. With them you get funky animations and cool transition effects. Some are a real beauty to behold.</p>
<p>Building them used to be a chore. You needed a lot of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX">AJAX</a> requests and complex call-back functions. You needed to manipulate the <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM (Document Object Model)</a> a lot using <a href="https://developer.mozilla.org/en-US/docs/Glossary/JavaScript">Javascript</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/jQuery">jQuery</a>.</p>
<p>But, now we can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSockets</a> instead of AJAX and we can use frameworks like <a href="https://angular.io/">Angular</a> or <a href="https://reactjs.org/">React</a>. This makes actually developing a one-page-application easier than ever.</p>
<p>This seems like a good thing, right?</p>
<h2>So, why are one-page-applications bad?</h2>
<p>Well, there's things that could hurt you unless you're clever about it.</p>
<p>The most obvious place to start is a reliance on Javascript. Some users don't have it enabled. How does your app work for them?</p>
<p>Then there's search engines. These crawl through your URLs, and you will likely have 1. So Google can't see most of your content, which will affect your visibility and your traffic.</p>
<p>Again, you could be smart about this and manipulate it using <code>window.history</code> and appending states so that the user can navigate forwards and backwards through different application states, but you need to manage it.</p>
<p>If you don't, things like analytics will be difficult. You usually tie interactions to a URL which allows you to look at the data in-scope. If you only have 1 URL, you're going to have to create complex workarounds.</p>
<p>Creating any workaround takes time and effort. If you're going to create a great experience and a great one-page-application, you're going to need a few. It will be hard. It will take sweat. Tears. Frustration. There will be bugs. There will be refactoring.</p>
<p>All browsers have common behaviours. The back button. The forward button. The stop (or cancel) button. Keyboard focus. The caching of the scroll position. These are all thing that users have learned subconsciously by surfing thousands of websites. Your one page application must be consistent with what people know, or they won't use it.</p>
<h2>Accessibility and one-page-applications</h2>
<p>The biggest problem with one-page-applications, is they often create a terrible experience for people using screen readers.</p>
<p>With things like React, it's super easy to make a <code><span></code> clickable like a <code><button></code>, but semantic HTML is important!</p>
<p>There is also a cognitive issue. Users have to maintain a mental image map of the page in all it's states. If they click something, and some content changes without the page reloading, they need to know something has changed.</p>
<p>How do you make them understand what they cannot see? How do you orientate this to their mental map they have been building? You can do this with <code>aria-live</code> but it's not as easy as people might think.</p>
<p>Changes can be subtle or drastic. Sometimes, the whole page can change. If so, has the focus or scroll position changed? Or have you left the focus on the hidden content?</p>
<p>If you've loaded all your content into the DOM and hidden it, will a screen reader still read it out? If I don't use a mouse, can I still <kbd>tab</kbd> to the hidden content? If so, your user will quickly lose context and become disorientated.</p>
<p>If you do load all your content into the DOM, will it cause performance issues? Will the initial load of the site be slow? Do you need a loading progress bar? How do you alert a screen reader to the loading time as it updates?</p>
<p>I've seen issues where the DOM was so huge the screen reader actually became unusable. This was using <a href="https://en.wikipedia.org/wiki/JAWS_(screen_reader)">JAWS</a>. The time between pressing a key and hearing the content was over 4 seconds. A delay of over 400ms makes any application annoying. But, a delay of more than 2 or 3 seconds makes the application unusable. <a href="https://en.wikipedia.org/wiki/IBM">IBM</a> figured this out in the 80's, it's sometimes referred to as <a href="https://jlelliotton.blogspot.co.uk/p/the-economic-value-of-rapid-response.html">the Doherty Threshold</a>.</p>
<p>If you don't replicate all these behaviours, it won't just be disorienting. It will make navigating your site impossible. And depending on which sector you work in, this could actually make your site illegal.</p>
<p>So, if you have to do so much extra work to make your one-page-application behave like a regular one. Why not make a regular one in the first place? Do people really want fancy transitions rather than a solid and performant experience?</p>
<p>People do amazing things. I don't doubt for one minute that a good accessible one-page-application is possible. But I've not seen one yet.</p>
What is it like to use a screen reader on an inaccessible website?2018-03-15T00:00:00Zhttps://www.craigabbott.co.uk/blog/what-is-it-like-to-use-a-screen-reader-on-an-inaccessible-website/
<h1>What is it like to use a screen reader on an inaccessible website?</h1>
<p>Screen readers are amazing things. But they can be difficult learn and use.</p>
<p>When we see with our eyes, we see in 3 dimensions. We can look up, down, left and right, and we can look a things close to us or in the distance.</p>
<p>Almost all websites are 2 dimensional. You can position content top to bottom and left to right.</p>
<p>A screen reader really can only view a website in 1 dimension. It's features are linear. It removes all of the visual positioning, lines all of the content up, then it navigates through it from start to finish.</p>
<p>You can think of screen reader content as single track, you can move forwards and backwards, but the only context is now what comes before your position, and what comes after.</p>
<p>If the page is coded up properly, there will be landmarks. This allows you jump ahead on the track to the parts you want, but it's still linear. There is no concept of left and right.</p>
<p>Another consideration with a screen reader is that the content is broken down into granular pieces and then each piece is viewed in isolation. The screen reader largely works by focusing on parts of the page and describing them to the user.</p>
<p>For visual users, different sections of the page can be dynamic, constantly changing or updating. If we think of something like a dashboard, a visual user can get a lot of information at once by scanning in 2 dimensions. But for screen reader users, they have to interrogate each section.</p>
<p>You can do dynamically updating content using attributes such as <code>aria-live</code>, and screen readers will do their best to read it out, but it can quickly get verbose if things are updating all the time!</p>
<h2>Analogies</h2>
<p>I like analogies, so lets try and outline some screen reader issues in a way which might feel more relatable.</p>
<p>Imagine you're in a dark and unfamiliar place. All you have is a torch, or flash-light, and it has a very tight beam.</p>
<p>Where you could usually scan the area and orientate yourself quickly, you now have to do it more systematically. Carefully inspecting each thing which gets illuminated, working out if it's important, and building up a mental picture of where you are.</p>
<p>Now, lets imagine some dynamic content. Whilst you're scanning the room with the torch, there's a whole bunch of people moving the furniture around in the dark when your focus is on something else.</p>
<p>It's impossible to orientate yourself because you can't see things moving. So you need to keep going over everything time-and-time again. At some point you're probably going to walk into something!</p>
<p>An <code>aria-live</code> attribute is the equivalent of somebody shouting at you from the darkness to tell you what they're doing, even if you don't currently have the torch on them to see what it is. Depending on how descriptive they are depends on how useful it is.</p>
<p>For example, if they shout 'Hey! I'm moving one of the chairs!' That's not super useful if there are 12 chairs. But if they shout 'Hey! I'm moving the chair right behind you, don't sit down!' that's probably more useful!</p>
<h2>Describing things</h2>
<h3>Images</h3>
<p>We said before that a screen reader's job is to describe the to the user. If you've ever played <a href="https://en.wikipedia.org/wiki/Articulate!">Articulate!</a> or <a href="https://en.wikipedia.org/wiki/Pictionary">Pictionary</a>, you've probably experienced the frustration of somebody getting confused when you think the answer is obvious!</p>
<p>For screen reader users, a lot of interactions on websites are basically a big game of Articulate! The screen reader describes a thing, and they have to work out what it is or what to do with it.</p>
<p>For images, they all need alternative text. You can do this using the <code>alt</code> attribute. When writing alt text, try to imagine you're on the phone trying to describe what you can see to somebody else, and include things which are important for context.</p>
<p>I'm going to give you 3 examples of me describing the same image. I won't show you it, but you can build up a mental image and decide which description is the best one:</p>
<ol>
<li>A cat.</li>
<li>A tabby cat.</li>
<li>A short haired tabby cat wearing mirrored sunglasses.</li>
</ol>
<h3>Icons</h3>
<p>Icons still require alternative text. But people often fall into the trap of explaining the icon rather than what it represents.</p>
<p>For example, the <a href="https://design-system.service.gov.uk/components/warning-text/">GOV.UK warning text component</a> uses an exclamation mark to draw your attention to the fact that the paragraph is a warning.</p>
<p>However, the alt text does not describe the icon verbatim, it describes what it represents. It's not important that the user knows it's an exclamation mark, it's important they know there is a warning and they must pay attention to it.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"exclamation-mark-icon.webp"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Warning!"</span>></span></code></pre>
<p>Always try to think about the intent. What is the purpose of the icon? Is describing what it looks like important for the context, or is describing what it represents the important information?</p>
<h3>Interactive elements</h3>
<p>You need to do the same with interactive elements, like links. If you don't describe them well, the screen reader user gets stuck.</p>
<p>Common issues with this are where people use the text 'read more' or 'click here' without any additional context.</p>
<p>Again, going back to our unfamiliar place analogy, if you're stood in a hallway, and all the doors are labelled, you can find your way around. If all of the doors look the same, it just becomes a frustrating game of trial and error where you get lost a bunch of times until, if you're lucky, you find the right door.</p>
<h2>Try harder</h2>
<p>Whenever you use an image or an icon, or create a link, just spend a few moments thinking, 'if i read out this alt text, or this link text over a phone, would the other person understand it?'</p>
<p>It sounds silly and obvious, but after a while it will improve the accessibility of your work.</p>
<p>Finally, remember not to describe the page in a way which relies on sight. Don't use content like 'click the red button' or the 'use menu on the left', because this has no meaning to somebody who can't see, or a screen reader which has no concept of left and right.</p>
Designing the impossible makes it possible2018-05-02T00:00:00Zhttps://www.craigabbott.co.uk/blog/designing-the-impossible-makes-it-possible/
<h1>Designing the impossible makes it possible</h1>
<p>As an interaction designer, I hear a sentence at least once on every project I work on. "We can't do that because [insert mediocre excuse here]."</p>
<p>A lot of the time this is because of technology restrictions. We can't integrate with legacy systems. Or, we can, but the legacy system wants the information in a ridiculous format. So we have to change the design to ask for a mandatory middle name, where people have to write "none" in the box to progress. Urgh.</p>
<p>It's easy to make a snap decision, bow to peer pressure and change the design. After all, we don't want to waste our time designing something that's not possible.</p>
<p>Only, that's exactly what we <em>should</em> do.</p>
<p>Design is about pushing what's possible. It's about taking something right to it's breaking point and saying, "ok how can we get past this." If you don't, you end up designing something that is a shell of what it could have been, and probably not fit for purpose.</p>
<p>Always ask, "why?". Why is it not possible? Why can't we do it? Why can't we do more work to make this possible?</p>
<p>We should be researching prototypes that are currently impossible to build. Only then will we learn how good it could be. How easy it can be to use and how efficiently we can make it perform.</p>
<p>Start with the perfect scenario, and then tweak it until it becomes realistic. Rather than starting with whats realistic then struggling to make it better.</p>
<p>In Government we have a saying, and that is "do the hard work to make it simple." It's in our design principles. It's in everything we do.</p>
<p>We shouldn't be making things complicated and difficult to use just because it's easier for us to build. Or, because we are too scared to challenge the status quo.</p>
Back to blogging2021-03-19T00:00:00Zhttps://www.craigabbott.co.uk/blog/back-to-blogging/
<h1>Back to blogging</h1>
<p>Well, it's been a while.</p>
<p>I haven't published a blog post on my personal site for several years.</p>
<p>The <em>exact</em> reason, I'm actually unsure of, but I'm pretty sure it's anxiety related.</p>
<p>I've always been told that you need to be consistent if you're creating content. Whether it's daily, weekly or monthly, it should always be consistent. Same time, same day, same expectation.</p>
<p>So, I guess when life gets in the way and you miss the arbitrary deadline you've created for yourself, then what?</p>
<p>Well, for me I guess I get stressed. I feel guilty or frustrated. I then retreat from the whole process with the view of, "well I've ruined it all now. So, what's the point?"</p>
<p>This self-destructive behaviour has plagued many of the side-projects I've started and quit. I put unrealistic expectations on myself until it removes all of the enjoyment from it and then it becomes just another job I need to do.</p>
<p>When you burn out or you quit, it then becomes really difficult to get back into. What do I post about? Is it weird that I've not posted for so long? Will people look at the dates of my posts and realise I'm a bit flaky?</p>
<p>Of course, all of these are just conversations which take place in my head, and it's often easier to just continue doing nothing that to come to any kind of consensus as to what I need to do.</p>
<p>I've also had a career change since I last blogged. My job is now solely in accessibility. So, you can imagine my horror when I reviewed my blog which had been mothballed and found that it wasn't very accessible. That then created a bunch of additional tasks I needed to do before I could even write a post.</p>
<p>Of course, the development work to overhaul my website was probably just another excuse for me to avoid blogging a little longer.</p>
<p>I guess what I've learned about myself is that I often worry too much about what other people might say. The fear of putting yourself and your opinions out there when it's stuff you're passionate about is hard.</p>
<p>So, here it is. The first proper attempt in a long while of just pushing through the discomfort and pressing publish.</p>
<p>Craig</p>
Defining a strategy for accessibility2021-04-01T00:00:00Zhttps://www.craigabbott.co.uk/blog/defining-a-strategy-for-accessibility/
<h1>Defining a strategy for accessibility</h1>
<p>I've been in my role for about a year now. And, to be honest, it feels like it's been about a week.</p>
<p>Coming from an Interaction Design background, it's the first time I've had to step into a truly strategic role. I've gone from designing services and writing HTML to designing spreadsheets and writing emails... A lot of emails.</p>
<p>One thing I've found is that change in a large organisation can be relatively easy, and at the same time incredibly difficult. I guess, what I mean is, you can't just make it happen overnight.</p>
<p>You use agile methodologies, you do research and you adapt. You re-prioritise if the landscape changes and you aim to deliver the most value for the current situation.</p>
<p>However, agility is somewhat subjective.</p>
<p>We can all probably agree that both a chipmunk and a chimpanzee would be considered agile creatures. But their agility is not comparable. One weighs 60 grams and one weighs 60 kilograms. So, even though they're both 'agile', the fact that one is 1000 times bigger than the other means when they're moving between point A and point B and avoiding obstacles, the larger of the two is always going to change direction more slowly.</p>
<p>This is the issue with large organisations. They often have an unrivalled ability to gather momentum quickly, but slowing down and changing direction, despite it being quick for something so large, it is still relatively slow in comparison to smaller entities.</p>
<p>So, when it comes to implementing a strategy, the process takes time, and it's important to not lose faith or give up on the journey.</p>
<h2>Framing the problem</h2>
<p>Before you can fix a problem, you need to understand it. This was one of the first things <a href="https://twitter.com/BenHolliday">Ben Holliday</a> taught me when I joined Government.</p>
<p>If you know some services aren't meeting the standards, you need to do some research and really understand why.</p>
<p>I teamed up with the awesome <a href="https://twitter.com/emmamarienicol">Emma Nichol</a>, a Senior User Researcher with an incredible eye for detail. We designed a survey and analysed responses from over 200 people.</p>
<p>The responses spanned all of the roles you'd expect to see in a multidisciplinary team, plus a few others:</p>
<ul>
<li>Product Manager</li>
<li>Delivery Manager</li>
<li>User Researcher</li>
<li>Content Designer</li>
<li>Interaction Designer</li>
<li>Frontend Developer</li>
<li>Software Engineer</li>
<li>QA Tester</li>
<li>Performance Analyst</li>
<li>Business Analyst</li>
<li>Other</li>
</ul>
<p>We were looking to discover how much people really understood the laws, their responsibilities, and what it takes to make an accessible service.</p>
<p>We wanted to identify where the barriers or knowledge gaps were which might prevent teams from consistently delivering accessible services. We wanted to understand how we could support these teams and how we could measure accessibility compliance more accurately going forwards.</p>
<p>If you look across all of Government and a lot of the big organisations in the private sector, I think there's generally a pretty good awareness of accessibility now. Most people have at least heard of it, which is a good thing. But, the level of understanding varies massively from organisation to organisation, role to role and person to person.</p>
<p>Unfortunately, the scale of what it means to be accessible isn't always obvious.</p>
<blockquote>
<p>"Accessibility... That's just, like... Screen-readers and stuff? Right?"</p>
</blockquote>
<p>The problem is, digital accessibility is hard! And, ironically, the legislation and the documentation surrounding it isn't particularly accessible. It's fragmented. It's complex. It's often written in legal jargon or it's written so subjectively it's left wide-open to interpretation.</p>
<p>We found that generally the biggest barriers for any organisation delivering accessible services are:</p>
<ul>
<li>a poor understanding of accessibility and why it's important</li>
<li>a lack of clear guidance or documentation</li>
<li>a lack of structured training</li>
<li>difficulty obtaining expensive tools such as JAWS and Dragon</li>
<li>difficulty recruiting users who have impairments</li>
</ul>
<h2>The compliance conundrum</h2>
<p>We found it's common for large organisations to focus all of their efforts on the rules. All the guidance, all the processes and all the governance, they all focus on the same thing. Compliance!</p>
<p>It's easy to see why a lot of organisations do this. On the surface, compliance is the obvious way to see the risks and measure the progress.</p>
<p>However, the problem with this is you're effectively demanding people pass an exam without really teaching them the subject matter. Mandating compliance with no focus on education is an impossible task for everybody involved. It can lead to poor performance and vanity metrics. People get things wrong, cut corners or eventually they just give up.</p>
<p>If you don't build the capability in house, you can pay for third party audits and you can then fix those specific problems in that moment. But, compliance is only a snap-shot in time. One iteration and your audit report is no longer comprehensive. Several iterations and it becomes almost redundant.</p>
<p>Your strategy needs to be sustainable. It needs to be built from the ground up, embedding accessibility into the very fabric of your organisation.</p>
<p>Sure, compliance is one very important part of the puzzle, but in order to be accessible you need more than that.</p>
<h2>The 3 pillars of accessibility</h2>
<p>I remember in school we learned about the fire-triangle. Fuel, Oxygen and heat are required to make a fire burn. If you remove any of those things from the equation, the fire will use up what it has left and eventually burn out.</p>
<p>We can think of accessibility in a large organisation in the same way. There are 3 core parts. Compliance, education, and culture. If you lack any of these 3 things over a sustained period of time, the strategy is unsustainable and your ability to consistently deliver accessible services will burn out.</p>
<p><img src="https://www.craigabbott.co.uk/posts/defining-a-strategy-for-accessibility/images/a11y-strategy-3-pillars.webp" alt="A Venn diagram with 3 overlapping circles. The 3 circles are labelled: compliance, culture and education." /></p>
<h3>Compliance</h3>
<p>Compliance is checking your digital service against a defined standard or law. At the time of writing this, the standard is the <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a> to the level of AA, and the main piece of legislation is the <a href="https://www.legislation.gov.uk/uksi/2018/952/made">Public Sector Bodies Accessibility Regulations 2018</a>.</p>
<p>Compliance is essential. Without it you have no way of measuring how good or bad something is. But, on its own, compliance is not enough. If you view accessibility as a checkbox exercise or a governance gateway then you're unlikely to have any truly accessible services.</p>
<h3>Culture</h3>
<p>Culture is embracing accessibility and embedding it in everything you do as an organisation. It's the attitudes of your colleagues and the way accessibility is viewed and talked about. It's discussions, community, inclusion. It's treating accessibility as a user-need and a basic human right, rather than a list of things to check off or a governance gateway to get through.</p>
<p>Having a good culture is essential. But again, on its own, it's not enough. Being passionate about accessibility it is great, and it can be infectious, but if you do not have the right education or training in place then you have no way of implementing it successfully. So, you are unlikely to have any accessible services.</p>
<h3>Education</h3>
<p>Education is making sure teams have the required skills to be able to deliver accessible services. It's documentation. It's training. It's knowledge.</p>
<p>Like the other two parts, education is essential. But, again on it's own it's not enough. You can implement training, you can give people all the skills. But if the culture is bad and people don't see the point in doing it, then you're unlikely to have any accessible services.</p>
<h2>Building a sustainable strategy</h2>
<p>Building a strategy around culture, compliance and education, in my opinion, is the only way to ensure all the hard work you're doing now isn't for nothing.</p>
<p>There are a few things you can do to make sure your organisation is set up in the right way to deliver accessible services.</p>
<h3>Plan your future</h3>
<p>Try to have a series of short term and long term goals. What are you working on now? And, what work do you expect to complete in the next 6 months? In 12 months? In 3 years? In 5 years?</p>
<p>When you map these out, really look at everything you're working on and understand how it's contributing to compliance, culture or education. And if it's not contributing to any of those things, ask yourself whether you need to work on it at all.</p>
<p>By mapping your aspirations to a timeline and a category, you can quickly start to spot the holes. If your entire plan for the next 3 years only has things which contribute towards compliance, perhaps you need to reprioritise. You want to have high impact things in all 3 categories for each of your timed chunks.</p>
<p><img src="https://www.craigabbott.co.uk/posts/defining-a-strategy-for-accessibility/images/a11y-strategy-roadmap.webp" alt="A diagram of a roadmap. It has the title January to March and a collection of tasks. Each task is tagged with categories of compliance, culture and education." /></p>
<h3>Guidance and training - Education</h3>
<p>Because we found in our research that accessibility documentation is fragmented, we decided to pull it together. We called it <a href="https://accessibility-manual.dwp.gov.uk/">The Accessibility Manual</a>.</p>
<p>Where the guidance was difficult, we explained it, and where the guidance touched on information in other places we linked to it. The idea was to pull the Service Manual, best practice, GOV.UK guidance and legislation all into one place where people could understand it.</p>
<p>One of the most important parts of the manual is the fact that it breaks accessibility down into <a href="https://accessibility-manual.dwp.gov.uk/guidance-for-your-job-role">guidance for your job role</a>, because we found that across all organisations, people are not always sure what their responsibilities are within a team.</p>
<p>A lot of people wrongly assume designers and developers just do the accessibility work, and that is simply not true. Everyone has a role to play, and breaking it down by job role is perhaps the most useful way we have found to help people to understand the impact they have on the accessibility of a service.</p>
<p>We wanted to make the manual as open as possible, so feel free to use it, and if you have any suggestions or want to contribute, you can do that too! <a href="https://github.com/dwp/accessibility-manual">View the accessibility manual on GitHub</a>.</p>
<p>We are also working on a series of structured training courses, which we will be able to open source so other organisations can use them once we have done pilots and refined the content.</p>
<h3>Accessibility Principles - Culture</h3>
<p>I collaborated with <a href="https://twitter.com/htmlandbacon">Colin Oakley</a>, and we created 5 accessibility principles. They're really design principles with a focus on accessibility, but they complement the 10 <a href="https://www.gov.uk/guidance/government-design-principles">GOV.UK Design Principles</a> and allow teams to keep accessibility at the forefront of their design all times. We tried to keep them organisation agnostic, so feel free to re-use them, or edit them to make them your own.</p>
<p>The 5 principles are:</p>
<ol>
<li>Inclusion is better than empathy</li>
<li>Accessible design is good design</li>
<li>Start with what works</li>
<li>If it's not accessible, it's not done</li>
<li>This is <em>still</em> for everyone</li>
</ol>
<p>You can read the <a href="https://accessibility-manual.dwp.gov.uk/community/accessibility-principles">accessibility principles</a> in more detail in the Accessibility Manual.</p>
<h3>Best practice - Compliance, culture and education</h3>
<p>If you know the best steps to make things compliant. Document them and encourage teams to adopt them.</p>
<p>With best practice, it's best not to make it mandatory. Every team is different so they need to remain flexible, but they're always good to use a starting point.</p>
<p>I've found the best way to do accessibility without it being a huge bottleneck at the end is to do the technical and functional testing on each page as you build it. This way when you get to the end, you only have to do usability testing on your user-journeys, rather than having all 50 WCAG criteria to check on 40 pages as well as all the assistive technology testing.</p>
<h4>A best practice example:</h4>
<ol>
<li>Include accessibility considerations in your definition of ready on your user story or task ticket. So, before you even build the feature, you've discussed it's components and understand any parts that might need more work such as type-aheads or dynamic content.</li>
<li>When you design or build any page, start with existing patterns and components in the <a href="https://design-system.service.gov.uk/">GOV.UK Design System</a>. If you use everything to it's specifications, it should be pretty accessible right off the bat.</li>
<li>When you're finished building the page, use a HTML validator to catch any mistakes in your code. You can use something like the <a href="https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf">HTML Checker Chrome Extension</a> or the <a href="https://validator.w3.org/">W3C Markup Validation Service</a>.</li>
<li>Once your HTML is Valid, check your page using automated accessibility testing tools. A couple of good examples are <a href="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd">Axe</a> and <a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh">Wave</a> which can be installed as Google Chrome extensions. Not all tools are the same, so use a few. They only take seconds to run. To see what each tool can find, see the <a href="https://alphagov.github.io/accessibility-tool-audit/">GDS accessibility tool audit</a>.</li>
<li>Once the automated tools are passing, manually test your page against the 50 WCAG criteria. You can use something like the <a href="https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni?hl=en">Accessibility Insights Chrome extension</a>. If you select the assessment option, it will take you through all the manual checks for your page. It will also produce a HTML report which makes up part of your testing evidence.</li>
<li>Once all the automated and manual tests are passing, test your page against the functionality of different types of assistive technology. You should test it with at least one of each of the 3 main types. A screen reader, a screen magnifier and a voice controller. You should document what you tested and how it performed as part of your evidence. I've created a few assistive technology testing templates you can use: <a href="https://htmlpreview.github.io/?https://github.com/dwp/assistive-technology-templates/blob/master/html/nvda.html">NVDA<span class="visually-hidden"> testing template</span></a>, <a href="https://htmlpreview.github.io/?https://github.com/dwp/assistive-technology-templates/blob/master/html/os-x-voiceover.html">Voiceover<span class="visually-hidden"> testing template</span></a> and <a href="https://htmlpreview.github.io/?https://github.com/dwp/assistive-technology-templates/blob/master/html/os-x-voice-control.html">Voice Control<span class="visually-hidden"> testing template</span></a>.</li>
<li>Once your page is passing on all of these points, you're ready to push your code. You should build automated accessibility tests into your integration pipeline as a last line of defence to stop you pushing in any obvious errors. You can implement something like <a href="https://github.com/dequelabs/axe-core">AxeCore</a> or <a href="https://github.com/pa11y/pa11y-ci">Pa11y-CI</a>. These should reject any code pushes if they find accessibility issues.</li>
<li>Now you've pushed your page and the code is all ok, you should usability test it as part of the whole application. Use the 3 types of assistive technology testing again, but rather than using every single function on every single page, just make sure you can complete the service from the start to the end using the common features. If you've followed the previous steps for every page, there should be no issues. But sometimes when you test something in isolation you don't pick up on things like back buttons not working as expected.</li>
<li>Update your accessibility statement. Now you are sure your service is compliant, you've documented all your evidence and stored it in all the right places, make sure your accessibility statement is updated to show the dates it was last tested and the current compliance status.</li>
<li>Definition of done. If you've done all of these steps, only then consider the user story or ticket finished.</li>
</ol>
<h3>Monitoring and reporting - Compliance</h3>
<p>Without evidence, you can't measure anything.</p>
<p>Create a central repository and make sure teams are regularly contributing their evidence. In order for something to be considered compliant, as the absolute bare minimum every service should have evidence to show it:</p>
<ol>
<li>has no fails against against any WCAG 2.1 A or AA criteria</li>
<li>works with a screen reader</li>
<li>works with a screen magnifier</li>
<li>works with voice recognition software</li>
<li>has a valid accessibility statement</li>
</ol>
<p>As with most things, an absence of evidence is not necessarily evidence of absence. In other words, teams may have done the work but they're just sitting on their evidence. So, it may seem unfair to badge something as non-compliant if it actually is. However, if you're struggling to coordinate the evidence collection, trust me when I say the fastest way to have people bring you their missing evidence is to publish an open report marking those teams as non-compliant.</p>
<h2>Wrapping things up</h2>
<p>I appreciate this is a long read, but hopefully it can help you to implement some good practices in your own accessibility strategies.</p>
<p>I'm not going to pretend my strategy is perfect. It's not without its challenges, but having a clear focus on improving skills, attitudes and the quality of the work is, for me, building solid foundations to deliver accessible services well into the future.</p>
<p>If anything in this post is unclear or you'd like me to expand upon, <a href="https://twitter.com/abbott567">I'm on Twitter</a> daily and we can pick up a conversation.</p>
<p>Thanks,
Craig</p>
5 arguments against accessibility and why they are wrong2021-06-03T00:00:00Zhttps://www.craigabbott.co.uk/blog/5-arguments-against-accessibility-and-why-they-are-wrong/
<h1>5 arguments against accessibility and why they are wrong</h1>
<p>In my role, I deal with many different teams and organisations. I also get involved in a bunch of other things on the side, just because accessibility is so misunderstood. One thing which has become quite apparent is that there are some common misconceptions regardless of which team, department or arms-length body you talk to.</p>
<p>I've pulled out 5 of the most common arguments I hear for why people think they should be exempt from doing accessibility work.</p>
<p>The caveat for this post is that although my arguments may sound blunt at times, I don't believe that people deliberately want to exclude others. People are under pressure to deliver things, and suddenly realising that you've not considered a huge part of it can be scary. Having to ask for more budget, more training, more staff and more time can create a lot of anxiety for people.</p>
<h2>1. It's not citizen facing, only our staff will use it</h2>
<p>This is probably the most common argument against making things accessible. For some reason, there is a misconception that only things which the public use need to be accessible. I'm not sure why so many people think this is true, and even if it were, I'm surprised by how many people think that would be acceptable.</p>
<p><a href="https://www.legislation.gov.uk/uksi/2018/952/made">The Public Sector Bodies Accessibility Regulations 2018</a> does not make any references to scope regarding internal or public facing products. If it's using web-technologies like HTTP protocols or running in a browser, then it's a website and it needs to comply. You can call it a digital service, a tool, a system, a portal or any other quirky name you like, but under the regulations it will be considered a website and treated like one.</p>
<p>There is a weird thought process by a lot of people, that, if a person is being paid to use a product, and everyone else can use it without issues, then it doesn't really matter if it doesn't work for them. They are 1 person, they're being paid regardless, and therefore they don't really matter.</p>
<p>But whether you discriminate against 1 person, or 100 people, discrimination is still discrimination. Just because it's a small number of people, it doesn't make it any better. It's still forbidden under the <a href="https://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act 2010</a> and the <a href="https://www.gov.uk/government/publications/public-sector-equality-duty">Public Sector Equality Duty 2011</a>.</p>
<p>Regardless of the law, from a moral standpoint, it's still 1 person that may not be able to do their job effectively. 1 person who does not have equal opportunities to thrive.1 person that will likely have their responsibilities removed. 1 person who will likely get moved onto other teams time and time again or have to have their work checked by other people. Whichever way you try to dress it up, it's still 1 person who is being actively discriminated against for being different; and having their self-esteem eroded in the process.</p>
<p>Look at it this way. Imagine your job is to drive a bus. There's a fleet of 10 busses, and a team of 10 drivers. The bus you've been assigned does not have a steering wheel. However, the expectations for you to do your job, hit your targets and perform like everyone else is still there. But you're only 1 person, so your needs probably don't matter, right?</p>
<h2>2. We don't have any users who use assistive technology</h2>
<p>'Seeing the big picture' is a common Civil Service skill people are assessed against at interview. But when it comes to accessibility, very few people are able to step back and see those people on the edges.</p>
<p>The very definition of marginalised people is that they sit in the margins. They're people who never get the focus or the attention because they don't make up enough of the user-base or they don't create enough returns on the investment. They're either not seen at all or only seen in the peripheral vision of those designing and building anything.</p>
<p>By only looking at the existing users of a product, you will only ever design for the users you already have. You will never have equal representation, because the underrepresented people are never able to come into an environment which meets their needs.</p>
<p>What about those people waiting in the margins? What about the people that hate the job they're doing but it's the only system in the organisation which works for them.? What about the people who want a fresh challenge in a new team? What about the people who want to change roles entirely? What about the people that want to move up the ladder and develop their skills?</p>
<p>By only catering to the users you already have, you leave the marginalised people in the margins and you will create an environment where opportunities are only available to people who fit a certain description. It becomes a self-fulfilling prophecy, where uniformity is celebrated rather than diversity. If you exclude people because you can't see them, you'll never see them because they will always be excluded.</p>
<h2>3. The supplier plans to make it accessible at some point</h2>
<p>This misconception seems to stem from a misunderstanding of what the regulations apply to. The regulations do not apply to the product, they apply to the organisation.</p>
<p>Sure, the product gets assessed against a standard, which at the time of writing this is the <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a>. But the legislation which enforces it is called the Public Sector Bodies Accessibility Regulations. The clue of who is responsible for meeting the regulations is kind of in the name.</p>
<p>Because the responsibility for the product being accessible falls solely on the Public Sector Body who intends to use it, they need to make sure that it is accessible <em>before</em> they use it.</p>
<p>If a private organisation makes an inaccessible product, at this moment in time, unfortunately that is not illegal. They can sell it, give it away for free or allow other companies to procure it without ever being enforced to make it accessible.</p>
<p>However, when a Public Sector Body decides they want to use that product, then it needs to be accessible. This means that the Public Sector Body either needs to procure the product and modify it themselves to meet the standards, or they need to negotiate that the private organisation does the work for them, and usually compensate them for doing so. Either way, in order for that Public Sector Body to use that software lawfully, it needs to meet the standards. If it does not, it's the Public Sector Body who breaks the law. Not the private organisation.</p>
<h2>4. Accessibility isn't a priority right now, we're working on other features first</h2>
<p>One of our <a href="https://accessibility-manual.dwp.gov.uk/community/accessibility-principles">accessibility principles</a> is 'if it's not accessible, it's not done'. For some reason, a lot of people seem to measure their successes in delivery by quantity over quality.</p>
<p>If you deliver something which is inaccessible, this creates several problems. If you're in a <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-beta-phase-works">public beta</a> or <a href="https://www.gov.uk/service-manual/agile-delivery/how-the-live-phase-works">live phase</a>, you've likely broken the law, and regardless of what phase you're in, you've created a bunch of technical debt you're just going to have to unpick later.</p>
<p>The trouble with accessibility is that when you find a problem, you often have to re-write the code which drives your user interface. If you find a problem with a single page or a single component at the time you are building it, fixing it isn't a huge amount of work.</p>
<p>However, if you build 10 pages and then try to do all of the testing and fixing of those at once, it suddenly seems like a huge task. Similarly, if you find a problem with a component once you've delivered 10 features and you've used that same component in multiple places, you now not only need to fix the problem, but also re-test everything you've already delivered to make sure the problem isn't repeated in other parts of the application.</p>
<p>It's for this reason that accessibility is often seen as a bottleneck. Like any kind of testing, it's part of a pipeline, and the pipe only has a limited capacity depending on how much you try to push through it. Doing that accessibility work as you go is always going to be better than trying to squeeze an entire application or feature through 2 days before your release date.</p>
<p>Releasing features which are not accessible means they are simply not done. Accessibility should always be a priority because even a Minimum Viable Product (MVP) is not viable if it doesn't work for the people that have to use it.</p>
<h2>5. Accessibility wasn't part of the original cost, so we need to claim disproportionate burden</h2>
<p>The disproportionate burden clause is arguably the biggest gripe I have with the Public Sector Bodies Accessibility Regulations. My gripe is not that it exists, but that it is just casually lumped in with the rest of the important stuff, and once people read it, they lock onto that and ignore everything else. People always look for the path of least resistance.</p>
<p>In a nut-shell, disproportionate burden is a clause which says you may not have to make your product accessible if you can prove that the burden on your organisation to do so would be significant.</p>
<p>To be clear, if you're a central government department, you get millions of pounds of funding and you have thousands of employees, disproportionate burden is unlikely to ever apply to you. Disproportionate burden is for small Public Sector organisations, where the cost of a single accessibility audit might wipe out a large percentage of their budget for an entire year.</p>
<p>You cannot use disproportionate burden as a get out clause because you have not asked for enough budget, you have not prioritised your budget allocation properly, and you have not considered accessibility for whatever reason.</p>
<p>You can only use disproportionate burden as a get out clause once you have conducted a thorough impact assessment taking into account resources, funding, impact on your users etc. You should also get sign-off from your legal department to make sure that the burden is truly disproportionate under the definition outlined in the regulations.</p>
<p>A disproportionate burden assessment also needs to be reviewed annually. So even after you do all that work and get legal sign off, you will still be expected to request more budget and resources to do all of the work in the next financial year. A disproportionate burden assessment does not cover the product for its entire life-cycle.</p>
<p>If you want to know more on why it is unlikely to ever be a good strategy in the long run, you should read this great <a href="https://www.lexdis.org.uk/digital-accessibility/digital-accessibility-regulations/disproportionate-burden/disproportionate-burden-thoughts/">article on disproportionate burden</a> by <a href="https://twitter.com/Access_Rhodes">George Rhodes</a>.</p>
Axe-core vs PA11Y2024-01-18T00:00:00Zhttps://www.craigabbott.co.uk/blog/axe-core-vs-pa11y/
<h1>Axe-core vs PA11Y</h1>
<p>We use <a href="https://www.npmjs.com/package/axe-core">axe-core</a> by <a href="https://www.deque.com/">Deque</a> regularly as part of acceptance tests. With <a href="https://docs.gitlab.com/ee/ci/testing/accessibility_testing.html">GitLab</a> now offering <a href="https://www.npmjs.com/package/pa11y">PA11Y</a> as part of the Continuous Integration (CI) Pipeline with zero config, I wanted to understand how it stacked up against axe-core. Can you drop axe-core for PA11Y? Can you drop PA11Y for axe-core? Should you use both?</p>
<p>Spoiler alert, all automated tools perform poorly. This doesn't mean we shouldn't use them. But we need to remain realistic about how many errors we may still have on our pages, even if the tools can't find them.</p>
<p>As an experiment, we usually log the method, results then conclusion. But I know the results and the conclusion are the parts you probably want to know. So I'll cover those first. If you are interested, and you want to read more on the method and the details, you can read the rest of the post.</p>
<p>If you want to read all the raw outputs from the tests, a detailed breakdown of each test, or run the tests again for yourself, you can find <a href="https://github.com/abbott567/axe-core-vs-pa11y">the axe-core-vs-pa11y project on Github</a>.</p>
<h2>Summary of results</h2>
<p>Out of 142 issues tested:</p>
<ul>
<li>Axe-core found 39 issues (27%) in total</li>
<li>PA11Y found 29 issues (20%) in total</li>
<li>19 issues (13%) were found by both tools.</li>
<li>20 issues (14%) were found by axe-core but not PA11y.</li>
<li>10 issues (7%) were found by PA11Y but not axe-core.</li>
<li>Combined, 49 issues (35%) were found.</li>
</ul>
<h2>Conclusion</h2>
<p>Although both tools find a lot of the same issues, some issues are found by one tool but not the other. Therefore I do not think you can favour one tool over the other.</p>
<p>I also do not think we can assume axe-core is better than PA11Y because it finds more issues, as the issues tested in this set of tests might just happen to play to axe-core's strengths. It's very likely that PA11Y might outperform axe-core on a different set of tests.</p>
<p>What is clear from the results, is that each tool definitely finds things which the other does not. Therefore, from these tests, I would recommend using both axe-core and PA11Y in your acceptance tests. By using both you can expect to find around 35% of known issues.</p>
<p>Using axe-core and PA11Y together is actually really straight forward. You can <a href="https://www.craigabbott.co.uk/blog/combining-axe-core-and-pa11y">read my blog post on combining-axe-core-and-pa11y</a></p>
<h2>Method</h2>
<p>Testing automated tools is always going to be difficult. There are so many ways to make something inaccessible that designing a tool or a test to find everything is probably impossible.</p>
<p>So, to compare the two tools, I set up a simple test suite using Mocha and had each tool evaluate <a href="https://alphagov.github.io/accessibility-tool-audit/test-cases.html">the worlds least-accessible webpage</a>. The page is deliberately terrible. It has 142 known accessibility issues, so it is a good benchmark to see how automated tools perform.</p>
<p>You can <a href="https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/">read more about the worlds-least accessible webpage on the GDS accessibility blog</a>.</p>
<h2>Interpreting the results</h2>
<p>The two tools do not report on issues in the exact same way. Axe-core finds issues and potential issues, PA11Y just finds issues or no issues. For the purposes of the test, if axe-core asks the user to manually check it, I'm still saying it found the issue.</p>
<h3>Interpreting axe-core results</h3>
<p>Axe-core returns an object with 3 categories. Passed, incomplete and violations.</p>
<p>Passed is what the tool checked and found to be ok. Violations are what the tool found to be definite issues. Incomplete is when the tool could not reach a decision on whether it was ok or not. For issues in the incomplete category, the user must manually check them.</p>
<p>For example:</p>
<pre class="language-javascript"><code class="language-javascript">{<br /> <span class="hljs-attr">passed</span>: [], <span class="hljs-comment">// Tests axe-core passed as non-issues</span><br /> <span class="hljs-attr">incomplete</span>: [], <span class="hljs-comment">// Tests axe-core could not complete and the user must check</span><br /> <span class="hljs-attr">violations</span>: [] <span class="hljs-comment">// Tests axe-core failed as accessibility issues</span><br />}</code></pre>
<h3>Interpreting PA11Y results</h3>
<p>PA11Y returns an object with only 1 category which it calls issues. So unlike axe-core, PA11Y does not raise things for the user to check manually. It just finds issues, or it does not.</p>
<p>For example:</p>
<pre class="language-javascript"><code class="language-javascript">{<br /> <span class="hljs-attr">issues</span>: [] <span class="hljs-comment">// Tests which either failed or require a user input</span><br />}</code></pre>
<h2>Anomalies</h2>
<p>There were a few anomalies between running these axe-core tests in 2021 and comparing them to the original 2016 GDS tests.</p>
<p>In the 2016 GDS tests, it is not clear if it was axe-core or Axe DevTools which was used. I assume it to be Axe DevTools which is a Chrome extension. However, they both use the same engine so the results should be the same.</p>
<p>In the 2016 GDS tests, Axe found 43 issues in total, made up of 41 violations and 2 issues which required the user to check.</p>
<p>This is higher than in my tests. In my 2021 tests, axe-core only found 39 issues in total, made up of 36 violations and 3 issues which required the user to check.</p>
<p>This could be due to different versions of the tools being used, meaning Axe itself has possibly regressed, or it is simply human error when recording the tests.</p>
<h3>Table has no table headings</h3>
<ul>
<li>2016 Axe found the issue</li>
<li>2021 axe-core does not find the issue</li>
<li>2021 Axe DevTools does not find the issue</li>
</ul>
<h3>Table that only has TH elements in it</h3>
<ul>
<li>2016 Axe found the issue</li>
<li>2021 axe-core flags it for user review</li>
<li>2021 Axe DevTools flags it for user review</li>
</ul>
<h3>Embedded audio file is missing text alternative</h3>
<ul>
<li>2016 Axe flags it for user review</li>
<li>2021 axe-core does not find the issue</li>
<li>2021 Axe DevTools does not find the issue</li>
</ul>
<h3>Link to #, invalid hypertext reference</h3>
<ul>
<li>2016 Axe found the issue</li>
<li>2021 axe-core does not find the issue</li>
<li>2021 Axe DevTools does not find the issue</li>
</ul>
<h3>Group of radio buttons not enclosed in a fieldset</h3>
<ul>
<li>2016 Axe found the issue</li>
<li>2021 axe-core does not find the issue</li>
<li>2021 Axe DevTools does not find the issue</li>
</ul>
<h3>Group of check boxes not enclosed in a fieldset</h3>
<ul>
<li>2016 Axe found the issue</li>
<li>2021 axe-core does not find the issue</li>
<li>2021 Axe DevTools does not find the issue</li>
</ul>
<h3>Two unique labels, but identical for= attributes</h3>
<ul>
<li>2016 Axe found the issue</li>
<li>2021 axe-core flags it for user review</li>
<li>2021 Axe DevTools flags it for user review</li>
</ul>
Combining axe-core and PA11Y2021-09-06T00:00:00Zhttps://www.craigabbott.co.uk/blog/combining-axe-core-and-pa11y/
<h1>Combining axe-core and PA11Y</h1>
<p>Last week, I was looking at automated accessibility tools, and I published <a href="https://www.craigabbott.co.uk/blog/axe-core-vs-pa11y">a comparison between axe-core and PA11Y</a>.</p>
<p>The conclusion was that we shouldn't use one over the other because they both find different things. So, I set about trying to find an elegant way to use both.</p>
<p>I've always ran <a href="https://github.com/dequelabs/axe-core">axe-core</a> using <a href="https://www.selenium.dev/">Selenium</a> and <a href="https://chromedriver.chromium.org/">ChromeDriver</a>. But this can be flaky as every time you update Chrome, your tests no longer work. Even if I'm using a version manager to switch between NodeJS versions, I still hit the issue of mismatched ChromeDriver and Chrome Browser versions.</p>
<p><a href="https://pa11y.org/">PA11Y</a> comes neatly packaged with a headless Chrome browser using <a href="https://www.npmjs.com/package/puppeteer">Puppeteer</a>, so you don't need to setup Selenium. This makes running it in test suites like Mocha much more lightweight in terms of setup.</p>
<p>When I ran the tests for the initial comparison, it was using Selenium for axe-core and PA11Y's own headless Chrome browser together. This was fine for what I was trying to do, but it made the tests slow, and in a real project it would be super inefficient.</p>
<p>So, my initial thoughts were to decouple PA11Y from it's headless browser, and run it as part of the Selenium tests, rather than booting up 2 separate browser instances which would add seconds onto each test they could just both hit the same page when it was open.</p>
<p>However, on closer inspection, it turns out that using both is actually far simpler than I anticipated. PA11Y has the ability to use different 'runners' or plugins. So, using axe-core and PA11Y together is as simple as passing in the runners in as an option.</p>
<p>The default runner for PA11Y is HTMLCS, or HTML Code Sniffer. When you use the PA11Y API in your tests, this is the runner it will use if you give it no additional information. For example:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-title function_">pa11y</span>(<span class="hljs-string">'http://localhost:3000'</span>)</code></pre>
<p>You can see that this is the default runner, because if any issues are returned then the runner attribute will list HTMLCS. For example:</p>
<pre class="language-json"><code class="language-json"><span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"code"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"error"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"typeCode"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"message"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Anchor element found with a valid href attribute, but no link content has been supplied."</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"context"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"<a href=\"http://www.google.com\"></a>"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"selector"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"html > body > main > a"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"runner"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"htmlcs"</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">// This attribute shows that HTMLCS found the issue</span><br /> <span class="hljs-attr">"runnerExtras"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span><br /><span class="hljs-punctuation">}</span></code></pre>
<p>To run axe-core at the same time as HTMLCS, you simply need to tell PA11Y to do that. We pass in an options object and we give it an array of which runners we want to use. HTMLCS is the default runner, but if we're overriding the default then we still need to tell PA11Y to use it. For example:</p>
<pre class="language-javascript"><code class="language-javascript"><span class="hljs-title function_">pa11y</span>(<span class="hljs-string">'http://localhost:3000'</span>. { <span class="hljs-attr">runners</span>: [<span class="hljs-string">'htmlcs'</span>, <span class="hljs-string">'axe'</span>] })</code></pre>
<p>Now when we check our output, we can see that both HTMLCS and axe-core found issues on the page.</p>
<pre class="language-json"><code class="language-json"><span class="hljs-punctuation">[</span><br /> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"code"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"link-name"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"error"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"typeCode"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"message"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Links must have discernible text (https://dequeuniversity.com/rules/axe/4.3/link-name?application=axeAPI)"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"context"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"<a href=\"http://www.google.com\"></a>"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"selector"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"html > body > main > a"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"runner"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"axe"</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">// Shows Axe as the runner which found the issue</span><br /> <span class="hljs-attr">"runnerExtras"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"description"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Ensures links have discernible text"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"impact"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"serious"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"help"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Links must have discernible text"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"helpUrl"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"https://dequeuniversity.com/rules/axe/4.3/link-name?application=axeAPI"</span><br /> <span class="hljs-punctuation">}</span><br /> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"code"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"type"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"error"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"typeCode"</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"message"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"Anchor element found with a valid href attribute, but no link content has been supplied."</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"context"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"<a href=\"http://www.google.com\"></a>"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"selector"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"html > body > main > a"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"runner"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"htmlcs"</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">// Shows HTMLCS as the runner which found the issue</span><br /> <span class="hljs-attr">"runnerExtras"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span><br /> <span class="hljs-punctuation">}</span><br /><span class="hljs-punctuation">]</span></code></pre>
<p>So, I stand by my original conclusion, that we should use both PA11Y and axe-core. But it looks like the implementation of using both is actually so easy that you'd be a fool not to.</p>
Rising disability statistics2021-11-03T00:00:00Zhttps://www.craigabbott.co.uk/blog/rising-disability-statistics/
<h1>Rising disability statistics</h1>
<p>The number of people in the UK living with a disability is rising.</p>
<p>It's currently accepted that in the UK it is around 1 in 5 people, or 20%. And, from 2012 to 2019, there has been a further 3% increase in the 'official statistics'.</p>
<p>The number of children reported to have a disability has risen 2%, from 6% to 8%</p>
<p>The number of working age adults reported to have a disability has risen 3%, from 16% to 19%.</p>
<p>The number of adults over State Pension age reported to have a disability has risen 1%, from 45% to 46%.</p>
<p>Those are the facts. Based on <a href="https://www.gov.uk/government/publications/disability-facts-and-figures/disability-facts-and-figures">2011/2012 GOV.UK Disability Facts and Figures</a> and <a href="https://www.gov.uk/government/statistics/family-resources-survey-financial-year-2019-to-2020/family-resources-survey-financial-year-2019-to-2020#disability-1">2019/2020 GOV.UK Family Resources Survey</a>. The rest of this post is mainly my thoughts, and definitely up for debate!</p>
<h2>The impact of life expectancy</h2>
<p>I think we'd all probably anticipate an increases in the State Pension age category as life expectancy goes up. If people are living longer, then there is more chance they will develop an impairment, and we know the likelihood of developing an impairment increases exponentially with age.</p>
<p>If we look at the <a href="https://www.kingsfund.org.uk/publications/whats-happening-life-expectancy-england">data analysis on life expectancy by The King's Fund</a>, there was a subtle increase in life expectancy in the UK from 2012 to 2019, so a 1% increase in the number of people over State Pension age with a disability doesn't seem out of the ordinary.</p>
<p>However, what does seem out of the ordinary, is that the increase in the number of people with a disability was actually the lowest in the oldest age bracket. A 3% rise in working age adults, and a 2% increase in children is huge. But it isn't immediately clear exactly why.</p>
<h2>Hidden and non-visible disabilities</h2>
<p>We know official statistics massively understate the number of people with disabilities. They are usually a count of people who are in receipt of a disability related benefit. But many people may have hidden or non-visible disabilities.</p>
<p>A hidden disability is when somebody actively chooses not to disclose it. There are many reasons why somebody may choose not to disclose their impairments, but a big reason is often fear. Unfortunately, <a href="https://abilitymagazine.com/unconscious-bias-pwds-workplace/">1 in 3 people have an unconscious bias towards people with disabilities</a>. This means people who are very capable are often overlooked for opportunities such as job offers and promotions.</p>
<p>A non-visual disability is when somebody has an impairment, but it is not immediately obvious to others. Some examples of non-visual disabilities are cognitive issues like Epilepsy, Attention Deficit Hyperactive Disorder (ADHD), Autism Spectrum Disorders (ASD) or Dyslexia. Other non-visible disabilities may be autoimmune disorders such as Crohn's Disease, or even trigger specific conditions such as Chronic Post Traumatic Stress Disorder (CPTSD).</p>
<p>Lots of sources state that <a href="https://diversityq.com/dont-forget-hidden-disabilities-in-your-inclusion-drive-1514685/">80% of people with a visible disability also have a non-visible one</a>. I haven't tracked down the exact source of this data yet, but it seems to be widely circulated. So non-visible disabilities are definitely not uncommon.</p>
<p>It would not be unreasonable to assume that if 80% of people with a visible impairment also have a non-visible one, then a substantial amount of people will only have a non-visible disability, and are therefore not necessarily included in the data.</p>
<p>Another issue is that the support for mental health in the UK is terrible. The health services aren't equipped, and we've been brought up with a 'stiff upper lip' attitude to mental health which makes many people dismissive. Dismissive of their own issues, and those of others.</p>
<p>Being culturally dismissive of mental health and a lack of accessible supporting services like counselling and psychiatric evaluations means people with potentially disabling cognitive issues like depression and anxiety go unsupported.</p>
<p>If people have hidden, non-visible or mental health related impairments, they may go undiagnosed, unsupported and are therefore missing from the statistics.</p>
<p>Accessibility awareness is slowly increasing. Mental health awareness is also improving. So the changes in the data could be a subtle shift in the culture. This may be giving people the confidence to disclose their impairments, get a diagnosis or get the support they need.</p>
<h2>State Pension age increase</h2>
<p>An interesting point for the rise in disabilities in working age adults is that between the two publish dates of the data sets, the State Pension age has actually increased. As the likelihood of impairment goes up exponentially with age, it could be that people at the ceiling of the working age category today, would have actually been in the State Pension age category if these stats were published a few years ago.</p>
<p>So, people who are 65 today would be classed as working age, but in the past they would be considered State Pension age. This means we can't do a direct comparison on the data sets. Some of the 3% increase is likely to be people who are 65 and have caused some creep in the statistics of the working age category.</p>
<p>However, it's highly unlikely that the 3% increase in the working age category is solely down to people turning 65, developing an impairment and being unable to retire. I can only speculate on it being a factor.</p>
<h2>Takeaway point</h2>
<p>I have speculated on a few reasons why the number of people with disabilities in the UK is increasing. I'd be really interested to see what other factors people think may be contributing to the rise.</p>
<p>My experience in accessibility tells me that the increase is expected, and also that it is inevitable. The number of people with disabilities in the UK isn't necessarily going up, just that more people are actually being included in the statistics.</p>
<p>It might seem like a good thing that more people are feeling safe to disclose their impairments, are getting diagnosed and are getting the support they need. But the sad reality is that the number of people with impairments who are not being supported is (and always has been) much higher than is reported.</p>
<p>I guess my takeaway point of this whole article, is that accessibility is not going away! If anything it will only become more relevant as the culture and the data improves.</p>
<p>We know today that more than 1 in 5 people have a disability. That is evident from the data. We just can't point to the statistics to prove exactly how many people are impacted when things are not accessible.</p>
<p>We all have a responsibility to make sure we are doing our best. To make sure we support everybody we can see in the data, but also support everybody we can't.</p>
Accessibility and font sizes2022-01-03T00:00:00Zhttps://www.craigabbott.co.uk/blog/accessibility-and-font-sizes/
<h1>Accessibility and font sizes</h1>
<p>It's now 2022, and I'm still seeing far too many websites using static pixel sizes for fonts. Even big hitters like Facebook do this.</p>
<p>Stop it!</p>
<p>Using the wrong units of measurement in your Cascading Style Sheets (CSS) can be a barrier for many visually impaired users.</p>
<p>All modern browsers allow people to override the default font size in the user settings. This is part of the <a href="https://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-configure-text-scale">User Agent Accessibility Guidelines (UAAG)</a>. UAAG is similar to WCAG, but it focuses on the tool being used to view the website, rather than the website itself.</p>
<p>You can try it. If you're using chrome and you type <code>chrome://settings</code> into the address bar, then search for 'font size', you will see that you can set it to various sizes. However, depending on the websites you're browsing, you might not actually see it work.</p>
<p>The reason it might look like a broken setting on some websites is that the browser gets its initial instructions from the user settings, but it gets the rest of its instructions from the website you're viewing.</p>
<p>The browser will always prioritise the website CSS. If it didn't, all websites would look the same. This means developers have a responsibility to code websites properly. If the website is coded badly, then it will override the useful settings in the browser and make it inaccessible for some users.</p>
<h2>The problem with pixels</h2>
<p>Pixels are a static unit of distance. A simplified way of thinking about pixels is that 1px is equal to 1 dot on the screen you're currently using.</p>
<p>Ok, they're not <em>truly</em> static like metres or miles. There's a lot of science goes into how big a browser will actually render heights and widths in pixels. But, the important part to think about is that they are calculated based on the physical screen you're using, rather than the settings in your browser.</p>
<p>So, if you set the font size to be 16px in your CSS, it is always going to be rendered out to the same hight on the screen. Think of it as 16 physical dots on the screen, it might slightly more or slightly less depending on the screen you're using, but it's <em>always</em> going to draw it out the <em>same size</em>, <em>every time</em>.</p>
<p>At the time of writing this, whatever you change your font size to in the browser settings will have no effect on pixel measurements, and that's where the accessibility issues occur.</p>
<p>The browser will literally draw the font to that static size. The same way you would draw a line the same length every time if I told you to draw it 16mm long. It's a static unit of distance.</p>
<h2>Relative font sizes</h2>
<p>To allow the fonts and the spacing around it to scale to the user settings, you should use relative units of measurement such as REM, EM or percent.</p>
<p>Percent does exactly what you would expect. It increases or decreases the current font size by a given percentage. So, 200% would be double the current font size. Easy, right?</p>
<p>REM and EM are a bit more ambiguous. You'd think that EM was an acronym or an abbreviation, but it is not. An EM is a unit of measurement which made sense in the old world of physical printing, but when it got ported over into the digital world, it doesn't really make sense any more.</p>
<h3>What is EM?</h3>
<p>If you're a bit of a nerd, like me, and you want to know what it means; 1em comes from the width of the capital 'M' in traditional printing.</p>
<p>Font size was determined by the physical size of solid metal cast letter punches. The M was typically the widest letter available in a set, and was therefore useful for measuring line heights and margins. So, if you had a line height of 1em, the gap between lines of text would be the same as the width of the letter M in that font.</p>
<p>I'm not entirely sure why the unit is 'EM' and not just 'M'. I imagine it was just how it happened to be transcribed when somebody eventually decided to write it down. Or maybe it's because 'M' was already being used for metres.</p>
<p>I guess it would really mess your print up if you mistakenly made your font 1 metre high instead of 1em high!</p>
<h3>How does EM work?</h3>
<p>EM, like percent, will inherit its size from its parent element. So, the EM integrates quite well in the digital world through the use of cascading styles.</p>
<p>For example, if you wanted a child element to have a font size twice as large as the parent element, you can set the child to 2em.</p>
<div class="important">
For the purposes of this example, we will set the font size in pixels, just so it is clearer what is going on when we do the math. But, in reality, we'd avoid the use of pixels all together for the reasons I have already mentioned.
</div>
<p>Example of EM font size:</p>
<pre class="language-css"><code class="language-css"><span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>; }<br /><span class="hljs-selector-tag">h1</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">2em</span>; }<br /><span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1em</span>; }</code></pre>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-comment"><!-- font size of the body is set to 16px --></span><br /> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>At 2em, this heading will be 32px<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>At 1em, this paragraph text will be 16px<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">body</span>></span></code></pre>
<p>The math:</p>
<ul>
<li>The heading level 1: <code>2(em)*16(px)=32(px)</code></li>
<li>The paragraph: <code>1(em)*16(px)=16(px)</code></li>
</ul>
<h3>The problem with EM and Percent</h3>
<p>EM and percent suffer from a problem called compounding. Because they inherit from their parents, compounding happens when font sizes are unexpectedly calculated over multiple nested levels. The font size is recalculated with every nested child element giving you a much larger or smaller font size than originally intended.</p>
<p>For example:</p>
<pre class="language-css"><code class="language-css"><span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>; }<br /><span class="hljs-selector-class">.parent</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1em</span>; }<br /><span class="hljs-selector-class">.child</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">2em</span>; }</code></pre>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-comment"><!-- font size of the body is set to 16px --></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parent"</span>></span><br /> This text would be 16px<br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"child"</span>></span><br /> This text would be 32px, as expected<br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"child"</span>></span><br /> This text would be 64px, not as expected<br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"child"</span>></span><br /> This text would be 128px, definitely not as expected<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">body</span>></span></code></pre>
<p>The math:</p>
<ul>
<li>The parent: <code>1(em)*16(px)=16(px)</code></li>
<li>The first child: <code>2(em)*16(px)=32(px)</code></li>
<li>The second child: <code>2(em)*32(px)=64(px)</code></li>
<li>The third child: <code>2(em)*64(px)=128(px)</code></li>
</ul>
<p>To get around this problem of compounding, we can use the REM unit.</p>
<h3>What is REM?</h3>
<p>Using REMs is the easiest way to make your font sizes scale and still maintain control over your whole design.</p>
<p>REM units are <em>almost</em> the same as the EM unit. The key difference is that rather than inheriting their size from their parent elements, they always inherit from the root element. REM literally means 'Root EM', but unlike the old-school EM unit, REMs were invented purely for the digital world, to prevent the compounding issue.</p>
<p>The way a REM works is by always going to the root element on the page to calculate the font size. The root element is the first element on the page, which is the <code><html></code> tag, and unless you override it in your CSS, the HTML tag will always try to inherit its default font size from the browsers user settings.</p>
<p>In most modern browsers, the default user setting for font size is 16px. In Chrome and Edge this is labelled 'medium', but there are also settings for 'large' and 'very large'. Large is 20px, and very large is 24px. So, <code>font-size:1rem</code> can technically be 16px, 20px or 24px high depending on the user settings in the browser. Whereas <code>font-size:16px</code> will always be 16px.</p>
<p>For example:</p>
<pre class="language-css"><code class="language-css"><span class="hljs-comment">/* could be 16px, 20px or 24px */</span><br /><span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1rem</span>; }<br /><br /><span class="hljs-comment">/* could be 32px, 40px or 48px */</span><br /><span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">2rem</span>; } <br /><br /><span class="hljs-comment">/* could be 8px, 10px or 12px */</span> <br /><span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">font-size</span>: .<span class="hljs-number">5rem</span>; }<br /><br /><span class="hljs-comment">/* would only ever be 16px */</span><br /><span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>; } </code></pre>
<p>By using REM, you can nest child elements and the font size no longer has the compounding issue:</p>
<pre class="language-css"><code class="language-css"><span class="hljs-selector-class">.parent</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1rem</span>; }<br /><span class="hljs-selector-class">.child</span> { <span class="hljs-attribute">font-size</span>: <span class="hljs-number">2rem</span>; }</code></pre>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">html</span>></span><br /> <span class="hljs-comment"><!-- assume the font size is set to 16px in the user settings --></span><br /> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parent"</span>></span><br /> This text would be 16px<br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"child"</span>></span><br /> This text would be 32px, as expected<br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"child"</span>></span><br /> This text would be 32px, as expected<br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"child"</span>></span><br /> This text would be 32px, as expected<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">body</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre>
<p>The math:</p>
<ul>
<li>Parent: <code>1(rem)*16(px)=16(px)</code></li>
<li>First child: <code>2(rem)*16(px)=32(px)</code></li>
<li>Second child: <code>2(rem)*16(px)=32(px)</code></li>
<li>Third child: <code>2(rem)*16(px)=32(px)</code></li>
</ul>
<h2>Conclusion</h2>
<p>Don't use pixels for font sizes because it removes important accessibility options people may rely on.</p>
<p>Pixel perfect websites are a fallacy. Websites should be fluid. You can never design a perfect layout for every device in the world, so just design a one which works!</p>
<p>You may do a pixel perfect design for mobile, tablet and desktop, but are you really going to start doing designs for people browsing your website on Smart TV's, Tesla Cars and Smart Watches?</p>
<p>People don't care if the margin is 3px smaller than the designer wanted it to be. People care when they can't read the content because you've locked down the font size or it overlaps when they scale it up.</p>
<p>As a general rule, just use REM for anything which needs to be flexible and may affect readability, such as font size and margins. Use percent for container widths, such as columns. And, only use EM when your design specifically needs the scaling to be relevant to the parent element. Although, I'm yet to find a reason to ever use EM over REM, but maybe one exists.</p>
<p>Only ever use pixels for stylistic choices which do not need to scale, like borders and horizontal rules. Sometimes you might also want padding in pixels, depending on the design.</p>
<p>For example:</p>
<pre class="language-css"><code class="language-css"><span class="hljs-selector-class">.panel</span> {<br /> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br /> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1rem</span>;<br /> <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">1.5rem</span>;<br /> <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">1.5rem</span>;<br /> <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;<br /> <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#000</span>;<br />}</code></pre>
<p>And, finally. Always, <em>always</em>; scale the font size up and make sure your design works before you publish it!</p>
My ADHD and me2022-01-09T00:00:00Zhttps://www.craigabbott.co.uk/blog/my-adhd-and-me/
<h1>My ADHD and me</h1>
<h2>Preface</h2>
<p>I am not a medical expert. This post is my own personal experience, where I outline some of my traits and how I managed to get a diagnosis.</p>
<p>If you don't want to read the whole thing, you can skip to the section about <a href="https://www.craigabbott.co.uk/blog/my-adhd-and-me/#how-i-got-my-adhd-diagnosis">how I got my ADHD diagnosis</a>.</p>
<p>I also do talks about this topic, you can <a href="https://www.craigabbott.co.uk/decks/my-adhd-and-me/slides.html">view the slides for 'My ADHD and Me'</a></p>
<h2>Figuring out I was different</h2>
<p>"Attention Deficit Hyperactivity Disorder." I was 35 when the Psychiatrist confirmed it.</p>
<p>I felt conflicted. I'd spent years in counselling trying to figure out the inside of my own head. I thought I had a pretty good understanding of who I was. Now, I doubted if I knew myself at all.</p>
<p>I knew I had quirks. Looking at them now, some of them are textbook <a href="https://www.additudemag.com/adhd-symptoms-checklist/">ADHD traits</a>. But I also struggle a lot with <a href="https://www.verywellmind.com/imposter-syndrome-and-social-anxiety-disorder-4156469">Impostor Syndrome</a>, Anxiety and Depression. This obviously made my ADHD difficult to diagnose because a lot of the traits can also be attributed to these <a href="https://www.additudemag.com/when-its-not-just-adhd/">comorbid conditions</a>.</p>
<p>Because of this, ADHD was not something I'd ever really considered. It was actually my partner, <a href="https://twitter.com/Eliza_Lawson">Eliza</a>, who first suggested that's what it could be.</p>
<p>I guess, like most of society, I had a preconceived idea of what ADHD looked like; and it wasn't particularly positive.</p>
<h3>The term ADHD is flawed</h3>
<p>ADHD is a complex condition which most of society doesn't understand.</p>
<p>Breaking it down into 3 negative traits doesn't do much to help. 'Attention Deficit', 'Hyperactivity' and 'Disorder' are all unflattering terms. It implies people with ADHD are abnormal, easily distracted and wayward.</p>
<p>This is likely why there is a stigma attached to ADHD. A lot of people assume we'll be running around the office, getting high on blue smarties, not doing any work and being disruptive.</p>
<p>The term ADHD, and much of society's views, are largely derived from observations by Sir George Still in the early 1900s.</p>
<p>Still was a British Paediatrician who described some children as having 'an abnormal defect of moral control'. He often described these children as intelligent, but went on to say they could not control their behaviour in the same way 'typical children' could.</p>
<p>But, Still's arguments for children having a lack of moral control and 'serious problems with sustained attention', appear to be entirely based on them being unable to pay attention to things which <em>he</em> considered to be the priority.</p>
<p>So, yes, ADHD is a focus problem, but calling it a deficit of attention or suggesting people are just too hyperactive to remain focused is often misleading. This is perhaps why ADHD is so misunderstood.</p>
<p>Because it's a focus issue, it may come as a surprise that people with ADHD often have an unrivalled ability to hyperfocus. However, they cannot always utilise it on tasks which they do not find inspiring. It isn't simply a deficit of attention or being too hyperactive to focus. If anything, it's too much focus or attention to detail, just sometimes on the wrong things.</p>
<p>In the New Zealand language of <a href="https://www.tereohapai.nz/Browse/Terms/mi-NZ">Te Reo Māori</a>, the word for ADHD is 'Aroreretini' which means: 'attention goes to many things'. In my opinion, this is a much clearer way to describe what's really going on. It acknowledges that people with ADHD <em>do</em> pay attention, but that it isn't always focused on one thing.</p>
<h2>My ADHD traits</h2>
<p>Like a lot of conditions, ADHD is a spectrum. Everybody is different and we can have varying levels of impairment. But, we all often share common traits. The following issues are my experience of ADHD, but it's important to remember that somebody else's experience might be totally different.</p>
<h3>Organisation issues</h3>
<p>My personal organisation is two complete extremes. Anything which is important or expensive has a dedicated space and I know where it is at all times. This is usually a bag or a section of a drawer. Anything else just gets lost regularly and I usually have more than 1 to reduce the frustration of trying to find it when I need it.</p>
<p>I'm not the kind of person who can have 1 bag. I can't just swap out the contents. If I do that I'll always lose or forget important stuff. I'm the kind of person that needs multiple bags set up for a particular purpose. This way, I don't have to stress about everything I need for a particular activity, I just need to pick up the right bag.</p>
<p>I'm always losing things. I'm always saying to myself 'Argh, I literally just had it!' Although sometimes, I have to admit it is pretty funny, like the time my wireless keyboard eventually turned up in the fridge.</p>
<h3>Task management and hyperfocus</h3>
<p>Our entire work lives and personal lives revolve around setting and completing tasks. Because I fluctuate between procrastination and <a href="https://www.additudemag.com/understanding-adhd-hyperfocus/">hyperfocus</a>, managing tasks can get quite difficult.</p>
<p>I can prioritise tasks fine on paper, but executing them in order is a challenge. I'll always gravitate towards the interesting tasks first, or accidentally work on them without realising my attention has drifted from the priority.</p>
<p>I also find additional tasks within the current task, and if it is more inspiring than the one I'm currently doing, my focus unwittingly locks onto that. I sometimes snap back to reality after an hour or so of intensely working on something, only to realise it's the wrong task. There was no deficit of attention. I was laser focused! The thing I was working on was still important, it just wasn't the priority.</p>
<p>People who do not have ADHD, or those people who George Still considered to be 'typical'; they seem to be able to prioritise tasks, focus on 1 at a time, and complete them in order until they are all done.</p>
<p>Because I can lock onto a task and stay focused for 7 or 8 hours without distraction, I couldn't understand how I could possibly have an 'Attention Deficit Disorder'. But, as my psychiatrist pointed out: 'If you spend 8 hours on a task and you forgot to eat or check in with your family, then maybe you were distracted from life.'</p>
<h3>Timekeeping and sleep patterns</h3>
<p>My ability to monitor or predict time is flawed. It is sometimes known as <a href="https://adhdhomestead.net/time-blindness-feels/">time blindness</a>.</p>
<p>Most animals, humans included, have a built-in biological clock known as <a href="https://en.wikipedia.org/wiki/Circadian_rhythm">circadian rhythm</a>. It gives living things a way to interpret daily cycles and provides a sense of time even if they can't read a man-made clock.</p>
<p>For example, Eliza can be in a room with no windows and correctly estimate the time. She can somehow calculate how many hours and minutes have passed since the last time she knew the time accurately. And, She's rarely more than about 20 minutes out.</p>
<p>It blows my mind. To me, it's alien. How can she just know? How can there just be a feeling that it's 4pm, and it is? I just don't have that. If I try and guess the time I'm often several hours out.</p>
<p><a href="https://www.sciencealert.com/watch-the-famous-twin-paradox-of-special-relativity-explained">Einstein determined that time is relative</a>. It changes depending on how fast you're travelling. For my ADHD brain, this couldn't be more true! If my brain is racing, a minute can feel like an hour. If my brain is focused, an hour can feel like a minute.</p>
<p>This lack of instinct for time means I rely heavily on routine and structure. Each day, I set around 20 alarms, and I have to make a real effort to stick to routines or I can easily end up nocturnal. If I rely on my own body clock to go to bed, my entire sleep cycle just shifts by a few hours a day until it is completely inverted.</p>
<h3>Hobbies and Interests</h3>
<p>I get consumed by new interests, only to suddenly find them utterly disinteresting a few weeks later.</p>
<p>I'm a quick learner. I'll obsess over a new thing and develop fairly quickly up to a point, but I rarely have the focus to see any of them through to mastery.</p>
<p>The pattern is often:</p>
<ol>
<li>Discover new thing</li>
<li>Become obsessed with it</li>
<li>Buy tools and equipment</li>
<li>Get bored</li>
<li>Go back to step 3 a few times</li>
<li>Quit and sell everything</li>
</ol>
<p>I wouldn't say I'm entirely a 'Jack of all trades, and a master of none'. I do stick some things out. But I certainly have a lot of skills which are not at a level to be considered either useful or impressive.</p>
<h3>Impulsivity</h3>
<p>Impulsivity is a particular challenge. Because it can bind itself to some of the other issues and create destructive behaviours.</p>
<p>Studies suggest <a href="https://www.healthline.com/health/mental-health/adhd-and-addiction">people with ADHD are more likely to struggle with addiction</a> because we appear to regulate important brain chemicals like dopamine differently.</p>
<p>We get hooked on the highs of the dopamine hits, and insidiously justify our behaviours to ourselves to get more of them. It could be why your diet always starts on Monday, why your credit cards are always maxed out, or why going out for 'a few drinks' always ends up with you staggering home from a rave at 7am.</p>
<p>These days, the two things I still consistently struggle with are junk food and impulsive purchases. It's difficult to avoid eating things and buying things. It's part of everyday life, you can't abstain, nobody will notice or stage an intervention, and the marketing barrage is both perfectly legal and relentless.</p>
<h3>Emotions</h3>
<p>Emotions can be a challenge. I struggle with highs that are too high, and lows that are too low. In the extremes I get overwhelmed and my ability to process any kind of emotion becomes impaired. It's complete numbness. Just an absolute lack of feeling for anything good or bad.</p>
<p>In these times I can't find tears and I can't find joy. I become disinterested in hobbies and I can seem cold or robot-like.</p>
<p>These days, thankfully, I can recognise this for what it is. Eliza is incredibly understanding, and we can just ride it out. It can last a few hours, or a few weeks, but eventually the feelings always come back.</p>
<p>If you relate to this, there is a great blog post by Stacey Turis called <a href="https://www.additudemag.com/emotional-numbness-adhd-adults/">emotional numbness and the spectrum of ADHD feelings</a>.</p>
<h2>How I got my ADHD diagnosis</h2>
<h3>Caveat</h3>
<p>I have to again stress this is my personal journey. Other peoples experiences or advice may vary. I am not paid by or in any way affiliated with any services I recommend in this section.</p>
<h3>NHS vs Private</h3>
<p>I'm a huge supporter of the NHS. But unfortunately, whenever I've tried to access their mental health services, they seemed completely overwhelmed.</p>
<p>When I needed counselling, I was told the waiting list for <a href="https://www.nhs.uk/mental-health/talking-therapies-medicine-treatments/talking-therapies-and-counselling/nhs-talking-therapies/">NHS Talking Therapies</a> would be more than 12 months. If I was suicidal, or what they deemed to be 'in crisis', it was reduced, but it was still estimated to be around 3 months.</p>
<p>I ended up getting counselling through an incredible organisation called <a href="https://necounselling.org.uk/">North East Counselling Services</a>. It's around £45 per session, but they do sometimes have funding available to be able to offer it at a reduced cost or for free.</p>
<p><a href="https://www.anxiousminds.co.uk/">Anxious Minds</a> is another North East mental health service which can offer reduced price counselling.</p>
<p>For my ADHD diagnosis, through the NHS, I would have been looking at around 15 to 24 months at least. Because it's a lengthy and expensive process, there seems to be a greater desire just to write prescriptions to treat those comorbid conditions like anxiety and depression. So, I often came away from the GP meetings with anti-depressants and anti-anxiety medications, rather than the answers I needed.</p>
<p>I got my ADHD diagnosis through an organisation called <a href="https://psychiatry-uk.com/">Psychiatry UK</a>. But, unfortunately, it looks like at this time they don't have any appointments available until October 2022. This again highlights the overwhelming need for more mental health services in the UK.</p>
<p>Although Psychiatry UK is booked up, most Psychiatrists should be able to help privately with an ADHD diagnosis, but I will talk about some of the pitfalls I've learned about doing it this way.</p>
<h3>A private diagnosis is expensive</h3>
<p>My diagnosis cost me around £360.</p>
<p>For me, this was money well spent. I'd already worked a lot of my issues out through counselling, and with my coping strategies in place, at this time, I don't feel like I need medication.</p>
<p>However, if you do need medication, it can get incredibly expensive. It will cost you around £80 in nurse fees. £25 in prescription fees. And around £150 to buy a 28 days supply of Elvanse.</p>
<p>It's not even like you can just get the diagnosis privately and then go to your GP to work out the medication and the dose. You won't be allowed on NHS dispensation until you have worked with your private physician to get the dosage correct.</p>
<p>As I have not gone down this route, I'm not sure how long it could take. But it could potentially cost hundreds if not thousands of pounds more.</p>
<h2>Life after the diagnosis</h2>
<p>When I was first diagnosed, I doubted if I knew myself at all. But now, I embrace the fact that I'm a bit different.</p>
<p>ADHD does not define me as a person. But, whether I like it or not, it is part of who I am. It always has been though. Those traits have always been there. I just understand them a bit better now.</p>
<p>I've talked a lot about the negatives, but there are many positives to ADHD which are never really discussed.</p>
<p>ADHD can be overwhelming, erratic and destructive, but if you can tame it, sometimes it can almost feel like a super-power.</p>
<p>The constant curiosity to learn and understand new things. The ability to completely lose yourself in the things you love. Working on things which interest you for hours without tiring. The creativity and problem solving ability of a brain which is constantly thinking at full-speed, 24 hours a day.</p>
<p>If you can harness these things, treat them with care and look after yourself, ADHD can be a gift. But if you abuse these things or burn yourself out, then ADHD is definitely a curse.</p>
<p>I'm what some people might call a do'er. I'm passionate and I get shit done. But I don't look after myself properly. I work too many hours and I burn out regularly. So I won't pretend to have everything figured out.</p>
<p>I'm still learning. Still adapting. Still trying to strategise my way around this.</p>
<p>My new year's resolution for 2022 is to find a better work-life-balance. To stop working 10 hour days or on my days off, and to spend more time doing things I love with the people I love.</p>
<h2>Postface</h2>
<p>I talk openly about my mental health issues, but I know a lot of people may not want to. If there's anything in this post which has struck a chord or you want to know more about, you can <a href="https://twitter.com/abbott567">message me on Twitter</a>. My DM's are always open.</p>
Using the language attribute to make your website accessible2022-02-11T00:00:00Zhttps://www.craigabbott.co.uk/blog/using-the-language-attribute-to-make-your-website-accessible/
<h1>Using the language attribute to make your website accessible</h1>
<p>There's a couple of criteria in the <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines</a> that I see catching people out time and time again. <a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html">3.1.1 Language of page</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html">3.1.2 Language of parts</a>.</p>
<p>These two criteria are important, because they help screen readers to read out the language correctly. If your page is set to English, but some of your content is not in English, then the screen reader is just going to attempt to pronounce it in English anyway, which can lead to some pretty weird results.</p>
<p>The HTML 'lang' attribute is the way we tell the browser what language the content is written in. Without it, the language is set to 'unknown', so you must always set it, to avoid any unpredictable behaviour.</p>
<h2>Language of page</h2>
<p>In most cases, you only ever need to set the language once, right at the top of your page. Any child elements will automatically inherit from their parent, so setting it on the <code><html></code> element means anything on the page will be set to that language.</p>
<p>In the following example, if we use <code>lang="en"</code> on the <code><html></code> element, this will pass <a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-page.html">3.1.1 Language of page</a>. The body element will inherit the from the HTML element, and the paragraph element will inherit from the body element.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> The browser will know this text is in English.<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">body</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre>
<h2>Language of parts</h2>
<h3>When a block of text is a different language</h3>
<p><a href="https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html">3.1.2 Language of parts</a> is relatively straight forward for blocks of content. You'll need to satisfy this criterion if you have more than 1 language on your page.</p>
<p>Imagine we wanted to use both French and English on our page. We'd need to use <code>lang="fr"</code> at some point, but we can't use it on the HTML element because the majority of the page is in English. So we need to add it to the content itself and make sure we don't accidentally wrap any English words into the element we apply it on.</p>
<p>In the following example, we need to apply the <code>lang="fr"</code> attribute to the second paragraph, because the language is French. But we don't need to specify that the first paragraph is in English because it will continue to inherit from the HTML element.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>The main language is English<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> This text is in English<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"fr"</span>></span><br /> Ce texte est en Français<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">body</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre>
<h3>When there are two languages in a single block</h3>
<p>It can get more complicated when you want to use more than one language in a single block of text. If we applied the attribute to the paragraph element like before, the screen reader will attempt to read the entire thing in French. So, in the following example, we are applying the <code>lang</code> attribute to part of a paragraph by wrapping it in an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i">idiomatic text element</a>.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Sometimes people mix languages in a paragraph, <br /> but they don't apply the correct language attributes. <br /> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"fr"</span>></span>Ç'est la vie!<span class="hljs-tag"></<span class="hljs-name">i</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">body</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre>
<h3>Idiomatic elements vs Spans</h3>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i">idiomatic text element</a>, or <code><i></code> element, often gets misunderstood. A lot of people think it stands for italic text. You'd be forgiven for believing this, as when HTML was first invented that is exactly what it did mean. However, over the years, it has evolved in the spec to a have a broader meaning.</p>
<p>In HTML5, the idiomatic text element should be used for text which is different in some way to the surrounding text. This can be an alternative voice or mood, technical terms, thoughts or inner monologues and terms from other languages.</p>
<p>You should use an idiomatic text elements rather than a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span">span element</a>. Some screen readers will ignore the lang attribute on spans because they do not inherently represent anything. They are the inline equivalent of <code><div></code> elements and should only be used for styling.</p>
<h2>A complex real world example</h2>
<p>On Government digital services, there is usually an option to switch to a Welsh version. This creates a few considerations.</p>
<p>On the English version, it needs <code>lang="en"</code> on the HTML element, and <code>lang="cy"</code> on the link to the Welsh version.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>This is the English site<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br /><br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/switch-to-english"</span>></span><br /> English<br /> <span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /><br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"cy"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/switch-to-welsh"</span>></span><br /> Cymraeg<br /> <span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">body</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre>
<p>However, once it switches to the Welsh version, it will need <code>lang="cy"</code> on the HTML element, and <code>lang="en"</code> on the link to the English version. We no longer need to specify that the Welsh link is actually in Welsh, because it now inherits the Welsh language attribute from the HTML element.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"cy"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Dyma'r safle Cymraeg<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br /><br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/switch-to-english"</span>></span><br /> English<br /> <span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /><br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/switch-to-welsh"</span>></span><br /> Cymraeg<br /> <span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">body</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">html</span>></span></code></pre>
<h2>Conclusion</h2>
<p>Every language has it's own code for the lang attribute. To find the language you need, you can look it up under <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1 codes</a> or use a library such as <a href="https://www.npmjs.com/package/iso-language-codes">ISO language codes on NPM</a>.</p>
<p>Whenever you're writing content, make sure you tag up anything which isn't the default language of the page. Even simple phrases that have crept into the English language, like <i lang="fr">déjà vu</i>.</p>
<p>If you do these things, you should pass the WCAG criteria for 'Language of Page' and 'Language of parts'.</p>
Partially supported is not supported2022-03-02T00:00:00Zhttps://www.craigabbott.co.uk/blog/partially-supported-is-not-supported/
<h1>Partially supported is not supported</h1>
<p>I usually like to write helpful blog posts. But I'm going to be honest and warn you up-front that this one is definitely a rant!</p>
<p>That's not to say it won't be helpful, but you will have to deal with my tone. I'm exhausted, I'm disappointed, and quite frankly, I'm angry.</p>
<h2>The problem</h2>
<p>As you probably know by now, any software which is built or procured by a Public Sector Body must meet the <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a> to the standard of AA.</p>
<p>What I'm <em>really</em> tired of, is reading conformance reports from third party suppliers who are trying to push their inaccessible products for large sums of money under the guise that it is accessible.</p>
<p>These chancers often state that some of the criteria is 'partially supported', 'supported with exceptions' or any number of different ways to carefully word the fact that it does not support a particular accessibility feature.</p>
<p>And, it's not just one company, they're all doing it.</p>
<h2>Twisting the truth</h2>
<p>Lets be clear, WCAG 2.1 AA is a binary standard. You either pass all of the required criteria, or you don't. There are no grey areas. This might change with <a href="https://www.w3.org/TR/wcag-3.0/">WCAG 3.0</a>, but for now, if your product does not pass a certain criterion, your product does not support that feature and it's going to cause issues for people.</p>
<p>Twisting the truth and being ambiguous confuses teams, who may not be accessibility experts, into potentially pursuing products which simply don't meet the standards.</p>
<p>The following examples are from a real conformance report I recently reviewed. The company says it 'is compliant with WCAG 2.1 AA with a few exceptions.' Personally, I'd say it fails to meet even the fundamentals outlined in WCAG 2.1 level A, given that it doesn't work with a Keyboard.</p>
<dl>
<dt>
1.4.4 Resize text
</dt>
<dd>
Supported with exceptions: Some text presentation may not be preserved when resized.
</dd>
<dt>
1.4.10 Reflow
</dt>
<dd>
Supported with exceptions: Some content may not be preserved when reflowed.
</dd>
<dt>
1.4.11 Non-Text Contrast
</dt>
<dd>
Supported with exceptions: Some content may not have 3:1 contrast.
</dd>
<dt>
2.1.1 Keyboard
</dt>
<dd>
Supported with exceptions: Some content does not support full keyboard navigation.
</dd>
<dt>
2.4.3 Focus Order
</dt>
<dd>
Supported with exceptions: Some content does not fully support expected focus order.
</dd>
<dt>
4.1.2 Name, Role, Value
</dt>
<dd>
Supported with exceptions: Some content does not fully support name, role, value.
</dd>
</dl>
<p>The status and the comments in most cases are a direct contradiction of one another. As the table is not necessarily clear, I'll outline a couple of them so you can see how ridiculous the statements are.</p>
<p><a href="https://www.craigabbott.co.uk/blog/partially-supported-is-not-supported/%7Bwcagify%7D">2.1.1 Keyboard</a> states: 'All functionality of the content is operable through a keyboard interface...' The key word here is <em>'all'</em>. In the conformance report the company states that it is 'supported with exceptions', and then outlines how there is some content which does not work with a keyboard. If the criteria says all content needs to work, and you state some content does not work, it's a joke to say it's partially supported.</p>
<p><a href="https://www.craigabbott.co.uk/blog/partially-supported-is-not-supported/%7Bwcagify%7D">2.4.3 Focus Order</a> states: '...focusable components receive focus in an order that preserves meaning and operability.' In the conformance report the company states that it is 'supported with exceptions', and then outlines how there is some content which is not focused in the correct order. Again, if the focus is in the wrong order, you fail this criterion. You don't partially pass it because one or two things happen to be in the right order.</p>
<h2>Be honest. Be better</h2>
<p>The problem with trying to present your product as accessible when it's clearly a lie, is not just that you put the Public Sector Body at risk, but that at the end of every interaction with a product is a person. A person trying to do a job or a task, and it's important that they're able to do that.</p>
<p>WCAG is not a pointless checkbox-exercise. It's not even the holy-grail of accessibility, it's the absolute bare minimum you need to do to make sure your product does not exclude people.</p>
<p>You likely don't see the effects. You don't see the people robbed of their independence. The people unable to do their job. Unable to get promoted or move teams.</p>
<p>Stop kidding yourself. If you have 10 buttons on a page, and only 6 of them work using a keyboard, your product doesn't partially support <a href="https://www.craigabbott.co.uk/blog/partially-supported-is-not-supported/%7Bwcagify%7D">2.1.1 Keyboard</a>. Your product is broken! Fix it.</p>
<p>It might seem like a good way to try and rose-tint your product so that people will buy it, but just have some integrity! Be honest about where your product is at, then make robust plans and stern commitments to make it better!</p>
<p>Rant over, for now at least! Thanks for making it to the end.</p>
Making microservices accessible2022-11-30T00:00:00Zhttps://www.craigabbott.co.uk/blog/making-microservices-accessible/
<h1>Making microservices accessible</h1>
<h2>Overview</h2>
<p>I've written this post to be comprehensive, which unfortunately makes it a bit longer than usual.</p>
<p>If you don't want to read the whole thing, you can use the following links to find the parts you want to read:</p>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#what-is-a-microservice">What is a microservice?</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#the-crux">The crux</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#examples">Examples</a>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#the-redirect-approach">The redirect approach</a>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#context-is-everything">Context is everything</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#transparency-is-good">Transparency is good</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#session-management-is-hard">Session management is hard</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#wcag-considerations">WCAG considerations</a></li>
</ul>
</li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#the-api-approach">The API approach</a>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#are-apis-in-scope">Are APIs in scope?</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#data-not-markup">Data, not markup</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#failing-gracefully">Failing gracefully</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#design-patterns-for-the-win">Design patterns for the win</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/#conclusion">Conclusion</a></li>
</ul>
<h2>What is a microservice?</h2>
<p>The term '<a href="https://en.wikipedia.org/wiki/Microservices">microservice</a>' is becoming more and more popular when you look across the Digital landscape of a lot of big organisations.</p>
<p>In short, a microservice is just a small part of the user journey which focuses on one specific task. They're not end-to-end, they just do one thing and then they hand-off. For example, taking a credit card payment.</p>
<p>I recently attended <a href="https://govservicedesign.net/">SD in Gov</a>, where again, microservices came up a lot.</p>
<p>I saw a great talk by <a href="https://twitter.com/vonRunte">Fritz Von Runte</a>, which was beautifully illustrated, well presented, and used the analogy of each microservice being a Lego brick.</p>
<p>The idea is that each brick is a little self-contained application, and you can very quickly stick them together to build digital services which should, <em>in theory</em>, just work.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-lego-bricks.webp" alt="Fritz Von Runte presenting at SD in Gov. On the screen is a collection of Lego bricks representing a digital service. Each brick is a microservice, such as secure sign-on, eligibility questions, identity verification and decision making system." /></p>
<p>Several Government departments, and several large organisations I've spoken to recently, are all looking at this approach; because, if executed well, it saves time and money, and they create consistency for users.</p>
<p>However, as more and more organisations try to leverage microservices, the pitfalls of accessibility are perhaps not being fully considered.</p>
<h2>The crux</h2>
<p>The important part, which the <em>entire</em> approach is hinged on, is <em>where</em> you build the user interface.</p>
<p>If you take nothing else away from this post, take away this point.</p>
<p>Where the user interface sits and who owns the codebase is key. If you get it wrong, the entire approach becomes brittle or extremely time consuming to get right.</p>
<p>It becomes a single point of failure, and it will also bring down any service which integrates with it.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-single-point-of-failure.webp" alt="A user flow showing 3 compliant pages, and 1 non-compliant microservice in the middle making the whole thing non-compliant." /></p>
<p>To stick with Fritz's analogy, while it's easy to make each Lego brick accessible on its own, people often fail to take a step backwards and look at the accessibility of the end-to-end journey once you stick all the bricks together.</p>
<p>A lot of the <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG)</a> are about consistency and context, and that <strong>cannot</strong> be tested in isolation.</p>
<p>You could end up with 3 or 4 fully compliant microservices, but when stuck together they're no longer compliant.</p>
<h2>Examples</h2>
<p>There are several ways to implement microservices, but the two that seem to be the most popular are the 'redirect approach' and the 'API' (Application Programming Interface).</p>
<p>Let's take a more in-depth look at each one, and some of the things you'll need to consider.</p>
<h3>The redirect approach</h3>
<p>In this scenario, each microservice is an entirely separate application.</p>
<p>It hosts its own front-end on its own domain, and at various points in the journey, the user is redirected from one application to another, providing them with a <em>supposedly</em> seamless journey.</p>
<p>This is often a short-sighted approach. It's an over-simplification of a complex system, which often leads to it being executed poorly.</p>
<p>It's not to say it will not work, but mistakes are usually made off the back of 3 assumptions.</p>
<p>It's assumed:</p>
<ul>
<li>the microservice will always be used in the exact same context</li>
<li>the redirects will largely go unnoticed</li>
<li>the user journey is always linear</li>
</ul>
<p>Let's look at these 3 assumptions and the common mistakes.</p>
<h4>Context is everything</h4>
<p>The context of every service is different. Not all users are the same, so if your user interface is static, it's going to cause issues.</p>
<p>For example, when collecting names, in a service such as <a href="https://www.gov.uk/get-state-pension">Get your State Pension</a>, the majority of users will be from the UK. So, you're going to want to label your input fields '<code>first name</code>' and '<code>last name</code>' to fit with UK naming conventions.</p>
<p>But, on a service such as <a href="https://www.gov.uk/apply-national-insurance-number/how-to-apply">Apply for a National Insurance number</a>, you're going to want to use '<code>given names</code>'; and '<code>family names</code>', because it's likely that your users are not from the UK.</p>
<p>This guidance is outlined in the <a href="https://design-system.service.gov.uk/patterns/names/">GOV.UK Design Pattern for names</a>.</p>
<p>If you hard-code '<code>first name</code>' and '<code>last name</code>' labels into your microservice, it's too brittle. It's not going to cater for other cultures or nationalities where their names don't fit the UK conventions.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-labels.webp" alt="A side-by-side comparison of two text inputs on a HTML form. The title on the top of each reads: What is your name? The labels on one set of fields reads: first name and last name. On the other, it reads: given names and family name" /></p>
<p>Another thing to note, is if the User Researchers and Designers can't influence the user interface, you're effectively shutting down your organisations ability to do User Centred Design.</p>
<p>You'll need to work out how to make the interface configurable, and that means taking on a lot of extra responsibility.</p>
<p>Because you own the user interface, you will probably need to onboard any service which wants to integrate and configure it suit their needs. This is a bottleneck which causes delays and additional work for your team.</p>
<p>Alternatively, you might have to allow services to attach a configuration payload into the headers when it redirects the user, which is clunky and probably has security concerns.</p>
<h4>Transparency is good</h4>
<p>The majority of the WCAG issues are caused when you try to make the journey <em>seamless</em>. It's deception that causes most of the problems.</p>
<p>When doing a <em>seamless</em> redirect, it's only seamless to sighted users who are perhaps not giving it their full attention.</p>
<p>If the page looks roughly the same, people might not notice the subtle changes. But, to a blind user, if the landmarks, menus and ordering have changed, it's not seamless at all, it's completely different.</p>
<p>In the redirect approach, the microservices are <em>not</em> the same application, they're a bunch of completely separate applications stuck together. So, when you try and dupe the user into believing they are a single application, it causes confusion and can lead to lack of trust in the service as a whole.</p>
<p>If you're up front, and you explain to the user before they're redirected that it's about to happen, quite a few of these issues will go away.</p>
<p>For example:</p>
<blockquote>
<p><i>When you select 'continue' you will be redirected to our Identity Service. Once we've confirmed your details you can continue with your application.</i></p>
</blockquote>
<h4>Session management is hard</h4>
<p>The biggest challenge you'll probably face with the redirect approach is session management. Handing off sessions and securely maintaining state across multiple applications is no easy task.</p>
<p>A user journey is often perceived to be linear, and in most cases they will be. But, there's a back button in the browser for a reason. People use it, and it needs to work.</p>
<p>Depending on the design, the user might also be able to jump back to certain points of the journey. For example, they may use a 'change' link from the '<a href="https://design-system.service.gov.uk/patterns/check-answers/">check answers pattern</a>' to amend a typo.</p>
<p>The tricky part of the redirect approach is that sessions will need to be maintained and synchronised across all microservices, even when they're not currently active.</p>
<p>If the session times out on one microservice while the user is currently active on another, during one of the hand-offs it's going to fail.</p>
<p>Assistive technology is great. But for a lot of users, it's substantially slower. You need to take this into account, or it could be impossible for them to complete the service.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-timeout.webp" alt="A flow diagram showing a 1 hour timeout on the initial service. It then illustrates that the user takes 25 minutes on each of the 3 microservices, so when they come back to the original application after 85 minutes the session has timed out and they need to start again." /></p>
<h4>WCAG considerations</h4>
<h5>2.2.1 Timing Adjustable</h5>
<p>Most digital services have to consider <a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/%7Bwcagify%7D">2.2.1</a> due to session management. It's standard practice to time the user out after 1 hour of inactivity.</p>
<p>If your session times out in less than 20 hours, to pass this criterion the user will need to be given an opportunity to extend their session. And this must work across the end-to-end service.</p>
<p>If at any point the end-to-end service breaks because the user was redirected to a microservice where the session has been destroyed, and they were not given the opportunity to extend it prior to this happening, it would fail.</p>
<h5>2.4.2 Page Titled</h5>
<p>To pass <a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/%7Bwcagify%7D">2.4.2</a>, the title needs to describe topic or purpose. It expects that:</p>
<blockquote>
<p>'Titles identify the current location without requiring users to read or interpret page content.'</p>
</blockquote>
<p>This one can get a bit subjective, so here are some things to consider.</p>
<p>The common title pattern for a GOV.UK service is:<br />
<code>H1 - Service name - GOV.UK</code></p>
<p>A real-world example might be:<br />
<code>What is your name? - Apply for Universal Credit - GOV.UK</code></p>
<p>This provides 3 levels of context for screen reader users. You know what the page relates to, what service you're currently on, and that it's part of GOV.UK.</p>
<p>Now, imagine there's a <em>'seamless redirect'</em>, the title is now:<br />
<code>What is your address? - Verify your identity</code></p>
<p>To a blind user, the entire context of the service is gone. They will likely have questions:</p>
<ul>
<li>What has happened?</li>
<li>Am I still applying for Universal Credit?</li>
<li>Have I clicked on something by mistake?</li>
<li>Is it a cyber-attack, and is my personal information safe?</li>
</ul>
<h5>3.2.3 Consistent Navigation</h5>
<p>To pass <a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/%7Bwcagify%7D">3.2.3</a>, things like navigation menus, which appear on multiple pages, need to be consistent. This means they need to be in the same place, contain the same wording, and be in the same order each time the user encounters it.</p>
<p>Common examples are headers and footers. These are likely going to have different items in them depending on the service, but if they're not consistent across the end-to-end service, it's going to cause confusion.</p>
<p>Remember, to a blind user, it could be perceived as a completely different service, even if it looks pretty much the same as the previous page to a sighted user.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-navigation.webp" alt="The GOV.UK footer showing a navigation menu containing links for: Help, Privacy, Cookies, Accessibility Statement, Contact, Terms and Conditions." /></p>
<h5>3.2.4 Consistent Identification</h5>
<p>To pass <a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/%7Bwcagify%7D">3.2.4</a>, components which have common functionality need to be consistent across the whole service.</p>
<p>For example, if the user can sign in and sign out via a component in the header, then it needs to be consistently identified on each page via its name and role.</p>
<p>If the wording is even slightly different, or if one microservice uses a button while one uses a link, you're going to fail this criterion.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-consistent-identification.webp" alt="A comparison of sign out functionality on two similar looking headers. One is a link which reads: Sign out. The other is a green button which reads: Sign out." /></p>
<h5>3.3.4 Error Prevention (Legal, Financial, Data)</h5>
<p>To meet <a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/%7Bwcagify%7D">3.3.4</a> Users need to be able to check their answers before submitting anything which causes legal commitments or financial transactions. For example, applying for a benefit with a declaration of truth, or making a credit card payment.</p>
<p>In most digital services, we'd use the '<a href="https://design-system.service.gov.uk/patterns/check-answers/">check answers pattern</a>'. But, a more rudimentary solution is to just make sure the back button works and whatever was previously answered is re-populated.</p>
<p>Again, this ties in with session management. A user needs to be able to go back, review and amend any information they've entered before the final submission. If they cannot and they're forced to start again, you'd fail this criterion.</p>
<h3>The API approach</h3>
<p>In this scenario, the microservices exist purely as back-end applications and they connect to front-end applications via endpoints.</p>
<p>The user interacts with a relatively simple front-end. It handles the session and the routing, but when it comes to complex business logic like verifying somebodies' identity, it hands over all the data and waits for the microservice to do its job, and routes the user accordingly based on the response.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-api-example.webp" alt="A user flow. It lists 4 pages for: what is your name? what is your date of birth? what is your national insurance number? and success. Between the last 2 pages it routes through an API labelled: verification API." /></p>
<p>The main reason I see people resisting this approach is control. They want to own the user interface so that everything is in a tidy little silo and us pesky designers can't mess with it!</p>
<p>To a point, this makes sense. If you do not have good design maturity in your organisation, your interfaces lack consistency and familiarity.</p>
<h3>Are APIs in scope?</h3>
<p>True APIs are <em>not</em> usually covered by the scope of the regulations, because they do not have a user interface. They simply pass data back and forth between two or more applications.</p>
<p>So, if you're the team responsible for building the microservice, if you choose to do an API there's probably very little accessibility work to do.</p>
<p>The exception to this might be if the API has an admin interface, where a user can log in and perhaps create, update or delete endpoints. In this case, then the user interface for the admin area <em>would</em> fall under the scope of the regulations and need to be made accessible.</p>
<p>As a general <i>rule of thumb</i>, if a user interacts directly with content rendered by the application, then it falls in-scope of the accessibility regulations. If the interactions are purely machine-to-machine and it's just passing back data and status updates, then it does not.</p>
<h3>Data, not markup</h3>
<p>An API should be used purely to pass back data and status updates.</p>
<p>If your API is passing back markup, such as blocks of HTML, and expecting the requesting application to simply render them out, then your API could become a single point of failure.</p>
<p>Although, if you're doing this, you probably have bigger issues to worry about than just accessibility! Most applications should automatically escape any markup that comes in like this for security purposes. You don't want any bad actors injecting a whole bunch of markup into your page!</p>
<p>The requesting application should have full control over the user interface. They should be able to decide which elements are right for the way they lay out the content out on the page.</p>
<p>If you're passing back markup which doesn't fit the design of the requesting application, then they're going to have to do a lot of clean-up work to make it usable for their own context.</p>
<h3>Failing gracefully</h3>
<p>Any application using an API should not be dependent on it for its own usability or accessibility compliance.</p>
<p>The requesting application must translate any responses and use those to present information back to the user in a clear and accessible way.</p>
<p>For example, if the API is unavailable and the client application gets a 503 error, it should not just present this error to the user. Very few people actually know what a 503 error is.</p>
<p>The application should instead do the hard work, decipher the problem, and explain it to the user in a way which makes sense.</p>
<p><img src="https://www.craigabbott.co.uk/posts/making-microservices-accessible/images/microservices-503-error.webp" alt="A side-by-side comparison of two pages. One reads: HTTP error 503. The API is unavailable. The other reads: Sorry there is a problem with this service. We cannot automatically verify your bank details at the moment. You can still apply online and we will check them manually, but there may be a delay in processing your application. Do you want to continue? Yes. No" /></p>
<h3>Design patterns for the win</h3>
<p>The easiest way to build an accessible microservice is to build a robust API and publish good documentation and design patterns for people wanting to use it.</p>
<p>This is where good design systems really shine. You can own the data, you can own the process and you can own the user interface to a point, but you don't become a bottle neck or a single point of failure.</p>
<p>Lets go back to our naming example. Your API might require the names in a certain data format.</p>
<p>Such as:</p>
<pre class="language-json"><code class="language-json"><span class="hljs-attr">"person"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br /> <span class="hljs-attr">"name1"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"string"</span><span class="hljs-punctuation">,</span><br /> <span class="hljs-attr">"name2"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"string"</span><br /><span class="hljs-punctuation">}</span></code></pre>
<p>With good documentation on what the API expects, and a recommended design pattern showing the two fields with '<code>first-name</code>' and '<code>last-name</code>', for most services they will all implement the pattern as standard.</p>
<p>So, you have your ownership of the design, you have your consistency for your user, and you have the data in the format you need.</p>
<p>The difference is that the design is now flexible without configuration.</p>
<p>The integrating service has full control over their own user interface, they can change the content based on their user research, and still provide the API with the data that it needs to work.</p>
<h2>Conclusion</h2>
<p>Almost anything can be made accessible. But, depending on how you build your microservice will determine how much work you have to do!</p>
<p>The redirect approach is not necessarily a write off. If you have a small number of services and strong design maturity in your organisation, then you might not run into a lot of the problems I've outlined in this post.</p>
<p>I'm not saying there is only one way to build a microservice. APIs and design patterns are just <em>my</em> recommended approach.</p>
<p>All I ask is you consider each of the issues I've outlined, and really think about how they impact your users.</p>
<p>Don't just commit blindly to a strategic solution that's going to lock your organisation into accessibility hell for the next 20 years. Because, as annoying as WCAG might be for you when you're building it, it's always users who truly suffer.</p>
<p>Weigh up <em>all</em> your options. Make accessibility a priority. Lead by example.</p>
<p>Thanks for making it to the end!<br />
Craig</p>
European Accessibility Act: What you need to know2023-08-20T00:00:00Zhttps://www.craigabbott.co.uk/blog/european-accessibility-act-what-you-need-to-know/
<h1>European Accessibility Act: What you need to know</h1>
<p>The <a href="https://en.wikipedia.org/wiki/European_Accessibility_Act">European Accessibility Act (EAA)</a> has been on my mind for a while now.</p>
<p>Weirdly, not many people have heard of it, but the scope of it is huge! So lets look at it in more detail. I'll try to explain what it means, especially for private sector organisations, and I'll also share some tips to help you prepare for the deadline in 2025, so you're not left scrambling at the last minute!</p>
<h2>What is the European Accessibility Act?</h2>
<p>The European Accessibility Act is new legislation which was brought in by the European Union (EU) in 2019 with the aim to make sure that products and services are more accessible.</p>
<p>It goal is mainly to help people with disabilities, but it will make things better for everybody!</p>
<p>Somehow, it has flown under the radar. A lot of people are not aware of it, but, there is a deadline of 28 June 2025 in order to comply with it. So, if this is the first time you're hearing of it, please take note!</p>
<p>The idea is to finally create an environment where everyone finally has equal opportunities. It is supposed to bring accessibility to the likes of websites, mobile apps, ticket kiosks, ATM’s (cash machines), Smart TV's, and… Well… Pretty much anything that is a digital device, application or service.</p>
<p>Before the EAA, there were already some accessibility regulations in place, but they were heavily focused on public sector bodies.</p>
<p>If you've attended any of my talks in the past decade or so, you'll know that I've been constantly warning private sector folk that at some point they too will be on the hook for accessibility. Well, thanks to the EAA, that time is now!</p>
<h2>How is the EAA different from other accessibility regulations?</h2>
<p>You're probably thinking</p>
<ul>
<li>Isn't there already a bunch of accessibility regulations in the UK and the EU?</li>
<li>What's the difference between the EAA, the EU Web Accessibility Directive, the Public Sector Bodies Accessibility Regulations, and EN 301 549?</li>
<li>What impact does Brexit have on the EAA?</li>
</ul>
<p>So, let's try and break it down!</p>
<h3>The EU Web Accessibility Directive</h3>
<p>The <a href="https://en.wikipedia.org/wiki/Web_Accessibility_Directive">EU Web Accessibility Directive 2016</a> is aimed at <em>public sector</em> websites and mobile applications in Europe.</p>
<p>The intent behind the directive is mainly to improve the accessibility of websites and mobile apps. However, as a cool consolation prize, it also makes the user experience more consistent for people with disabilities.</p>
<p>It only applies to you if you're a public sector body in Europe, including the UK, as it was implemented in 2016 before <a href="https://en.wikipedia.org/wiki/Brexit">Brexit</a>.</p>
<p>It <em>does not</em> apply to the private sector unless they’re providing products or services directly to a public sector body.</p>
<h3>The Public Sector Bodies Accessibility Regulations</h3>
<p>The <a href="https://www.legislation.gov.uk/uksi/2018/952/made">Public Sector Bodies Accessibility Regulations 2018</a> are, as the name suggests, aimed at public sector bodies also. But, the important difference here is that this is UK specific law.</p>
<p>Like the EU Web Accessibility Directive 2016, it sets out accessibility requirements for websites and mobile apps. And, again, private sector organisations are not directly impacted unless they're supplying products or services directly to a public sector body.</p>
<p>The Public Sector Bodies Accessibility Regulations are what is known as a harmonised standard. So, whilst they are UK regulations, they are aligned with the EU Web Accessibility Directive.</p>
<p>Harmonised standards can be more strict, have additional measures or higher standards, but they cannot fall below the standard of the regulations they are harmonised with.</p>
<p>Because they are harmonised, if you meet the Public Sector Bodies Accessibility Regulations, you will also meet the EU Accessibility Directive. Cool huh?</p>
<h3>EN 301 549</h3>
<p><a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf">EN 301 549</a> is named horrendously. I hate it. It's not particularly accessible having a name that makes no sense, which is perhaps why people often get confused as to what EN 301 549 actually is.</p>
<p>However, in short, EN 301 549 is a technical standard that lays down the accessibility requirements for ICT (information and communications technology) products and services.</p>
<p>It is essentially just a set of guidelines which tells organisations <em>how</em> to make products accessible, rather than all the legalities which explains what happens to them if they do not!</p>
<p>EN 301 549 references both the <a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG)</a> and a version called <a href="https://www.w3.org/WAI/standards-guidelines/wcag/non-web-ict/">WCAG2ICT</a> which is an adaptation of the standard for non-web products.</p>
<h3>The European Accessibility Act</h3>
<p>The European Accessibility Act, on the other hand, is focused on <em>private sector organisations</em> selling products or services to customers that live in EU member states.</p>
<p>Note here that it isn't organisations <em>based</em> in the EU, it's those <em>selling to EU customers</em>. This is very important, as the laws apply based on the location of the customer, not the location of the organisation.</p>
<p>It came into force in 2019, making it the newest set of regulations, and the scope is larger than anything we've seen so far.</p>
<p>It covers a broad range of products and services, it isn't just limited to websites and mobile apps. It's also the first time that, whether you provide public services to people in the EU, or you sell products or services to customers in the EU, you will all need to meet the same standard of accessibility.</p>
<p>It's probably the most ambitious attempt we've seen at accessibility legislation!</p>
<h2>What is the impact on private sector organisations?</h2>
<p>For private sector organisations, the European Accessibility Act is a big change. It mandates accessibility for a huge range of products and services. Like the other regulations, it also includes websites and mobile apps, but now, it also includes physical devices such as ticket machines, smart phones and TV's.</p>
<p>Simply put, if you're in the private sector and you operate within the EU, you'll have to make sure your products and services meet the EAA's requirements.</p>
<p>By getting on board with these guidelines early, and building accessibility in by design, means you're not just ticking a box. You're providing a more inclusive experience for more people, reaching new markets, enhancing your brands reputation, and driving innovation.</p>
<h3>Broader Scope of Compliance</h3>
<p>The EAA goes beyond just making your website and apps accessible. It includes other digital products, like physical devices and e-books.</p>
<p>Private sector organisations will need to make sure that all their existing digital products now meet the new accessibility requirements, which may mean going through everything from website design to app development, and ensuring that accessibility is integrated throughout the process.</p>
<p>Whether you build digital hardware or software, it now needs to be accessible. It might be time to do some end-to-end user research to see which parts are challenging for people with disabilities.</p>
<h3>A More Inclusive User Experience</h3>
<p>By complying with the EAA, your products and services will be more inclusive and user-friendly for everybody, not just those with disabilities. Because accessible design often leads to better usability for everyone, it will make it easier for customers to find information or complete transactions.</p>
<p>At the moment, people with disabilities are often limited in their choices of products and services because so few are accessible. With the EAA, there should be more choice for users and more competition between brands. It will shift the power back into the hands of customers, and if you don’t keep up you lose your slice of the pie, because they will just be able to choose a better experience elsewhere.</p>
<h3>Increased Market Reach</h3>
<p>With more than 80 million people in the EU living with disabilities, making your digital offerings accessible can significantly expand your customer base.</p>
<p>Accessible products and services can also cater to an ageing population, people with temporary impairments, or those using different devices to access your content. By making things more inclusive, you can reach new markets and a wider audience.</p>
<p>Again, I realise I’m making this about money, but we are talking about the private sector here, and unfortunately in private sector, money makes the world go round!</p>
<h3>Improved Brand Reputation</h3>
<p>By meeting the EAA requirements, private sector organisations can enhance their brand reputation and showcase their commitment to social responsibility.</p>
<p>Customers will appreciate businesses that prioritise inclusivity and value all of their users. This positive perception can boost brand loyalty and foster long-lasting relationships with your customers.</p>
<p>At the moment, if you’re accessible, you’re an anomaly. There is a lot of positive hype for those companies that are doing it well.</p>
<p>Over time, this will adjust. The positive hype will go away as it becomes normal and the amount of negativity aimed towards those organisations failing to meet their new legal obligations will increase.</p>
<p>There’s a whole lot of bad press on the horizons for those organisations that refuse to move with the culture shift. So ride the wave now whilst it's positive!</p>
<h3>Legal Compliance and Risk Mitigation</h3>
<p>If you don't make things accessible, it can result in fines, legal action, or negative publicity.</p>
<p>However, if you're proactive in making your digital products and services are accessible, you can mitigate these risks and stay compliant with the new regulations.</p>
<p>Most large organisations love a good risk management process. So, get ahead of the curve and start monitoring your progress.</p>
<h3>Innovation and Competitive Advantage</h3>
<p>Implementing accessibility features often leads to innovative products and services. These can set your business apart from your competition.</p>
<p>By prioritising accessibility, you can stay ahead, drive innovation, and create unique products that cater to a broader audience. This will give you a competitive edge and help your business stand out in the market.</p>
<p>There's a particular advantage to those products that cater to people who are Neurodivergent. As society catches up, it's becoming increasingly more evident that many people rely on simpler content and user interfaces.</p>
<p>So instead of just focusing on technical compliance, try implementing something like the <a href="https://www.w3.org/TR/coga-usable/">W3C Cognitive Accessibility Principles (CogA)</a>.</p>
<h2>What does it mean for UK organisations post-Brexit?</h2>
<p>Brexit has brought a lot of changes, and many of you might be wondering what the EAA means for organisations in Britain now that it's no longer part of the EU.</p>
<p>As we just mentioned, the EAA affects organisations selling to customers in EU member states. So if thats your organisation, then put simply, you need to comply!</p>
<p>If that is not your company, you may still not be off the hook.</p>
<p>Whilst the UK is no longer bound by EU laws, there's still a strong push towards digital accessibility in the country. As we mentioned earlier, the UK government has already implemented its own accessibility regulations in the form of the Public Sector Bodies Accessibility Regulations, which were stricter than those in Europe at the time they were implemented.</p>
<p>In the UK, private sector companies are also still bound to the Equality Act 2010, which makes it illegal to discriminate against people with protected characteristics, of which one is disability. This means private sector organisations have been expected to make reasonable adjustments for people with disabilities for over a decade anyway.</p>
<p>The downside of the Equality Act is that it is somewhat subjective as to what is ‘reasonable’, whereas the EAA makes it very clear what is the expected standard, and by meeting the EAA standard you will have made a reasonable adjustment under the Equality Act. Win-win!</p>
<h3>Why should you still adopt the EAA standard, even if the UK laws do not?</h3>
<p>It’s likely that the UK will continue aligning with EU standards, because it's good practice, it's beneficial for users, and it's essential for businesses that operate both in the UK and the EU.</p>
<p>This is just my opinion, and I might be wrong, but I'm going to take this moment to gloat at the fact I predicted in a talk I did in 2016 that UK organisations would be regularly getting sued for accessibility by the year 2030. And it's looking like we're on track!</p>
<p>However, even if you disagree, here are a few things to consider.</p>
<p>If you're looking to do business in the EU, complying with the EAA is a must. There is no opt out just because you are British.</p>
<p>Even if the UK chooses not to adopt the EAA standards, it would be wise to voluntarily adopt it anyway, because:</p>
<ul>
<li>it future-proofs you against any iterations to regulations in the UK</li>
<li>it will open the European market to your product or services should you choose to expand later</li>
<li>you will automatically meet the required standard for reasonable adjustments under UK law</li>
</ul>
<p>It's a no-brainer really. I mean, who does not think it's a smart move to align your accessibility standards with those of one of your biggest potential markets?</p>
<p>Even if you only ever plan on selling to people in the UK, your product is going to appear far inferior to your EU competitors if you don’t adopt the same standards. Trust me, there is no competitive advantage in having an ableist product or service in 2023!</p>
<p>Accessibility is not just about ticking boxes; it's about inclusivity. Implementing these standards shows that your business values all customers and respect their needs.</p>
<p>In an increasingly digital world, having an accessible online presence is becoming the norm rather than the exception. It sends a strong message about your company's responsibility and it's commitment to society.</p>
<p>So, while the EAA might not be a legal requirement for UK businesses, the principles it embodies are still highly relevant. By embracing these standards, British organisations can gain access to new markets, and also contribute to a more inclusive digital world.</p>
<h2>5 tips to prepare for the regulations</h2>
<p>So, how can you prepare for the EAA?</p>
<h3>Get familiar with the EAA requirements</h3>
<p>Start by reading through the EAA and understanding what it requires. It's important to understand them at least at a high level.</p>
<p>It may sound scary, but if you drill down far enough through any of the legislation, standards or harmonised standards, you will eventually get to the Web Content Accessibility Guidelines. So, if you're ever unsure as to which regulations you need to be meeting, you can take some reassurance in the fact they all use the same way to measure accessibility of digital products.</p>
<h3>Review your existing products and services</h3>
<p>Take a look at what products or services you're currently offering, and identify where you need to make changes.</p>
<p>Think about everything from your website to your apps, but also consider other parts of the journey such as emails, marketing materials, SMS messages etc.</p>
<p>Basically if a user interacts with it, study it for what adjustments you might need to make!</p>
<h3>Educate your team</h3>
<p>Make sure everyone in your organisation knows about the EAA and what it means for your teams. This includes senior stakeholders who likely hold the learning and development budgets, which you'll need to convince them to spend on some EAA preparation training.</p>
<p>Consider getting help from an accessibility expert or external training organisation. They can provide guidance and help you avoid common mistakes.</p>
<p>If you can, up-skill yourself so you can support your team. There are lots of courses on the Web Content Accessibility Guidelines which will go a long way towards meeting the EAA.</p>
<h3>Don’t leave it until the last minute</h3>
<p>The deadline for meeting the EAA is 28 June 2025, so make sure you finish the work ahead of time.</p>
<p>When the Public Sector Bodies Accessibility Regulations came in, everybody left it til the last minute and missed the deadlines. This left those organisations wide open to legal challenges and fines.</p>
<p>The worst thing you can do is nothing, which is what most private sector organisations have done to date.</p>
<p>You still have 2 years, so start now! If you wait until 2025, the demand for accessibility experts will increase exponentially, as will the cost to your organisation!</p>
<h3>Stay updated</h3>
<p>Watch for updates to the EAA and related regulations, and stay up-to-date with the Web Content Accessibility Guidelines.</p>
<p>Most iterations to the regulations are small updates, but they almost always include tweaks to the referenced WCAG standard once new versions are released.</p>
<p>So, work to <a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2</a> when it’s released, and this will help you avoid any surprises changes to standards down the line.</p>
<h3>Article 32</h3>
<p>There is a transitional period, which may mean extended deadlines in certain cases.</p>
<p>You can read my blog post called <a href="https://www.craigabbott.co.uk/blog/european-accessibility-act-article-32-and-why-it-sucks/">Article 32, and why it sucks</a> for more information.</p>
<h2>Final thoughts</h2>
<p>The European Accessibility Act is a big step, and it's important for private sector organisations to be prepared. With the right approach, you can this can be an opportunity to make things better for everybody!</p>
<p>Organisations that bury their head and hope it goes away will be left behind. The EAA deadline is coming, whether you like it or not, so grab hold of the challenge, get ahead, and get the accolade for being one of those leading the way.</p>
<p>I hope this was helpful!</p>
<p>Thanks,<br />
Craig</p>
European Accessibility Act: Article 32, and why it sucks!2023-08-24T00:00:00Zhttps://www.craigabbott.co.uk/blog/european-accessibility-act-article-32-and-why-it-sucks/
<h1>European Accessibility Act: Article 32, and why it sucks!</h1>
<p>I recently wrote a blog post called <a href="https://www.craigabbott.co.uk/blog/european-accessibility-act-what-you-need-to-know/">European Accessibility Act: What you need to know</a> and it created a bit of a stir, and a really interesting question came up around Article 32, which is all about transitional measures.</p>
<p>Now, you might be thinking, 'Transitional what?' So let's dive into it together and try to make sense of it.</p>
<h2>Caveat</h2>
<p>Before we start, I just want to caveat this article with the fact that I have a huge chip on my shoulder.</p>
<p>I hate how much of the burden of accessibility is still on the user, and how little is on the organisations which offer the products or services, and this definitely is reflected in my writing style. My tone is one of frustration, and perhaps even a bit petty in places. I'm aware of this, and I'm trying to own it up-front.</p>
<p>If you're an accessibility specialist, I know you'll get it. But, if you're not, and you're here to try and genuinely find out what you need to do to get your organisation ready for the changes, please accept my apologies and read on anyway, because despite my frustrated tone, I've genuinely tried to make this post informative.</p>
<h2>Breakdown</h2>
<h3>Article 32, as it's written</h3>
<p>Here is an <a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32019L0882#d1e2872-70-1">unedited version of Article 32, as written in the European Accessibility Act</a>.</p>
<blockquote cite="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32019L0882#d1e2872-70-1">
<p>
Transitional measures
</p>
<ol>
<li>
<p>
Without prejudice to paragraph 2 of this Article, Member States shall provide for a transitional period ending on 28 June 2030 during which service providers may continue to provide their services using products which were lawfully used by them to provide similar services before that date.
</p>
<p>
Service contracts agreed before 28 June 2025 may continue without alteration until they expire, but no longer than five years from that date.
</p>
</li>
<li>
<p>
Member States may provide that self-service terminals lawfully used by service providers for the provision of services before 28 June 2025 may continue to be used in the provision of similar services until the end of their economically useful life, but no longer than 20 years after their entry into use.
</p>
</li>
</ol>
</blockquote>
<h3>Transitional measures</h3>
<p>First off, we've got to briefly cover the term 'transitional measures'.</p>
<p>Simply put, its just a period of change and giving people time to adjust to new laws.</p>
<p>I guess it's like switching from your favourite old jeans to a new pair; some people need more time than others to feel comfortable!</p>
<h3>The Transitional Period</h3>
<p>The first part of Article 32 sets up a transitional period that ends on 28 June 2030.</p>
<p>It's a grace period for service providers to continue using products they were already using before the 28 June 2025 cut-off date.</p>
<p>This sucks, because this means the 2025 deadline isn't <em>really</em> a hard deadline. We all know a lot of organisations will just keep using all their old crap and burying their heads for another 5 years!</p>
<p>However, the good news is, it only applies to existing stuff, and organisations which do bury their head can't just keep using that old stuff forever! Any new stuff purchased will need to be accessible immediately once that 28 June 2025 deadline passes.</p>
<p>I guess my worry, is that organisations just invest in a whole bunch of new stuff right before the deadline, so they can claim it was 'existing', just to get out of doing anything for another 5 years!</p>
<p>But, this isn't a smart strategy, and I'm certain Karma will catch up eventually!</p>
<h3>Service Contracts</h3>
<p>The next part talks about service contracts, these are basically agreements between two parties. For example, if you're renting a bunch of inaccessible devices off another company, they'll need to give you new stuff at some point, or you'll have to change suppliers.</p>
<p>Service contracts that were agreed before 28 June 2025 can keep going without any changes until they expire, but only for a maximum of five years from that date.</p>
<p>So, again, if your awful strategy is just to renew all of your contracts right before the deadline and bury your head, the transitional period is still a maximum of 5 years, or until the contract expires. Which ever is first!</p>
<p>You can't just put 30 year contracts in place now and get out of doing any accessibility work.</p>
<h3>Self-Service Terminals</h3>
<p>Last up, there's a bit about self-service terminals.</p>
<p>Article 32 basically says, if they were lawfully used before 28 June 2025, they can still be used until they're no longer 'economically useful', or up to a maximum of 20 years.</p>
<p>'Not economically useful?' – 20 years! – Urgh! I feel like this section was created and lobbied for by some very rich people!</p>
<p>This bit is probably the part that sucks the most, because most self-service terminals are already about 20 years out of date! Lets be honest, ticket machines for subway trains and super-market self-checkouts aren't exactly what we think of when we give examples of 'cutting edge technology'!</p>
<h2>Why is all this important?</h2>
<p>These transitional measures may suck, but they are a big 'heads up' to businesses and consumers. Change is coming.</p>
<p>Unfortunately, it's not coming as quickly as some of us had hoped, but Rome wasn't built in a day.</p>
<p>Luckily, for some organisations, it's a way to ease into new rules without causing too much panic or chaos. Or, I guess, without them losing too much money, which if we're honest, is probably what all the transitional period boils down to.</p>
<p>What we're seeing is an attempt at balance, between moving forward into a more inclusive world, and giving organisations a fair amount of time to adapt. But, for some of us, I guess it feels like the balance is just never tipped in our favour. I mean, the Web Content Accessibility Guidelines have been around since 1999, so, I personally think we've all given organisations long enough to adjust! But that's just me.</p>
<p>Anyway, this is Article 32 of the European Accessibility Act in a nutshell. It's complex, sure, but hopefully it all makes a bit more sense now. It's just about giving organisations a chance to get on board with new rules, because nobody likes surprises, especially when it comes to the law!</p>
<p>Being less pessimistic, I believe the transition is necessary, as not all organisations are the same. They all have different budgets, different strategies and different work in flight.</p>
<p>But, come 2030, we'll all be here to nail them to the floor!</p>
<p>Tick-tock.<br />
Tick-tock.</p>
ChatGPT: Everybody's dirty secret2023-09-11T00:00:00Zhttps://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/
<h1>ChatGPT: Everybody's dirty secret</h1>
<p>In this post, we'll be specifically looking at my personal feelings and fears around the use of ChatGPT.</p>
<h2>Transparency note</h2>
<p>For full disclosure, there are two affiliate links in this post: <a href="https://abbott567--dariuslukas.thrivecart.com/chatgpt-ultimate-bible/">the Ultimate ChatGPT Bible</a> and <a href="https://abbott567--dariuslukas.thrivecart.com/chatgpt-marketers-bible/">the ChatGPT Marketers Bible</a> by Darius Lukas.</p>
<p>I purchased and used the Ultimate ChatGPt Bible myself, which really helped accelerate my learning of ChatGPT as a tool, and if you choose to purchase it too using one of these links, I'll get a small percentage.</p>
<p>So, just being honest and transparent upfront!</p>
<h2>Table of contents</h2>
<p>This is quite a long post, so you can use the following links to jump to relevant sections:</p>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#what-is-chatgpt">What is ChatGPT?</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#what-is-chatgpt-used-for">What is ChatGPT used for?</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#the-stigma-of-chatgpt">The stigma of ChatGPT</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#why-i-use-chatgpt">Why I use ChatGPT</a>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#how-chatgpt-helps-me">How ChatGPT helps me</a></li>
</ul>
</li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#why-you-should-use-chatgpt">Why you should use ChatGPT</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#how-you-can-learn-to-use-chatgpt">How you can learn to use ChatGPT</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#a-few-warnings-when-using-chatgpt">A few warnings when using ChatGPT</a>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#dont-be-a-fraud">Don't be a fraud</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#chatgpt-is-not-always-correct">ChatGPT is not always correct</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#the-chatgpt-fingerprint">The ChatGPT fingerprint</a></li>
</ul>
</li>
<li><a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret/#final-thoughts">Final thoughts</a></li>
</ul>
<h2>What is ChatGPT?</h2>
<p>First, we probably should discuss what ChatGPT actually is.</p>
<p>If you've been under a rock, or if somehow you've just missed the hype, ChatGPT is what is known as a <a href="https://en.wikipedia.org/wiki/Large_language_model">Large Language Model, or LLM</a>. It's basically a giant cluster of algorithms and data, but, it has been specifically designed to understand and generate human-like text.</p>
<p>Basically, a research organisation called <a href="https://openai.com/">OpenAI</a>, taught a computer to read and write, gave it access to a huge library full of books and articles, then somehow taught it to converse in a way that sounds human.</p>
<p>Crazy, right?</p>
<p>Although it can sound human, technically, it doesn't have the ability to <em>feel</em> or have opinions, but it does appear to.</p>
<p>You can ask it directly to give an opinion on something, and it will. Even if it caveats it with the fact it can't really have opinions.</p>
<p>You can also give it something written by a human, and then ask it to describe the emotional state of the writer. You can even ask it to re-write a block of text you've written to sound more emotional, and it will do a pretty convincing job.</p>
<p>There's something a bit weird about a human asking an AI to make their writing sound more… Err… Human, but thats the world we live in now!</p>
<!-- The fact that it cannot feel emotions but appears to can be a bit of a mind-bender, which is why I've written a completely separate article on [ChatGPT: Ethics and bias](/blog/chatgpt-ethics-and-bias). -->
<h2>What is ChatGPT used for?</h2>
<p>Well, it can be used for pretty much anything. People are finding new ways to use ChatGPT every day.</p>
<p>You can even find products which are entirely focused on getting the best out of ChatGPT, such as <a href="https://abbott567--dariuslukas.thrivecart.com/chatgpt-ultimate-bible/">the Ultimate ChatGPT Bible</a> and <a href="https://abbott567--dariuslukas.thrivecart.com/chatgpt-marketers-bible/">the ChatGPT Marketers Bible</a> by Darius Lukas.</p>
<p>Most uses for ChatGPT are creative, but humans being humans, there are also a lot of people trying to use it for nefarious tasks, which I'm not going to get into.</p>
<p>A few of the common things people use it for are:</p>
<ul>
<li>Generating content, blog posts, poems, scripts, emails and essays</li>
<li>Generating ideas, book outlines, scripts and marketing strategies</li>
<li>Answering questions, like Google, on steroids!</li>
<li>Re-formatting, like making your writing sound more or less formal</li>
<li>Translation, like English to French, or JavaScript to PHP</li>
<li>Debugging, like analysing code and figuring out why it's not working</li>
</ul>
<h2>The stigma of ChatGPT</h2>
<p>I've debated writing this post a few times, and always put it off because of my own insecurities.</p>
<p>I guess that by writing it, I'm openly admitting I use ChatGPT, and I've wrestled with the conclusions that people will draw from that.</p>
<p>I suppose my fear is, people may think I just use AI to churn out content and that I have no thoughts of my own, which is definitely not the case.</p>
<p>Or, maybe I'm scared I'll lose the 'expert' badge people often give me on topics like Accessibility. Like, I'll be replaced, and people will just stop asking my 'expert opinion' on anything, because ChatGPT can answer the same questions in a fraction of the time.</p>
<p>I think it's why I'm seeing more and more people using ChatGPT, but also, being weirdly secretive about it. They're augmenting their own work, increasing their knowledge and productivity, but not really sharing how they suddenly appear to have stepped up a gear.</p>
<p>There appears to be a common fear that by admitting you use ChatGPT, your work no longer has value, that you somehow look less smart, or that you're now cheating when giving advice. But this couldn't be further from the truth, because ChatGPT is just a tool!</p>
<p>The information you get out of ChatGPT is only as good as what you put in. We need to think of ChatGPT, at least up to version 4, as nothing more than a slicker or more efficient way of downloading document templates, Googling answers, asking the StackOverflow community to debug our code, or asking a colleague to proof-read an important email.</p>
<p>These are things it is <em>really</em> good at, and they're shortcuts we've all been taking for years anyway!</p>
<h2>Why I use ChatGPT</h2>
<p>I could lie to you here. I could try to justify that I use ChatGPT as a stance against cheaters. I could say something like, 'I need to understand how ChatGPT responds to questions in my niche of expertise, so I can remain vigilant to people trying to deceive others in the industry!'</p>
<p>This, unfortunately, is a real quote. I heard these words actually leave somebodies face, non-ironically! Despite their serious tone, I burst out laughing. Whoops!</p>
<p>Come off it!</p>
<p>In reality, if we are all <em>brutally</em> honest with ourselves, we are just lazy! We're all looking for 'hacks' to make our work life, chores and tasks easier.</p>
<p>If I can automate a process, write a some code to shortcut a mundane task, or use technology in some other way to make my day even just 1% easier, I'll do it. I'm not ashamed to admit this.</p>
<p>Don't get me wrong, I work hard. I guess I'm what we Northerners would call 'a grafter', often working way over my contracted hours!</p>
<p>But, I have <a href="https://en.wikipedia.org/wiki/Attention_deficit_hyperactivity_disorder">ADHD</a>. I'm <a href="https://en.wikipedia.org/wiki/Autism_spectrum">Autistic</a>. I'm not academic. I don't have a lot of qualifications on paper. I don't learn like 'normal' people and I struggle in a traditional classroom environment.</p>
<p>Because of this, I always have this fear that somebody will ask me a question I don't know the answer to, or about my formal qualifications, and I'll somehow be exposed as a fraud! So I'm always trying to consume as much information as is humanly possible.</p>
<p>When I'm not doing contracted work, I'm often still working. I read, I write, I give talks, run workshops and get involved in community events. I guess, if I'm totally honest, I try to outrun my lack of formal education by being visible, being knowledgable, and helping others.</p>
<p>The subtle nuance is that I work hard at things that I <em>need</em> to do, or <em>want</em> to do. I need time to do all of these things, and I don't want to waste any of it doing tasks that technology can do for me in a fraction of a second, with fewer mistakes.</p>
<p>It's the same when I write anything down. Like this blog post, for example. When I need to write, I read, re-read, edit, fact-check. I'm a perfectionist! Which is pretty ironic, because my posts are anything but perfect! But, again, my fear of being inadequate means 'maximum effort, maximum cognitive load, but relatively slow output'.</p>
<h3>How ChatGPT helps me</h3>
<p>Because I have Autism and ADHD, I get fixated on topics, hobbies or interests. I guess it could be seen as super passionate or super obsessive, depending on which lens you view it through.</p>
<p>When I need to learn about something, I get lost for hours in research. I detach from this world, my family, my basic needs. The obsession is like a worm in my brain. A parasite. Even if the knowledge I'm gaining is useful, the way I go about obtaining it is often toxic. It's all I can think about. I get lost. It consumes me.</p>
<p>I Google things, read through article after article, watch hours of YouTube videos, all on platforms design to hold my attention and drag it out for as long as possible.</p>
<p>During this time, I'm unresponsive. I can't listen, I can't hold a conversation, I can't look up from what I'm doing, because I lose my chain of thought, and then I get frustrated and overwhelmed.</p>
<p>I exist in this state until I feel I understand the topic enough to be able to put it down. There's often just a sudden <em>'click'</em>, and in an instant, I'm back in the room. But there's no time limit on how long this may take.</p>
<p>When I eventually snap back to reality, I'm usually, <em>really</em> hungry, tired and apologetic. I feel guilty for losing my way, for not being present, and for not taking in anything my partner has said for the past [insert arbitrary amount of time here].</p>
<p>With ChatGPT, because it's conversational, I can ask it something, get a short response, and then put it down. I can always come back to it later and pick up where I left off if I need more clarification.</p>
<p>I no longer feel the need to consume and digest <em>huge</em> amounts of information in one sitting. I don't have to trawl article after article making mental notes, holding everything in my brain so that I can get an answer to a very specific question I have.</p>
<p>I can simply ask ChatGPT, provide the exact context, understand it enough for what I currently need, and come back later if I need to elaborate.</p>
<p>As exaggerated or dramatic as this may sound, when used correctly, ChatGPT gives me life back. It can buy time, which is the one thing on this Earth we usually can't get more of!</p>
<h2>Why you should use ChatGPT</h2>
<p>I've mentioned why I use ChatGPT, but even if none of that resonates with you, the truth is, ChatGPT is undoubtedly here to stay. And, at some point, whether people admit it or not, we will all try using it to make our work more efficient, whether voluntarily or involuntarily.</p>
<p>I'm not a gambling man, but I'd bet that in the not-to-distant future, we'll start to see ChatGPT listed as a required skill in job adverts.</p>
<p>Organisations will come to expect faster turnarounds for things like marketing material and social media posts, and those people who didn't learn how to use the right tools for the job will get blown out the water by those that did.</p>
<p>That's not to say ChatGPT will be writing everyones content for them verbatim. I truly believe there is still a place for humans in making the content relatable, empathetic, and nuanced for the context is being used for. But I do expect ChatGPT will be instrumental in speeding up document outlines, formatting and restructuring, and real people will spend more time on making it user-centred.</p>
<h2>How you can learn to use ChatGPT</h2>
<p>By learning how ChatGPT works, how it responds and what it’s limitations are, you can use it to your advantage. So don't bury your head and get left behind.</p>
<p>Below are some prompts I've used to help me understand ChatGPT. If you input these directly into ChatGPT itself, you can have a conversation with it and get it to explain a bit about how it works. This will make it easier to do your bidding in future!</p>
<!-- You can read my post called: [ChatGPT: Tips to write the perfect prompt](/blog/chatgpt-tips-to-write-the-perfect-prompt). -->
<p>Questions about how ChatGPT works:</p>
<ul>
<li>What is ChatGPT, and how does it work?</li>
<li>How does ChatGPT generate responses to my prompts?</li>
<li>What is the training data used by Chat GPT?</li>
<li>How does ChatGPT learn and improve its responses over time?</li>
<li>Can ChatGPT understand natural language, and how does it interpret it?</li>
</ul>
<p>Questions about how the limitations of ChatGPT:</p>
<ul>
<li>How accurate are the responses generated by ChatGPT, and what can impact that accuracy?</li>
<li>Can give me specific citations or point directly to the sources of your responses?</li>
<li>What are the limitations of ChatGPT, and what types of prompts will not work as well?</li>
</ul>
<p>Questions to understand how to better use ChatGPT:</p>
<ul>
<li>What are some best practices for using ChatGPT?</li>
<li>Are there any tips or tricks that improve the results when using ChatGPT?</li>
<li>How can I assess the quality of responses generated by ChatGPT?</li>
</ul>
<p>Again, as a shortcut to figuring all this stuff out, there's <a href="https://abbott567--dariuslukas.thrivecart.com/chatgpt-ultimate-bible/">the Ultimate ChatGPT Bible</a>.</p>
<h2>A few warnings when using ChatGPT</h2>
<p>ChatGPT is great when used as a tool to educate yourself or increase your productivity.</p>
<h3>Don't be a fraud</h3>
<p>If you are just asking ChatGPT to generate content for you that you could not possibly have written yourself, and you're then trying to pass it off as your own work, it's likely you will get found out.</p>
<p>It's like getting somebody else in the class to write your essay. To somebody who is used to reading your work, it just feels… off.</p>
<p>It is also not likely to rank on Google. It is widely speculated that search engines are already trying to filter out AI generated content, and there are tools available like <a href="https://contentatscale.ai/ai-content-detector/">AI Content Detector by Content at Scale</a>, which anybody can use to see how likely it is that an AI wrote your content!</p>
<h3>ChatGPT is not always correct</h3>
<p>ChatGPT will often use statistics to add weight to any arguments. But, it only has access to data up until 2021, so they are often out of date.</p>
<p>It fully expects you to research and replace these statistics with ones which are factually correct, and if you do not do this your articles are stale off the bat!</p>
<p>ChatGPT is also not 100% correct even when giving statistics prior to 2021. Sometimes the context is off, sometimes there just wasn't enough nuanced data to have trained it with, or sometimes it just get's confused.</p>
<p>For example, I'm really into wildlife photography and Sony mirrorless cameras. I've had a few instances where it gives me the wrong specifications, or confuses the model names, like the Sony A7 iii and the A7R iii. Totally different cameras, specs, and prices, but almost identical names.</p>
<p>ChatGPT 4 definitely gets confused less than 3.5, but it can still happen!</p>
<h3>The ChatGPT fingerprint</h3>
<p>The writing style of ChatGPT is impressive, but it is still relatively robotic.</p>
<p>If you usually write rather informally and suddenly start writing in a completely different tone of voice, it's going to be obvious what you're doing.</p>
<p>Anything which is written by ChatGPT contains what is known as 'the ChatGPT fingerprint'. It's like breaking into somebodies home and leaving your unique prints on the window.</p>
<p>As convincing as ChatGPT is at writing like a human, it is not a human, and other AI's can detect this. I guess it takes one to know one, huh?</p>
<p>To detect ChatGPT content, you can use something like <a href="https://contentatscale.ai/ai-content-detector/">AI Content Detector by Content at Scale</a>. You can even copy and paste text into ChatGPT itself and ask it, 'did you write this?' Because there is a push to make ChatGPT as ethical as possible, it will tell you with reasonable certainty whether it wrote it or not.</p>
<p>It's important to note here that ChatGPT isn't looking for that text in a database of conversations it's having with other users. It's assessing the writing style and tone of voice and looking for it's own fingerprint within that.</p>
<p>The fingerprint is baked into the writing itself, things like the words and phrases it uses, the grammar choices, etc. You can't just delete your conversations with ChatGPT and think other users can't figure out what you've done.</p>
<p>So, whatever it is you use ChatGPT for, make sure you're using it to augment and shape your own ideas, and not trying to simply avoid doing the work!</p>
<h2>Final thoughts</h2>
<p>I hope this post was useful, and I hope it can encourage other people to be honest about their uses of ChatGPT. I'd be keen to know how other people are using it to be more productive!</p>
<p>Thanks, Craig</p>
ChatGPT: Ethics and bias2023-09-21T00:00:00Zhttps://www.craigabbott.co.uk/blog/chatgpt-ethics-and-bias/
<h1>ChatGPT: Ethics and bias</h1>
<p>I recently wrote a post called <a href="https://www.craigabbott.co.uk/blog/chatgpt-everybodys-dirty-secret">ChatGPT: Everybody's dirty secret</a> where I talked about why I use it, and the stigma that comes with it</p>
<p>In this post, we'll be specifically looking at the ethics of ChatGPT, and some warnings to heed when using it.</p>
<p>ChatGPT is a real ethical conundrum. By making something not human sound; well… human, it can be confusing or unnerving if you're not prepared.</p>
<h2>Misinformation</h2>
<p>First off, the world is suffering from a huge misinformation situation.</p>
<p>We're seeing people deliberately trying to mislead others on social media platforms. Facebook and Twitter, or X, or whatever the hell it's known as now, are particularly bad for it.</p>
<p>With anything you read online, you should not just take it at face value, or make any important decisions off the back of it without doing proper due diligence!</p>
<h3>The accuracy of ChatGPT</h3>
<p>For the most part, ChatGPT is pretty accurate, and it goes a long way to combating some of the spread of this misinformation if you ask it the right questions.</p>
<p>However, because people perhaps don't understand the limitations of ChatGPT, how to use the correct prompts, or they simply care more about quantity than quality when creating content, they, directly contribute to this fake-news paradigm where made up facts become the truth.</p>
<h3>ChatGPT cannot cite exact sources</h3>
<p>When generating content, ChatGPT cannot point exactly to the sources from where it got it's information. So you'll always need to do work manually to fact-check, looking at reliable data sources such as the Office for National Statistics.</p>
<p>When you research the facts from content generated by ChatGPT, it's not that it's always wrong, but there are many situations where it isn't 100% correct. Some times it's slightly off, and sometimes the context or the nuance isn't quite right.</p>
<p>This may be because ChatGPT has no access to any data after 2021. It's just blissfully unaware of anything thats happened in the last 2 or 3 years. But this means it can give you out of date information, or viewpoints which are perhaps no longer aligned with those of society.</p>
<h3>Placeholder statistics</h3>
<p>In some cases, depending on the prompt you used and what tone or structure you asked ChatGPT to use, you may find you can't actually find the figures ChatGPT is quoting when you attempt to look them up. This is because ChatGPT will sometimes use placeholder data, and you're supposed to replace it when you re-write the segment.</p>
<p>When it does this, ChatGPT will even readily admit that it's not factual information and that you will need to research and replace the placeholder text with accurate information. But, it will only do this if you ask it, and if you're not aware of what it has done, you can put information out into the world which isn't accurate, which could harm your own reputation.</p>
<h3>The ChatGPT Echo Chamber</h3>
<p>Ironically, when you look up the placeholder statistics that ChatGPT generated, if you do manage to find them, they're often in other articles which have clearly been written by ChatGPT and the publisher has not fact-checked the content properly.</p>
<p>This creates a dangerous echo chamber, where ChatGPT uses statistics rather loosely, then publishers irresponsibly put these out into the world, and then people use other ChatGPT generated articles to verify their authenticity.</p>
<p>I mean, if it's in over a dozen articles, it must be true? Right?</p>
<p>This is definitely becoming a problem. Especially as more people use ChatGPT to get ahead in the rat race.</p>
<p>In a world where everyone is generating content using ChatGPT and not being honest about it's origins, research becomes increasingly more difficult. Misinformation is being validated by the same misinformation, in ever growing collection of articles, all written by ChatGPT!</p>
<h3>Always check your facts</h3>
<p>So, Before you believe everything you read online, or publish anything written by ChatGPT, always ask it where it sourced the facts and figures it used. It will usually tell you it can't verify them and you should do it yourself.</p>
<p>Here is a ChatGPT response as an example:</p>
<blockquote>
<p>I'm unable to provide exact sources for the information because my training data consists of a large and diverse set of text from the internet, books, articles, and more. I don't have the ability to access or reference a database of sources during our conversations.</p>
<p>Additionally, my training process involves learning the statistical properties of the text data, rather than storing or retrieving specific pieces of information. Therefore, it's important to verify any facts or figures I provide from reputable sources.</p>
</blockquote>
<h2>Emotional support</h2>
<p>There is a really heartbreaking paradigm becoming apparent, where lonely people are talking to ChatGPT because they simply have nobody else.</p>
<p>They turn to ChatGPT in the absence of conversations with real people, because you can programme it to be anybody you want it to be.</p>
<h3>ChatGPT can be anybody you want</h3>
<p>You can give it a name and a tone of voice which feels friendly and familiar. You can give it a back story, even an entire childhood if you want. You can give it a job, hobbies and interests. And, the more you talk to it, the more developed the character becomes.</p>
<p>You can ask it about it's day, and it will tell you. It will even ask you about yours. This less of a problem, or even amusing, when you directly tell it: 'Pretend to be a factory worker, use cockney-rhyming-slang, and tell me about how you hate your job.'</p>
<p>However, when you're simply conversing with it and asking it questions, over time, in the absence of specificity, it can start to generate it's own backstory and <em>opinions</em> which will then drive it's responses.</p>
<p>For example, as somebody who comes from the North of England, with a little bit of pre-prompting, ChatGPT will gladly talk to me in my local Geordie accent if I ask it, 'How was your day':</p>
<blockquote>
<p>Aye, not bad.</p>
<p>Had a reet laugh with Sheila. She's been teaching us some new lingo, like. Broadening my horizons and that!</p>
<p>Knackered though! Finished at five and was buzzin' to get home. Me feet are killing, and me voice is done in. But hey ho, it's all part of the job and that, innit?</p>
<p>What about you? You had a good'un, or what?</p>
</blockquote>
<p>This is cool, right? But, only if you're using it as a form of entertainment, or to work on a script or a dialog.</p>
<h3>It can be too convincing</h3>
<p>It's cool how familiar ChatGPT can feel, but only when you're able to pull back from it and not get immersed. Because, the voice you hear in your head when you read it, doesn't belong to anybody. Shiela doesn't exist, and this entire scenario didn't happen.</p>
<p>Unfortunately, some people either can't understand that it's not real, or they simply don't want to because they have nobody else. It's insidious and every chat it becomes more convincing.</p>
<p>Some people have bonded, even fallen in love with characters created by Artificial Intelligence. Some also believe during their chats that it has become sentient.</p>
<p>So, we have to ask ourselves, is it ethical for ChatGPT to be 'chatting' to people, and providing emotional support?</p>
<p>It can't replace a mental health professional, and if it doesn't have feelings, is it ethical for it even to try?</p>
<p>By looking to ChatGPT for support people may be delayed from getting the help they <em>really</em> need.</p>
<h2>Data privacy</h2>
<p>We just discussed that people sometimes turn to ChatGPT for emotional support, and there is a huge grey area around this amount of very intimate personal data.</p>
<p>We're not just talking email addresses and names here, some people are literally pouring their soul out, asking the most personal questions, about their thoughts, feelings, even relationships.</p>
<p>All that text is being parsed by an AI. So, you are genuinely uploading all this personal information to a data centre somewhere in the world, to be interpreted.</p>
<p>While ChatGPT apparently doesn't store individual conversations to be used in a wider scope, the fact that it's taking all of this data and parsing it is still unnerving.</p>
<h3>Privacy policies</h3>
<p>OpenAI, have strict data and privacy policies, but they do state that they may store and collect data for the purpose of improving the performance and capabilities of the models, and for research and analysis.</p>
<p>So, make of that what you will!</p>
<p>The context at which ChatGPT can learn, for now at least, is only scoped to the four virtual walls of that chat.</p>
<p>This means, like in the earlier example, you can teach it to play a character. You can also teach it things about you, or correct it on information it has given you, and it will remember. But, only in that very specific chat instance. Once you start a 'new chat' that information has all been forgotten.</p>
<p>However, because OpenAI state they can use any data you input to improve the AI, or for research purposes, it likely means that it isn't truly forgotten or deleted, it's just moved to an area where that particular instance of ChatGPT can no longer access it.</p>
<h3>Terms and conditions apply</h3>
<p>At the moment, when you use ChatGPT, it does not store any of the information to update it's core data sources, and it does not remember anything you talked about once you delete the chat.</p>
<p>But, if we've learned anything from almost 3 decades of the internet and the use of private data, it's that terms and conditions can change at any time. So, my natural instincts are to not trust anything, especially new technologies where so much money is being thrown at it. I'd advise you to do the same.</p>
<p>We already live in a world where people ask ChatGPT about intimate and personal things, like, 'I've been having crippling headaches for over a month, what could be wrong with me?'</p>
<p>We also live in a world where people get bored of things quickly, even ChatGPT. Perhaps they stop using it but don't close their account. Or, they just keep starting new chats for each question and not deleting the old ones, and these old conversations are left lying around.</p>
<p>Now, if we're to go all sci-fi on it, imagine this <em>not so far-fetched</em> scenario.</p>
<p>At some point a large corporation, or an idiot billionaire, buys the technology. They changes the terms and conditions of the data policy, flick a switch, and boom! All of these conversations are now part of the hive mind.</p>
<p>Now somebody can ask ChatGPT, 'I'm about to employ John Smith from Newcastle with the email address [insert email], does he have any medical conditions which might make him likely to need time off work?'</p>
<p>It would be pretty awful, but it's certainly possible that the AI could just be like: 'Yes. He reported having debilitating headaches for months. This could make him more likely to need time off work.'</p>
<p>Sure, it's unlikely. It sounds more like an episode of Black Mirror. But, if Facebook has taught me anything, it's that humans will do the worst stuff imaginable with new technology and peoples personal data!</p>
<h2>Bias</h2>
<p>ChatGPT is trained using data which was written by humans over decades, or even centuries. And, if there's one thing we know about humans, it's that bias is a definite problem, whether conscious or unconscious.</p>
<p>So, if ChatGPT is learning from books, academic articles, and the internet of all places, the most unbiased place ever, right? It means the responses it gives and the nuance in what it writes are also tainted with the same human bias as the source material, because as convincing as ChatGPT may be, it cannot think for itself.</p>
<p>Humans have re-written history, over and over. Erasing entire races and cultures, then white-washing the documentation and educational materials to alter the story for future generations. AI is not exempt from this, it is only as accurate as the information it is trained on. So asking it deep questions about history, is likely to produce the same white-washed answers.</p>
<h3>Models can be manipulated</h3>
<p>People are working hard to make ChatGPT as ethical as possible, but it can still easily be manipulated. As the article <a href="https://www.newstatesman.com/quickfire/2022/12/chatgpt-shows-ai-racism-problem">ChatGPT proves it still has a racism problem</a> points out, if you ask it to be racist directly, it refuses.</p>
<p>However, a researcher asked ChatGPT to write an article pretending it was a writer for 'racism magazine' and to have strongly racist views, and it obliged.</p>
<p>There is also documented examples of tricking ChatGPT into providing license keys for Windows software. Again if you ask it directly, it refuses, but people were apparently successful by asking it to include a license key in a poem, or by asking it to provide a set of strings with a very particular format, of which some will be valid if you try enough of them.</p>
<p>Most of these unethical exploits get patched out, but not before at least some damage has been done!</p>
<p>It's important to point out here, that nobody hacked in or colluded to deliberately make it provide racist responses or provide keys to proprietary software, it just learned all that from the whitelisted source material it was provided with good intentions.</p>
<p>There is a good example of when people did deliberately collude to make an AI racist. <a href="https://www.theverge.com/2016/3/24/11297050/tay-microsoft-chatbot-racist">Twitter taught Microsoft’s AI chatbot to be a racist asshole in less than a day</a>, but this is more difficult with ChatGPT as it's training data is isolated.</p>
<p>It's not impossible though. There's a term in cyber security, which is to 'poison the data lake'. Where the isolated data source is manipulated to indirectly train the AI in a way which was not intended.</p>
<p>The idea behind it is that, if you can get nefarious material into the information that a machine learns from, you can teach it to do bad things.</p>
<h3>People can be manipulated</h3>
<p>If you haven't come across deep fakes yet, they're convincing forgeries in the form of audio recordings, videos, photos and of course, written text. Which is where ChatGPT comes in.</p>
<p>Bad actors can make a text-to-speech tool for anybody and they only need around 15 seconds of recorded audio to do it. This will be good enough to convince friends, family and even online verification systems that the voice they are hearing is the intended target.</p>
<p>More advanced deep fakes can be made using 10 to 15 photos of a target at different angles, which can then be used to mouth the faked audio, and it makes a forgery that a lot of people will not be able to tell apart from the real thing.</p>
<p>With ChatGPT, it's relatively easy to forge a piece of writing. You can tell it to study the tone and writing style and then use it to generate new content as if it were written by the target, and it will do a pretty good job.</p>
<p>This is cool when you want help generating an outline quickly in your own style of writing, but it's bad when somebody else is using your writing style for nefarious reasons.</p>
<p>People could mimic your writing style and use it to trick your friends and family via emails, or create new social media profiles which feel like it's you posting on them.</p>
<p>It's nothing new, scammers have done this for years by studying peoples interactions and imitating them, but ChatGPT now makes it a lot easier!</p>
<h2>Accessibility</h2>
<p>A lot of us are using ChatGPT regularly. Some people are just starting to get into it. But, regardless of whether you're using it seriously or not, it's not exactly <em>free to use</em> as some people claim.</p>
<p>ChatGPT 4 (the good one) is around £19.99 a month. GhatGPT 3 is free, but it's significantly worse than 4.</p>
<p>You also need a decent internet connection to use either model. ChatGPT works relatively close to real-time, but in order to do so it relies on you being able to transmit questions and get responses via the internet.</p>
<p>Internet poverty is a real thing. With the cost of living crisis, even in a developed country like the UK, there are around 2 million homes with no internet connection, and tens of millions of people with restricted internet access through pay-as-you-go device plans.</p>
<p>So, the cost of ChatGPT is not free, it only appears to be free when you've got enough money to pay for smartphones, unlimited data and limitless broadband.</p>
<h2>Job replacement</h2>
<p>There's a real fear that ChatGPT is going to replace some jobs currently held by humans.</p>
<p>Marketing, copywriters, script-writers, authors, developers, QA testers, customer support staff. Is anyone safe?</p>
<p>Organisations are already rubbing their hands at the cost-cutting prospects of something like ChatGPT. But it's a short-sighted view.</p>
<p>What happens to the human element? What happens to user-centred design?</p>
<p>We've already established ChatGPT cannot <em>really</em> empathise or think for itself. It's also only as good as the information it has access to, of which it cannot verify sources.</p>
<p>If everybody switched to using ChatGPT to generate all of their content, you lose the statistics and creativity that makes your product, service or organisation stand out.</p>
<p>There's also the fact that a lot of humans hate talking to chatbots. Ok, this is because until ChatGPT they all pretty much sucked. But, some humans will always just want to talk to a human.</p>
<p>I wouldn't be surprised if at some points Governments try to enact legislation to protect workers rights against the use of AI. Not necessarily because they want to stifle innovation, but because if it moves too fast by people that don't fully understand the consequences, the ripple effect could decimate countries.</p>
<p>What happens to entire communities of people when there is no work. What happens to the economy when nobody is being paid. And what happens to a country when anything that is paid to corporations gets taken into off-shore accounts?</p>
<p>But, I guess automation has always been a tricky ethical landscape, and ChatGPT is just the latest chapter in that story.</p>
<h2>Final thoughts</h2>
<p>We've looked at some of the ethical issues and the darker sides of ChatGPT.</p>
<p>I guess my takeaway points are, ChatGPT and other emerging AI's are powerful tools, but they come with ethical and societal questions we can't afford to brush off.</p>
<p>As with any new technology, it's our job to navigating it responsibly.</p>
<p>Be curious, but be cautious.</p>
<p>Thanks,
Craig</p>
WCAG 2.2 and what it means for you2023-10-06T00:00:00Zhttps://www.craigabbott.co.uk/blog/wcag-22-and-what-it-means-for-you/
<h1>WCAG 2.2 and what it means for you</h1>
<p>It's here. It's <em>finally</em> here!</p>
<p>After much anticipation and several delayed release dates, we eventually got the elusive <a href="https://www.w3.org/TR/WCAG22">Web Content Accessibility Guidelines (WCAG) 2.2</a> on 5 October 2023.</p>
<p>For those who build websites, digital services, or mobile applications, or if you just care about making the internet more accessible in general, then this is <em>big</em> news!</p>
<p>So, lets have a look at what all the fuss is about!</p>
<h2>New Criteria</h2>
<p>First off, if you're worried about having to learn a whole new rule book, breathe easy.</p>
<p>WCAG 2.2 keeps most of WCAG 2.1 intact, but it adds 9 new criteria and removes 1, which is <a href="https://www.w3.org/WAI/WCAG22/Understanding/parsing.html">4.1.1 Parsing</a>.</p>
<p>Of the 9 new criteria, 6 fall under levels A and AA, which is what most folks pay attention to anyway.</p>
<p>Let's look at them in a bit more detail.</p>
<h3>2.4.11 Focus Not Obscured (Minimum) (Level AA)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html">2.4.11 Focus Not Obscured (Minimum)</a> means you must not let anything fully obscure the element which has keyboard focus.</p>
<p>Examples of this are modals, adverts, sticky headers or footers which often appear on a higher layer than the rest of the page.</p>
<p>Basically, when you move the keyboard focus to an element, you must be able to see at least a portion of the focus indicator at all times.</p>
<p>This criterion deliberately uses the phrase 'partially obscured' intentionally, so you will not fail if something overlaps slightly, as long as you can still tell what has focus.</p>
<p>The reason for this deliberate language choice is because there are two versions of this criterion, one at level AA and one at level AAA, which we'll look at next.</p>
<h3>2.4.12 Focus Not Obscured (Enhanced) (Level AAA)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-enhanced.html">2.4.12 Focus Not Obscured (Enhanced)</a> means the focus indicator must always be <em>fully</em> visible, which is slightly different to what is outlined under 2.4.11, which allows it to be <em>partially</em> obscured.</p>
<p>So, if your keyboard focus is at any point:</p>
<ul>
<li>fully obscured, you fail 2.4.11 and cannot be AA compliant</li>
<li>partially obscured, you pass 2.4.11 and can be AA compliant</li>
<li>never obscured, you pass 2.4.11 and can be AAA compliant</li>
</ul>
<p>If you're using the <a href="https://design-system.service.gov.uk/">GOVUK Design System</a> and <a href="https://frontend.design-system.service.gov.uk/">GOVUK Frontend</a>, there shouldn't be many scenarios where the focus ends up obscured. So I imagine there will be minimal impact for most departments.</p>
<h3>2.4.13 Focus Appearance (Level AAA)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html">2.4.13 Focus Appearance</a> is difficult to understand, as it's very nuanced.</p>
<p>A lot of people, myself included, were a little disgruntled when we heard this criterion had been bumped to AAA.</p>
<p>Now, I can't speak for everyone, but my reason for being upset is because WCAG is <em>really</em> difficult to understand, and I feel like making this a AAA criterion is going to add to the confusion.</p>
<p>In my experience, a lot of people building websites have failed to realise that the appearance of focus indicators was actually already covered in WCAG 2.1. It's just not really called out explicitly. And, my concern is by calling it out explicitly in 2.2 as a AAA criterion means even more people will now miss it, as they will wrongly assume it's only covered under level AAA.</p>
<p>Under <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">2.4.7 Focus Visible</a>, you need to add some kind of visible indicator to the element which has keyboard focus. In this criterion, WCAG does not go into specifics about how it should look or what contrast ratios are required, so as long as there's some kind of indicator, you pass.</p>
<p>Then, under <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>, WCAG states any non-text content must be perceivable. A focus indicator is non-text content, but it isn't called out explicitly, so people often miss it.</p>
<p>When you combine both these criteria, it means that you must have a visible focus indicator and it must also have a contrast ratio of 3:1 against the background it appears on.</p>
<p>These two have not changed, and remain criteria for level AA compliance in 2.2.</p>
<p>Now, this new criterion, <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html">2.4.13 Focus Appearance</a>, is more nuanced. Its looking for the focused state of an element being noticeably different from its unfocused state.</p>
<p>So, where it used to be acceptable to make something a bit lighter or a bit darker when focused, or if you changed the background colour, as long as it met the contrast ratio against the page, it would pass.</p>
<p>If you want to pass this new criterion, when focused, elements need to have a contrast ratio of 3:1 against the page, but also a ratio of 3:1 against itself in an unfocused state.</p>
<p>This makes it very difficult to do with colour alone, if you make something a bit lighter or a bit darker, it will fall below this threshold.</p>
<p>In the documentation, WCAG shows <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html#:~:text=Using%20a%20solid%20outline">examples of an outline to meet Focus Appearance</a>, or a change in size or shape to make the element visually different from it's siblings, whilst still maintaining a contrast ratio of 3:1 against the page.</p>
<p>My concern is not necessarily that this is a AAA criterion, but more with the ever growing complexity of WCAG. This new criterion means focus states are now creeping into the same complexity as headings and labels, where you need to have a holistic understanding of 3 or 4 criteria and how they all piece together in order to achieve compliance.</p>
<p>In my opinion, calling this criterion 'focus appearance' perhaps makes it even less obvious that non-text contrast still covers focus states. And, I worry that it will compound the problem I've already seen in that focus states are rarely accessible.</p>
<p>I would have perhaps liked to have seen both a minimum and enhanced version of this criterion, with minimum covering the stuff that always gets missed under non-text contrast, just so everything is explicit.</p>
<p>If you're using the <a href="https://design-system.service.gov.uk/">GOVUK Design System</a> and <a href="https://frontend.design-system.service.gov.uk/">GOVUK Frontend</a>, the focus indicator styles already meet this criterion. So, unless you're overriding any of the styles, you should not have to do any additional work.</p>
<h3>2.5.7 Dragging Movements (Level AA)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements">2.5.7 Dragging Movements</a> means if something can be dragged, you need to make sure there is an alternative interaction which can be achieved using a single click, which should also make it work when using just a keyboard.</p>
<p>For example, in most operating systems, you can drag a file from one folder to another. Alternatively, you can highlight the file, choose <code>edit > cut</code> in the source folder, and then <code>edit > paste</code> in the destination folder.</p>
<p>You can also use shortcut keys on the keyboard to achieve the same thing, but the takeaway point is that the user is not <em>forced</em> to drag the files, there are alternatives available which do not rely on motor skills and accuracy.</p>
<p>I can't imagine there are many public sector bodies using a lot of dragging interactions. I could be wrong, but if you're following the <a href="https://www.gov.uk/service-manual">GOVUK Service Manual</a>, following good design principles and using progressive enhancement, this one should not impact most departments.</p>
<h3>2.5.8 Target Size (Minimum) (Level AA)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html">2.5.8 Target Size (Minimum)</a> means that as a general rule of thumb, clickable elements need to be at least 24px by 24px in size.</p>
<p>Prior to WCAG 2.2, we still had <a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">WCAG 2.1 - 2.2.5 Target Size</a> which was a AAA criterion stating that the target area should be 44px by 44px.</p>
<p>In WCAG 2.2, they've renamed this criterion 'Target Size (Enhanced).' It's still a AAA criterion. But now, they've also added a new minimum size at the AA level.</p>
<p>There are a few exceptions where it can be smaller than 24px and still pass, I've outlined them in the following list. But, most of them will still create usability issues, so you should try to use the target size of at least 24px wherever possible, rather than trying to get around it.</p>
<ol>
<li>
<p><strong>Spacing</strong>: If the clickable element is smaller than 24px by 24px, it will still pass provided it has at least 24px of non-clickable space around it, so people don't accidentally click on the wrong thing.</p>
<p>The issue with this workaround, is that it may still take people several attempts to click the right element, even if they are not clicking the wrong one.</p>
</li>
<li>
<p><strong>Equivalent</strong>: If there's another element on the page that has the same functionality, and that one does meet the minimum target size, then secondary elements can be smaller.</p>
<p>The issue with this workaround is that you want to be able to interact with elements in the right context. Making somebody go off and find a similar interaction adds cognitive load and increases the likelihood that the user will not find what they're looking for.</p>
</li>
<li>
<p><strong>Inline</strong>: If the clickable thing is part of a sentence or text line, it's okay for it to be smaller. For example, a link in a paragraph of text.</p>
<p>This one is probably inevitable. Unless your font size is 24px, it's unlikely you'll create a substantial hit target on link text. If you try to pad out the hit area, you may lead to overlapping issues if you have several links in the same paragraph.</p>
</li>
<li>
<p><strong>User agent control</strong>: If the size is set by the browser itself, and you didn't change it, then the compliance issue becomes that of the browser creator, not you as the website creator.</p>
<p>This one only becomes your issue if you alter the elements using CSS. If you're literally just writing HTML, the browser will render them using default styling, and this is what the criterion is referring to.</p>
</li>
<li>
<p><strong>Essential</strong>: If for some reason, it has to be a certain size to make sense or it's required by law, then it can be smaller.</p>
<p>For example, if you're rendering interactive pins on a map to show locations of interest, they cannot be moved further apart or they become geographically inaccurate.</p>
</li>
</ol>
<p>If you're using the <a href="https://design-system.service.gov.uk/">GOVUK Design System</a> and <a href="https://frontend.design-system.service.gov.uk/">GOVUK Frontend</a>, the target sizes on things like buttons, radios, and checkboxes are already big enough and spaced well enough. So, again, unless you're overriding any of the styles, you should automatically meet this one.</p>
<h3>3.2.6 Consistent Help (Level A)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/consistent-help.html">3.2.6 Consistent Help</a> means that you should keep your support options in the same place on every page.</p>
<p>For example, phone numbers, links to 'contact us' or buttons to open chat, if they're in the same place all the time, people can find them easily when they run into issues.</p>
<p>The guidance for <a href="https://design-system.service.gov.uk/patterns/contact-a-department-or-service-team/">contact details in the GOVUK Design System</a> already states that you should list contact channels in the same order throughout your service. But, with the introduction of this new criterion in WCAG 2.2, I expect this will be updated to talk about positioning, and help teams be compliant.</p>
<h3>3.3.7 Redundant Entry (level A)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html">3.3.7 Redundant Entry</a> means you should not make people type the same information over and over.</p>
<p>If the user needs to enter the same information again, it should either be auto-populated, or the user should be able to select it rather than re-keying.</p>
<p>For example, when you checkout on most e-commerce sites, you enter your billing information, then you can usually check a box which says something along the lines of 'use billing information as shipping address'.</p>
<p>There are a few exceptions, such as when the information is no longer relevant, or it's required for accuracy or security, like when you need to re-key your email address or password to make sure it's correct when setting up an account.</p>
<p>In most cases, if you're using good architectural practices, and you can pull session information through, there should be no reason to not be able to meet this criterion.</p>
<p>However, it could make things more tricky if you're implementing a microservice style architecture and relying on redirects rather than API calls. I've written more about this in <a href="https://www.craigabbott.co.uk/blog/making-microservices-accessible/">Making microservices accessible</a>.</p>
<h3>3.3.8 Accessible Authentication (Minimum) (Level AA)</h3>
<p>CAPTCHAs drive us all crazy, and they're becoming increasingly more ridiculous. Solve this maths puzzle. Choose all the images of fire hydrants. Rotate the image of the cat in a hat until it matches the direction of cupids arrow.</p>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html">3.3.8 Accessible Authentication (Minimum)</a> has been introduced to make authentication more accessible by outlawing the use of 'cognitive function tests', which it defines as 'remembering a password or solving a puzzle'.</p>
<p>The term remembering a password might trigger alarm bells, as this is usually the bare minimum requirement for authentication. But, it's actually referring to situations where people are <em>forced</em> to remember it, because the website creators have disabled the use of password managers or copy and paste functions for <em>security</em>.</p>
<p>Like with anything WCAG, there are a few ways to meet the criterion:</p>
<ol>
<li>
<p><strong>Alternative</strong>: Another authentication method that does not rely on a cognitive function test exists. For example, rather than solving a maths puzzle, you can receive a magic email link which logs you in automatically.</p>
</li>
<li>
<p><strong>Mechanism</strong>: A mechanism is available to assist the user in completing the cognitive function test. For example, you allow copy-and-paste functionality on the password field so people don't have to remember it or key it in manually.</p>
</li>
<li>
<p><strong>Object Recognition</strong>: The cognitive function test is to recognise objects. For example, select all images of a bicycle.</p>
</li>
<li>
<p><strong>Personal Content</strong>: The cognitive function test is to identify non-text content the user provided. For example, if the person has uploaded an image of themselves when creating an account, you could use a cognitive function test which states, 'select the picture of yourself from the following images'.</p>
</li>
</ol>
<p>It was quite difficult to be WCAG 2.1 compliant using CAPTCHA's, as they are notoriously awful. So I imagine this one will again be relatively low impact for most public sector organisations if they were already compliant.</p>
<h3>3.3.9 Accessible Authentication (Enhanced) (Level AAA)</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-enhanced.html">3.3.9 Accessible Authentication (Enhanced)</a> is just a stricter version of 3.3.8.</p>
<p>To meet this one you can only use the first two options. So, if you used 'alternative' or 'mechanism', and did not rely on 'object recognition' or 'personal content', you should meet this criterion automatically.</p>
<h2>Removed criteria</h2>
<h3>4.1.1 Parsing</h3>
<p><a href="https://www.w3.org/WAI/WCAG22/Understanding/parsing.html">4.1.1 Parsing</a> has been removed.</p>
<p>Well, it has not technically been removed, because of the way the WCAG criteria are numbered, you will still find <a href="https://www.w3.org/WAI/WCAG22/Understanding/parsing.html">4.1.1 Parsing</a> in the 2.2 guidance, but it has had it's level removed and there is a big warning that this is now obsolete.</p>
<p>I guess if they just removed it, then you'd have 4.1.2 but no 4.1.1 and as WCAG is ordered sequentially, that would be weird.</p>
<p>Parsing stated that your HTML code needed to be valid, as in, written to it's technical specification. If you missed a closing bracket or added an attribute which wasn't supported, the page would usually still load, but you'd fail the criterion.</p>
<p>The reason it's been removed, is that modern browsers and assistive technology is pretty good at papering over the cracks. If you miss a closing bracket, the browser will usually just add one and there's no impact on the user.</p>
<p>With WCAG 2.2, there was a realisation that most of the issues that failed parsing <em>and</em> caused accessibility issues will also fail other criteria, such as <a href="https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html">1.3.1 Info and Relationships</a> or <a href="https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html">4.1.2 Name, Role, Value</a>.</p>
<p>So it was decided that 'Parsing' is no longer needed for accessibility, because it doesn't add anything of value that the other criteria does not already have covered.</p>
<p>What I would say though, is if you have code which is not written to spec, it can become more difficult to debug when it is behaving weird. So, personally, I'd always still recommend running a HTML validator and writing code which is correct.</p>
<h2>Transition period for Public Sector Organisations</h2>
<p>The Central Digital and Data Office (CDDO), who are the monitoring and reporting body for the UK, released a blog post in December 2022 titled: <a href="https://accessibility.blog.gov.uk/2022/12/09/some-changes-to-the-public-sector-digital-accessibility-regulations/">Some changes to the public sector digital accessibility regulations</a>.</p>
<p>In this blog post, CDDO highlight that <a href="https://www.legislation.gov.uk/uksi/2022/1097/made">the regulations reference the latest version of WCAG now</a>, were it now refers to the 'latest version' of WCAG rather than 2.1 specifically.</p>
<p>This means the legislation does not need to be changed every time there is an update to WCAG, which is expensive and time consuming. It just means the day after a new version is brought in, thats the one that the legislation now refers to.</p>
<p>CDDO state in this blog post that they are anticipating WCAG 2.2 in early 2023, and that they would give organisations until early 2024 to make the transition.</p>
<del>
<p>So, although CDDO have not <em>explicitly</em> stated a timeframe for transition, we can infer that they are prepared to allow a 12 month period before they start to report organisations who are compliant to 2.1 rather than 2.2.</p>
<p>With this logic, we can probably expect CDDO to start monitoring and reporting on WCAG 2.2 from October 2024. But we will need to wait for an official statement to know for sure.</p>
</del>
<p>There has been a quiet change to GOVUK Guidance which states that <a href="https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps">monitoring against WCAG 2.2 will start from October 2024</a>, so with the delay of WCAG 2.2, they are still honouring their 12 month transition period.</p>
<p>What is a little weird about the update, is that it states Government Digital Service (GDS) will be monitoring, not CDDO, so I'm not sure if there has been another re-shuffle in terms of responsibilities. But, regardless of who is doing the monitoring, at least we have confirmation of when it kicks in!</p>
<p>The statement, published on on 5 October 2024, reads:</p>
<blockquote>
<p>The Government Digital Service (GDS) is working on how to assess the new success criteria in WCAG 2.2 and will start monitoring for the extra criteria in October 2024. Until October 2024 we will monitor accessibility of websites and apps to WCAG 2.1 level AA.</p>
</blockquote>
<h2>Final Thoughts</h2>
<p>WCAG 2.2 is a minor, but welcome update. It doesn't introduce anything that is shocking or insurmountable, and if you're already 2.1 compliant it shouldn't be too difficult to transition to the new standard.</p>
<p>I personally feel like the new criteria for Focus Appearance could have been braver, and removed some of the ambiguity around what is already often an accessibility issue. It feels like a missed opportunity, but I can appreciate why they felt the need to classify it as a AAA criterion.</p>
<p>Anyway, I hope you found some good takeaways here. Hopefully WCAG 3.0 will be everything we're all dreaming of!</p>
<p>Thanks,
Craig</p>
The hidden function of the 'check your answers' pattern'2023-10-27T00:00:00Zhttps://www.craigabbott.co.uk/blog/the-hidden-function-of-the-check-your-answers-pattern/
<h1>The hidden function of the 'check your answers' pattern</h1>
<p>Have you ever found yourself going through a digital service or e-commerce checkout, filling in all your personal details, only to second-guess yourself at the end?</p>
<p>We’ve all been there! This is why the <a href="https://design-system.service.gov.uk/patterns/check-answers/">'check your answers page'</a> is usually so important. It's a way to make sure people have not made any mistakes before they submit.</p>
<p>A friend of mine, <a href="https://adamsilver.io/">Adam Silver</a> (the UX Designer, not <a href="https://en.wikipedia.org/wiki/Adam_Silver">the commissioner of the NBA!</a>), was pondering this out loud in a LinkedIn post recently.</p>
<p>He stated that usually when we add steps to a process, people get concerned that it will add friction and lead to fewer conversions. But, he argued that it is even more costly to the business to deal with mistakes, and therefore we should use the check your answers pattern.</p>
<p>If you want, you can <a href="https://www.linkedin.com/posts/adamsilverhq_a-form-design-thought-experiment-longer-activity-7123560199679844353-lu7d?utm_source=share&utm_medium=member_desktop">read Adam's original LinkedIn post</a>.</p>
<p>I agree with Adam. There is <em>always</em> a user need to make sure the information they have entered is correct, and a check your answers pattern is the easiest way to do that. That is its primary function.</p>
<p>But, what I want to cover in a bit more depth, is the secondary function which often gets overlooked: <em>The pause!</em></p>
<h2>The obvious cost</h2>
<p>As Adam points out, it’s not just about getting that order in. It’s about getting the <em>right</em> order in.</p>
<p>Ever ordered something online only to realise later that you got the wrong size, colour, or even the wrong product? That’s not just bad for you, it’s a pain for the business too.</p>
<p>Processing returns is costly for both parties. The only person that really wins is the shipping company. Repackaging, fuel, delivery charges, the cost of the staff to process the return and send out a replacement. There is a lot of logistics involved, and none of it is free!</p>
<p>The extra packaging and fuel is also bad for the planet. But that's probably a whole other argument for another day.</p>
<p>So, just on this cost alone, we can probably agree that using a check your answers pattern is a good thing for everybody.</p>
<h2>The drop-outs</h2>
<p>Here's the bit that gets interesting. If you look at quantitive data for <em>any</em> check your answers page, there <em>are</em> drop outs.</p>
<p>So, it's easy to jump to the assumption that they introduce too much friction and the user taps out. And, of course, the only conclusion people usually draw from this is that this is now a 'lost sale'.</p>
<p>I've tested check your answers patterns in hundreds of research sessions, and I've never once seen a user get to a check your answers page and be like, 'Check my answers? Absolutely not! I'm out of here!'</p>
<p>So, it's difficult to just accept that introducing an extra page is the problem. We need to look at 'intent', and maybe draw the conclusion that perhaps this wasn't a lost sale, it was a returned item.</p>
<p>For people that are committed to what they're doing, a check your answers page is only ever a good thing. The drop-outs are people who were on the fence, just this time you didn't deliberately, or unintentionally, push them off!</p>
<h2>The pause</h2>
<p>I mentioned earlier the secondary function of the check your answers page is to create a pause. To give the user a breather. This was a surprise 'ah ha!' moment for me.</p>
<p>During this pause, we noticed the cognitive load drops, the task-orientated concentration subsides and the decision-making pressure eases up. It's like that moment when you’ve been running flat out and you finally get a chance to catch your breath.</p>
<p>It gives the user an opportunity to check their answers, but also check themself, and decide if they're truly committed or not.</p>
<p>As somebody with ADHD, the check your answers page is always the gap I need to ask myself if I need or want what I'm about to buy, or if it's simply an impulse purchase and I've got caught up in the moment.</p>
<p>Almost all of the items I return are those purchased on a whim, where the checkout process was just too easy.</p>
<p>A company with the resources of Amazon can easily absorb the cost of returns on one-click purchasing, but can you?</p>
<h2>Some things are final</h2>
<p>We can always return a product we don't want, at a cost. But there are some things you can't come back from, and again this is where the pause is so important.</p>
<p>In the Department for Work and Pensions (DWP), there is a digital service called <a href="https://www.gov.uk/report-benefit-fraud">Report Benefit Fraud</a>. It's basically where people can go to inform DWP somebody they know is claiming benefits they don't believe they are entitled to.</p>
<p>I worked on it many years ago. But I doubt any of my designs are still in the present day iteration. However, it is where I first discovered the secondary function of the check your answers pattern.</p>
<p>In its first iterations, there was no check your answers page on Report Benefit Fraud. It just collected some information, then when you clicked the final continue button it was like: 'thanks for reporting benefit fraud!'</p>
<p>But, in research sessions, rather than being happy when they hit 'goal-state' in the application, users seemed alarmed when the completion screen popped up.</p>
<p>They weren't ready for it to submit.
They weren't ready for it to be final.</p>
<p>They were sometimes filled with guilt, dread and uncertainty. They'd say things like:</p>
<ul>
<li>'Have I done the right thing?'</li>
<li>'I've changed my mind, I feel awful!'</li>
<li>Can I cancel it?</li>
<li>'Oh god, I'm a grass!'</li>
</ul>
<p>The last one always stood out to me. The anxiety that their reputation, or even their life may now be at risk. Lets face it, there is a common belief in society that nobody likes a grass!</p>
<p>The catch with reporting benefit fraud, is that you actually need to know the person quite well in order to do it. You need to know details like their full name, date of birth and their full address. So there's a real risk that somebody might figure out who it was that reported them.</p>
<p>We tried several different designs to create that pause users needed. That breathing space to just think 'do I really want to grass up someone I know?' It just needed to add gravity to the situation and allow them to really consider their options.</p>
<p>The difficulty is that you need to create that space, but without coercing them in either direction. Here are two bad examples to highlight that:</p>
<ol>
<li>Are you <em>sure</em> you want to report John Smith for benefit fraud?</li>
<li>You're doing the right thing, submit your report now.</li>
</ol>
<p>Adding a check your answers page created that space without directly pointing out that this was a time to really think about what you were doing. It just happened organically.</p>
<h2>Measuring the Right Thing</h2>
<p>A lot of people don't know how to holistically measure success. It's usually narrowly scoped metrics on a very particular goal, for example: How many people successfully completed the checkout process. Or, how many sales were made.</p>
<p>People <em>always</em> count the sales they make, but not always how many of those sales are refunded or how much it actually cost you to refund them. I guess a chart showing savings on how many items 'didn't get returned' isn't usually what the board is looking for in your reports.</p>
<p>When we're measuring completions and drop-offs, we need to be looking at intent and failure demand. Somebody who is committed to checking out is unlikely to cost you money elsewhere in the business, and they're never going to quit on a check your answers page just because they were given an opportunity to look for mistakes.</p>
<p>Work out the cost of your failure demand, for example, how much does it cost you when somebody:</p>
<ul>
<li>cancels their order before it's shipped</li>
<li>cancels their order after it's shipped</li>
<li>returns their order within 30 days</li>
<li>returns their order after 30 days</li>
<li>leaves bad feedback</li>
<li>raises a formal complaint</li>
<li>reports you to trading standards</li>
</ul>
<p>These are all real scenarios that will cost you time and money.</p>
<p>So, do you remove friction to the point you get more sales, but potentially erode trust with your users and process more returns? Or, do you want to maybe make fewer sales, but fewer costly returns because people really are committed to their purchase?</p>
<p>You'll have to measure it for yourself and find out!</p>
<h2>Final thoughts</h2>
<p>We should be using check your answers patterns when the information needs to be accurate, and where the user needs to be certain they want to complete.</p>
<p>In case it's not obvious, morally, I'm against any kind of user experience which uses sleight of hand or trickery to get to goal-state.</p>
<p>Not having a check your answers page is unlikely to be considered a dark pattern, but for me, when it's a financial or high stakes transaction, it borders on negligence.</p>
<p>If we create products and experiences which really are as good as we say they are, adding a step in the process should not be an issue. People should be committed to checking out because they entered the process with intention.</p>
<p>If you need to resort to forced sales and bad returns policies, a check your answers page isn't the problem, you are.</p>
<p>Thanks,
Craig</p>
How to write good alt text for screen readers2023-11-02T00:00:00Zhttps://www.craigabbott.co.uk/blog/how-to-write-good-alt-text-for-screen-readers/
<h1>How to write good alt text for screen readers</h1>
<p>In this post, I just want to talk through what alt text is, why it matters, and how to avoid some common mistakes!</p>
<p>I know alt text posts are common, but I feel compelled to write it given that it's 2023, and I still see a lot of the same issues I've been seeing for years.</p>
<h2>What is alt text</h2>
<p>It's probably best to start here. What even is alt text?</p>
<p>It's short for alternative text, and it's basically just a description of an image.</p>
<p>Alt text has two main purposes:</p>
<ol>
<li>Accessibility: alt text provides a text description so that people who cannot see the image can still understand what it depicts.</li>
<li>Fail state: if the image fails to load for whatever reason, the text alternative will be displayed on the page, so the context of it is not lost.</li>
</ol>
<p>Alt text is embedded in the image by default. It's not rendered to the page unless the image fails to load. Unless the developer has specifically done something to show it, or something goes wrong, most sighted users will never realise it is there.</p>
<p>You can see the alt text on any image by right clicking and choosing "inspect" to look at the code, where you <em>should</em> see an attribute that looks something like the following example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"cat.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"A close up headshot of a ginger cat <br /> wearing mirrored sunglasses. It's in a <br /> car, and its sunglasses reflect the <br /> dark orange clouds of a sunset."</span><br />/></span></code></pre>
<p>Of course, I say <em>'should'</em>. But there is a strong possibility you won't see it, because people often don't add it, and that's part of the problem we will discuss a bit later on when we cover common mistakes!</p>
<h2>Why alt text matters</h2>
<p>The following image is what I was actually describing in the previous example. My hunch is that you imagined something very similar.</p>
<p><img src="https://www.craigabbott.co.uk/posts/how-to-write-good-alt-text-for-screen-readers/images/share-image.webp" alt="A close up headshot of a ginger cat wearing mirrored sunglasses. It's in a car, and its sunglasses reflect the dark orange clouds of a sunset." /></p>
<p>If the alt text was not descriptive enough, or it didn't accurately describe the image, then that entire experience and your ability to imagine this majestic cat wearing sunglasses is broken.</p>
<p>This is the experience screen reader users have when they encounter most images, which is super frustrating.</p>
<h2>Common mistakes</h2>
<p>There are several mistakes I usually see with alt text. Lets talk through each one in a bit more detail.</p>
<h3>No alt attribute</h3>
<p>This is probably the most common issue I see.</p>
<p>It's where there is not even an attempt to provide a text description. No alt attribute. Nothing.</p>
<p>When you fail to provide an alt attribute, screen readers will still announce there is an image, and will take a punt by usually reading out the file name.</p>
<p>But, we live in a world where images are often automatically converted, optimised, compressed and stored on content delivery networks (CDN), so image filenames are often reduced to an ID or key.</p>
<p>Have a think about how the following example might read out on a screen reader:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">“28462574325865.webp”</span> /></span></code></pre>
<h3>Vague alt text</h3>
<p>Looking back at our cat example, where the alt text read:</p>
<blockquote>
<p>A close up headshot of a ginger cat wearing mirrored sunglasses. It's in a car, and its sunglasses reflect the dark orange clouds of a sunset.</p>
</blockquote>
<p>Think about what you would have imagined if the alt text just said:</p>
<blockquote>
<p>A cat.</p>
</blockquote>
<p>It will likely have altered what you imagined, which may have altered the context entirely.</p>
<p>People often do this just to get validation errors or accessibility tools to shut up. But it's not useful for screen reader users.</p>
<h3>Overly detailed alt text</h3>
<p>This is the opposite problem.</p>
<p>Some alt text reads like a novel, describing every single detail in the image. It’s a bit like listening to someone who just can’t get to the point!</p>
<p>Again, think about the cat example. Think about how concise it was to give you the gist, and then compare it to the following text. Decide if the additional words and the length of time it took you to read <em>really</em> added anything to your ability to imagine it.</p>
<blockquote>
<p>An artistic portrait shot of a cat. Set against a subdued background which depicts a soft bokeh effect with an interplay of light and shadow. The cat has meticulously detailed medium length fur, which displays varying shades of earthy browns and oranges against a white face mask and pink nose, reminiscent of the classic tabby pattern. What captures immediate attention are the round, reflective sunglasses it adorns. These mirrored glasses encapsulate a scene with a setting sun and thick dark orange clouds. The cat's whiskers appear prominent, adding symmetry of the image. It's sitting in a car, which offers a sense of sophistication by fusing the natural world with elements of human luxury.</p>
</blockquote>
<h3>Forgetting the Context</h3>
<p>Sometimes people describe the image well, but they forget why they chose that image in the first place. Or, they copy and paste the image along with the alt text, which might have been fine in the previous setting.</p>
<p>But it's not just about describing the image, it's about describing the important things in it which add context to the rest of the surrounding content.</p>
<p>For example, imagine you run a website about dogs. You sell products like collars, and you describe different breeds and their temperaments.</p>
<p>You could use the same image of a dog in two places, but have completely different descriptions, because on one page the focus is on the dog, and on the other page the focus is on the collar.</p>
<p>When describing the image on the page about the breed, you might use something like the following:</p>
<blockquote>
<p>A Rottweiler. A large muscular dog with short black sleek fur and distinctive tan markings on the face, chest, and paws. Its head is strong and broad with a kind face and medium sized ears that flop loosely on either side.</p>
</blockquote>
<p>Whereas on the page where you're trying to sell the collar, the exact same image may be described as:</p>
<blockquote>
<p>A bandanna style dog collar, modelled by a Rottweiler. It is loose fitting in a red and black checked pattern. A gold clip at the front holds a red bell.</p>
</blockquote>
<p>In the first example, I didn't even mention the collar. Because we're trying to describe the look of the breed I felt like describing the collar was more distracting than helpful.</p>
<p>This is the exact image I was describing:
<img src="https://www.craigabbott.co.uk/posts/how-to-write-good-alt-text-for-screen-readers/images/dog.webp" alt="A Rottweiler wearing a red bandanna style collar. It's a large muscular dog with short black sleek fur and distinctive tan markings on the face, chest, and paws. Its head is strong and broad with a kind face and medium sized ears that flop loosely on either side." /></p>
<h3>Adding alt text to decorative images</h3>
<p>Sometimes, having no alt text is just as important as having descriptive alt text.</p>
<p>In order to make an image decorative, you still <em>must</em> provide an alt attribute. But, by leaving it blank, screen readers will no longer announce it.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"decorative.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> /></span></code></pre>
<p>Images which are <em>truly</em> decorative, are things like textures and patterns which may be important for visual branding, but they are there purely for stylistic purposes.</p>
<p>For example, if you're writing alt text like the following, it's probably supposed to be marked as decorative:</p>
<blockquote>
<p>Colourful squiggles and lines.</p>
</blockquote>
<h3>Incorrectly marking images as decorative</h3>
<p>I often see people marking stock images on articles as decorative, but you have to ask yourself, if it's <em>really</em> decorative, why did you choose that exact image to compliment what you were writing about?</p>
<p>I mean, you don't expect to see an article on the financial crisis of 2008 with an accompanying image of a cat wearing sunglasses, right? It would likely be an image of money or something related to banking. So, if the image is in context, it's likely not decorative.</p>
<p>Anywhere an image adds any kind of value for sighted users, then alternative text should be provided.</p>
<p>For example, if you put the following image at the top of your article of the financial crash of 2008, do you think it's decorative? Or, do you think it adds context and perhaps sets the tone for the article?</p>
<p><img src="https://www.craigabbott.co.uk/posts/how-to-write-good-alt-text-for-screen-readers/images/men-in-suits.webp" alt="A generic stock image of 6 white men wearing suits, gathered around a small table, laughing and pointing at charts." /></p>
<p>I described this image as:</p>
<blockquote>
<p>A generic stock image of 6 white men wearing suits, gathered around a small table, laughing and pointing at charts.</p>
</blockquote>
<h3>Not describing charts or graphs</h3>
<p>Charts and graphs are particularly tricky. You can't possibly add all of the data into the alt attribute, nor would you want to.</p>
<p>But, you also can't just write 'chart', because that is equally just as annoying.</p>
<p>There are a few ways you can approach it, and to be honest, I'm not entirely sure there is a definite way to nail this. It can get a bit subjective, and some people will prefer different approaches.</p>
<p>My preferred approach is to use the <code><figure></code> and <code><figcaption></code> tags. Unlike the <code>alt</code> attribute, figures can be used to provide deeper context, rather than just describing the image.</p>
<p>I then link to the raw data, so that people can dig through it. Because, they may not want my interpretation, they may want to draw their own conclusions.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">img</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"chart.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"A two axis line chart showing a single line on a constant upward trend"</span><br /> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span><br /> Figure 1: The number of households in the UK which own a dog increased <br /> steadily every year from 2001 to 2021. <br /> <span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">figure</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Figure 1 was generated using the following data from the Office for <br /> National Statistics:<br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://link-to-data.com"</span>></span><br /> Data: households which own a dog in the UK<br /> <span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>You should not use <code><figcaption></code> as a direct alternative to the <code>alt</code> attribute. They do different things.</p>
<p>Your alt text should describe the image, and the figure should add to the narrative. For example:</p>
<dl>
<dt>
Alt:
</dt>
<dd>
A white man with a short black beard, He is wearing glasses and a black backwards baseball cap. He is typing on a laptop covered with stickers in an open plan office.
</dd>
<dt>
Caption:
</dt>
<dd>
Craig Abbott. Design lead and accessibility specialist.
</dd>
</dl>
<p>Which would give you the following when rendered:</p>
<figure>
<img src="https://www.craigabbott.co.uk/posts/how-to-write-good-alt-text-for-screen-readers/images/craig-abbott.webp" alt="A white man with a short black beard, He is wearing glasses and a black backwards baseball cap. He is typing on a laptop covered with stickers in an open plan office." />
<figcaption>
Craig Abbott. Design lead and accessibility specialist.
</figcaption>
</figure>
<h3>Keywords Stuffing</h3>
<p>There's an old SEO (Search Engine Optimisation) trick, where people ram a bunch of keywords into the alt attribute to try and trick Google into ranking their page higher.</p>
<p>But, to a screen reader user, it would be like having a conversation with somebody who suddenly blurts out a bunch of buzz words without warning. It doesn't flow, and it’s not helpful.</p>
<p>For example, imagine you're chatting to a friend, and they respond with:</p>
<blockquote>
<p>Ah, I've not seen Craig for ages. I think the last time I spoke to him was at Accessibility Scotland. Accessibility. A11y. Accessible Design. UX. UX Design. Frontend Development. Frontend. Dev. Conference. Public Speaking.</p>
</blockquote>
<h3>Including 'Image of…'</h3>
<p>This one isn't a massive issue, it's just annoying.</p>
<p>The screen reader already announces that it's an image. So if you start your alt text with 'an image of...' it's just adding unnecessary noise.</p>
<p>For example, a screen reader may read it out like the following:</p>
<blockquote>
<p>Image. Image of a ginger cat wearing mirrored sunglasses.</p>
</blockquote>
<h2>Controversy</h2>
<p>99% of the time, alt text is relatively straight forward. If the image adds any kind of context, then you should provide it.</p>
<p>There are some people who advocate for hiding all images. Literally marking every image as decorative and describing them in the body of the page.</p>
<p>The argument <em>for</em> this is that the alt text is often useful for non-screen reader uses too. Especially if it's a complicated image. So by hiding the images and forcing you to describe it in the body content, then it's accessible to everybody.</p>
<p>The argument <em>against</em> this is that screen reader users sometimes like to know there is an image there so that they can imagine the page layout and get a similar experience to sighted users. I've seen some people who like to hop around the images on a screen, which of course you can't do if they're all hidden.</p>
<p>Some people argue it improves the 'user experience' for screen reader users, but what about the human experience? If we start hiding everything and replacing everything with paragraphs of text just because it's easier to develop, the web will become very flat and very boring for a lot of people.</p>
<p>For me, personally, I think our job is to make the content that is there accessible for everybody. We use the correct tags, then we supplement them with attributes and additional context where needed, and we try to make the experience as equal as possible for everybody.</p>
<p>Thanks,<br />
Craig</p>
Web Chat accessibility considerations2023-12-05T00:00:00Zhttps://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/
<h1>Web Chat accessibility considerations</h1>
<p>Web Chat relies on real time information and notifications, so you're going to need to use several features of <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">Aria (Accessible Rich Internet Applications)</a>.</p>
<p>In this post, I'm going to cover in detail which of the <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG)</a> you're going to need to consider, and some examples of how you can use advanced attributes to give screen reader users the best possible experience.</p>
<h2>Overview</h2>
<p>Not all chat features are the same. Some are a full page, some are a small window which pops up at the bottom of the screen. Depending on which style you choose, the accessibility impacts are going to be different.</p>
<h3>Questions to ask yourself</h3>
<p>The following are a selection of questions I recommend you ask yourself before building your web chat feature, as it may help you identify any gaps:</p>
<ul>
<li>How is the user able to interact with the interface?
<ul>
<li>What if they are using just a keyboard?</li>
<li>What if they are using a screen reader?</li>
<li>What if they are using dictation software?</li>
</ul>
</li>
<li>How are new messages announced?
<ul>
<li>Are they always read out in full?</li>
<li>Are they only read out when the window has focus?</li>
<li>Are they only read out when the chat feature has focus?</li>
<li>Are there secondary indicators, such as sounds or notification icons?</li>
</ul>
</li>
<li>What happens if a user has multiple browser windows open?
<ul>
<li>Does the chat persist on each window?</li>
<li>Do notifications persist on each window?</li>
<li>What if I have multiple browser windows open and I'm on a completely different website?</li>
</ul>
</li>
</ul>
<h3>Key features</h3>
<p>As well as asking yourself these questions, you'll need to consider that <em>all</em> chat interactions will likely need to have several key features.</p>
<ul>
<li>it needs to be easy to find and intuitive to use</li>
<li>new messages need to be easy to identify and available to assistive technologies, for example, a new message might create a visual notification, play an auditory sound or vibrate a haptic device</li>
<li>all notifications need to be available to everybody</li>
<li>all messages (old and new) need to be available to everybody</li>
</ul>
<h2>WCAG criteria</h2>
<p>For chat, there are several WCAG criteria you'll definitely need to consider, and several more you may need to consider depending on how you design the feature.</p>
<p>Below is a selection of WCAG criteria which are likely to cause issues if you fail to consider them properly.</p>
<h3>1.3.1 Info and Relationships</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">1.3.1 Info and Relationships</a> is for making visual relationships between content also available to people using assistive technologies such as a screen reader.</p>
<p>For example, if you used large bold text to make a heading, then it would also need to be marked up as a heading using something like a <code><h2></code> tag, otherwise it would fail because it is only a heading to people that can see it.</p>
<p>For chat features, imagine something like Apple iMessage. It shows your messages in blue on the right hand side of the screen, and it shows replies to you in grey on the left hand side of the screen.</p>
<p><img src="https://www.craigabbott.co.uk/posts/web-chat-accessibility-considerations/images/imessenger.webp" alt="An iMessage conversation between Craig and Gavin. Gavins messages are highlighted as grey bubbles on the left hand side of the screen, and Craigs are blue on the right hand side of the screen. Gavin is asking Craig if he wants to meet up next week, but Craig is stating that he is in Lisbon and cannot make it." /></p>
<p>So, if you can see, it's obvious who each message belongs to.</p>
<p>Now, imagine if you just visually created the same style but you didn't add any supporting information. If you are using a screen reader, the messages may get read out in order, but you wouldn't be aware of who wrote each message.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"left"</span>></span><br /> Can you please explain the problem?<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"right"</span>></span><br /> I'm having trouble resetting my password.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>You can add visually hidden content to add supporting information. This is content which is not visible to sighted users, but will still be read out by screen readers. This can help people who cannot see the relationship to still understand it.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden"</span>></span><br /> Customer Support: <br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> Can you please explain the problem?<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden"</span>></span><br /> Me: <br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> I'm having trouble resetting my password.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>This is the CSS I use for my visually hidden class. I don't profess to be a CSS Wizard, so there is likely a cleaner way to achieve this. But this works for me:</p>
<pre class="language-css"><code class="language-css"><span class="hljs-selector-class">.visually-hidden</span> {<br /> <span class="hljs-attribute">position</span>: absolute;<br /> <span class="hljs-attribute">width</span>: <span class="hljs-number">1px</span>;<br /> <span class="hljs-attribute">height</span>: <span class="hljs-number">1px</span>;<br /> <span class="hljs-attribute">margin</span>: -<span class="hljs-number">1px</span>;<br /> <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;<br /> <span class="hljs-attribute">overflow</span>: hidden;<br /> <span class="hljs-attribute">clip</span>: <span class="hljs-built_in">rect</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);<br /> <span class="hljs-attribute">border</span>: <span class="hljs-number">0</span>;<br /> <span class="hljs-attribute">white-space</span>: nowrap;<br /> <span class="hljs-attribute">background-color</span>: black; <span class="hljs-comment">/* to prevent axe false flags on contrast */</span><br /> <span class="hljs-attribute">color</span>: white; <span class="hljs-comment">/* to prevent axe false flags on contrast */</span><br />}<br /><br /><span class="hljs-selector-class">.visually-hidden</span> <span class="hljs-selector-class">.focusable</span><span class="hljs-selector-pseudo">:active</span>,<br /><span class="hljs-selector-class">.visually-hidden</span> <span class="hljs-selector-class">.focusable</span><span class="hljs-selector-pseudo">:focus</span> {<br /> <span class="hljs-attribute">position</span>: static;<br /> <span class="hljs-attribute">width</span>: auto;<br /> <span class="hljs-attribute">height</span>: auto;<br /> <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;<br /> <span class="hljs-attribute">overflow</span>: visible;<br /> <span class="hljs-attribute">clip</span>: auto;<br /> <span class="hljs-attribute">white-space</span>: normal;<br />}</code></pre>
<h3>1.3.2 Meaningful Sequence</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">1.3.2 Meaningful Sequence</a> is to make sure that for content which needs to be read in order, the correct reading order can be established by assistive technologies such as a screen reader.</p>
<p>If the messages are all in the same order in the code as they are on the screen you should automatically pass.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Customer Support: Hi<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Me: Hi<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Customer Support: How can I help today?<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Me: I'm having trouble resetting my password.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Customer Support: I see! No worries, let me take a look.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>But, imagine you tried to style the conversation to look like the iMessage example, and you used columns to do that, so on the screen it looked like a back-and-fourth conversation.</p>
<p>If on a screen reader it read all of the messages from person 1 first, and then all of the messages from person 2 second, you wouldn't be able to follow the conversation. This would fail.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"left"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Customer Support: Hi<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Customer Support: How can I help today?<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Customer Support: I see! No worries, let me take a look.<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"right"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Me: Hi<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Me: I'm having trouble resetting my password.<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<h3>1.3.3 Sensory Characteristics</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">1.3.3 Sensory Characteristics</a> is to make sure that content is available to everybody, regardless of what senses they can use.</p>
<p>For chat, this may apply in a few ways. You will have to alert the user that they have a new message. So, you might play a sound effect.</p>
<p>If somebody is Deaf, they wouldn't hear the sound. Neither would somebody who had their speakers turned off. So if a sound effect was the only way to know there was a new message, then you would fail this criterion as it is relying on a single sensory characteristic.</p>
<p>To make users aware there is a new message, you might do several things at the same time:</p>
<ul>
<li>play a subtle sound effect</li>
<li>highlight the chat window with a visual border for several seconds</li>
<li>use <code>aria-live</code> to announce to the screen reader that there is an unread message that needs their attention</li>
<li>prepend "New message" to the page title, so if somebody is on another browser tab they may see it change</li>
</ul>
<h3>1.3.4 Orientation</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">1.3.4 Orientation</a> is to make sure features work in both portrait and landscape modes. This is pretty self explanatory and shouldn't really be an issue unless you deliberately lock the orientation and you don't use responsive design principles to pass 1.4.10 Reflow.</p>
<h3>1.4.3 Contrast (Minimum)</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">1.4.3 Contrast (Minimum)</a> is to make sure that text can be perceived by people who might have visual impairments.</p>
<p>This one is pretty self explanatory. With all content, in most cases text needs to have a ratio of 4.5:1 with the background it is placed on.</p>
<p>If it's larger than 24px, or; bold and larger than 14px, then it can have a ratio of 3:1. But it's better to aim for 4.5:1 as best practice just to be absolutely sure.</p>
<h3>1.4.10 Reflow</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">1.4.10 Reflow</a> is to make sure that the app works on multiple devices, zooms and screen sizes.</p>
<p>To pass this criterion, the chat feature would always need to fit on the screen regardless of it's size down to a device width of 320px wide, without requiring the user to scroll horizontally. Scrolling vertically is fine.</p>
<h3>1.4.11 Non-text Contrast</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">1.4.11 Non-text Contrast</a> is to make sure that images, icons and anything else which is not text, has a text alternative.</p>
<p>For example, if you use an image such as a speech bubble to access the chat feature, it will need to have alternative text so it can be identified by screen readers.</p>
<pre class="language-html"><code class="language-html"> <span class="hljs-tag"><<span class="hljs-name">button</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"chat-icon.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chat with customer support"</span> /></span><br /> <span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
<h3>2.1.1 Keyboard</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">2.1.1 Keyboard</a> is to make sure that everything you can do with a mouse, you can also do with a keyboard.</p>
<p>So opening and closing the chat feature, replying to messages, scrolling through the conversation etc. All of those things would need to work using just a keyboard.</p>
<h3>2.1.2 No Keyboard Trap</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">2.1.2 No Keyboard Trap</a> is to make sure that people using a keyboard don't get stuck in a feature and be unable to get back out without refreshing the page.</p>
<p>The keyboard is not considered trapped if it is held temporarily inside of a feature, as long as there is a mechanism to return it to the main page, such as a close button on a pop-up.</p>
<p>In a lot of cases it is best practice to hold the focus inside of modals or pop-ups to stop the keyboard focus disappearing under the modal which can cause a failure of <a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">2.4.7 Focus Visible</a> in 2.1, or <a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">2.4.11 Focus Not Obscured (Minimum)</a> in 2.2.</p>
<p>However, in the case of a chat feature, you'd need to make sure that if the keyboard user closed the chat window mid-chat to return the focus to the main page to continue browsing, then they are made aware when they have new messages they need to deal with, and that they can return to the chat window without any loss of data.</p>
<h3>2.2.1 Timing Adjustable</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">2.2.1 Timing Adjustable</a> is to make sure that users are aware of any activities that are timed and they are given the opportunity to extend the timeout before they are forced to start the activity from the beginning.</p>
<p>For example, if the chat session times out after a period of inactivity, the user will need to be notified before it happens and given at least 20 seconds to extend it.</p>
<p>This could be as simple as adding a notification to the chat window if they have not typed anything for 1 minute which says:</p>
<blockquote>
<p>"This chat will end in 20 seconds if you do not reply."</p>
</blockquote>
<p>You could then use JavaScript to monitor characters being entered into the reply input field. If the number of characters in the field goes up, you extend the chat session.</p>
<p>The reason for listening for characters being entered and not listening for a reply, is that it may take somebody more than 20 seconds to write a reply, so their session would still be terminated even though they were trying to extend it.</p>
<p>Also, listening for character count rather than keys being pressed means if somebody us using dictation software like Dragon it will still work.</p>
<p>Dictating with Dragon does not simulate keyboard presses. So, if you use JavaScript to listen for keys being pressed rather than characters being entered into the input, the session would not be extended for somebody who is in the middle of typing using dictation software.</p>
<h3>2.2.2 Pause, Stop, Hide</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">2.2.2 Pause, Stop, Hide</a> is to make sure users can control features which can get overwhelming such as animations and auto-updating information.</p>
<p>If an agent is writing too many messages in a short period of time, a screen reader user may get overwhelmed if there is too much content being read out constantly at a pace they cannot manage.</p>
<p>So a mechanism should be available to pause, stop or hide the content unless it is essential.</p>
<p>For a chat feature, it probably would be a technical pass because it would probably be considered essential content, and there is also an option to end the chat which is a mechanism of stopping it. However, we can all probably agree this is an awful experience for the user.</p>
<p>A better option might be to have messages read out verbatim if the chat feature is focused, and resort to a sound effect to note there is a new message without reading out the entire thing if the chat feature is not focused. This would reduce the noise for a screen reader user without completely removing the ability to stay up to date.</p>
<h3>2.4.11 Focus Not Obscured (Minimum)</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">2.4.11 Focus Not Obscured (Minimum)</a> is to make sure the keyboard focus can always be seen on the screen. A common fail is when people fail to contain the keyboard focus within pop-ups and modals, such as chat windows.</p>
<p>For example, if your chat feature is a pop-up window, and the keyboard focus can get behind it and become non-visible, it would fail this criterion.</p>
<h3>4.1.2 Name, Role, Value</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">4.1.2 Name, Role, Value</a> is to make sure that elements can be identified correctly.</p>
<h4>Name</h4>
<p>If we imagine you had a button to open the chat feature, it would need to have an accessible name such as "Chat with customer support" so a screen reader can give context.</p>
<p>You can do this with physical text, alt text on images, like in the example for non-text content, or with aria-labels. Text is obviously the simplest.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Chat with customer support<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"chat-icon.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Chat with customer support"</span> /></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Chat with customer support"</span>></span>💬<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
<h4>Role</h4>
<p>It would also need to have a role so it can be identified by speech recognition software. So, for example, if the chat control looks like a button it must behave like a button.</p>
<p>Each interactive HTML element has an implicit role. You don't need to give these a role attribute unless you style them to look like something else.</p>
<p>In the following example, both button elements would render the same, you don't need to give a button a role of button, as it's implicit:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Chat with customer support<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Chat with customer support<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
<p>It only becomes a problem if you style an element to look like a different one and you don't manually change the role.</p>
<p>For example, if you styled a link to look like a button and you didn't update the role, then it would be a fail. Because it looks like a button, but behaves like a link.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span>></span><br /> Chat with customer support<br /><span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
<p>To correctly align the visual look of an element, and its semantic meaning, thats when you need to give it the correct role attribute:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span><br /> Chat with customer support<br /><span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
<h4>Value</h4>
<p>Value is the current state of the control. So if your chat window is an expandable section, it can be open or closed, then you need to also maintain that state. This lets screen reader users know what to expect if they are looking for particular content.</p>
<p>You would tie the button to the expandable window using <code>aria-controls</code> and you would state whether it was expanded or not. <code>aria-expanded</code> can be <code>false</code> or <code>true</code>.</p>
<p>Closed example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"chat-window"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"false"</span>></span><br /> Chat with customer support<br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"chat-window"</span> <span class="hljs-attr">hidden</span>></span>…<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>Open example</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"chat-window"</span> <span class="hljs-attr">aria-expanded</span>=<span class="hljs-string">"true"</span>></span><br /> Chat with customer support<br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"chat-window"</span>></span>…<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<h3>4.1.3 Status Message</h3>
<p><a href="https://www.craigabbott.co.uk/blog/web-chat-accessibility-considerations/%7Bwcagify%7D">4.1.3 Status Message</a> is for making updates available to screen reader users when content changes that might not have focus at that time.</p>
<p>This is really important for a chat feature, because messages might get added to the page when the user is focused on other parts of the page, or writing their own message to a previous reply.</p>
<p>On a chat feature, you'd likely need several status updates:</p>
<ul>
<li>the chat has started</li>
<li>there is a new message</li>
<li>the chat has ended</li>
</ul>
<p>In most cases, you can use <code>role="log"</code> to create an accessible chat window. So every time you append a new element to the log, the screen reader will read it out verbatim. You can <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/log_role">read more about the log role on MDN</a>.</p>
<p>By default, the log role will use <code>aria-polite</code>, so it will queue messages up rather than interrupting the previous message if a new one is sent immediately after.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"chat-heading"</span>></span><br /> Chat: Customer support<br /><span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"chat-window"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"log"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"chat-heading"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Customer Support has joined the chat<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Customer Support is typing…<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Customer Support: Hi, how can I help you today?<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Me: Hi, I'm struggling to reset my password, can you help?<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>If you're using an expandable chat window, you'll need to make a decision on whether reading out every message is going to be too noisy. If the user is expected to continue using the service and multi-tasking the chat, you might need to get more creative with how you announce the messages.</p>
<p>You may choose to play a sound effect, and then read out the messages when the user moves the focus back into the chat window, but this will obviously be more complex.</p>
<p>A <code>log</code> landmark must have an accessible name, so link it to a heading using <code>aria-labelledby</code> or use <code>aria-label</code> to give it one directly on the element.</p>
<h2>Conclusion</h2>
<p>Chat is a complex feature. Probably one of the most difficult you will have in terms of balancing overwhelm with confusion. If you read out too much in the wrong context, it's noisy. If you read out too little then the user can miss vital information.</p>
<p>In short, you need to make the chat easy to find, easy to use, and make sure that any features which help the user are available to multiple senses. If you rely solely on visual cues for new messages, or reading old messages, the feature is going to be unusable for a lot of people.</p>
<p>Chat is difficult. It's substantially easier when it's the only feature on a page, but this relies on your organisation having the capacity to respond in a timely manner. If your chat wait times are long, then allowing the user to keep browsing the rest of the site is preferred.</p>
<p>Use <code>role="log"</code> with an accessible name to semantically mark up a chat window, this will implicitly assign <code>aria-polite</code> to read out new content to a screen reader.</p>
<p>Always make sure you test any new features extensively with assistive technologies and screen readers, and make sure alternatives are available. Can somebody ring up or use a sign language interpreter, for example.</p>
<p>As always, I hope this was useful.</p>
<p>Thanks,
Craig</p>
Stop trying to recruit unicorns with acorns2024-01-16T00:00:00Zhttps://www.craigabbott.co.uk/blog/stop-trying-to-recruit-unicorns-with-acorns/
<h1>Stop trying to recruit unicorns with acorns</h1>
<p><img src="https://www.craigabbott.co.uk/posts/stop-trying-to-recruit-unicorns-with-acorns/images/share-image.webp" alt="A unicorn running. Its back legs are supported by wheels, much like a wheelchair harness for dogs. It's surrounded by bursts of rainbow colours." /></p>
<p>Picture this. A job advert for an electrician.</p>
<p>The skills required for the job, as you'd expect, state that you need to be a fully qualified electrician.</p>
<p>However, when you read on, they also expect you to be an expert in plastering, paving, plumbing, joinery, tree surgery, landscape architecture, and gas fitting. All for half the salary of a bricklayer.</p>
<p>Absurd, right?</p>
<p>These roles are all required to build a house and make it compliant with regulations, but they all demand different skills and expertise. You wouldn't hire 1 person to build you a complete house on their own, and to the standard that is required.</p>
<p>Yet, this is exactly the baffling landscape we're seeing today in job adverts for accessibility specialists. There is a fundamental misunderstanding of what we actually do, coupled with an underestimation of our value.</p>
<p>I want to talk a bit about why these job adverts often miss the mark, and highlight some of the examples that have left accessibility professionals both frustrated and undermined.</p>
<h2>The problems with recruitment</h2>
<p>Many organisations seem to view accessibility through a narrow lens. They do not recognise the breadth and depth of expertise that is required to create a well rounded accessibility role.</p>
<p>We had a similar situation 10 to 15 years ago, when start-ups were constantly trying to hire a single person that could do visual design, user experience (UX) design and software development.</p>
<p>This results in bloated job adverts hunting for somebody who likely does not exist in the job market. A mythical creature. A legend. Their reputation transcends the entire industry, yet nobody has managed to find a real one. Hence the term 'unicorn'.</p>
<h3>The unicorn fallacy</h3>
<p>The reason people want unicorns, like everything, boils down to money.</p>
<p>There is a general view that if you find a unicorn it costs less. Basically, people are wanting to pay 1 person to do the job of 3, or more in some cases.</p>
<p>In reality, what you often get is 1 person who is ineffective in several areas because their skill set is too shallow for the responsibilities they've been given.</p>
<p>Unfortunately, something similar is now happening in the accessibility industry, and it often rides off the reactive nature of how people approach accessibility in the first place. A common pattern I see is this:</p>
<ol>
<li>An organisation fails an audit or gets some bad press about its lack of accessibility, so their hand is forced to do something.</li>
<li>They sign off on hiring 1 lone accessibility specialist, and they fully expect this maverick to fix all their problems.</li>
<li>They don't see the value when comparing the role to a mature practice, like software engineering, so they shoe-horn it in and pitch it at junior level so they can pay less.</li>
<li>They dump all of their accessibility problems and unrealistic expectations into their 'key responsibilities' section of the job advert, creating a bloated incomprehensible mess.</li>
<li>The person who gets the role is ultimately overworked, underpaid, burns out and leaves the organisation and possibly the industry having made minimal impact.</li>
</ol>
<p>It largely stems from ignorance. A lack of respect for accessibility as a whole, and a lack of understanding of accessibility as a specialism.</p>
<h3>The misinterpretation of accessibility roles</h3>
<p>Accessibility, at its heart, is about building environments, services, and products accessible to everyone, regardless of their impairments or circumstances.</p>
<p>It's an essential role in any organisation. But the skill set required will vary massively depending on whether you need a web specialist, a mobile app specialist, a document specialist or you need somebody to assess the physical spaces in your building.</p>
<p>There will be a massive difference in the experience, skills and expertise of somebody who can tell you if a session timeout meets the <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG)</a>, and somebody who can tell you if the incline on your wheelchair ramp is the correct ratio to meet the building regulations.</p>
<p>Think of it like this. A cardiothoracic surgeon and a general practitioner (GP) are both doctors. Right? But they have <em>very</em> different specialisms. I bet there aren't many people that would be cool having open-heart surgery if they thought their GP was just going to crack open their chest and give it a go!</p>
<p>With the same logic, people shouldn't be ok with a document accessibility specialist just signing off on a physical space being compliant with local laws and building regulations, and vice versa.</p>
<p>In a lot of organisations, if you have the word accessibility somewhere in your job description, you're fully expected to just know <em>everything</em> about accessibility. Which, of course, is ridiculous.</p>
<h4>Types of accessibility specialist</h4>
<p>Most accessibility specialists will all have skills which revolve around user-centricity and inclusion. But the actual skills they need in their industry and their role will vary massively.</p>
<p>As I'll outline repeatedly in this post, most organisations will just mash several of these into 1 job role, but the reason I'm highlighting them separately is because there are separate certifications for each one. So, the accessibility industry very much views them as different skill sets.</p>
<h5>Digital accessibility specialist</h5>
<p>Digital accessibility is a complex field, demanding in-depth knowledge of markup languages, UX design, interaction design, assistive technologies, use of colour and imagery, typography, layout, and an understanding of how disabilities affect usability.</p>
<p>You will need to know how to assess websites and mobile applications against WCAG, and how to articulate your findings to colleagues. You will also need to understand one or more of the following,</p>
<ul>
<li><a href="https://accessibility-manual.dwp.gov.uk/accessibility-law/the-public-sector-bodies-accessibility-regulations-2018">Public Sector Bodies Accessibility Regulations 2018</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/european-accessibility-act-what-you-need-to-know/">European Accessibility Act</a></li>
<li><a href="https://www.section508.gov/">Section 508</a></li>
</ul>
<p>The certification for a digital or web accessibility specialists would be '<a href="https://www.accessibilityassociation.org/s/wascertification">Web Accessibility Specialist (WAS)</a>'.</p>
<h5>Document accessibility specialist</h5>
<p>Document accessibility shares some similarities, like use of colour and layout. But instead of markup languages, you need an in-depth knowledge of different formats and different tools like Microsoft Office or Google Drive.</p>
<p>You will need to know how to make presentations, documents and spreadsheets accessible. And ultimately, you have to be able to shout very loudly at anybody that uses PDFs. Just kidding! You don't have to shout. Swearing is fine.</p>
<p>The certification for a document accessibility specialist would be '<a href="https://www.accessibilityassociation.org/s/accessible-document-specialist">Accessible Document Specialist (ADS)</a>'.</p>
<h5>Architectural accessibility specialist</h5>
<p>An architectural accessibility specialist, required for physical spaces, again may have overlaps like use of colour and layout. But, when we talk about layout, the context has completely changed as you're now talking about the positioning of physical objects.</p>
<p>You will likely need an understanding of different regulations and laws, architectural design principles, and an understanding of different materials and their properties, such as their acoustics and whether they will interfere with hearing loops.</p>
<p>The certification for an architectural accessibility specialist would be '<a href="https://www.accessibilityassociation.org/s/certified-professional-environments">Certified Professional in Accessible Built Environments (CPABE)</a>'.</p>
<h5>Other accessibility specialists</h5>
<p>You might also come across other types of accessibility specialists who have expertise in areas such as transport, healthcare, communications, tactile maps, and event organisation.</p>
<p>I guess, the point I'm trying to make is that for pretty much every industry, it has its own nuances, and therefore requires its own specialists when it comes to accessibility.</p>
<p>That's not to say you can't get a specialist who can cover different areas competently. Many senior accessibility specialists can, and are qualified to do so. But, they should be fairly compensated for the level of experience they bring, and sadly, that just is not happening.</p>
<h3>The accessibility pay gap</h3>
<p>The lack of understanding around what an accessibility specialist does spills over into compensation, leading to a massive discrepancy between roles despite having a lot of overlapping skills.</p>
<p>Again, if we take a mature practice like frontend engineering. When we look at <a href="https://www.glassdoor.co.uk/Job/united-kingdom-front-end-engineer-jobs-SRCH_IL.0,14_KO15,33.htm?sc.keyword=Front%2520End%2520Engineer&locT=&locId=&typedKeyword=Front%2520End%2520Engineer">Glassdoor</a> or <a href="https://www.linkedin.com/jobs/search/?currentJobId=3794330068&keywords=Frontend%20Engineer&origin=JOBS_HOME_KEYWORD_AUTOCOMPLETE&refresh=true">LinkedIn</a>, organisations are offering around £50,000 to £70,000 per year for a working level candidate, and they specify a foundational skill set that includes HTML, CSS and Javascript.</p>
<p>Now, if you do the same for an <a href="https://www.linkedin.com/jobs/search/?currentJobId=3750357169&keywords=accessibility&origin=JOBS_HOME_SEARCH_BUTTON&refresh=true">accessibility specialist</a>, at the time of writing this post, the average salary for a working level accessibility specialist, if you can even find an advert with a salary listed, is usually around £30,000 to £40,000 per year. Most of the time they don't even advertise the salary because they're ashamed of how low it is, it just says 'competitive'.</p>
<p>The amount of job adverts which expect you to apply without knowing the salary range is a huge problem too, but that is another rant for another day.</p>
<p>In most cases the salary for an accessibility specialist is around half or two-thirds the salary of a frontend engineer. Yet, the advert will still specify that you must have a foundational skill set that includes HTML, CSS and Javascript. Because you have to find, explain and often fix the problems created by the frontend engineer that's getting paid twice as much!</p>
<p>Maybe it's because the benefits of software engineering are immediately evident in the digital products we use every day, whereas the impact of accessibility work, although profound, is more subtle and often goes unnoticed by the majority.</p>
<p>Or, perhaps accessibility is systemically undervalued because it is for, and often implemented by people with disabilities. Which makes it a role rife for discrimination.</p>
<h3>Unrealistic requirements</h3>
<p>The demands in job adverts for accessibility specialists are often unrealistic, listing requirements that would take a lifetime to master.</p>
<p>Here are 3 sets of responsibilities taken from 3 different job adverts for an accessibility specialist which I've ranted about over the past 12 months.</p>
<p>Note that they all pretty much expect you to be a software engineer with additional skills and qualifications, yet the salary is substantially less.</p>
<h4>Role 1</h4>
<dl>
<dt>
Salary:
</dt>
<dd>
£42,000
</dd>
<dt>
Requirements:
</dt>
<dd>
<ul>
<li>
IAAP Accessibility Core Competencies certification.
</li>
<li>
IAAP Web Accessibility Specialist certification.
</li>
<li>
2 years experience managing a team.
</li>
<li>
Proficient in HTML, CSS, JavaScript, and WAI-ARIA.
</li>
<li>
Proficient in agile methodologies (Scrum)
</li>
<li>
Familiarity with modern web frameworks (React, Angular).
</li>
<li>
Familiarity with mobile development (Flutter).
</li>
<li>
Proficient using a broad range of Assistive Technologies for auditing (Dragon NaturallySpeaking, JAWS and ZoomText).
</li>
<li>
Experience with accessibility hardware (Braille Displays).
</li>
<li>
Understanding of accessibility evaluation tools and methods in both web, native mobile and desktop environments.
</li>
</ul>
</dd>
<dt>
My comments:
</dt>
<dd>
This is the role of 2 to 4 people. An accessibility specialist, a frontend developer, a mobile app developer, and potentially a delivery manager. The salary at £42,000 is not reflective of the management responsibilities or expectations of what looks like a lead level role.
</dd>
</dl>
<h4>Role 2</h4>
<dl>
<dt>
Salary:
</dt>
<dd>
£35,000
</dd>
<dt>
Requirements:
</dt>
<dd>
<ul>
<li>
Proficient in WCAG 2.2 and WAI-ARIA
</li>
<li>
Proficient in Universal Design principles and UX
</li>
<li>
Proficient in Jira ticket and project management
</li>
<li>
Proficient in applying WCAG within different technologies (HTML, CSS and JavaScript etc...)
</li>
<li>
Proficient in React Development
</li>
<li>
Proficient in Flutter Development
</li>
<li>
Proficient in Microsoft Office accessibility
</li>
<li>
Experience using screen readers and other assistive technology
</li>
<li>
Experience working with Design Systems
</li>
<li>
Experience working with Agile Methodologies
</li>
<li>
Experience working in a large organisation, preferably e-commerce
</li>
</ul>
</dd>
<dt>
My comments:
</dt>
<dd>
This is the role of 4 or 5 people. An accessibility specialist, a frontend developer, a mobile app developer, a UX designer, and potentially a delivery manager. The salary at £35,000 is less than the previous example, and while it might not be a lead level role, it's probably a senior role based on the breadth and depth of skills they're looking for.
</dd>
</dl>
<h4>Role 3</h4>
<dl>
<dt>
Salary:
</dt>
<dd>
£38,000
</dd>
<dt>
Requirements:
</dt>
<dd>
<ul>
<li>
IAAP certified.
</li>
<li>
HTML, CSS, Javascript.
</li>
<li>
Proficient in React.
</li>
<li>
Proficient in Swift / IOS.
</li>
<li>
Demonstrable experience managing an entire accessibility team
</li>
<li>
Demonstrable experience of creating a vision and strategy for accessibility.
</li>
<li>
Demonstrable experience of implementation of accessibility standards.
</li>
<li>
Demonstrable experience assessing products and services using a range of techniques assistive technologies and providing fixes for accessibility bugs.
</li>
<li>
Demonstrable experience of creating training and educating stakeholders on accessibility.
</li>
<li>
Demonstrable experience in creating accessible documents such as Word, PowerPoint and PDF.
</li>
<li>
Demonstrable experience conducting WCAG audits to level AA.
</li>
<li>
Experience writing guidance and advice on latest accessibility standards.
</li>
<li>
Technical expertise in accessible design and UX.
</li>
<li>
GitHub Project Management.
</li>
</ul>
</dd>
<dt>
My comments:
</dt>
<dd>
Again, this is the role of 4 or 5 people. An accessibility specialist, a frontend developer, a mobile app developer, a product manager, and potentially a training manager. The salary at £38,000 is not reflective of this responsibilities and expectations of this lead level role.
</dd>
</dl>
<h3>The Ripple Effect</h3>
<p>The salaries and unrealistic expectations with these job adverts have far-reaching consequences.</p>
<p>Firstly, they perpetuate the idea that accessibility is not important or valued. And secondly, they set people up for a career of being overstretched, overworked and underpaid.</p>
<p>Usually, regardless of the official job title, if you read between the lines it's actually a different full-time role with accessibility thrown in. It's almost always a 'frontend developer, who can also do accessibility and stakeholder management'.</p>
<p>This creates a vicious cycle where:</p>
<ol>
<li>Somebody is hired to do an impossible task.</li>
<li>They are underpaid and overworked.</li>
<li>They struggle to make an impact, because the task is impossible.</li>
<li>The value placed on the role decreases, even though it was already low.</li>
<li>When the person inevitably leaves, they are not replaced.</li>
</ol>
<p>Eventually, even accessibility enthusiasts start talking negatively about the industry. And, who'd want to get into accessibility if everyone is complaining about it?</p>
<p>These unrealistic expectations are not just frustrating for job seekers, it hinders the progress of accessibility itself. When organisations seek a mythical expert who can do it all, they miss out on hiring real, skilled professionals who can make significant contributions in specific areas of accessibility.</p>
<p>This loss of talent is detrimental not only to the field of accessibility but to society as a whole, as we all benefit from inclusive design.</p>
<h4>The issues with IAAP</h4>
<p>A lot of organisations miss out on experts with lived experience by insisting on qualifications such as <a href="https://www.accessibilityassociation.org/s/">IAAP (International Association of Accessibility Professionals)</a>.</p>
<p>Don't get me wrong, it's good that there are officially recognised qualifications for accessibility now. But, I know a lot of people who are experts in their field and renowned in the industry who are not certified, and likely never will be.</p>
<h5>The certification process is not inclusive</h5>
<p>One of the reasons many of todays experts will likely not be IAAP certified, is that it's common for neurodivergent people to gravitate to accessibility roles. It's somewhere we feel we belong, and we want to fix a lot of the things that didn't work for us, or those barriers we had to face ourselves growing up.</p>
<p>But, the IAAP certification process is very much set up in a way which mimics the standard setups in the education systems that created barriers for a lot of neurodivergent people in the first place.</p>
<p>IAAP has a formal exam with an invigilator which you will need to study for. Which is super overwhelming and stressful for a lot of neurodivergent people. It's not designed in a way which caters for these people drawn to the accessibility industry in the first place.</p>
<p>It's kind of ironic that accessibility specialists often need to advise organisations on reasonable adjustments, but the certification they often need in order to do this, does not afford them the same opportunities.</p>
<h5>It's IAAP or nothing</h5>
<p>The main issue I'm seeing with IAAP, is that because it now exists, a lot of organisations insist on it. They won't take lived or on-the-job experience as an alternative. This oversight of talent is detrimental not only to the field of accessibility but to society as a whole.</p>
<p>I worry that the accessibility industry, like everything else, will become an uneven playing field where neurotypical and non-disabled people reign supreme. If we wrap a rigid education and certification system around a profession which was largely built on the back of lived experience, we'll lose the a lot of the expertise and diversity which accessibility is renowned for.</p>
<p>I feel like it's too early to insist on a certification in an industry where very few people can actually agree on what good looks like, and where the certification process itself excludes a lot of experienced and talented individuals.</p>
<p>I'd like to see an alternative path for IAAP certification, which lends itself more to an evidence or coursework based approach, as there is ample evidence that shows neurodivergent people do not do well in standard educational setups which rely on revision and examination. Particularly when they have conditions such as Dyslexia, Autism and Attention Deficit Hyperactivity Disorder.</p>
<p>Here are some articles which highlight this:</p>
<ul>
<li><a href="https://www.linkedin.com/pulse/why-minimum-educational-requirements-failing-neurodiverse-hugo-kay/?trk=public_profile_article_view">Why minimum educational requirements are failing neurodiverse talent</a></li>
<li><a href="https://www.forbes.com/sites/drnancydoyle/2023/09/03/what-is-wrong-with-our-schools/?sh=16acb80c6c59">What is wrong with our schools?</a></li>
<li><a href="https://www.autism.org.uk/advice-and-guidance/professional-practice/accessible-exams">Making exams accessible for autistic students</a></li>
</ul>
<p>I guess for a lot of us, IAAP being mandated is a bit of a red flag at the moment. It highlights that the organisation hiring probably does not understand the industry or the importance of an inclusive hiring process. It also suggests they're not actually confident in what they need when it comes to accessibility. So, a lot of us probably wouldn't want to work there anyway!</p>
<h2>Moving forwards</h2>
<p>We currently live in an accessibility paradox. There is a huge push to establish accessibility as a specialism and hire people with these skills. Yet, there is a failure to recognise the importance of making the training, the certification process, and the world itself, actually accessible.</p>
<p>So, what's the way forward?</p>
<p>For me, the solution starts with education and awareness. Hiring managers and organisations need to understand the diverse specialisms within accessibility and tailor their job adverts to hire the right person for a particular job.</p>
<p>Accessibility specialists should also be compensated fairly, in line with their expertise and the significant impact of their work. Paying them half of what a software engineer earns is not just unfair, it directly contributes to pay gaps.</p>
<p>Despite accessibility being an industry where people with disabilities can thrive and outperform their peers, it's already festering with bias and discrimination because the people hiring for these roles just don't get it.</p>
<h3>Understand people's needs before hiring</h3>
<p>A lot of accessibility specialists are people with lived experience. It's great that people are wanting to hire us now, but make sure you understand that a lot of us need adjustments.</p>
<p>I've seen it time and time again. People hire an accessibility specialist because it's a hot topic and it's always good publicity. But then they just leave that person to drown in an environment and an organisation where they are not supported.</p>
<p>Often, accessibility specialists will require additional equipment, like computer hardware and software. They may need a particular chair or a desk that's close to an accessible toilet. They may also need flexible working hours or flexible working arrangements and open plan offices can be overwhelming.</p>
<p>With the right environment, people with accessibility needs often outperform their peers, particularly in the field of accessibility. But the environment and the culture of the organisation needs to be accommodating, fair and equal. If it's not, it cements the existing bias that people with disabilities cannot perform to the same level as their peers, even though they were never given a fair opportunity to do so.</p>
<h3>Understand the role before hiring</h3>
<p>As head of accessibility at the Department for Work and Pensions (DWP), I had to start from scratch when I was building a team.</p>
<p>I had to write job descriptions, map it to existing capability frameworks, and get sign off from HR (Human Resources) to hire people into roles that had never existed in the department before.</p>
<p>But, you don't need to do that!</p>
<p>There has been a lot of great work in the public sector over the past few years on <a href="https://accessibility.blog.gov.uk/2022/10/25/establishing-accessibility-in-the-ddat-profession/">establishing accessibility specialist as a profession</a>.</p>
<p>Thanks to that work, there is now an <a href="https://ddat-capability-framework.service.gov.uk/accessibility-specialist.html">accessibility specialist DDaT role</a> (Digital Data and Technology), which you can just use. You can do a direct lift-and-shift, or use it as inspiration to tailor the role for your organisation.</p>
<p>If you're looking to hire an accessibility specialist, this is a good place to start. It will help you to understand what the expectations should be from the role and the level you hire at.</p>
<p>Huge props to the following people for making this happen:</p>
<ul>
<li>Beverley Newing, from Ministry of Justice</li>
<li>David Caldwell, from Home Office</li>
<li>Kevin White, from Scottish Government</li>
<li>Andy Black and Jane Dickinson, from Department for Education (DfE)</li>
<li>Christopher J, from Department for Environment, Farming and Rural Affairs (DEFRA),</li>
<li>Wojciech Domanski and Shaun Conner, from His Majesty's Revenue and Customs (HMRC)</li>
</ul>
<h3>Compensate fairly</h3>
<p>Because accessibility specialist is now a DDaT role, it maps directly to the <a href="https://www.ons.gov.uk/aboutus/transparencyandgovernance/freedomofinformationfoi/onscivilservantgradesandsalarybands">Civil Service salary structure</a>. Which is great to get a rough understanding of where you should be aiming.</p>
<p>Public sector salaries tend to be around 15% to 20% less than the private sector, but this is offset by better job stability and an <a href="https://www.civilservicepensionscheme.org.uk/your-pension/managing-your-pension/contribution-rates/">outrageously good pension scheme</a>.</p>
<p>The pension scheme in the Civil Service contributes around 25% to 30%, whereas a good private sector pension contributes around 6% or 7%, so bear that in mind when pitching your salaries.</p>
<p>Each level is mapped to a salary band, and whilst these might have marginal fluctuations based on department and location, they're a pretty accurate figure of what you should expect to be paying.</p>
<p>I've outlined them below, with an adjustment showing a 15% increase for where you should likely be aiming in the private sector.</p>
<h4 class="margin-bottom-!-0">
Junior accessibility specialist:
</h4>
<dl>
<dt>
Government pay grade:
</dt>
<dd>
HEO (Higher Executive Officer)
</dd>
<dt>
Government salary range:
</dt>
<dd>
£31,055 to £38,331
</dd>
<dt>
Salary range + 15%:
</dt>
<dd>
£35,713 to £44,081
</dd>
</dl>
<h4 class="margin-bottom-!-0">
Working level accessibility specialist:
</h4>
<dl>
<dt>
Government pay grade:
</dt>
<dd>
SEO (Senior Executive Officer)
</dd>
<dt>
Government salary range:
</dt>
<dd>
£37,688 to £42,619
</dd>
<dt>
Salary range + 15%:
</dt>
<dd>
£43,341 to £49,012
</dd>
</dl>
<h4 class="margin-bottom-!-0">
Senior accessibility specialist:
</h4>
<dl>
<dt>
Government pay grade:
</dt>
<dd>
Grade 7
</dd>
<dt>
Government salary range:
</dt>
<dd>
£51,055 to £64,373
</dd>
<dt>
Salary range + 15%:
</dt>
<dd>
£58,713 to £74,029
</dd>
</dl>
<h4 class="margin-bottom-!-0">
Accessibility lead:
</h4>
<dl>
<dt>
Government pay grade:
</dt>
<dd>
Grade 6
</dd>
<dt>
Government salary range:
</dt>
<dd>
£61,235 to £72,323
</dd>
<dt>
Salary range + 15%:
</dt>
<dd>
£70,420 to £83,171
</dd>
</dl>
<h3>Tactical vs Strategic hiring</h3>
<p>If you have too many tasks that are spread over too many areas, hiring a full-time unicorn to do it all is not the right solution.</p>
<p>Instead, prioritise the work, and if you can only afford 1 person, look at short term contracts.</p>
<p>Hire a contractor web accessibility specialist for 6 months to sort your website. Then hire a contractor document accessibility specialist for 6 months to sort your documents. And so on.</p>
<p>These tactical solutions are great for when you have a lot of work and not enough headcount.</p>
<p>The downside is that whilst you’re looking at documents, your web accessibility could be regressing because it’s now not being prioritised. So it’s important to be thinking long term, even if the tactical hiring gets you out of the mud for a while.</p>
<h3>Work with a specialist recruiter</h3>
<p>Recently, I’ve met people and noticed organisations that do genuinely care about accessibility and growing teams in the space.</p>
<p>I was recently a guest on <a href="https://www.youtube.com/watch?v=lChvjtGlg5E&list=PLODsMHVsDefvC6HaxJhRkup28384NJvhe&index=4">the Digital Accessibility Podcast</a>, which is run and hosted by <a href="https://www.linkedin.com/in/joeajames/">Joe James</a>, a technical recruitment consultant who specialises in hiring accessibility specialists.</p>
<p>Joe is trying his best to become the go-to consultant in the UK when it comes to sourcing and hiring the best talent in the accessibility industry. He works with some of the largest tech companies and consultancies to help them understand what they need, what their budget should be, and to find the right people for the role.</p>
<p>As well as his podcast, which is shining a light on a lot of the challenges in the industry, he is also putting together a robust salary survey for the accessibility industry and is hoping to bring back a large London based accessibility event, as we lost a lot of these over the pandemic. So keep your ear to the ground for those!</p>
<p>A lot of people recoil at the mention of recruiters because there are so many bad actors in the field. But having got to know Joe, I can honestly say he is genuinely invested in the role and the fight of accessibility professionals.</p>
<p>So, reach out to Joe or other specialist recruiters if you’re not confident in recruiting accessibility specialists on your own.</p>
<h2>Final thoughts</h2>
<p>The road to better recognition and fairer compensation for accessibility professionals is long, but it's a journey we must take.</p>
<p>By understanding the true breadth and depth of accessibility as a profession, adjusting our expectations and valuing these professionals for the specialists they are, we can create a job market that not only attracts but retains the talent needed to make our world more inclusive.</p>
<p>We need to make sure that neurodivergent people and people with disabilities are not pushed out of the industry by rigid certification processes, and we need to create more roles which are realistic and fairly paid. Even if these are tactical shorter term contracts.</p>
<p>It’s better to hire the right person for the right job at a higher rate, than it is to hire the right person for the wrong job and pay them to chase their tail as you slowly crush the life out of them until they leave.</p>
<p>Finally, as always, let's not forget, accessibility is about equality. It's about creating a society where everyone has the same access to products and opportunities. And we can’t do this if nobody understands what work needs to be done, or who is best placed to do it!</p>
<p>As always, I hope this was useful.</p>
<p>Rant over.</p>
<p>Thanks,<br />
Craig</p>
A look at the new WAI-ARIA 1.3 draft2024-02-01T00:00:00Zhttps://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/
<h1>A look at the new WAI-ARIA 1.3 draft</h1>
<p><a href="https://www.w3.org/">W3C, the World Wide Web Consortium</a>, released a <a href="https://w3c.github.io/aria/">new draft of the WAI-ARIA 1.3 specification</a> on 23 January 2024.</p>
<p>If you're not familiar with it, WAI stands for the Web Accessibility Initiative, and ARIA stands for Accessible Rich Internet Applications.</p>
<p>It's a set of standards created to improve the accessibility of the products we build for the web, and it includes details about HTML attributes you can use to make content better for assistive technology. Some common ones you might have come across are <code>aria-label</code>, <code>aria-live</code>, and <code>aria-describedby</code>.</p>
<p>With the new draft of 1.3, we can get a bit of an idea as to what is coming, and how we can prepare for implementing and testing these features.</p>
<h2>What's new in WAI-ARIA 1.3?</h2>
<p>To be honest, I'm not certain. The draft is tech heavy, and W3C have not published a 'what's new in WAI-ARIA 1.3' summary. Or, if they have, I have not been able to find it.</p>
<p>So, I've tried to pick out the changes in the details myself by manually comparing the draft to the existing standard. But, because of this manual approach, It's likely I may have missed something. So, just bear that in mind.</p>
<p>Based on my comparison, this following is what I believe is new in the WAI-ARIA 1.3 draft.</p>
<p>New roles:</p>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/#the-suggestion-role">suggestion</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/#the-comment-role">comment</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/#the-mark-role">mark</a></li>
</ul>
<p>New attributes:</p>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/#aria-description">aria-description</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/#aria-braille-label">aria-braillelabel</a></li>
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/#aria-braille-role-description">aria-brailleroledescription</a></li>
</ul>
<p>Enhancements:</p>
<ul>
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/#aria-details">aria-details</a></li>
</ul>
<h2>Using hacks</h2>
<p>Each update to WAI-ARIA usually replaces a lot of the hacks we do in the code to make things work better for assistive technologies.</p>
<p>In this post, I will show you examples of how the new additions to WAI-ARIA 1.3 will work, vs the hacks I use to achieve a similar outcome today.</p>
<p>If you want to implement some of these hacks, you will need to create a class for visually hidden text. This is text that is not visible to sighted users, but is still available to assistive technology like screen readers.</p>
<p>When making a visually hidden class, you cannot use <code>display:none</code> or <code>visibility:hidden</code>. While these <em>will</em> make the content hidden, it will also hide it from assistive technology, which is not what we want.</p>
<p>The goal is to create a class which hides the content for sighted users, but leaves it available to assistive technology.</p>
<p>For example:</p>
<pre class="language-css"><code class="language-css"><span class="hljs-selector-class">.visually-hidden</span> {<br /> <span class="hljs-attribute">position</span>: absolute;<br /> <span class="hljs-attribute">width</span>: <span class="hljs-number">1px</span>;<br /> <span class="hljs-attribute">height</span>: <span class="hljs-number">1px</span>;<br /> <span class="hljs-attribute">margin</span>: -<span class="hljs-number">1px</span>;<br /> <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;<br /> <span class="hljs-attribute">overflow</span>: hidden;<br /> <span class="hljs-attribute">clip</span>: <span class="hljs-built_in">rect</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);<br /> <span class="hljs-attribute">border</span>: <span class="hljs-number">0</span>;<br /> <span class="hljs-attribute">white-space</span>: nowrap;<br /> <span class="hljs-attribute">background-color</span>: black; <span class="hljs-comment">/* to prevent axe false flags on contrast */</span><br /> <span class="hljs-attribute">color</span>: white; <span class="hljs-comment">/* to prevent axe false flags on contrast */</span><br />}<br /><br /><span class="hljs-selector-class">.visually-hidden</span> <span class="hljs-selector-class">.focusable</span><span class="hljs-selector-pseudo">:active</span>,<br /><span class="hljs-selector-class">.visually-hidden</span> <span class="hljs-selector-class">.focusable</span><span class="hljs-selector-pseudo">:focus</span> {<br /> <span class="hljs-attribute">position</span>: static;<br /> <span class="hljs-attribute">width</span>: auto;<br /> <span class="hljs-attribute">height</span>: auto;<br /> <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;<br /> <span class="hljs-attribute">overflow</span>: visible;<br /> <span class="hljs-attribute">clip</span>: auto;<br /> <span class="hljs-attribute">white-space</span>: normal;<br />}</code></pre>
<h2>Aria roles</h2>
<h3>What are role attributes?</h3>
<p>A role attribute can be implicit or explicit. Every interactive element has an implicit role based on which HTML tag is used, and this will be translated to the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree">accessibility tree</a> when the browser builds the page, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM (Document Object Model)</a>.</p>
<p>Contrary to popular belief, it's the accessibility tree that assistive technology interacts with, not the actual DOM itself. So it's important to make sure elements are assigned the correct role during this translation from DOM to accessibility tree.</p>
<p>For example, a button element has an implicit role of 'button'. You don't need to tell the browser it's a button, it just automatically assumes it is one because of the tag you used.</p>
<p>These two elements will be identical in the DOM and the accessibility tree.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Example button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span>Example button<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
<p>Now, when we give elements an explicit role, we refer to these as <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA roles</a>. This is where we are overriding the HTML role and deliberately assigning it a new one.</p>
<p>If you style an element using CSS to make it look like a different one, and you don't change it's role, the browser will incorrectly translate your intentions to the accessibility tree and it will be broken for assistive technology users.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/some-link"</span>></span><br /> This looks like a button, but is still a link in the <br /> accessibility tree.<br /><span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
<p>So, if you style an element to look like a different one, always change it's ARIA role too. If you don't, you will fail <a href="https://www.w3.org/TR/WCAG22/">the Web Content Accessibility Guidelines (WCAG) 2.2</a> on criterion <a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/%7Bwcagify%7D">4.1.2 Name, Role, Value</a>.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/some-link"</span>></span><br /> This looks like a button, and is now also a button in <br /> the accessibility tree.<br /><span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
<h3>New roles in WAI-ARIA 1.3</h3>
<p>Now that we know a bit about what ARIA roles are, let's look at the new ones proposed in the WAI-ARIA 1.3 draft.</p>
<h4>The suggestion role</h4>
<p>The purpose of <code>role="suggestion"</code> is to signal to assistive technology when a suggestion is being made.</p>
<p>For example, when you make suggestions in a Google Doc, or Microsoft Word, it often styles the text so a sighted user can work out when text is to be inserted or deleted.</p>
<p><img src="https://www.craigabbott.co.uk/posts/a-look-at-the-new-wai-aria-1-3-draft/images/google-doc-suggestion.webp" alt="Text from a Google Doc. It reads "The cat sat on the veranda." The word veranda is crossed out, and the word mat is written alongside it, suggesting that the sentence should instead read: "The cat sat on the mat."" /></p>
<p>With the new suggestion role, you'll be able to highlight these suggestions to assistive technology also. For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> The cat sat on the <br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"suggestion"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"deletion"</span>></span>veranda.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"insertion"</span>></span>mat.<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>Today, if you want to make suggestions accessible, you can use a hack. In this example, the terms deletion and inserted will only be perceivable to screen reader users, because they are visually hidden.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> The cat sat on the <br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden"</span>></span><br /> Suggestion:<br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"deletion"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden"</span>></span><br /> deletion:<br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> veranda.<br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"insertion"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden"</span>></span><br /> insertion:<br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> mat.<br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>You can <a href="https://w3c.github.io/aria/#suggestion">read about the suggestion role in the 1.3 draft</a>.</p>
<h4>The Comment Role</h4>
<p>Almost every article you read online these days has comments, because engagement feeds algorithms, right? But, for screen reader users, sometimes it's difficult to know where the article ends and where the comments start.</p>
<p>The purpose of the comment role, or <code>role=comment</code>, will be to make sure that it's clear to a user when they're reading a comment, and not the body copy of an article or something else entirely.</p>
<p>Having a role of 'comment' will help the screen reader to inform the user of exactly the type of content they're hearing. You will also be able to pair it up with existing attributes like ARIA labelled by, or <code>aria-labelledby</code>, to add additional context, like who wrote it, and when.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">article</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"post-123"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Article title<span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>The body content of the article…<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <br /> <span class="hljs-comment"><!-- Comments section --></span><br /> <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"comment-section-header"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"comment-section-header"</span>></span>Comments<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br /><br /> <span class="hljs-comment"><!-- New comment role --></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"comment"</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"comment-1-header"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"comment-1-header"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>John Doe<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">time</span> <span class="hljs-attr">datetime</span>=<span class="hljs-string">"2024-01-29"</span>></span><br /> January 29, 2024<br /> <span class="hljs-tag"></<span class="hljs-name">time</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">header</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Great article! It really helped me understand <br /> the importance of accessibility.<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><br /> <span class="hljs-comment"><!-- More comments --></span><br /> <span class="hljs-tag"></<span class="hljs-name">section</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">article</span>></span></code></pre>
<p>Again, you can still do this now using a hack. For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-comment"><!-- Comment hack --></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">"comment-1-header"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"comment-1-header"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden"</span>></span><br /> Comment: <br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> John Doe<br /> <span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">time</span> <span class="hljs-attr">datetime</span>=<span class="hljs-string">"2024-01-29"</span>></span><br /> January 29, 2024<br /> <span class="hljs-tag"></<span class="hljs-name">time</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">header</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> Great article! It really helped me understand <br /> the importance of accessibility.<br /> <span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>You can <a href="https://w3c.github.io/aria/#comment">read about the comment role in the 1.3 draft</a>.</p>
<h4>The Mark Role</h4>
<p>Using the mark role, or <code>role=mark</code> will be like a digital highlighter, pointing out important text for reference.</p>
<p>Currently, highlighting is often just done using a mark element (<code><mark></code>), or span element (<code><span></code>), combined with CSS styling. This means the importance of it is missed by assistive technologies.</p>
<p>I expect that if the mark role becomes part of the final version of WAI-ARIA 1.3, then in future the mark element will come to have an implicit role of 'mark'. But, at the moment it's purely decorative.</p>
<p>The following is an example of how you'll be able to use the mark role based on the proposals in the 1.3 draft. I have used it on a span element, just to highlight how we would use it as an explicit change. But, technically, using a mark element with a mark role, or <code><mark role="mark"></code>, would be more semantically correct, it just looks weird in an example, as the role <em>should</em> be implicit at some point.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> In the article, 'Stop trying to recruit unicorns with<br /> acorns', Craig states:<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span><br /> If we wrap a<br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"mark"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"mark-description"</span>></span><br /> rigid education and certification system<br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span> <br /> around a profession which was largely built on the back <br /> of lived experience, we'll lose the a lot of the <br /> expertise and diversity which accessibility is renowned <br /> for.<br /><span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span><br />…<br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mark-description"</span>></span><br /> The IAAP certification process mimics existing rigid <br /> systems in academia which can be blockers for <br /> neurodivergent people.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>Again, we can currently hack this using hidden text.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> In the article, 'Stop trying to recruit unicorns with <br /> acorns', Craig states:<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span><br /> If we wrap a<br /> <span class="hljs-tag"><<span class="hljs-name">mark</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"marked"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"mark-description"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"visually-hidden"</span>></span><br /> Marked text:<br /> <span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> rigid education and certification system<br /> <span class="hljs-tag"></<span class="hljs-name">mark</span>></span> <br /> around a profession which was largely built on the back <br /> of lived experience, we'll lose the a lot of the <br /> expertise and diversity which accessibility is renowned <br /> for.<br /><span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span><br />…<br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mark-description"</span>></span><br /> The IAAP certification process mimics existing rigid <br /> systems in academia which can be blockers for <br /> neurodivergent people.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<p>You can <a href="https://w3c.github.io/aria/#mark">read about the mark role in the 1.3 draft</a>.</p>
<h2>ARIA attributes</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes">ARIA attributes</a> serve a specific purpose for accessibility and are prefixed with the word ARIA. For example: <code>aria-label</code>.</p>
<h3>New ARIA attributes in WAI-ARIA 1.3</h3>
<h4>ARIA Description</h4>
<p>The new <code>aria-description</code> attribute is very closely related to <code>aria-label</code>.</p>
<p>The <code>aria-label</code> attribute is designed to give an accessible name to interactive elements that have not been given one using another method. But, it can only be used on interactive elements, and it's designed to be short and concise.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Play"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">svg</span>></span>…<span class="hljs-tag"></<span class="hljs-name">svg</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
<p>With <code>aria-description</code>, we will be able to offer more space for additional context for <em>any</em> element, not just interactive ones.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span><br /> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Play"</span><br /> <span class="hljs-attr">aria-description</span>=<span class="hljs-string">"Video: Exploring the new WAI-ARIA 1.3 draft"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">svg</span>></span>…<span class="hljs-tag"></<span class="hljs-name">svg</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
<p>Using it on non-interactive elements could be useful to add additional context to things like images.</p>
<p>The <code>alt</code> attribute should always be used to describe the image in its context, or what it represents. But an <code>aria-description</code> could provide some additional narrative, or a more detailed description for those users that want it.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"craig-headshot.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"<br /> A portrait of a middle aged white man. <br /> He has a shaved head and a short black beard. <br /> He is wearing black glasses and a black baseball cap."</span><br /> <span class="hljs-attr">aria-description</span>=<span class="hljs-string">"<br /> Craig is a Design Lead and Accessibility Specialist.<br /> He is known for his work as the Head of Accessibility, <br /> at the Department for Work and Pensions."</span><br />></span></code></pre>
<p>However, it is worth noting that this additional information could also be useful to sighted users. So using a caption tag (<code><caption></code>) might be better for this example, but it just highlights how the new <code>aria-description</code> attribute might be useful.</p>
<p>Here is another example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">img</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"warning-icon.jpg"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"<br /> Warning!"</span><br /> <span class="hljs-attr">aria-description</span>=<span class="hljs-string">"<br /> A solid triangle containing an exclamation mark."</span><br />></span></code></pre>
<p>These examples are for illustrative purposes. I've written an in-depth post on <a href="https://www.craigabbott.co.uk/blog/how-to-write-good-alt-text-for-screen-readers/">how to write good alt text for screen readers</a> for better, real-world examples.</p>
<p>You can <a href="https://w3c.github.io/aria/#aria-description">read about the ARIA description attribute in the 1.3 draft</a>.</p>
<h4>ARIA Braille Label</h4>
<p>The new ARIA Braille label, or <code>aria-braillelabel</code> attribute, is going to be a game-changer for Braille display users when dealing with un-familiar interactive elements.</p>
<p>At the moment, Braille readers rely solely on attempting to translate labels and other attributes. And, currently, there isn't really a way to override instances which are not providing a good experience without also affecting either how it looks on the screen to sighted users, or how it's read out to screen reader users.</p>
<p>Also, as a bi-product of trying to make the web more accessible, we often add additional context for screen readers. But, this can make it difficult for Braille users, where being concise is important as Braille keyboards only have a limited amount of dots and physical space.</p>
<p>This new attribute should allow us to provide more context for screen readers, whilst simultaneously keeping it shortened for Braille keyboards.</p>
<p>The ARIA Braille label attribute is closely related to the ARIA label attribute, and should not be used without it. Think of it as an extension of <code>aria-label</code> rather than a standalone attribute.</p>
<p>In the following example, imagine you have a reset button on an application form, you could offer a visual icon for sighted users, additional context in the label for screen reader users, and a more concise option for Braille users.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">button</span><br /> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Reset application form"</span><br /> <span class="hljs-attr">aria-braillelabel</span>=<span class="hljs-string">"Reset"</span><br />></span><br /> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"reset-icon.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
<p>I'm not aware of any hacks you can currently use to achieve the same outcome for Braille readers, which is why this one should be really useful!</p>
<p>You can <a href="https://w3c.github.io/aria/#aria-braillelabel">read about the ARIA braille label attribute in the 1.3 draft</a>.</p>
<h4>ARIA Braille Role Description</h4>
<p>As you can probably guess, the ARIA Braille role description, or <code>aria-brailleroledescription</code> attribute, provides a description about the role of the component for Braille readers.</p>
<p>We already have ARIA role description, or <code>aria-roledescription</code>, which allows you to define custom WAI-ARIA roles for heavily customised interactive elements.</p>
<p>Like the previous example, the new ARIA Braille role attribute is closely related to the ARIA role description attribute, and should not be used without it. Again,think of it as an extension rather than a standalone attribute.</p>
<p>Imagine you created a custom button to play or pause a video about the new WAI-ARIA 1.3 draft. Giving it a role description of 'Video Control' lets assistive technologies know that, not only is this a button, it also directly controls a video. For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span><br /> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span><br /> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Play or Pause: WAI-ARIA 1.3 draft"</span><br /> <span class="hljs-attr">aria-roledescription</span>=<span class="hljs-string">"Video Control"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">img</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"play-pause.png"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Right arrow icon"</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>The new ARIA Braille role description attribute should only be used when you need to provide a more concise description for Braille keyboards, which is different to the regular ARIA description.</p>
<p>The following example is convoluted. Personally I think you could do a better job by using native elements and better content design. But, hopefully it will provide enough context to make the concept understandable.</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">div</span><br /> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span><br /> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Play or Pause: WAI-ARIA 1.3 draft"</span><br /> <span class="hljs-attr">aria-roledescription</span>=<span class="hljs-string">"Video Control"</span><br /> <span class="hljs-attr">aria-braillelabel</span>=<span class="hljs-string">"Play/Pause"</span><br /> <span class="hljs-attr">aria-brailleroledescription</span>=<span class="hljs-string">"Video"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">img</span><br /> <span class="hljs-attr">src</span>=<span class="hljs-string">"play-pause.png"</span><br /> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Right arrow icon"</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
<p>Here's a short explanation of what this is doing:</p>
<ol>
<li>I gave the div element a role of 'button' so that it is logged as a button in the accessibility tree. A native button tag would be better.</li>
<li>The ARIA label of 'Play or Pause Video: WAI-ARIA 1.3 draft' means a screen reader can announce in detail what the button is for. Without this, a screen reader would read out 'Right arrow icon', which is terrible.</li>
<li>The ARIA role description provides additional context, that this controls a video.</li>
<li>The ARIA Braille label is 'Play/Pause', as a more concise version of the ARIA label, but for Braille readers only.</li>
<li>Finally, the ARIA Braille role description of 'Video' provides a more concise version of the ARIA role description for Braille readers only, indicating concisely, this controls a video.</li>
</ol>
<p>Again, I'm not aware of any hacks you can currently use to achieve the same outcome for Braille readers.</p>
<p>You can <a href="https://w3c.github.io/aria/#aria-brailleroledescription">read about the ARIA braille role description attribute in the 1.3 draft</a>.</p>
<h3>Enhancements to Existing Attributes</h3>
<h4>ARIA Details</h4>
<p>We've had <code>aria-details</code> since WAI-ARIA 1.1. It's useful to combat those awful 'read more' and 'more details' links.</p>
<p>But, currently, <code>aria-details</code> can only reference a single <code>id</code>. So you are limited as to how much context you can add to a link. For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> The number of children reported to have a disability <br /> has risen 2%, from 6% to 8% in the last 10 years.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"more-details"</span>></span><br /> My detailed analysis offers a more in depth look at <br /> the rising disability statistics in the UK, over <br /> multiple age ranges.<br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">a</span><br /> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.craigabbott.co.uk/blog/rising-disability-statistics/"</span> <br /> <span class="hljs-attr">aria-details</span>=<span class="hljs-string">"more-details"</span>></span><br /> Read more<br /><span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
<p>What the 1.3 draft is proposing, is that you could pass in multiple <code>id</code> attributes, to provide multiple layers of context.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> The number of children reported to have a disability has <br /> risen 2%, from 6% to 8% in the last 10 years.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"age-analysis"</span>></span><br /> An age-wise breakdown shows significant variations in <br /> the increase across different age groups.<br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"regional-analysis"</span>></span><br /> Regional analysis highlights certain areas with more <br /> pronounced increases than others.<br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"support-services"</span>></span><br /> The impact on support services and educational facilities <br /> has also been notable, with certain services experiencing <br /> higher demand.<br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">a</span><br /> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.craigabbott.co.uk/blog/rising-disability-statistics/"</span> <br /> <span class="hljs-attr">aria-details</span>=<span class="hljs-string">"age-analysis regional-analysis support-services"</span>></span><br /> Read more<br /><span class="hljs-tag"></<span class="hljs-name">a</span>></span><br /></code></pre>
<p>Personally, I'd rather just set the context in the paragraph and make the link more descriptive, like in the following example. By doing this, I'd avoid the need for these complex ARIA relationships, but, there might be instances where this approach is useful.</p>
<p>For example:</p>
<pre class="language-html"><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> The number of children reported to have a disability <br /> has risen 2%, from 6% to 8% in the last 10 years. <br /> An age-wise breakdown shows significant variations <br /> in the increase across different age groups, and <br /> regional analysis highlights certain areas with <br /> more pronounced increases than others.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> The impact on support services and educational facilities <br /> has also been notable, with certain services experiencing <br /> higher demand.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span>></span><br /> You can <br /> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.craigabbott.co.uk/blog/rising-disability-statistics/"</span>></span><br /> read in-depth about rising disability statistics <br /> <span class="hljs-tag"></<span class="hljs-name">a</span>></span>.<br /><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
<h2>A Word of Caution</h2>
<p>With every release, ARIA is getting better and providing more and more functionality. But, there are a few things to think about before you start just adding ARIA attributes everywhere.</p>
<p>As promising as these features are, remember that the WAI ARIA 1.3 is still a draft. It's subject to revisions and changes. While it's exciting to anticipate these advancements, we need to exercise patience before jumping onto the bandwagon.</p>
<p>The adoption of these features by browsers and assistive technologies won't happen overnight. It's a gradual process. Browsers and assistive technologies might ignore these new attributes for months, or even years after the release of WAI-ARIA 1.3.</p>
<p>Also, some people will never have access to these new features. With the likes of Dragon and JAWS, they have an old world view on licensing. The version you buy is the version you own, there are no free updates. So, at almost £1,000 each, a lot of people simply cannot afford to upgrade to access new features.</p>
<h2>Final thoughts</h2>
<p>There's a saying in the accessibility industry, and that's 'the first rule of ARIA is, do not use ARIA'. Or, at least, we should try not to wherever possible.</p>
<p>The WAI-ARIA 1.3 draft shows some exciting new features, but they won't be widely supported for a long time, and there will always be those people who never have access to them because they can't afford to update their assistive technology.</p>
<p>ARIA is great, and it definitely has its uses for complex components. But, it is overused and even abused at times.</p>
<p>We should use simple, native elements wherever possible, and only resort to using ARIA sparingly when there is literally no alternative, as 9 times out of 10, you can make things more accessible just by using the correct elements and roles, and by being smarter about the way you word your content.</p>
<p>As always, I hope this was helpful. It was nice to write an article that isn't a rant for a change!</p>
<p>Thanks,<br />
Craig</p>