All above combined

Welcome to content. This is all about writing and making sure you have your content in a way that is understandable and easy to read for everyone.

and we're going to go into some of the specificities here.

And yeah, it's mostly like me telling you what to do,

but you can like with that knowledge go to and see if you find any particular examples

that are interesting to you or where you say like, oh, this is well done or this needs work.

Yeah, it's more like a recognizing thing.

And most of the things here are best practices.

I think that's very important to understand.

But they can really make the difference between something that makes a website accessible and breaks the accessibility.

Because how something is written, microcopy, macrocopy, that's all super important.

All right.

But the C in WCAG stands already for content.

Yeah, that's true.

So in the nomenclature from W3C, content is everything what is inside of the browser.

So including all of the Chrome, the navigation, all of that, that's all content.

And so now we're talking about the content inside of the content.

So the actual articles, how buttons are labeled, stuff like that, and what wording you use.

So this is not about the specific way content is used in WCAG.

It's more about the general concept of what is written on the page.

And this is really important to know.

Let's go into some of the success criteria that we have in WCAG.

And I have to say, these types of success criteria are really rarely failed.

because they are often a little bit squishy.

And so you get into these like, oh, is this really an issue when you do an actual review?

You know, does this pass your threshold of being accessible enough?

And in these cases, often it is the case that you go like, yeah, it's probably OK.

But sometimes it is not.

Let's go to the first success criteria that is actually very testable and that is, I wouldn't say it's often marked as a failure, but it does come up.

And that success criterion is 1.3.3 sensory characteristics.

And it basically says instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation or sound.

And basically what they want to avoid is to say click the green button or enter your content to the field on the right.

Because if you're using a screen reader, you don't know what color a button is and you don't care.

And you also don't know where the form field is on the page, if that's on the left or on the right.

So you don't want to rely on that.

I mean, you can do things like enter your name into the name field on the right side of the page.

Then that would be clear because you also include the label or name of the field in there as well.

There are a couple of examples that I borrowed from the W3C website.

This one is using color to convey meaning.

So in this case, it is required fields are in red.

And of course, if you can't see the color or you're colorblind, then you don't know which one of the fields has the red color in it.

And so to make it better, you can say required fields are red and marked with an asterisk.

And then, you know, that's at least more clear.

still the best practice would be to use parentheses required in the field name. And this is also, by the way, a violation of success criteria in 1.4.1, use of color. So these are often overlapping, especially if you're into color. But here the fail is explicitly like pointing at the field.

So 1.4.1 would more be like there is color involved to make this distinction.

And then the success criteria 1.3.3, that is basically that you are referring to the color in this explainer text.

So it's a little bit different in terms of what you're failing.

But basically, if you see something like this, you just fail both of them.

You don't want to use text like this to go to the next page, press the button on the right,

or to go to the previous page, press the button to the left.

Nobody knows where that is if they're not a visual user.

So that's not good.

So you want to say press the previous button or press the next button.

And that also helps people with speech input because it's clear with what they need to say.

Also, you shouldn't do something like please see the sidebar to the left of the illustration for links to additional information because you can't know if a user sees it on the left side.

And this actually brought a lot of problems for people who used websites and then remodeled them for responsive design because out of the sudden your content was linearized and what was on the left of the illustration was underneath the illustration or before the illustration and they had to like reconsider that.

So the best way to address that is to have like a little text or a heading in front of this, like additional links.

And then, you know, it's much clearer what belongs where.

You also don't want to do stuff like this.

Press the square button to exit the survey without saving.

Press the triangle button to save in-progress survey results.

You may return later to complete the survey and press the round button to submit the survey results.

Like this is like you're relying on the shape of those buttons.

And if you had like a PS PlayStation controller, referring to button shapes can be quite tough, you know, because they don't have like labels like A and B and stuff like that.

So, yeah, I think it's a little bit more cumbersome that way.

So you want to avoid doing that on your website for sure.

And you don't want to use color alone here again, which is the right angle triangle is the question.

And then you have like green, blue, red, yellow and don't know.

and in the good version on the right they have actually also numbered the triangle so you can

make your decision pretty quickly and easily and you don't have to like guess what the colors are

because that's that's always bad so never never rely on colors

Unusual words. A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.

So this is this is that's the long row. Well, it's not that long. It's like four or five things.

But the row of triple A success criteria.

So this is basically if you have a word or phrase that is unusual or restricted, then you want to explain that somehow.

And that can be like a click to expand type of interaction or you can link to glossary.

