A11yFirst for CKEditor Demo

Content Accessibility Matters

A11yFirst University of Illinois Library Innovation Project logoThe A11yFirst for CKEditor project seeks to change the content authoring model into one where the authoring environment supports accessibility by default when creating or editing web pages using an embedded editor. As a result, website creators will be able to author accessible content without needing a deep understanding of the complex reasoning behind the current accessibility standards or the actual technical processes needed to implement those requirements.

Why fix problems after the fact when you can prevent them in the first place?

In the traditional way of doing things, many authors and editors create website content before considering accessibility, and then, after the content has been created, identify and address any accessiblity problems using either a manual or automated scanning tool.

A11yFirst changes the paradigm by guiding authors through the process of making content accessible during the creation process, with features such as allowing only properly nested heading levels (currently available) and interactive queries for text alternatives for images and meaningful link text (coming soon).

CKEditor's built-in Accessibility Checker is still available, but it should identify many fewer issues in an A11yFirst-created page than in a native CKEditor page.

Special features in A11yFirst

Some of the special enhancements in the A11yFirst interface include:

  • Heading: Assists you in choosing the proper heading levels to make the heading structure in your document more meaningful to readers.

  • Paragraph Format: Provides special formatting for blocks of text (e.g. paragraphs) within your document.

  • Character Style: Provides styling to highlight or emphasize a word or group of words (i.e. characters) within a block of text.

  • Toolbar: Reorganizes the toolbar buttons to place higher-level block actions, such as heading, list and paragraph format, in the top row and lower-level inline actions, such as character style and insert special character, in the bottom row.

  • A11yFirst Help: Provides explanations of how to use the A11yFirst features and why they matter.

Try it out

You can test out A11yFirst's accessible authoring features in this demo window. Delete this sample text and create some new content of your own!

We also encourage you to browse through the A11yFirst Help content for tips, keyboard shortcuts and links to other resources about web accessibility.

Join the A11yFirst Project

You can benefit from our development work as well. The A11yFirst GitHub repository includes code and design specifications. And we're not finished yet — if you'd like to help the project advance, please email us at a11yfirsteditor@gmail.com.