# data[].attributes.blurb.html
On the modern web, we can design content with the visual interestingness that we’ve always wanted. We can have beautiful pages and lots of variety. But how can we manage our content and maximise accessibility at the same time? In this talk, Hidde will look at how better “authoring tools” can improve accessibility (for content editors and for web users), and share some of the new resources that the W3C’s Web Accessibility Initiative (WAI) is working on.

# data[].attributes.slidedeck.data[].slides[].desc.html
Hello, I’m Hidde, this is Advancing Authoring Tool Accessibility.

# data[].attributes.slidedeck.data[].slides[].desc.html
I’m a web accessibility specialist at WAI, and I spend most of my time on the accessibility of authoring tools. Authoring tools are all about web content.

# data[].attributes.slidedeck.data[].slides[].desc.html
Web content used to be quite boring, like a wall of text that you could read. An amazing invention when it first came out, but these days we can do much more with web content to make it very exciting to look at.

# data[].attributes.slidedeck.data[].slides[].desc.html
The world changed, you could say.

# data[].attributes.slidedeck.data[].slides[].desc.html
For instance, new possibilities in CSS, like Grid Layout and Flexbox, give us full control over whitespace. That can mean that web pages look more complicated, and with that, the interface to create them might need some updates.

# data[].attributes.slidedeck.data[].slides[].desc.html
The interfaces to format web content have changed quite a bit too.

# data[].attributes.slidedeck.data[].slides[].desc.html
And thirdly, a lot of us changed to thinking about content not in terms of pages, but in terms of components: reusable bits of content. With all these changes, there are some fun challenges for authoring tools as well.

# data[].attributes.slidedeck.data[].slides[].desc.html
So what exactly are authoring tools? I’m sure you’ve used at least one of these!

# data[].attributes.slidedeck.data[].slides[].desc.html
Maybe you’ve used WYSIWYG editors…

# data[].attributes.slidedeck.data[].slides[].desc.html
…course creators, learning management systems…

# data[].attributes.slidedeck.data[].slides[].desc.html
…Content Managements Systems…

# data[].attributes.slidedeck.data[].slides[].desc.html
…wikis…

# data[].attributes.slidedeck.data[].slides[].desc.html
…save as HTML functionality…

# data[].attributes.slidedeck.data[].slides[].desc.html
…social media…

# data[].attributes.slidedeck.data[].slides[].desc.html
…form generators…

# data[].attributes.slidedeck.data[].slides[].desc.html
…site builders…

# data[].attributes.slidedeck.data[].slides[].desc.html
…in short, and this is the shortest definition I’ve been able to come up with: authoring tools are tools that create web content. And with that…

# data[].attributes.slidedeck.data[].slides[].desc.html
…they are tools that give us the unique opportunity to improve lots of accessibility at once, to make the web more accessible across the board.

# data[].attributes.slidedeck.data[].slides[].desc.html
You may know that at WAI, we have these web standards, that all try to make the web more accessible by looking specifically at web content. The one most people are familiar with is WCAG, the Web Content Accessibility Guidelines, which is about the accessibility of web content itself.

# data[].attributes.slidedeck.data[].slides[].desc.html
There’s also UAAG, about the accessibility of tools that display web content: browsers, or user agents.

# data[].attributes.slidedeck.data[].slides[].desc.html
And then there’s ATAG, our standard about the accessibility in tools that create web content. So there’s three standards about accessible web content: the content itself, tools to view content and tools to create content.

# data[].attributes.slidedeck.data[].slides[].desc.html
Authoring tools are an essential component in this triad of web accessibility standards.

# data[].attributes.slidedeck.data[].slides[].desc.html
If authoring tools put accessibility front and center, we could have many more people create content for the web, we could have more content creators for the web.

# data[].attributes.slidedeck.data[].slides[].desc.html
Authoring tools with accessibility in mind can also let creators deal with content problems before their website goes live, by doing this like warning for potential problems and guiding authors to get accessibility right (for instance, get an alt text right).

