LinkedIn Articles accessibility review

In this article, I've created content on LinkedIn articles with the sole purpose of checking how accessible the pages are. Elements on the page are created using the editor features.

I've mostly included code snippets for ease of reference. I might have tidied them up a little to make them more clear.

(Note that LinkedIn Articles team must have been listening as they've already made a couple of improvements, so I've updated the text below).

Summary

LinkedIn articles offers pretty good accessibility with basic features that mark up the code properly. As long as you don't want to do anything fancy then they are pretty safe to use. Here are some tips:

• The banner image doesn't allow you to add a separate alt attribute, so use the caption like you would an alt attribute if you need to describe the image. Be aware that the alt text and caption will use the same text.
• You're limited to 3 heading levels, and one of those is an automatic heading level one for the article title, so you only have 2 more to play with. This should be fine for most articles, but something to be aware of.
• I'm being picky but If you need to cite an author for a quotation you'll need to do this in text.

The article banner image

You might also call this the "Hero image". Linked In Articles doesn't allow you to set your separate alt attribute. Instead it duplicates the caption. This means that the user hears the same text for the caption as they do for the alt text. It's not a big deal, but a fix for this is should be very easy. They should be separate features in the editor.

The Article Title

The heading is marked up as a H1 in code which is correct. There's not much to say about this. It's pretty straight forward.

This is what the code looks like:

<h1 dir="ltr" class="reader-article-header__title">
    <span data-scaffold-immersive-reader-title="">
        Test page for LinkedIn Articles accessibility support. This text is the "Title"
    </span>
</h1>        

This is a heading style

Again, nothing wrong here. It uses the correct markup and doesn't use a <div> and a bunch of styles that would cause assistive technology to miss it. It's a thumbs up.

The heading style markup looks like this:

<h2 id="ember3282" class="ember-view reader-text-block__heading-2">This is a heading style</h2>        

This is a sub-heading style

This is the lowest heading level available.

You only have 3 heading levels to work with and the first one is used up as a title. This is probably fine for most articles, but if you need a sub-sub heading at level 4 or beyond. LinkedIn Articles leaves you hanging. However, the headings are marked up properly.

The markup for sub-headings looks like this:

<h3 id="ember3497" class="ember-view reader-text-block__heading-3">This is a sub-heading style</h3>        

Images (another one of my dog Billy)

Images are wrapped in a figure tag which encompass and image tag and a figure caption tag.

Here's the code for the image. I've edited some of the values to make the key parts pop:

<figure class="reader...">
    <div class="ivm...">
        <div class="ivm...">
            <img src="https://media...." loading="lazy" alt="My dog Billy laying in a Muddy puddle with his tennis ball. It was a warm day and we'd been playing fetch." id="ember2445" class="ivm..."/>
        </div>
    </div>
    <figcaption class="...">This is where I can put a caption for my image but it's optional</figcaption>
</figure>        

An unordered list

No complaints here. Unordered lists are fine.

• One
• Two
• Three

The code:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>        

An ordered list

Nothing wrong here either.

1. apples
2. pears
3. bananas

<ol>
    <li>apples</li>
    <li>pears</li>
    <li><bananas</li>
</ol>        

A quotation

Quotations use blockquote markup as they should. It's pretty basic with no option to cite the author, but as it is, it works pretty well for quoting for emphasis. If you were using it to quote a person then you should be able to include <cite>. I get that LinkedIn probably wanted to keep their interface as simple as possible and this could be a confusing addition to the modal dialog for some people.

Something really important said by somebody

The code:

<blockquote id="ember..." class="ember...">Something really important said by somebody</blockquote>        

The code snippet box

I know I've already used these in the article, but this section is explicitly to review this feature. It essentially just wraps it in a styled Preformatted Text (<pre>) tag. This appears to work fine. If anyone has a strong opinion about a better way to do this then please chime in and leave a comment.

<pre class="reader-text-block__code-block">&lt;h1&gt;My First Heading&lt;/h1&gt;</pre>        

A divider

Very hard to see, but its a feint line below. It' a pretty simple divider and the markup is correct.

Here is some text below it

This is what the code looks like:

<hr class="reader-divider-block__horizontal-rule">        

Here's a link to Hugr

Start your professional accessibility testing journey with Hugr

The link code is marked up properly and does exactly what it's supposed to do.

Link code:

<a class="app-aware-link " target="_self"  data-test-app-aware-link="">Start your professional accessibility testing journey with Hugr</a>        

An Embedded YouTube video

This one is pretty code-heavy and it's not easy to see what's going on at a glance so I'll let readers check it out themselves. I hope that's ok!

But from an accessibility standpoint, it does everything that it needs to do.