DEV Community

Fixing dev.to accessibility [part 1] - 4 fixes that would take less than 10 minutes!

GrahamTheDev on March 24, 2021

Summary Dev.to is pretty accessible, there are some minor things they could do to improve though. As part of this series I am going to ...

Read full post

GrahamTheDev • Mar 24 '21

@ben , @jess I hope one of you picks this up and gives it to whoever deals with accessibility.

Once again can I say I love dev.to and I hope this series helps in some small way to make it even better!

Ben Halpern • Mar 24 '21

On it

GrahamTheDev • Mar 24 '21

If you decide to tackle number 4 I am happy to put a few options together for a “proper” fix, the suggestions here are purely quick wins.

Great to see you so responsive! ❤️

Christina Gorton • Mar 24 '21

I'll be checking our repo tomorrow to see if these are already issues and if not adding them to our repo. If you would like I can link them to you here and you can contribute if you have time!

Christina Gorton • Mar 24 '21

I know some of the keyboard ones you mention will be in a later post are known issues in our repo. I think our wonderful community members Rafi and Andrew Bone have been working in them 😊

GrahamTheDev • Mar 25 '21

Hi Christina

Sure link them here, not much time at the moment as trying really hard to get into a habit of writing but once I have done the entire series I will go through and see if any need adding to the repo.

Then when I have a nice pattern I will see if I can pick any of them up and help of course, however I am normally a bare-bones developer so I may be limited in which ones I can pick up! 🤣🤣

Andrew Bone • Mar 25 '21

For number 4 did you know there are keyboard shortcuts? You can press j and k to navigate between articles more easily. But tabbing with take you to each area within the post tile (this is also how twitter does it).

GrahamTheDev • Mar 25 '21

Yes but only through mashing buttons! It was only when you just said it then I realised you followed twitter pattern (or should I say the gmail pattern taken from some old editor in the 80s!), didn't even click 🤣

Also discovered the shortcut to search with ? but I have not discovered anything else?

Is there a page with shortcuts on as I could not find it? If there is then I will include that in my next article!

Also I feel there there is some key combination to change the number of articles jumped at a time with j and k hidden somewhere as I have managed to make it jump by 2 articles and 5 articles at a time but only by accident! Or is that some strange bug I discovered!

I approach everything as if I do not know any key combinations, hence the arrow key suggestion (which will also have a toggle) as that would be logical for 99% of people.

However perhaps that approach is not correct for a site that is likely to attract an unusually high proportion of power users, so I may need to curb my general thoughts on things.

I look forward to any input you have on my suggestions for anything that is best judgement!

Andrew Bone • Mar 25 '21

There is currently a bug that caused the the shortcuts to compound. It's actually a side effect of this issue

Preact Components not unmounting due to InstantClick page lifecycle events. #11458

nickytonline posted on Nov 17, 2020

Describe the bug

I know how to fix it @reobin . I will create an issue and put a PR up for it. We need to explicitly call unmountComponentAtNode in an InstantClick.on('change', () => {}) event. This is something that normally we wouldn't have to do, but because we use InstantClick, it's necessary. It also explains why I saw components repeated in the Preact dev tools.

I need to do it for pretty much all out components that get mounted via render. e.g.

import { h, render } from 'preact';
import { unmountComponentAtNode } from 'preact/compat';
import { Search } from '../Search';
import 'focus-visible';

document.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('header-search');

  render(<Search />, root);

  InstantClick.on('change', () => {
    unmountComponentAtNode(root);
  });
});

To Reproduce

You will not see this behaviour as it's something under the hood. It manifests itself in an issue like #11371

Expected behavior

Preact components should be unmounted when an InstantClick even changes the page.

Screenshots

Desktop (please complete the following information):

OS, version:
Browser, version:

Smartphone (please complete the following information):

Device:
OS, version:
Browser, version:

Additional context

View on GitHub

I wrote an article asking how we can get better discoverability the other day but as of yet there is not a list of shortcuts.

Just press / should take you to the search, I think shift + / is still calling / functions though, I'd like ? to open a list of shortcuts one day 😅

forem.dev/link2twenty/keyboard-sho...

GrahamTheDev • Mar 25 '21

You know I should really look through all the bugs in the repo shouldn’t I lol!

Saying that it is way more fun having you “swat me down” on things that are already known 🤣🤣😜

Andrew Bone • Mar 26 '21

? no longer initiates search. That's one step closer

Neha Sharma • Mar 25 '21

One more suggestion for alt tag I can think of is:

Use image name as an alt tag. When the user is not providing any alt tag the image name can be used (assuming they will upload a meaningful name).

However, this needs to be handle when the image has no purpose for the screen readers.

GrahamTheDev • Mar 25 '21

I will be covering alt attributes for user generated content in a future post.

Although that is a great suggestion the big problem is that people are even worse at naming images than they are at filling in alt attributes.

A second issue is that images are named my-magical-image or myMagicalImage so trying to parse the text out of an image name can be frustrating at best, impossible at the worst!

To give you a hint - I will be making alt attributes more prominent when you upload an image and an integral part of the upload image workflow, see what solutions you come up with around that and we can compare notes when I write the article 😀😀

GrahamTheDev • Apr 21 '21 • Edited

@hellonehha I should have said - check out the following article and try the image uploader, not quite there but it should give you an idea of what I am thinking to address this issue.