(or, “At the Crossroads of HTML and Daily Relevance for A11Y”)
(or, “Why should I care about HTML? I just use PDF documents!”)
Good morning!
Have I told you lately what I think about HTML?
In terms of accessibility, if plain text is the most honest digital format, then HTML is the most powerful:
- HTML enables both the content and the container to exist.
- HTML binds and aligns technologies while presenting them as a unified whole.
- HTML presents the message and at the same time it can know what it is talking about.
- HTML enables the Internet to exist and allows for the thing we call Web Accessibility where people with disabilities can enjoy this rich capability to interact with the world.
For each of us here, HTML has allowed our individual capability to create, express, and experience the world to go far beyond anything previous generations have known or imagined.
At its best, HTML helps us be more fully aware and capable of maximizing our own potential.
And cat videos. HTML allows you to see more cat videos than anyone needs or could have dreamed possible.
Despite all of that, people tend to hate HTML code.
With the obvious exceptions, most of the world will actively avoid the knowledge of HTML code and any activity that requires them to engage with text inside of brackets.
I get it- I’m not here to try and sell you on it.
But why does this matter?
Because anywhere you type digital text in your CMS you are creating HTML text.
This is something I thought you should know about, because I recognize you are really committed to the cause.
I can tell if there is an opportunity to enhance the access and usability of the communications you send students, you will be sure to make it most usable.
Because now you know- and you care.
That’s just beautiful…
Organizational Name-Calling
The thing about HTML that makes it special is the schema that allows for everything to be defined. This is the “ML” from HTML – MARKUP LANGUAGE.
The whole point of HTML is to define every part of the message by marking it up with a tag. There are a lot of tags available in HTML – but thankfully we don’t need to worry about all that.
We can get away with a handful of things to worry about because our CMS text editors are typically limited in what they make easily possible.
So without going crazy, or getting your hands nerdy, you can probably manage the a11y of HTML in your CMS.
Creating HTML in your CMS – all you need for now…
You should be able to influence these items within your CMS-based content editor:
- Text and Background Color Contrast
- Headings
- Lists
- Image descriptions
- Table Header Rows
- Link Anchors (the clickable text)
Text and Background Color
You need to make sure the text is legible and distinct from the background. Ensure your contrast ratio between foreground text and background colors satisfies the WCAG criteria – 7:1 for normal text and 4.5:1 for large text.
Tools for Colorful Creations
Here are some tools to help with color contrast:
- Who Can Use – A tool that allows you to specify any color combinations for text and background, and then it tells you about the different use cases where the text would be problematic. You can learn about color contrast and different kinds of colorblindness as well.
- Color Oracle – A colorblindness simulator that applies a full screen overlay over your work, allowing you to experience your content as someone with a colorblindness disability would.
- ColorSafe – Enter your background color and font style, and ColorSafe will provide WCAG compliant colors for your text.
- Khroma – This tool is amazing. If you are ever searching for that color combination to make your content pop, Khroma can be super helpful. Khroma asks you to pick 50 of your favorite color swatches, and then powerful AI derives countless combinations of WCAG compliant and artistically satisfying color combinations.
Your CMS text editor should have the ability to specify colors for the text and background. If you are unsure of how to specify colors with your CMS text editor, you need to contact your technical support person for assistance.
Headings
Every CMS text editor should have the ability to assign a heading style to text. Many will include styles labeled as “Heading 1” and “Heading 2”, others will simply call them “Heading” and “Sub-Heading”, or “Main” and “Sub”.
If your CMS text editor does not include this capability, you need to ask your system administrator how you are supposed to be able to create accessible content with the tools they are providing you. This is a serious question you need an answer to, and asking it might raise awareness and affect positive change.
While you wait for an answer from Tech Support…
Meanwhile, try creating your content in MS Word or another modern editing program with support for heading styles.
Once you finish creating your content, try to copy and paste it into your CMS text editor.
With the content pasted into the CMS text editor, save and view the page.
You can inspect the code for a heading style ( <H1>, <H2>, <H3>, etc. ) or use another tool such as the Wave Accessibility Checker to test whether or not the heading style was included in the copy and paste.
Heading styles are usually retained when you copy and paste from a serious word processor into your CMS text editor.
Lists
Your CMS text editor most likely has the ability to style content as numbered or bulleted lists. Look for something on the toolbar that looks like a stack of three lines with bullets or numbers on the left-hand side.
Image Descriptions
In many modern CMS text editors, you will be prompted to include an alternative text description of an image when you insert it into your document.
Here are some tips for providing good descriptions:
- Be brief but descriptive of the core meaning of the picture relevant to the content it is appearing in.
- If your CMS text editor doesn’t provide a way to give your images an alternate text description, then you should provide a textual description in your main text, and identify the image with an image caption.
If you are uncertain about whether or not your image has an alternate text description:
Try selecting your image and clicking on the Insert/Edit image toolbar button to bring up a dialog with image properties. If you’re lucky there will be a place to provide a text description.
Table Header Rows
Support for table header rows is pretty common, but it is not always easy to find the place to activate this formatting. Sometimes the toolbar will have a Table Properties button, or sometimes you will need to look in the individual cell formatting options, but somewhere in your CMS text editor should be the ability to define table header rows.
Link Anchors
Finally, when you use links in your content, make sure that the anchor (the clickable blue underlined text), is descriptive of the content that is being linked to.
Don’t use the phrase “click here”, or “more” or any other generic term used repetitively as a shortcut for inferring what will be coming if you click the link.
For Those Who Dare…
Finally, and absolutely no pressure here – but if you find yourself wondering about the HTML code editing capabilities of your CMS editor, you can look for the toggle and see what sorts of options and power are unlocked…
Or you can be sure to avoid clicking anywhere near that toggle and get on with your life.
Nobody has to know either way, and no judgment.
I’m just glad you showed up and read this far. Thank you!
