Disability:IN 2024 Agenda Bookmarklet

I had some issues using the Disability:IN 2024 Conference Agenda so I made a bookmarklet:

🔗 Fix Disability:IN Agenda

You may have seen this originally posted as a CodePen, but I opted to move it here since I can embed videos showing a before-and-after experience.

Fixes

1. Removes empty trigger link before each session, which cuts tab-stops in half and undoes a 4.1.2 violation for a disclosure trigger with no accName.
2. Makes the sticky header unsticky, reducing some hassle for my zoomed viewport with panels open.
3. Loosens up the leading a tiny bit in the session names / headings and adds a bit of space above each.
4. Because each session has an id and I want to link to specific sessions, I added a :target style to make it more obvious which one I linked. The page uses some scroll-linked animations, so this will be hit-and/or-miss.
5. For those who also link to session anchors, I add the id value above each session. Sadly, it is not selectable since it uses CSS generated content. I opted not to add links since this page is a tab-stop forest.
6. Converts all the date headings from <h3> to <h2> for a more reasonable heading structure (and easier navigation for SR users).

The disclosure triggers as links bother me, but probably not worth converting to buttons. While that would make it more appealing to then add anchor links, keyboard users would be back up to too many tab-stops even if screen reader users could navigate by buttons alone.

Code

Script to change date <h3>s to <h2>:

const h3 = document.querySelectorAll(".sticky>h3");
h3.forEach(h => {
	const h2 = document.createElement("h2");
	h2.innerHTML = h.innerText;
	h.replaceWith(h2)
})

These are the style changes it makes:

/* Removes unnamed tab-stop / redundant disclosure trigger */
h3 > a {
	display: none !important;
}

/* Style an anchor when it has been navigated */
@keyframes Target {	
	from { outline-offset: -.25em; outline-color: #00f; outline-width: .1em; }
	to { outline-offset: 2em; outline-color: transparent; outline-width: 1em; }
}
:target {
	outline-width: .2em;
	outline-style: solid;
	outline-color: #00f;
}
@media screen and (prefers-reduced-motion: no-preference) {
	:target {
		outline-width: 0;
		animation: Target 1s ease-out 3;
	}
}

/* Get the sticky header out of the way */
.fusion-is-sticky .fusion-header-v1 .fusion-header {
	position: unset;
}

/* Make an anchor option visible, but sadly not copyable */
div[id^=panel].fusion-panel.panel-default::before {
	content: '#' attr(id);
	display: inline-block;
	margin-top: 2em;
}

/* Loosen up the leading for easier reading */
a[aria-expanded] {
	line-height: 1.25 !important;;
}

Before & After

I made videos showing how I was using the site with a screen reader and with my keyboard both before and after the bookmarklet is applied.

CodePen

See the Pen Disability:IN Agenda Bookmarklet by Adrian Roselli (@aardrian) on CodePen.