# data[].attributes.slidedeck.data[].slides[].desc.html
For more information about ATAG, we have this page called ATAG at a glance on the WAI website.

See: https://w3.org/WAI/standards-guidelines/atag/glance

I’ll also go into ATAG right now, so that you can get an idea of what it is about.

# data[].attributes.slidedeck.data[].slides[].desc.html
There’s two parts to ATAG: A and B. Part A is about the ‘editing experience’, the ‘admin’ or the ‘authoring interface’ or the part where people create web content. If we make that more accessible, more people can create web content.

# data[].attributes.slidedeck.data[].slides[].desc.html
Part B is about the output of the system and optimising for its accessibility. It is about creating more accessible output.

# data[].attributes.slidedeck.data[].slides[].desc.html
So let’s look at the editing experience first, part A of ATAG.

# data[].attributes.slidedeck.data[].slides[].desc.html
This is relevant for people like Antonio, who is colour blind and wants to set up a recurring prescription for his patient. He might do that through a web interface, which is increasingly common these days, and that interface even creates a web page for patients to look at or take to a pharmacy, this may all be categorised as an authoring tool.

# data[].attributes.slidedeck.data[].slides[].desc.html
Or Mei, who is a teacher with reduced dexterity who needs to use a web interface, a learning management system, to create some take home exams for her students. Again, we want to make sure she is included as a user of this tool.

# data[].attributes.slidedeck.data[].slides[].desc.html
Or what about Anne, a 21 year old influencer who is motor impaired, just wants to upload her latest vlog on social media. We’ve got to make sure this works for her.

# data[].attributes.slidedeck.data[].slides[].desc.html
A couple of things that ATAG would recommend, note, this is in the spirit of ATAG… one example is to make sure the interface works with keyboard.

# data[].attributes.slidedeck.data[].slides[].desc.html
That includes ensuring there is a visible focus indicator…

# data[].attributes.slidedeck.data[].slides[].desc.html
…and that the user can get to all of the interface’s controls with just a keyboard.

# data[].attributes.slidedeck.data[].slides[].desc.html
Or there’s bits of ATAG about previews, because many systems that created web content will have some sort of preview functionality. Naturally, we need to ensure that the preview that is generated is accessible.

# data[].attributes.slidedeck.data[].slides[].desc.html
And lastly, if the tool is able to do things like help with spelling, we need to make sure that the indication of misspelled words happens in an accessible manner.

# data[].attributes.slidedeck.data[].slides[].desc.html
In part B, we talk about accessibility of the output.

# data[].attributes.slidedeck.data[].slides[].desc.html
This is important for people like John, a 15 year old student with low vision. He wants to access the results for a recent mathematics test, so we need to make sure the interface that is outputted by the LMS does not break when zooming in.

# data[].attributes.slidedeck.data[].slides[].desc.html
Or Vivienne, who works as a privacy lawyer and is blind, needs to figure out if a restaurant she wants to visit with her clients, serves vegan food. The authoring tool that the restaurant uses, which may very well be a web based interface, should help the restaurant staff to create a menu page that works for all.

# data[].attributes.slidedeck.data[].slides[].desc.html
Now, good authoring tools can really help content editors to make their content more accessible.

# data[].attributes.slidedeck.data[].slides[].desc.html
One example is that they can build in the functionality for authors to add alternative text (this may seem like a no-brainer, but there are lots of authoring tools that don’t have a field for alternative text, for instance, in the social media space).

# data[].attributes.slidedeck.data[].slides[].desc.html
This functionality could go one step further, and do things like warn if a link is created from an image that has no alternative text, as that would leave a link with no accessible name, which is a specifically bad user experience for some users.

# data[].attributes.slidedeck.data[].slides[].desc.html
If the authoring tool generates markup, it should generate accessible markup.

# data[].attributes.slidedeck.data[].slides[].desc.html
Another thing where an authoring tool can play a big part in encouraging accessibility, is colour contrast. Maybe a designer has designed this beautiful header, and carefully picked a dark background photo to appear underneath a white text, like this photo of my actual cat.

