I am indeed Sasha Endo.
I use they them pronouns, and I'mthe founder of Endo Collaborative.
I don't think I need to repeatwhat you just said about the
fact that we make accessible.
Performant and, uh, engagingwebsites for nonprofits, uh, for
progressive organizations and,uh, purpose-driven businesses.
But I repeated it anyway becausethat might be helpful for folks who
will be watching this elsewhere.
Um, I've had my hand in basicallyevery piece of the website
making sausage as it were.
Um, and the thing that wealways come upon is that.
We can do our best as designers anddevelopers to make an accessible
website, but ultimately maintainingthat accessibility is up to the
content managers for the durationof that website's, uh, lifetime.
So this is a variation of thetalk that I give to our clients,
uh, so they can do that easily.
Because accessibility does kindof sound scary to a lot of people.
It can feel overwhelming,and from a content management
perspective, it doesn't have to be.
There's probably a lot of things thatyou're doing already that are making
your content a lot more accessible.
Uh, and there might be some things that,but just a little bit of training you will
be perfectly capable of doing as well.
So the things we're gonna talkabout today are structuring your
content, writing it, formatting it.
What accessible links, uh, look like,how to make them accessible, how to
make images and media accessible.
And if we have time, alittle bit about design.
Not so much like UI design, butreally design that you as a content
manager might be engaged in.
If you would like to follow along withsome of the demos I'll be doing, you can
fire up your computer, go to a page on.
A website that you manage and maybeuse that as a, um, an experimental area
for you to, um, to try these things.
If not, there's also the WordPressplayground, which I'll be using
for demoing, uh, some of thesefeatures and functionalities.
It just basically spins up a blank ishversion of WordPress, um, where you
can explore functionalities withoutit being public, without it being on a
website that maybe, uh, you don't wantpeople to see your experimentations on.
Um, does anyone want to see that?
You are a little bit longeror are we good to go?
Yes.
I pulled it up on my phone.
It says it's been suspended.
That is unlikely, but net it is T net.
Oh yeah.
Good.
Thanks for suggesting that.
I promise suspended.
Good to know.
No.
Okay.
I think we're probably good to go.
Great.
All right, so we're still gonnastart with the structuring content
piece, and the first thing we'regonna talk about are headings.
So, um, instructional, HTML.
So that's the code piece.
There is, uh, headings one throughheading six that actually make up the
structure or the outline of your page.
Kind of like, uh, when you're writingan essay for school, you're gonna
have your headings that are really anoutline of that essay, or you can also
think about it as a table of contents.
And the reason why.
Thinking about it as a table ofcontents might be helpful is because
someone who's accessing your websiteusing, um, assistive technology,
like a screen reader, can actuallynavigate a page using headings alone.
And that makes sense.
You don't necessarily want to readthe whole page, uh, word by word
until you know that what's on there isrelevant to what you're looking for.
And then maybe zoom into that specificsection and uh, and learn more.
So the thing to do hereis you don't want to skip.
Uh, levels.
So the levels are Hone is your page title.
H two is going to be for yoursections within that title.
Uh, within that page, H three is goingto be for subsections, H four sub
subsections, and so on and so forth.
We don't really see, uh, headings fiveand six used very often, and that's okay.
That means you probably have avery complex page and at that point
you might wanna break it into.
Further pages.
Um, but skipping levels makes itdifficult to understand the structure
of your page from that bird's eye view.
Um, so you don't want to do that.
Sometimes it happens because a contentmanager is really trying to use,
um, the tool to his best ability.
So maybe you have some.
Text you really wanna highlight visually,and you know that a heading of a certain
level is gonna give you that formatting.
So you're gonna use the heading blockrather than using actually just styling
tools that exist within WordPress.
Kudos, you found a shortcut, but itactually alters the structure of your
document, which makes it less accessible.
Another thing that's great abouta lot of these recommendations,
it's also good for SEO so you,uh, keeping the structure clear.
Is good for search engines 'causethey, they understand what's going
on on your page a lot better.
So to show you something reallycool that WordPress has, I'm
gonna go to edit this page.
Great.
And if we head over tothe document overview.
Okay, probably everyone'sfamiliar with the list view.
This is where the blocksare that make up your page.
But the outline is extra superhelpful 'cause there's the outline
of your page using just the headingsand you can get a really good
idea of, uh, is it well organized?
Does it make sense?
Are there things in therethat shouldn't be headaches?
And just to show you also onthe right hand side here, uh,
something like there's a heading.
We know it's a heading, it's an H two.
You can change a levelto H three very easily.
Usually we're not going to use an H oneand the body of your, uh, document because
that's reserved for the page title.
But other than that, you're get touse all the other headings in order.
So if you're at H three, forexample, um, the subsection
within that section would use.
An H four, not an H five, right away,that would be skipping headings.
Um, and if you're going backup to a broader uh, section,
then you would go to an H two.
And you see how over here on the left handside, now it's highlighting to me that
this heading is actually incorrect level.
Super helpful of WordPress.
Okay, so next thing is we want tomake the content easy to scan through.
Or another way to put thatis easy to scroll through and
understand what's on the page.
Headings are already agreat way to do that.
That means you can easilyunderstand what's on the page.
Also, using shorter paragraphs,generally speaking, we kind of
wanna avoid the wall of text effect.
Uh, so we're breaking thingsdown into more manageable.
Uh, pieces we want to use lists,um, headings, shorter paragraphs,
shorter sentences in general,maybe images here and there.
So something like this, you know,is easier to, uh, scan through or
scroll through than if it was justa whole bunch of text in paragraphs.
Um, if you can imagine, you know,three items that are written
as a paragraph that's harder.
To scan through and understand then whenthey're actually listed as a list, and
you'll see there's some helpful formattinghere if, if that is indeed helpful, but
we'll talk about formatting in a second.
In terms of writing your content, I'm notgonna tell you really how to write it.
That's your job.
You're probably wonderful at it.
But a thing to remember isthat the general reading.
Comprehension level of your contentshould be around grade eight, unless
you're writing for a group of people whohave very specific technical knowledge.
In that case, sure it makes sense touse the language that they're more
familiar with, but in most cases, um,grade eight is a, is a wonderful place
to be for most websites out there.
Um, this means, again, shortersentences, not using jargony language.
Um, there's a really great tool that Ilove to use, uh, aptly named Hemingway
because of course, Hemingway was writingwas very succinct and to the point.
Um, and you'll see over here on theright hand side, uh, it lets you know
the grade, uh, readability score nineis okay, eight is better, um, and
highlights the different sentencesand if they are too hard to read, some
weakers, et cetera, that you can improve.
So you can just copy.
The content of your page, paste itin and it'll do the same for you.
Next is don't use, uh, contentcues that rely on color,
shape, or relative location.
So if you say something like, click thered button to the right, that's not really
helpful to all, all of your audiences.
Some people might find that helpful,but others who, for example, can't see
that it's a button or that it's red.
That's not really helpful at all.
Um, websites are flexible, soif on desktop it's to the right
on mobile, it might be below.
Um, and maybe if you're using thesekinds of cues, it's also an indication
that your content's very complex.
Why do you need to saywhich button are there?
How many buttons are there?
Maybe fewer buttons would be better.
So let's talk about formatting.
And of course the first thing is.
You should really limit all caps,text as much as possible, if any.
Um, usually we want to make sure thatif we are using all caps text, it's
maybe part of the user interface moreso than the actual writing on the page.
Um, and there's a few reasons.
Sure you're a polite Canadian, so youdon't be screaming at your audiences.
That's one.
But, um, technically speaking, uh,something like a screen reader might,
uh, pronounce all caps, texts verydifferently, so older screen readers
will read it, letter by letter.
Imagine having to piece thattogether as you are, uh, being
read a website, uh, content.
Uh, some will just emote wordsdifferently if it's all caps, so
it's not exactly screaming, butit's still emoting them differently.
Um, and uh, we also know that folks whoare cited, who might be interacting with
all caps text will often have a moredifficult time or just reading that.
Text because the letter formsare harder to follow, especially
depending on the typography.
This is kind of case dependent.
Um, but we are used toreading sentence case.
That's just a fact.
Um, so even if you have.
Really legible, fantastic font wherethe all caps is easier to read.
It's still gonna be harder becausethe letter case is different from
what you are normally used to.
Then there's the alignment.
So.
A lot of us here are probablywriting in English, maybe French.
Those are left to writelanguages and therefore you
want to align them to the left.
So when you're talking aboutparagraphs, longer lines of text.
Um, and that's because when we havethat nice margin on the left, when
we get to the end of the line to theright, it's easy to find the next line.
Versus when we are talking aboutcenter text, those lines are going
to be starting at different places.
It's a lot harder.
Um, caveat.
Not caveat, also justify text.
Not a good idea either.
It might, you might think that bothof those margins being uh, nice
and straight is helpful, but thespacing between words than changes
and our brains like predictability.
So when those spacings are different,it's actually harder to read.
Now if you're writing in a right to a leftlanguage like Varsi or Arabic or Urdu,
then you want to do right, aligned, same.
Same reasoning.
When you get to the end ofthe line, you want it to be
easy to get to the next line.
Here's an example of, um, mess Easy.
So on the left hand side, wehave a lot of, uh, all caps.
We have some formatting, we havebolding, underlining center text, and
I know about you, but my shoulders justimmediately clench up when I see that
and I don't really wanna read that.
But on the right hand side.
Things are just so muchnicer, so much calmer.
You can reasonably read through it.
There's some bolding, but it'sreasonably, uh, spaced out.
There's not a lot of formatting included.
The text is short.
We even have buttons.
Fantastic.
And the last thing informatting is the text widths.
And oftentimes this is something thatwill be thought through by your designer
and developer, but in WordPress weare able to change widths of blocks,
and that's something to consider.
So I'm gonna show you how to do that.
The reason why we want tokeep in mind, um, the widths.
So for example, um, here's a column block.
Let's go to the group.
The group is better.
Um, there's the align button up here, andyou'll have the three widths that you see.
So this is full, it means it's takingup the full width of the browser.
Then there's the wide, it's gonna be alittle bit less wide, and then there's.
The none.
And that's even more narrow.
So the reason why we care about thisis I'm sure you've had this experience.
You go to a website, maybeyou're on a bigger monitor,
and there's this line of text.
Bless it.
It's spanning the whole freaking browser.
And when you get to the right,you're looking for the beginning
of the next line again.
And that's just more complex.
Um, our brains, again, they likea certain width, and that width
is actually, uh, calculated.
It's been tested, uh, it should be45 to 75, maybe 80 characters long.
You'll notice up here Ihave a little book bucket.
Uh, it says 45 to 75, and when I clickon a paragraph, it actually highlights
where is that range within that paragraph.
So it allows it to be easy to test.
Where is that?
Um, limit for the width of each paragraph.
That should be on my page.
Um, a link to this is available elsewhere.
I'll share that with you at the end.
But the way to test this right, is youprobably want to look at your content on a
really big monitor, maybe just an externalmonitor that you have at your desk.
Then your laptop and then your iPhone,or sorry, any phone that you have.
Um, uh, this way youcan make sure that that.
Content with is contained, um,and doesn't offend as it were.
Um,
great.
Let's talk about accessible links.
So first and foremost, we want to makesure that the link text is meaningful.
What do I mean by this?
Uh, maybe it's a buttonand the button says.
Read more.
What does that mean?
What am I reading?
Or you have, um, a paragraph andwithin the paragraph, the thing that's
highlighted and linked says, click here.
Very, very helpful.
Not at all.
Um, so.
The reason why we want to do this isas a sighted person, you might be, uh,
getting a lot of content cues aboutwhat you're actually clicking on, but
someone who's using assistive technology,like a screen reader, can actually
request just the links on the page.
So something like this, on the left handside, we have the wordpress.com website.
On the right hand side,we have the linked text.
So you can reasonably assume whatyou're gonna get when you go to plans
and pricing get started, et cetera.
But if there was a bunch of read mores.
That doesn't really tell you anything.
So that text that you link needs to makesense outside of any kind of content.
Um,
yes.
Uh, your link should alsobe easy to find and discern.
So if you have a paragraph that'sall black text and you have
maybe a link that's dark blue.
Some folks might be able tofind it, others might not.
And oftentimes this is ajob of a designer, right?
Let's, let's have them do that job.
But because WordPress does allow you tochange colors of buttons, for example,
you really should be very mindful ofhow you use those colors together.
Let's do a links demo.
So for example, we havea button down here.
We can change the colors.
If we go to the right and look at styles,
make it pink, make it, makeit black, so on and so forth.
We can change.
But things are linked to, andI'm gonna go ahead and unclick
this open in a new tab, uh, box.
And I'm gonna talk aboutthat in just a second
because we shouldn't be openingany links in an external
tab or window automatically.
Um, first and foremost there,it's a usability issue.
When your audience can reasonably maketheir own decisions, you should not
be making those decisions for them.
It's their autonomythat we want to protect.
Uh, secondly, if, uh, someone is,again, visiting your website using
assistive technology, just close youreyes and imagine this scenario, right?
Um, you've clicked on a link, it'sopened in a new tab, but you wanna go
back to that page you were reading.
Do you think it'll be easier if it's notin a new tab and you just click back?
Right versus having to close atab or navigate between tabs.
Um, this is why we don't recommend this.
Um.
Is everyone excitedabout alt descriptions?
Yes.
It's really wonderful to see altdescriptions become something
that's so prevalent online,especially in social media.
You know, if you're on Instagram, yousee those alt descriptions all the time.
But I also feel like wemaybe kind of lost the plot.
Um, if the t description is two paragraphslong, is it, is it really necessary?
Like, did we maybe already convey themeaning within the first sentence?
Probably, um, and of course it'ssituationally dependent, but ultimately
your old description should be aphrase or a sentence that's the length.
Um, you, let's imagine somethinglike a page that's a scholarship
for students to go abroad.
Um, in study abroad, you're probablygonna have an image, something
like a happy group of students infront of the Parthenon and Athens.
That's your old description.
That's it.
You don't need to go deeper.
You don't need to describethe position of the sun.
Everyone's like individual identities.
And that's actually a partthat can be quite tricky.
So if you're working on a websitethat has a staff page and there's
headshots for everyone, um, it is akindness to let those people describe
themselves so that you are notaccidentally misrepresenting or, um.
Not representing their identitiescorrectly, uh, to live in a
world where we can all just beseen the way we want to be seen.
What a gift.
So I recommend that you just engagethose people and let them describe
themselves the way they would want to be.
Yes, that might be longer thana sentence, but in this case it
actually kind of makes sense.
Uh, let's look at, this is a funnything about this, uh, website.
If you look at the alt text, it says.
And I'm just gonna show you the image.
So there's the image, it's orange,it's got like an earth, uh, logo and
not logo icon and some swirly gigs.
And the alternative says E-commercestore concept showing online shopping
with cart products and digital elements.
Yeah, that's not thealt text for this image.
I don't know why it is, butyou can very clearly see that.
Um, alt text is a wonderful thing andsometimes maybe it could be updated.
Uh, but the thing that I really wantedto show you here is, so we are editing
this page currently, and if we changedthe alt text in the right hand side here,
that would be specific to this page only.
So this is not the global allttext that this image would
have throughout the website.
Um, and that is a good thing.
But if you wanted to, youcould go to the media library.
Upload a file, shall we?
Why not?
Well upload a file.
Look, it's me.
And then you can updatethe alt text in here.
And that will be in fact, uh, global.
So this, anytime this image isused on the website, this is the
alt text that will go with it.
Um.
I would say that if you're usingan image multiple times on the same
website, you might actually be conveyingdifferent meanings every time you use it.
So it does make sense to alterthat, uh, on a page by page basis.
Another really cool thing aboutWordPress editing experience, let's
find an image inch is right belowthat alternative text uh, box.
There's this really helpful link.
To a decision tree they call it,of uh, how to write that alt text.
So for example, if you have likea purely decorative image, it's, I
don't know, it's a visual flourish.
It adds zero meaning tothe website, to the page.
You don't actually have to add alttext 'cause it doesn't add anything for
those folks who are not looking at it.
Um, but if you do.
Uh, want to add, meaning then you want todescribe the meaning, and sometimes it's
tempting to add text to our images toadd that meaning, but it is not actually
a great idea, uh, first and foremost.
So when I say embedded text, whatI mean is like you may be in Canva
or in Photoshop and you have addedtext and saved that as an image.
So all of a sudden the sightedfolks on your website will be
able to read that text, assuming.
The contrast is, um, correct, but thefolks who are coming, using again,
so, uh, technology that is readingthe website to them, screen readers
don't know how to read text from animage nor do, uh, search engines.
So there is always this added kind ofbenefit of making sure that, um, your
website is also doing well for SEO.
And if we consider something like.
An infographic, right?
Um,
adding simple, odd description thatis like a sentence is not going
to actually accurately describewhat's going on in your infographic.
Um, so you definitely wantto have an alternative ways.
To describe that you might have maybea few paragraphs just in the body
of the document, and that's probablygonna be helpful to more than just
the folks who can't see the image.
Um, when we try to communicate complexthings with imagery, it just behooves
us to have another way to describe it.
Because we can never be 100% sure thatit'll be understood the same by everyone.
But when I say multimedia, we'retalking about also video and audio.
And again, wonderful to seethat closed captions are a thing
that's happening pretty regularly,especially on social media.
Um, but also just in YouTube, you canadd those closed captions very easily.
Um, the thing that doesn't happenas often is having transcripts.
So let's say you.
Or not able to view the video and you'renot able to hear the video, how will
you then be able to engage with it?
There's actually a really, really cooldevice that I encourage you to look up.
It gives me joy to know that it exists.
It's called a Braille display.
Um, and essentially it's like this,not a keyboard, but like this field
in front of you, uh, where the texton the screen gets converted to
braille so you can touch, read it.
The coolest thing, inmy opinion, that exists.
Uh, but then, right, so someonewho's using that kind of device
can actually understand what'shappening in a video or in an audio.
And, you know, as we're talkingabout, um, permanent accessibility
needs, I'm sure you've been in a,in a situation where it's midnight,
you are in bed, you want to watch avideo, uh, maybe you're doing work.
I don't know why, but we all do it.
Uh, and your partner is next to youand they're sleeping and you don't
have your headphones next to you.
Transcript solved.
You can be a productive cogin the machine at midnight.
Um, and the last thinghere is about animations.
So animations are tricky and reallyprobably should be working with a
developer to integrate them appropriately.
Um, if we're talking aboutsomething like, uh, of.
Video that you're embedding, justmake sure that you're not stripping
out the controls, uh, because wewant to make sure that there's a
way to pause and stop, especiallyif it's longer than five seconds.
If it's shorter than fiveseconds, maybe you don't need to
embed it anyway, question mark.
Um, and then if something isflashing on the screen, uh, we want
to make sure that it does not flashmore than three times a second.
Imagine that experience.
Flashing three times a second,and then if you have epilepsy,
that's like a real health concern.
Um, so a lot of these things are, um,going to be benefited by something
like a developer helping you.
Uh, an example here would beadding a GIF to your website.
Yes, I said gif.
We can fight about this later, but, um,you can't really pause and stop a gif.
So think maybe twice before doing that.
They are wonderful though.
Okay, so we have time.
Uh, let's talk aboutdesign really quickly.
I think probably most of you in thisroom know to test color combinations
for graphics that you are creating.
If you are creating graphics for yourwebsite or if you are using the WordPress
editor and you're changing colors, um,there is actually a really cool feature.
Where if you change, let's see if youchange the background and the text colors.
Let's go with purple.
See how down here it sayscolor combination may be
hard for people to read?
So WordPress does careabout accessibility.
Um, and we'll let youknow, um, when you are.
Edging towards, uh, or fully, fullyover the edge when it comes to
content, um, accessibility contrast.
It doesn't do that with buttons,but it does do that in a paragraph.
And if you're working with a, like adefined brand, I love this tool because
you can just paste in all the colors fromyour brand and it will make this grid of.
All the colors up above,all the colors down below.
And now you can see whichcombinations actually pass for
specific, um, contrast standards.
So there's the aa W cag, W cag, yes.
Uh, the aaa, et cetera, andDNP, that means did not pass.
And of course, you want to also testfor low vision and colorblind visitors.
Um, colorblindness is a thing thatoften gets overlooked because we kind
of think about, well, you can either seethings or you can't, but there's also a
variation of being able to see things.
Um, this tool is really, really cool.
You can put any websiteon the left hand side.
It'll show you what someone who is fully.
Non colorblind, we'll be able to see.
And on the right hand side, uh, it'sa dropdown with various, uh, different
kinds of colorblindness that you can cyclethrough and, and it'll show you what that
actually looks like, so you can stillsee whether the contrast is sufficient.
Cool.
So I mentioned a lot of tools and things.
And on our website we have abunch of guides for accessibility
for content managers.
Basically the things that I've beentalking about, but in written format.
Whoops, pardon me.
Uh, and one of the guides is.
Uh, all the tools that you can useas a content manager, so all, all
linked and easy for you to use.
Um, and then we have ahandy d and d checklist.
It is a PDF, we made sure it'saccessible, but, uh, you can use
that PDF as you're either auditingyour own content or writing new
content to just make sure you'vehit all the, all the recommendations
that we've been talking about.
And of course, if you want a littleextra help, we're happy to train.
Do audits.
Um, or just be there for ongoingaccessibility support@endo.co or hello
at Endo Co. Do folks have questions?
Do we have time for questions?
Yeah, we have time.
Amazing.
It supposed to be on.
Yes.
I was just wondering if you have a, oh,
we have a microphone.
Sorry.
If you have a table.
Um, as far as aligning textleft, is there, should it be
maintained within that as well?
Like no center in headers or anything like
that?
Okay, so.
I mean, technically if you have atable, you probably have very short,
uh, bits of text in there, right?
You don't have long paragraphs,so you could get away with it,
but you might wanna be very.
Consistent then throughout the table soyou're not jumping from one alignment to
another, alignment to another alignment.
And that might also be partially,you know, better for design.
Yeah, I think the, when you'vegot numbers, sometimes it makes
sense to center numbers, butblocks of text, a layout if
you know that those numbers arenever gonna get very, very large.
Sure.
But usually when we styletables as a, from a coding per.