And that is also in the understanding document what WCAG proposes.

Either you have a site-wide general glossary, which you can link to, or you have a glossary on the page where you link to.

But it's important to explain those texts, these words.

And as the example, they have the example that WCAG 2 uses the word text in a very specific way.

And so you need the definition provided because you can't, you know, the general, what everyone is thinking of text is not necessarily what WCAG 2 thinks of text, which is, yeah, it's a challenge.

like especially in technical documents, you often run into these types of situations.

Abbreviations, also AAA, a mechanism for identifying the expanded form or meaning of

abbreviations is available.

This is super important.

Nobody knows what SC or WCAG is.

So whenever you introduce those new concepts, new words, new abbreviations, you just have

to make sure that everyone can get to them.

I think having this as a triple A is a little bit high maybe.

I think this might be a good double A success criterion, especially if you keep to what most people do to meet this,

is that when they introduce the abbreviation for the first time, they also write what it means on the page, like in this example.

So the article introduces the web content accessibility guidelines in brackets WCAG, and then you can go from there.

So that's an easy way, and this should be the minimum you're doing.

You can't just expect that people know what your abbreviations mean.

Reading level is also a AAA success criterion, 3.1.5.

And this is one that is pretty hard to hit because it's very much focused on the American-like school system to test.

So the text of success criterion is when text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content or a version that does not require reading ability more advanced than the lower secondary education level is available.

So I think this is already hard to read.

So basically what they want you to use is relatively simple language, not going to like things that, you know, you need a higher education level for.

So to make it available to people who have like lower reading abilities.

And I think that's actually a great idea.

And they probably should do that in the success criterion too.

There are only a couple, like a handful of websites that meet this because it's AAA success criterion.

And most provide a summary for the page.

So on every page, you have like a little one paragraph text that summarizes what the article is about.

And then, you know, when you have like a lower level of reading skills, you can just read the summary and then you know if it is even time to, if it is a good investment to invest the time to read it or get help or, you know, rewrite it.

This will be super interesting with things like AI summarization, which, you know, because those are language models, that might actually be something that they might be reasonably good at.

So, you know, you get like a long article and then you say like, hey, give me a summary on this, like in, I don't know, 300 characters.

And then you get like the summary of that text.

And that's pretty, pretty neat.

One website that does that is Leni Feingold's website.

She's a human rights attorney from the United States.

On every web page, she has this on-this-page box that basically summarizes in easy-to-understand language what's going on on the page.

So in this case, this is an article about the law in the United States in July 2022.

The Department of Justice said it will write new regulations next year.

about making certain websites accessible to disabled people.

So you get this really simple, you know, it's not like a lot of jargon in those texts.

I probably myself would add the DOJ, which is Department of Justice in the US,

probably would put that into brackets here in the first mention.

But it's like, yeah, it makes sense that this is the same thing.

But that's just like the minimal changes that you can do to make something more or less accessible in those cases.

Pronunciation is something that you also can or should provide.

So a mechanism is available for identifying specific pronunciation of words where meaning of the words in context is ambiguous without knowing the pronunciation.

So this is important in this AAA success criterion, 3.1.6 pronunciation.

This is only for when there is ambiguity on how to pronounce something.

So if it doesn't matter how it's pronounced, there's no need to add that even on AAA.

And it also takes the context into account.

So I think this is very hard to actually not meet in most circumstances.

So that's just my personal thing.

I've never seen this implemented anywhere.

One of the examples that we have seen for pronunciation is the LinkedIn example where you have a pronunciation icon basically for the names.

So I can upload me saying my name and then, you know, people who look at my profile can click on it and get the right pronunciation.

And this is one way to solve this.

In addition to like having the pronunciation in a notation that you can read, like the phonetic writing that you can use.

So this is a good alternative to that, just having a recording available, especially for things like names, which everyone says differently.

Here's some more advice on well-written content.

And we talked about some of these already in other contexts, so this basically brings this all back around.

There's also a little bit of a summary over the last couple of weeks.

so start directly with informative and unique page titles they are important for making sure

that everyone can navigate properly know where they are and get that done and this is especially

for writers important when you say like hey you are responsible for creating article titles and

page titles, then they need to know that they want it to be concise, that they want it to be

specific. And if you have a step-by-step thing, you might want to include the step number where

you are in the page title as well. Headings for structure. We talked about headings a lot,

But this is more from a content writing pattern.

There's also 2.4.10 section headings, which basically says sections of text, AAA criterion, which basically says sections of text need to be summarized in headings.

