Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Making accessibility checking easier

Team Tiny

June 16th, 2021

Written by

Team Tiny

Category

Product Management

At Tiny, we believe that making TinyMCE the best rich text editor available means more than just creating an MSWord or GoogleDocs-like editing experience. 

To achieve that goal, we embrace the spirit of openness and genuine equality that the web brings with it and we actively support the evolving guidelines on accessible design. That’s why we’ve invested in delivering accessibility functionality.

Fredrik Danielsson and Joakim Lindkvist, from our Tiny team based in Sweden, have also joined a research project in conjuction with Funka on improving web accessibility. It's called We4Authors.

Joakim is one of the founders of TinyMCE. They bring decades of experience in web authoring to their work. Fredrik is our Principal Designer, and is responsible for much of TinyMCE's accessibility. We4Authors results are available on Funka's website.

TinyMCE provides an accessibility-compliant interface – one that can be operated with just the keyboard and is compatible with screen readers. Our plugin helps you make your own interface compatible and accessibility compliant.

A rich text editor with accessibility checking

But making a website accessible can be difficult and time-consuming. For example, if no additional time is budgeted for checking the color contrast of the page design. A few simple miscalculations can often snowball into a lot of accessibility dilemmas, and before long, those content errors proliferate. TinyMCE’s accessibility function addresses that by empowering authors to recognize the errors and fix them immediately, before the content is published, thus avoiding any compliance issues.

 By activating the a11ychecker plugin, any suspected problems are flagged. The plugin then suggests changes, and you can press the ‘Repair’ button to address the accessibility error.

Accessibility checking for headings, images, and id attributes

Did you know that popular screen readers like JAWS from Freedom Scientific, need a clear page structure to work correctly? Therefore, since accessibility technology requires clear IDs to assist users with page content navigation, our plugin checks that the ID attribution labels are unique.

The plugin also alerts you about issues like inaccessible tables and other potential accessibility problems, by checking your content against both WCAG and Section 508 guidelines. It also confirms whether images have alt text – because screen readers require some kind of legible and clear alt text to read. If an image is just decorative, our plugin has the capability to set the image properties as only decorative. It additionally checks if the alt text is the image filename or not, which is also a common accessibility error. 

A rich text editor that supports accessible tables 

The a11ychecker plugin makes writing accessible tables easier by helping users apply the proper headers to their tables. It checks for a complex table summary, to explain to assistive technology users how to navigate the table data. In short, it digs deeper, confirming the table heading scope aligns with the data inside the table itself.

Need color clarity? Check contrast ratios for accessibility

Colors on a web page may also be mistakenly designed with low contrast ratios, which can cause issues for those people whose sight is degraded. When the degree of difference in hue between two colors isn't particularly wide the colors look too similar to each other. Colors of similar hues also make text difficult to read on-screen. However, our plugin flags contrast issues when it detects similar colors together.

If you’d like to see our accessibility plug-in action, please try the demo or contact us for more information about improving your application’s accessibility. 

For more information about We4Authors, you can read more about the initiative here on blueprint.

Accessibility
byTeam Tiny

Powering more than 40% of the world’s websites. Here to educate and empower the world through all things TinyMCE and more.

Related Articles

  • Product Management

    Under Pressure; React integration

    by Joe Robinson in Product Management
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing