Create better, more accessible content with the CKEditor Accessibility Checker
Written by Michaela Blackham, Accessibility & QA Specialist at Aten Design Group
CKEditor Accessibility Checker helps content creators produce better web content. The accessibility checker provides a clean click-through interface for CKEditor 4 that prompts editors to improve content quality by using appropriate markup — think HTML headers instead of bolded text for section headings or HTML lists instead of asterisks for bullet points.
Checkout the CKEditor Accessibility Checker demo, then download the Drupal 8 module or visit the Accessibility Checker download page to find installation instructions for other platforms.
Accessible content is better content
Accessibility and inclusion on the web are huge and growing topics. With about one in four adults in the United States living with a disability, implementing web accessibility standards plays a big role in reaching your entire audience and making sure your content isn’t excluding anyone. Publishing accessible web content boils down to following best practices in terms of HTML markup and content structure — best practices which pay dividends in other ways as well.
Accessibility features like screen readers and keyboard navigation rely on semantic markup to function properly — that’s properly structured HTML tags around text and multimedia content that tell the web browser what each element actually is. The upshot is that accessible web content is well structured web content, too, which provides a lot of collateral benefits. Well structured semantic HTML is easier to style with CSS, can simplify content migrations, improve automated integrations (like making your content consumable via XML), and even enhance SEO. Accessible content is better content.
The weak link: user generated content
Even the most accessibility centric approach to web application design doesn’t guarantee accessible content. That’s because while your menus, color palettes, layouts and templates may all have been designed to meet or exceed accessibility standards, the articles, posts or other web content that your users and editors create play by a different set of rules.
When users create web content they’re often empowered to make poor choices around accessibility and semantic markup by the very editors they’re using. Whether they’re working with WYSIWYG editors, writing HTML directly, or using one of hundreds of different tools for crafting multimedia content, it’s very possible that the final product isn’t accessible. Small, seemingly unimportant decisions like using the wrong elements or styles to format text or skipping “minor” details (like providing alternate text for images) can all add up to a virtual labyrinth for people using accessibility tools — and it can trip up automated interactions with your content like XML syndication or search engine indexing.
Using the CKEditor Accessibility Checker is one giant step towards strengthening that weak link. With the accessibility checker your web editors can fix a wide array of problems before they hit the publish button: missing or insufficient alternative text for images, incorrect heading structure, links and / or headings that aren’t descriptive enough, poorly formatted tables, inaccessible links to PDFs and more. The CKEditor Accessibility Checker isn’t a magic pill solution for accessibility on the web, but it’s a huge step in the right direction that takes just minutes to set up.
Produce better content today
Take a look at the CKEditor Accessibility Checker demo — you’ll see in just a couple of seconds how easy it can be to improve your web content. We’re thrilled to see the web community committing to accessibility more every day, and with our own Edmund Dunn as a maintainer on the Drupal 8 CKEditor Accessibility Checker module we hope to help drive that commitment even further.
What’s next for CKEditor Accessibility Checker & Drupal? Look out for the new 8.x-2.0 version of the Drupal module, full compatibility with Drupal 9, and CKEditor Accessibility Checker in Drupal Core!