So, yeah, this is like much more strict than headings and labels.

But I think it's a good practice to make sure that whenever you have a new thought or new advice, you have a heading.

And that also makes it clearer visually in the structure of your article.

So if you have just a plain text, everything looks the same.

You don't get any like scannability or even summary of the content on the page.

Like here on the left, we have only paragraphs.

So it's like, okay, we have headings and subheadings, but I don't know what else is inside of this article.

And then on the right, we have the good example or the better example, which basically says like, oh, yeah, there are headings and subheadings.

But there's a purpose of headings in there.

headings levels in there, and then there's another H2 meaning versus formatting. So you get these

like, oh, you know, I can just scan it and see what is relevant to me. Meaningful links is one

of the success criteria that we often see violated. And especially if you have things like read more

links, they can often be on the verge of not being descriptive enough, meaningful enough for that

link. So there are two success criteria. The first one is 2.4.4 link purpose and context,

which basically aims at making sure that if you have a link inside of a paragraph,

if you read the whole paragraph and the link, it makes sense where that link goes. And then there

is 2.4.9, which is link purpose link only. And that would be if you are removing the paragraph

around the link. For example, as a screen reader user, you have a list of links.

You still know where that link goes exactly. Yeah, and that's a AAA success criteria.

So the important thing is in the context that you know what's going on. And

And the thing that you usually want to do is you want to make your links as descriptable as possible.

So this is the good and bad example.

So on the left side, you have for more information on device independence, click here.

And the click here is the link text.

And yeah, in context, this still makes sense.

You know, you know where this is going.

But if you have it out of context, then you have read more about device independence and

you link about device independence.

And that works for everyone.

And I would highly encourage you to go the more descriptive link route.

Not only has it accessibility and usability benefits, it's also better for like search

engine stuff I think and it is just it makes everyone's life so much easier so whenever you can

get away from like linking read more or click here or something like that it's always a win

for everybody we talked a lot about alternative text and I don't want to to belabor this for long

But just as a reminder, yeah, this is also a content creator thing that they need to think about.

Like, what's the right alternative text for this item?

And as the example, I like this example from W3C, which is basically like, oh, you know, charging phone on the left as the alternative text.

and the image actually shows the cable from being plugged in to the bottom of the phone

so it's pretty clear that it's not like charging phone is not really the equivalent to this

to this image and the right one the informative alternative text is plug cable into the bottom

edge of the phone, which makes a lot more sense and also gives you more of a spatial awareness

if you can't see the image. Clear, concise content. I like this example from W3C.

So on the left, you have this block of text where you need to really parse the individual

sections of the sentence and of the paragraph to understand what's going on. And this is for like

a claim after an accident. And on the right, you have like a short introduction, and then you have

like the four outcomes as a list. And then you have in addition, a small like graphic that says

like, okay, this can happen. And it's like, yeah, this makes a lot of sense for this type of

content that it's like very simple, very direct, and helps to make this better.

Let's talk about additional COGA info. And what I mean by COGA is the Cognitive and Learning

Disabilities Task Force from W3C. COGA is important because these are users with cognitive and

learning disabilities and they are not very well represented in what WCAG 2 does. And this has been

a long time like contentious thing. So now we're getting these things called supplemental guidance

and this supplemental guidance basically adds to WCAG in terms of like, oh, what else can you do

to address the needs of people who have cognitive disabilities or who have a learning disability.

And this is like, it's super important stuff.

Like the supplemental guidance has a lot of interesting things on it.

I don't think everything is like super relevant for this discussion today.

But, you know, if you want to extend beyond WCAG in terms of best practices, this is a great way to say like, OK, from the actual testable criteria, what else can we do?

And I've picked some examples here from those supplemental guidance documents.

First one is make each step clear.

So if you have a step-by-step process, you might want to introduce breadcrumbs.

You might want to have headings that say like, okay, this is the first thing you need to do.

This is the second thing you need to do.

This is the third thing you need to do.

And as the third example, they have a how I get here button that basically tells then the user, oh, you've been at this page and that page.

And this is why you are here now, which can be useful.

I've never seen that implemented on a website, but I would like it.

The second design principle is make it easy to find the most important tasks and features.

And this is something that often people do automatically or think they are doing automatically on their websites

because they have like intro banners and other things that they want users to click on.

And it's usually good for the business, right, to have those kinds of tasks, because that's,

you know, usually what you want people to click on and do.

So the key tasks, you always should put them on the homepage, should use callout boxes for those features and give them an important visual weight.

