Website: Audit and address accessibility

[paulrobertlloyd]

A cursory look at the underlying code, and performing an audit with tools like Lighthouse and Axe uncovers a number of potential accessibility issues. Doing a very brief review, I found the following issues:

• Avatar images don’t have an alternative name. Given these sit next to posts where the user’s name is given, this issue can be fixed by using an empty value, i.e: <img src="/photos/96/https://micro.blog/manton/avatar.jpg" width="48" height="48" alt="">

• Date stamps do not have sufficient contrast. Text at this size needs a contrast ratio of 4.5:1. Changing the colour of this text from gray (#808080) to #757575 would mean it would pass WGAC AA. Changing to #595959 would mean it would pass WGAC AAA.

• The menu button on narrower layouts does not have a label, so it’s likely that it won’t be found by those using screen readers or other accessible technologies (it should also use a button element and not be a link). Ideally the text label would be present in this button, but a short-term fix would be to add an aria-label attribute to the link, i.e.: <a href="#" onclick="javascript:toggleMenu();" class="btn btn-default showmenu" aria-label="Menu">…</a> Update 24 October 2024: The newer mobile navigation menu replaced this implementation, and uses a button to invoke the drop down menu, although this button still doesn’t have an accessible label.

• Links should have unique names. A screen reader user listening to the website and wanting an overview of the links on the page would hear “Reply”, “Bookmark”, “Conversation” and “Embed” repeated multiple times, yet without any context to which post these links relate to. Using visually hidden text, you could update these links to something as follows:

  <a href="#" onclick="promptReply(123456, 'manton'); return false;">
      Reply<span class="visually-hidden"> to Manton’s post from 12:04pm</span>
  </a>

• In more general terms, it’s often the case that incorrect or suboptimal HTML elements have been chosen to mark up different components. Posts should use article, pages should have a h1 (even if not visually shown) and lists should be marked up as lists, to cite just 3 examples. This isn’t out of a need for semantic purity; using the right elements can help users browse different landmarks on a page and understand a page’s composition if they are unable to do so visually.

• In a similar fashion, navigation lists should be marked up as just that, using nav and ul. For example, the following conveys little useful to the user:

    <div class="menu" style="display: block;">
        <div class="social">
            <p><a href="/" class="icon icon_timeline">Timeline</a></p>
            <p><a href="/mentions" class="icon icon_mentions">Mentions</a></p>
            <p><a href="/bookmarks" class="icon icon_bookmarks">Bookmarks</a></p>
            <p><a href="/discover" class="icon icon_discover">Discover</a></p>
        </div>
  
        <div class="manage">…</div>
  
        <div class="extras">…</div>
    </div>

  This could instead be marked up as follows:

    <div class="menu" style="display: block;">
        <nav class="social" aria-label="Social">
            <ul>
                <li><a href="/" class="icon icon_timeline">Timeline</a></li>
                <li><a href="/mentions" class="icon icon_mentions">Mentions</a></li>
                <li><a href="/bookmarks" class="icon icon_bookmarks">Bookmarks</a></li>
                <li><a href="/discover" class="icon icon_discover">Discover</a></li>
            </ul>
        </div>
  
        <nav class="manage" aria-label="Manage">…</nav>
  
        <nav class="extras" aria-label="Extras">…</nav>
    </div>

  Now a user can be informed that there is navigation for social links, and it contains 4 items.

@manton These are just a few of the issues I found, without spending too much time or going in to any great detail. Low-hanging issues like this can be uncovered using auditing tools and software, but other changes and improvements would likely result from testing with people who use accessibility technologies on a daily basis.

[issimonwoods]

I think these and other accessibility issues are urgent issues and ought to be given greater prominence than advanced features, updating to the latest Apple update, and so on.

[paulrobertlloyd]

Yup. There’s so much low-hanging fruit here – small fixes with such potential upside for a range of users. That none of the above issues have been addressed (as far as I can see) in over 8 months says a lot about where accessibility ranks in the list of priorities for Micro.blog. 😞

[manton]

Thanks for the reminder about these. There is definitely some low-hanging fruit here that we can take care of.

[issimonwoods]

Should we add this to the list:

On iOS: In Uploads, “Copy HTML” feature doesn’t include alt=""

... or make a separate Issue?

[issimonwoods]

Should we add this to the list:

On iOS: In Uploads, “Copy HTML” feature doesn’t include alt=""

... or make a separate Issue?

Done: #221

Related to the issues: #217

[issimonwoods]

@manton the two issues I linked to in my last reply are now dead, I think because of the splitting of the iOS and Mac Issues? I'm surprised that GitHub doesn't have some sort of re-direct feature.

[manton]

@issimonwoods Strange that the links broke… We didn't move any issues, and those issue numbers still exist in this repository.

[issimonwoods]

@manton I wasn't clear. For example: If you put the issue number 217 into the URL, you'll get redirected here: microdotblog/microblog-ios#7 ... to issue 7 in the iOS repo.

On the 30th of June you open-sourced the iOS and Mac apps (https://www.manton.org/2021/06/30/opensourcing-the-microblog.html) and I think in doing so moved issues pertaining to those apps from this repo.

I think that's what happened? Just wanted to clarify so that the broken links can be explained.

[paulrobertlloyd]

4 years later, and still little progress on the originally highlighted issues, bar a slight improvement to the mobile menu which now uses a button, yet still lacks an accessible name.

Today the ability to zoom into photos was added; a useful accessibility feature in-and-of-itself, however it’s not possible to navigate to and zoom into a photo using a keyboard. Not is it possible to navigate photos within a post using arrow keys. You can however exit a zoomed photo using the Escape key.