Tools and Tipps for Accessibility Online Editors

Most accessibility tools are aimed at developers, but many tools can also be of interest to people who want to publish content online, I'll refer to them as editors here for the sake of simplicity.

Small update: The toolbar for Firefox no longer works in current versions and is no longer being developed. The successor is the A-Inspector. The Web Accessibility Toolbar is available for Internet Explorer, and similar tools are also available for Chrome.

The most important tasks are checking the awards and checking links and images. Our most important tool is the Firefox Accessibility Evaluation Toolbar (FAE), which naturally only works in Firefox.

Check semantics

Most of you will work in a content management system. There are roughly two types of editors: The WYSIWYG editors, where the formatting is immediately visible, similar to a word processor, and the code editors, which use HTML or a wiki syntax. Since the tools can of course only check finished HTML, the check will usually only be possible in the preview or in live operation. If you work with HTML, we also recommend using an HTML editor like Notepad++, with which you can see immediately via syntax highlighting whether the tags were not closed correctly.

With the Web Developer Toolbar or accessibility bookmarklets you can easily check online whether you have correctly marked up subheadings, lists, abbreviations and all that other stuff.

First we check the headings. After installation, FAE latches onto the menu bar as an additional menu. To check the headings, we select Accessibility -> Navigation -> Headings. A window will appear at the top left, which you can move somewhere where it doesn't bother you. The headings of the different levels are displayed. If you move through the list with the arrow keys, the corresponding area is highlighted in color on the website. So you have to make sure that all headings are actually highlighted when you move through the list. The assigned heading level is also displayed. The FAE cannot distinguish between design and content elements, so navigations are also displayed as lists or otherwise invisible area headings. Just ignore and skip to content.

You can do something similar with other elements, which I will simply list here without continuous text for the sake of laziness.

Item: To be found under Accessibility ->
Lists: Style -> Lists
Abbreviations: Text Equivalents -> List of Abbreviations
Change language: Navigation -> Language Changes
Alternate text for images: Text Equivalents -> Show Text Equivalents
Data tables: Navigation -> Data Tables
Links: Navigation Links

There are two possible errors: either an item is not tagged or it is not tagged correctly. So you not only have to pay attention to what the FAE is showing you, but also what it isn't showing you but should be showing. The links should be as meaningful as possible, in any case there should not be several links with the same link text but different targets.

A fairly simple way of displaying structural elements is with a custom style sheet. Anyone who can write a little CSS will have no problem with that. For example, we can tell it to color headings, lists, and quotes. Then we load the style sheet into Firefox and activate it every time we want to check a page, e.g. in Firefox under View -> View -> Website Styles.

Check texts

Checking the complexity of texts is currently hardly possible with technical means. But at least there are tools that can help you. The Flesch test has been integrated into Word since time immemorial. Based on the average sentence length, the number of long words and other factors, it calculates a value that provides at least a rough indication of readability.

Personally, I don't find these tools helpful: On the one hand, they don't provide any help in finding problematic areas, on the other hand, they tempt you to optimize for the respective tools. But if I chop a long sentence in two, I haven't necessarily improved anything. You activate the Flesch check in Word under Extras -> Options -> Spelling and Grammar -> Readability Statistics. Statistics are displayed when the spelling and grammar check is complete. You can also have the score determined on the Internet. Note that German words and sentences are usually longer than English, which is why German texts perform worse on average than their English counterparts.

The authoring software Papyrus Autor is said to have integrated a pretty good style check. Such a check could also help us to identify bad ones Detect formulations or tapeworm sentences. Since I can't use the program myself due to a lack of accessibility, I don't have any experience with i. Meanwhile there are a lot of tools arising for that purpose like the free language tool or ChatGPT.

Automate work

Some tasks are simple but time consuming, you could even say annoying. This includes marking abbreviations, acronyms and language changes. So why not make the job easier?

For example, we can misuse autocorrect. This only makes sense if we only use the respective program for texts that have to be marked up and also only works for content management systems that are based on HTML or another markup language. For example, we would create a complete list of our abbreviations, acronyms and foreign language expressions in Word and enter the complete associated code as an autocorrect expression. An example, the abbreviation on the left, the whole thing as HTML code on the right, I left out the HTML brackets, otherwise Wordpress would swallow the code:

e.g. abbr title="for example">e.g.

As I said, this only makes sense in a word processor that is only used for texts to be marked, otherwise the respective program would adorn all our texts with marks at once.

That sounds more complex than it is, in practice we cover 90 percent of our needs with a dozen acronyms and just as many abbreviations. With foreign-language terms, there should be a few more, but that should all be doable.

It would also be worth considering simply creating a macro that handles such tasks. We could use the search and replace function for that. As with the auto-correction, we again rely on our list, only this time the macro only searches our text on command and replaces the corresponding expressions. To do this, you should have a little knowledge of macro programming: it is easy, but time-consuming, to create the macro with the simple functions of the program. Problems arise when the macro needs to be adjusted when we want to create a new abbreviation. If you have no programming knowledge here or want to experiment a little with the source code, you would have to create the entire macro again. If anyone knows a more elegant solution, I'd be happy to hear about it. I also thought about using applications like Textexpander or Phraseexpress for such purposes. They are usually used to easily insert frequently used text snippets where you want them.

Pictures

Daltonize can be used to check images online or in Photoshop for various types of color blindness. You can do the same with Vischeck.

It should be noted that of course only content that is publicly accessible online can be tested. For content within an content management system you need a program on your computer.

Every image editor offers a grayscale mode where you can check your graphics to see if they are still easy to see in such a view. More sophisticated programs also offer tools for contrast analysis, where you can test whether the graphic is easy to see or whether the image object has a sufficiently high contrast to the foreground, in Gimp there are filters for it.

two other interesting tools are presented on Sitepoint: Check my Colors also helps you with the contrast analysis of text. The online tool Photosensitive Epileptic Analysis Tool (PEAT) can be used to analyze the flicker rate of graphics to avoid disturbing people with seizures.

PDF

I have already explained elsewhere how you can check PDFs for general usability >. To check for accessibility, there is a check built into Acrobat Reader, which isn't much help.

Otherwise there is the free PDF Accessibility Checker< /span> of the Access for All Foundation. It offers a very useful preview mode, but the rest is only helpful if you have created your PDFs with the professional programs from Adobe and know what is behind the error messages, otherwise you will not be able to repair the errors.

The screen reader

Those who have already worked with screen readers will also be able to use them to check their texts. I already have the basics described for developers. Editors can simply use the function keys to have quotes or lists read out to them. In NVDA you can just use Ins + F7 to check links or headings. The FAE seems to me to be more beginner-friendly for this purpose, since the learning curve is less and it is designed for sighted people.

What's missing

Accessibility's bad reputation is due in no small part to the painstaking little work that everyone has to do if they want to make content available online and comply with the BITV. Much of this work could be relieved of the editor if the logic is integrated into the editorial system. It is not a big task, for example, to create a glossary of the most common abbreviations, acronyms and foreign-language expressions in order to have them automatically marked as they appear in the text.

Instead, the systems usually get in the way, Wordpress simply filters out everything in HTML that it doesn't know - if not adapted. Other CMS such as the closed commercial systems are likely to be significantly worse. I'm not aware of any system that has built-in accessibility analysis or troubleshooting help.