You want to keep them on the top of the page so you can find them quickly and don't need to scroll.

And you want to use headings and maybe even include them into the top navigation, like top level navigation, if they are so important.

And this is like where you need to come in and do your user testing and your user interviews and say like, hey, what did you want to do and what was the way that you went through the page?

What is the task?

And then say like, yeah, okay, how can we surface this earlier?

How can we make your journey easier to get this task done?

Because obviously, if you have a cognitive disability or if you're just like a stressed parent or something like that, you always have a limited time to do these kinds of interactions.

And if you can't do it in that time window that you have, that might only be like 15 minutes because you feel exhausted or you don't have the time or headspace for that after that.

That can really make the difference between getting a task done or not getting it done.

So making important stuff visible and obvious is super needed.

Break media into chunks.

So if you have long media segments, you want to make sure that you have them in a logical, short, labeled, easy to identify, and easily jump to order.

and you can jump around.

Like we split these recordings up exactly for that reason.

So you have an easier way to get around and find what you're looking for.

Next one is use clear words.

Clear words are super important.

And you have to make sure to really limit yourself to the most common words, especially if you are trying to reach a broad audience.

So in general, if people have a severe language impairment, then you want to concentrate on the 1500 most common words and phrases.

And sometimes you need to get around it and explain something that is more complex.

But you then have to explain it in those simple terms or clearer terms.

You want, in that same vein, you want to remove unnecessary or vague words.

This is especially important for people with ADHD or who have other cognitive disabilities who take things very literally.

You know, you might, if it says like, oh, bring your passport and other documents, they might, rightly so, I might add, say like, oh, what are those other documents?

And if that's not in there, you know, it creates a barrier for doing what needs to be done.

You want to remove or explain uncommon acronyms, abbreviations, and jargon.

We already talked about that.

It's super important.

And you for sure should be doing that.

You should not invent new words or give words new meanings in your application.

Yeah, that's good advice.

I wish, you know, the accessibility people would do this sometimes.

Speaking of redefining what text means.

Then you want to use simple tense and voice.

You don't want to go into too many details and using tenses that are uncommon.

So use something like, your stock went up last month.

And don't do something like, over the last month we saw your stock increasing.

You know, it's like, this is more complicated than it needs to be.

So just make it simple, make it present tense if it's in the present.

And don't put too much complication into it.

In a similar vein, next one, avoid double negatives or nested clauses.

Especially when writing English, it's so easy to do, like having those double negatives in there or having like super long sentences with commas and conjunctions.

It's something that English likes to do a lot.

I think, well, I don't know about Swedish, but in German you have more often you have like these more simple sentences.

And I think that's actually quite good.

So try to avoid the double negatives and nested clauses.

So don't write something like, do not write unclearly.

I don't know who would say something like that.

Like, write clearly is just better.

So time is not unlimited.

Okay, I can see that in like something like a game show.

You have like, time is not unlimited.

Get, you know, get going.

But in reality, you want to say time is limited.

You're done.

It's so easy.

And then like the long sentences, something like usually clauses will be separated by two commas, one before and after, or the word or, or the word and.

So you could replace the sentence with a list of options or even more than one paragraph.

Yeah.

Just rip them apart.

Say, usually clauses will be separated by two commas, full stop.

One comma before and one after the word, full stop.

You know, and so on and so forth.

So you want to just slice and dice those sentences because they are terrible to read and terrible to understand.

You also want to avoid literal language.

So this is basically like the inverse of the, oh, you don't want to make it too general.

But some people want or some people take everything very literally.

And so you want to make sure that they can understand what you're saying.

So, for example, avoid something like, if you are experiencing cold feet before starting, take a deep breath and jump in.

So in this case, what does cold feet mean? What does deep breath and jumping in mean?

That's like, okay, these are metaphors and some people have a harder time understanding those metaphors.

and can also be different when you come from different like social societal or linguistic

backgrounds you know something that is an easy thing for me to understand might not be an easy

thing for other people to understand so you want to be as literal as possible I guess

as as descriptive as possible so in this case they use as an alternative if you are experiencing

anxiety disorders before starting take a deep breath tell yourself you can do it and get started

anxiety can include nervousness fear dizziness or shortness of breath which i think i think this is

way too long for what it tries to do but uh you know it's a good effort so um yeah so i would

probably say something like, if you feel anxious before starting, you know, take a deep breath and

tell yourself that you can do it and then get started. So that's what I would do. I would not

be too specific here because you want to balance that, right? This is like the big challenge of

these types of guidance is that you need and you must balance it with the other things like

simple language and keeping stuff succinct. Talking of, keep text succinct. That's the

other design principle here. So you want to keep paragraphs short. You want only to have one topic

in each paragraph. You try to have the aim, so the central point of the paragraph,

at the beginning. So always front load. If you can, you want to use short sentences and have

only one point per sentence. You want to use a bulleted or numbered list. And you want to have

short descriptive headings. So, you know, keeping it tight, tight. That's the important thing here.

Then you want to use clear, unambiguous formatting and punctuation. So you want to, you know,

use your language and make sure that that is proper in your content. You want to use punctuation

that is correct for the language that you're writing in. So if you have different ways to have

like quotes, you want to make sure that you reflect that. And you want to avoid the use of

Roman numerals, because they can, you know, they are just hard to read. So you also want to provide

a summary of long documents and media to users. And that means providing a text summary, as we

have talked about before, that can be understood by people with a lower secondary education level.

but also reading ability of course but also just catering to people who have not an attention span

that is too long so keeping things short into and summarizing it into summarizations that's

super useful and you always want to include the main points from the content in the summary

So basically going through the summary should give them all the information, at least all the key information that is in the full text or in the full medium.

If you have something that has instructions, make sure to include all the steps, including the obvious ones.

Use numbers and lists to make sure that, OK, this is how this goes.

You want to provide complex instructions in an if-then table.

So that is basically you have on the left, if this happens, then on the right that happens.

And then you have other ifs and thens.

And that can be useful for things like medicine information where you have like symptoms and then how to remediate them and stuff like that.

And you want to use graphics as visual aid.

And if you want to really have a good look into how to best do some of these things, look at an IKEA building instruction, look at a Lego building instruction.

They really have that nailed down.

And it's always interesting to compare them to other things that have instructions.

Because, I mean, as much as IKEA is a furniture company and LEGO is a brick company, they are also instruction companies.

like you know 99% of their work I guess goes into like honing and making those instructions better

and that's really a lot of good stuff going on there. Then you want to use whitespace.

Whitespace is the space between objects and text including boxes, paragraph headings and content

so that each section is clearly separated. And we have seen that with the headings, you want to have

space around that, a little bit more space at the top, a little bit less space at the bottom, so

that it's clear what belongs together. So that's what white space can do. And it's a super important

visual concept that you should adhere to.

Then in some circumstances, it might be needed to explain implied content. Implied content includes

things that are graphics that when used alone, identifies that something is important or should

be remembered. Or it can be something like sarcasm in text. So sometimes on Twitter,

have the little slash S behind the tweet. So you know that sarcasm and that can be useful because

some people have a hard time telling sarcasm and non-sarcasm apart. Then you want to use animations

to add importance or communicate something contrary to the literal meaning of the paired

text. So if you have, you know, text and then you counteract that with an image or with a

description, then you want to make sure that that's available to people.

Then there's provide alternatives for numerical concepts. And that's basically just making sure

that you have non-numerical concepts when you are describing something. So for example,

If it is 20 degrees Celsius, we all know that that's actually quite mild, nice weather.

But, you know, you can't just imply that.

Some people have, because of things like dyscalculia, they have, which is basically the same thing as dyslexia,

But for numbers, they can't as easy make the connection between a number and a feeling like hot, cold, warm and stuff like that.

So that's why you usually get like a little icon next to the temperature that defines if something is warm or if this weather is good.

So in this case, you want to say like, hey, it's a mild 20 degrees and you're done.

And then we come to the last and probably most ironic of these design principles.

And it's avoid too much content.

And there's that description, which I will try to summarize as best as I can.

So they want you to avoid long paragraphs, lots of choices and non-meaningful imagery.

Because that ensures those with cognitive and learning disabilities can not concentrate on the important points being made.

So basically make it as bare bones and not overwhelming.

So short bullet points, again, limiting to one or two images related to the main subject area.

And just, you know, being sure that it's easy to digest what's on the page.

And this obviously is for unnecessary information.

So not asking you to add too much flourish and distraction to it.

And it's important to know that too much information or instruction can be just as much of a hindrance as too little.

So you really want to strike a good balance there and do user testing with your content.

And to get into the best practice, what's right for you and for the content that you provide.

And the goal is, as they say, to make certain that enough information is provided without undue confusion or navigation, which, you know, that makes a lot of sense.

So basically reduce the content that you put out there, but make it very good because then everyone benefits from it.

Thank you.