# data[].attributes.slidedeck.data[].slides[].desc.html
Let’s say a content editor decides to replace the picture with a much lighter picture of Korean food. It now no longer has sufficient contrast. This is programmatically detectable, what if an authoring tool would notice and say…

# data[].attributes.slidedeck.data[].slides[].desc.html
…‘wait, you don’t have sufficient contrast now!’ It could make suggestions too, like provide alternative color (or a button that applies that alternative color), or suggest larger or bolder text (in case it falls under the Larger Text clause in WCAG 1.4.3).

# data[].attributes.slidedeck.data[].slides[].desc.html
And lastly, if that content tool would have something that can check readability levels, again, the content tool could really help authors to create more accessible outputs, because it could warn you before you put your website live and tell you to make your readability level slightly better.

# data[].attributes.slidedeck.data[].slides[].desc.html
Basically, good authoring tools can really encourage you to create more accessible content.

# data[].attributes.slidedeck.data[].slides[].desc.html
And there’s a lot of work we do at WAI to try and improve authoring tool accessibility.

# data[].attributes.slidedeck.data[].slides[].desc.html
One thing that we have is the document called Implementing ATAG 2.0, which has rationale, intent and practical examples for the ATAG standards, but there’s also some new work coming along, and that’s the work I’m involved with.

# data[].attributes.slidedeck.data[].slides[].desc.html
This work is all part of the WAI guide project for the European Commission, and it is focused on accelerating support for accessible authoring. So what we want is to really help authoring tool vendors to create more accessible authoring tools and tools that encourage accessibility better in all sorts of ways.

# data[].attributes.slidedeck.data[].slides[].desc.html
Wouldn’t it be interesting if you see all these advantages that the authoring tools could have, if you could find authoring tools that do all those things and encourage accessibility in the ways we just described. This list of authoring tools would be able to do exactly that, so it would let you filter by ATAG criteria, it would let you find tools that support web accessibility, and it would let you submit your own tool or your client’s tool. This list doesn’t exist yet, but we do have a prototype that has this interface that lets you filter, but we’re still working on ways to get content for this tool currently, it only has kind of dummy content.

# data[].attributes.slidedeck.data[].slides[].desc.html
in order to do that, we have sort of developed something called the ATAG Report Tool and this will let you create a report of the accessibility of your authoring tool.

(live demo)

# data[].attributes.slidedeck.data[].slides[].desc.html
In conclusion, there’s a couple of things I wanted to share today.

# data[].attributes.slidedeck.data[].slides[].desc.html
First, content creators would really benefit from more accessible authoring tools because we would allow millions more people to create content for the web, if we ensure that these tools are working for people with disabilities.

# data[].attributes.slidedeck.data[].slides[].desc.html
End users also benefit because if these tools encourage the people who work with it to create more accessible content, there’ll be more accessible content on the web. So that would be super beneficial for everyone.

# data[].attributes.slidedeck.data[].slides[].desc.html
Authoring tools are really everywhere. They’re in healthcare, they’re in education, they cut across a lot of different sectors that really impact people’s daily lives.

And that’s a wrap. I want to leave you with today is the question, how would you improve authoring tools to make accessibility better on the web? The tools themselves, but also how would you maybe them encourage authors better to make more accessible web pages? So after this, I’ll be showing up in a live Q and A, when you’ll be able to give us your thoughts on that question or ask any other question that you may have regarding authoring tools and web accessibility.

Thanks very much for watching.

# data[].attributes.resources.data[].desc.html
Information about all things accessibility: planning, designing, developing, testing, advocating , training and more…

# data[].attributes.resources.data[].title
Authoring Tool Accessibility Guidelines (ATAG) Overview

# data[].attributes.resources.data[].desc.html
The Authoring Tools Accessibility Guidelines

# data[].attributes.resources.data[].desc.html
Examples, rationale and intent for the success criteria of ATAG 2.0.

# data[].attributes.resources.data[].desc.html
Authoring Tools List (prototype, dummy data)

# data[].relationships.data[].attributes.title
W3C WAI Interactive Update (AccessU Plus)