#semantichtml — Public Fediverse posts

#Development
You don’t know HTML tables · A deep dive into their anatomy and mechanics https://ilo.im/16b68g

_____
#HtmlTables #SemanticHTML #Accessibility #API #Browser #WebDev #Frontend #HTML #JavaScript

Weekends are for code faffing.

I made a Markdown editor for my blog. Using semantic HTML5, CSS3 and JavaScript. The only library's I'm using is jQuery v4 and jQuery UI v1.14.

The preview works but is missing some features 😕

#semanticHTML #jQuery #blogging #ssg

MYSTERY IN BLUE

A TRAVEL TROUBLES NOTES STORY

THE ECHO OF THE BLUE MOUNTAINS

Book III: An Australia Day Mystery

CHAPTER 1: THE TIMEOUT TRAP

It was Australia Day, and the heat was enough to melt the CSS off a stylesheet. The Three Best Friends—Liam, Dax, and Dev—were driving their trusty 4WD up the winding roads of the Blue Mountains. The esky was chockers with lamingtons and snags, and the mood was “she’ll be right”.

“I reckon we camp near the Three Sisters,” Dax said, adjusting his sunglasses. “Great view, high contrast, easy navigation.”

But as they approached Katoomba, the car’s dashboard display flickered. A countdown timer appeared on the GPS screen:
SESSION EXPIRING IN 10 SECONDS.

“Dev, extend the session!” Liam yelled.

Dev reached for the “Continue” button, but the car hit a pothole. His finger slipped.

3… 2… 1…

The GPS went black. The engine sputtered. The car rolled to a halt on the shoulder of the highway.

“It’s the Timeout Trap,” Dev groaned. “The system didn’t give us enough time to interact. It violated the rule: Provide users enough time to read and use content”.

The Genial Fix

“A standard timeout is fine for security,” Liam said, wiping sweat from his brow. “But for a critical task like driving? We need an option to turn off, adjust, or extend the time limit”.

Liam pried open the dashboard panel. He found the physical timer relay. “I’m bypassing the default setting. I’m hard-coding an exception for ‘Real-time Activity’.”

He twisted two wires together. The screen roared back to life, but the map was different. The roads weren’t marked with names; they were marked with code.

“We aren’t in Katoomba anymore,” Dax whispered. “We’re in the Source Code.”

CHAPTER 2: THE RECURSIVE RAVINE

They hiked into the valley, but the path was behaving strangely. Every time they walked 100 meters, they found themselves passing the same gum tree.

“It’s an infinite loop!” Dax cried. “We’re stuck in a recursive function without an exit condition!”

“It’s worse,” Dev said, pointing to a signpost. It spun wildly, the arrows changing direction every second. “The navigation is inconsistent. One minute the ‘Home’ link is on the left, the next it’s in the footer.”

A voice boomed from the canyon walls—a distorted, echoing laugh.

“Welcome to the Echo. Navigation is fluid here. Try to find the breadcrumb trail.”

“Breadcrumbs!” Liam realized. “The Echo is mocking us. We need to create a Site Map to understand the structure of the valley.”

The Physical Site Map

Dax grabbed a stick and began drawing in the red dirt. “If the visual path is broken, we rely on the DOM order.”

He mapped the landmarks like HTML elements: : The Sky (Always visible) : The Valley Floor (Where the content is) : The River (The end of the page)

“The Loop is in the ,” Dev noticed, looking at Dax’s map. “We’ve been walking in a sidebar! We need to Skip to Main Content.”

“Skip Links!” Liam shouted. “Find the anchor!”

They spotted a hidden trail marker labeled #main-content. They jumped over the barrier, breaking the loop and landing on the true path toward the Three Sisters.

CHAPTER 3: THE VOICE OF THE SISTERS

They reached the famous rock formation, but the viewing platform was deserted. A single, massive microphone stood at the edge of the cliff, pointing at the rocks.

“To pass,” the Echo’s voice thundered, “You must speak the Password. But be warned: The Echo listens to all inputs.”

“It’s a Voice Input Control,” Dev said. “But look at the wind. It’s blowing a gale. The background noise is too high.”

Liam stepped up to the mic. “Open Sesame!”

The wind howled. The system responded: “Did you say ‘Open Salami’?”

“No!” Liam yelled. “Cancel! Undo!”

The system processed the command: “Ordering Salami.”

“It’s an Error Prevention nightmare!” Dax panicked. “For inputs that cause legal commitments or financial transactions, we must be able to reversible, checked, or confirmed”.

The Modal Trap

A holographic receipt appeared in the air, blocking their path.
CONFIRM PURCHASE?

There was no “Cancel” button. Only “Yes.”

“It’s a Focus Trap,” Dev said. “I can’t tab away from the ‘Yes’ button. We need to force a keyboard interrupt.”

“Don’t speak,” Liam whispered. “Switch input modalities. The WCAG guidelines say users should be able to switch between input modes (voice, keyboard, mouse) at any time.”

Liam plugged his portable keyboard into the base of the microphone. He typed: ESCAPE.

The receipt vanished. The “Salami” order was cancelled.

“Fair crack of the whip,” Liam muttered. “That was close.”

CHAPTER 4: THE FOG OF #CCCCCC

They descended the Giant Stairway, but a thick fog rolled in. It wasn’t just white; it was a flat, featureless gray.

“I can’t see the steps,” Dax said, freezing in place. “The contrast ratio between the stone and the fog is 1:1. It’s invisible.”

“The Echo has lowered the contrast of the world,” Dev realized. “It’s targeting users with low vision.”

Dax, the designer, pulled out his “High Contrast” visor—a pair of augmented reality goggles he used for testing.

“I’m switching to High Contrast Mode,” Dax announced. “I’m inverting the colors.”

Through the goggles, the gray fog turned black, and the stone steps glowed neon yellow.

“Follow me!” Dax shouted. “I’ve got sufficient contrast!”

The Text-Only Fallback

But then the fog thickened, blocking even the AR signal. Dax stopped. “I’ve lost the visual.”

“Don’t rely on sensory characteristics alone,” Liam recited. “Don’t rely on shape, size, or visual location”.

Liam closed his eyes. He reached out and felt the railing. It had Braille markings etched into the steel.

“The railing has a text alternative!” Liam said. “It says: ‘Step 842. Turn Left.'”

They descended the rest of the stairs by touch, guided by the tactile “Alt-Text” of the mountain.

CHAPTER 5: THE PHANTOM’S SERVER

At the bottom of the valley, they found it. Not a cave, but a bunker. The door was marked with the “Echo” symbol—a sound wave eating its own tail.

“This is where the Australian Day broadcast is coming from,” Dev said. “If we don’t fix the accessibility settings, the Prime Minister’s speech will be broadcast without captions, without Audio Description, and in a font size no one can read.”

They burst inside. The server room was unguarded, but the console was protected by the ultimate barrier.

A CAPTCHA.

But not just any CAPTCHA. It was a grid of 16 images of Australian animals.

“Select all the Quokkas,” the computer sneered.

“They all look like Quokkas!” Liam yelled. “That one might be a Wallaby! Or a small Kangaroo!”

“It’s a cognitive barrier,” Dev said. “It relies on cultural knowledge and visual acuity. It’s inaccessible.”

The Biometric Twist

“We need an alternative,” Dax said. “Look for the audio icon.”

There was none.

“Wait,” Liam said. “This system is old. It’s running on Legacy Code. It probably supports ‘Device Authentication’.”

Liam pulled out his USB key—his “Authorized User” token.

“Not requiring CAPTCHAs for authorized users,” Liam grinned, plugging it in.

The screen flashed green. AUTHENTICATED.

CHAPTER 6: THE FINAL REFACTOR

They had access. Now they had to patch the broadcast before it went live in 5 minutes.

Dev worked on the player. “I’m adding a transcript toggle. I’m ensuring the media player keyboard controls are standard.”

Dax worked on the visuals. “I’m fixing the color palette. No more red-on-green text. I’m boosting the luminance.”

Liam worked on the content. The speech was written in dense, academic English.

“I’m simplifying,” Liam muttered. “Short sentences. Plain Language. Expanding acronyms.”

3… 2… 1…

The “On Air” light turned red.

On screens all across Australia—from the pubs in Sydney to the stations in the Outback—the broadcast appeared.

It was perfect.

The captions were synced.

The Audio Description described the flag waving in the wind.

The text was readable, high-contrast, and clear.

“She’ll be right,” the Prime Minister said on screen.

“She certainly will be,” Liam smiled, collapsing into a beanbag chair in the corner of the bunker.

EPILOGUE: THE NULL ISLAND

The sun was setting over the Blue Mountains, painting the Three Sisters in gold and purple. The Three Best Friends sat on the bunker roof, eating the lamingtons that had miraculously survived the trek.

“We did good,” Dax said. “We made Australia Day accessible.”

“But who built the Echo?” Dev asked, holding up a strange, black microchip he had pulled from the server.

Liam took it. Etched into the silicon were coordinates.

0°N 0°E.

“Zero Zero,” Liam whispered. “That’s Null Island. The place where bad data goes to die.”

“There’s no land there,” Dax said. “It’s just ocean off the coast of Africa.”

“That’s what the maps say,” Dev said, his eyes gleaming with a new mystery. “But the code says otherwise. Someone is building a digital fortress at Null Island. And they just pinged us.”

Liam stood up, dusting the crumbs off his shorts.

“Well,” he grinned. “I’ve always wanted to go on a cruise.”

“Pack your togs,” Dax laughed.

“And your keyboards,” Dev added.

The Three Best Friends looked at the horizon. The Blue Mountains were behind them, but the Ocean of Null was waiting.

MYSTERY IN BLUE

A TRAVEL TROUBLES NOTES STORY

THE ECHO OF THE BLUE MOUNTAINS

Book III: An Australia Day Mystery

CHAPTER 1: THE TIMEOUT TRAP

It was Australia Day, and the heat was enough to melt the CSS off a stylesheet. The Three Best Friends—Liam, Dax, and Dev—were driving their trusty 4WD up the winding roads of the Blue Mountains. The esky was chockers with lamingtons and snags, and the mood was “she’ll be right”.

“I reckon we camp near the Three Sisters,” Dax said, adjusting his sunglasses. “Great view, high contrast, easy navigation.”

But as they approached Katoomba, the car’s dashboard display flickered. A countdown timer appeared on the GPS screen:
SESSION EXPIRING IN 10 SECONDS.

“Dev, extend the session!” Liam yelled.

Dev reached for the “Continue” button, but the car hit a pothole. His finger slipped.

3… 2… 1…

The GPS went black. The engine sputtered. The car rolled to a halt on the shoulder of the highway.

“It’s the Timeout Trap,” Dev groaned. “The system didn’t give us enough time to interact. It violated the rule: Provide users enough time to read and use content”.

The Genial Fix

“A standard timeout is fine for security,” Liam said, wiping sweat from his brow. “But for a critical task like driving? We need an option to turn off, adjust, or extend the time limit”.

Liam pried open the dashboard panel. He found the physical timer relay. “I’m bypassing the default setting. I’m hard-coding an exception for ‘Real-time Activity’.”

He twisted two wires together. The screen roared back to life, but the map was different. The roads weren’t marked with names; they were marked with code.

“We aren’t in Katoomba anymore,” Dax whispered. “We’re in the Source Code.”

CHAPTER 2: THE RECURSIVE RAVINE

They hiked into the valley, but the path was behaving strangely. Every time they walked 100 meters, they found themselves passing the same gum tree.

“It’s an infinite loop!” Dax cried. “We’re stuck in a recursive function without an exit condition!”

“It’s worse,” Dev said, pointing to a signpost. It spun wildly, the arrows changing direction every second. “The navigation is inconsistent. One minute the ‘Home’ link is on the left, the next it’s in the footer.”

A voice boomed from the canyon walls—a distorted, echoing laugh.

“Welcome to the Echo. Navigation is fluid here. Try to find the breadcrumb trail.”

“Breadcrumbs!” Liam realized. “The Echo is mocking us. We need to create a Site Map to understand the structure of the valley.”

The Physical Site Map

Dax grabbed a stick and began drawing in the red dirt. “If the visual path is broken, we rely on the DOM order.”

He mapped the landmarks like HTML elements: : The Sky (Always visible) : The Valley Floor (Where the content is) : The River (The end of the page)

“The Loop is in the ,” Dev noticed, looking at Dax’s map. “We’ve been walking in a sidebar! We need to Skip to Main Content.”

“Skip Links!” Liam shouted. “Find the anchor!”

They spotted a hidden trail marker labeled #main-content. They jumped over the barrier, breaking the loop and landing on the true path toward the Three Sisters.

CHAPTER 3: THE VOICE OF THE SISTERS

They reached the famous rock formation, but the viewing platform was deserted. A single, massive microphone stood at the edge of the cliff, pointing at the rocks.

“To pass,” the Echo’s voice thundered, “You must speak the Password. But be warned: The Echo listens to all inputs.”

“It’s a Voice Input Control,” Dev said. “But look at the wind. It’s blowing a gale. The background noise is too high.”

Liam stepped up to the mic. “Open Sesame!”

The wind howled. The system responded: “Did you say ‘Open Salami’?”

“No!” Liam yelled. “Cancel! Undo!”

The system processed the command: “Ordering Salami.”

“It’s an Error Prevention nightmare!” Dax panicked. “For inputs that cause legal commitments or financial transactions, we must be able to reversible, checked, or confirmed”.

The Modal Trap

A holographic receipt appeared in the air, blocking their path.
CONFIRM PURCHASE?

There was no “Cancel” button. Only “Yes.”

“It’s a Focus Trap,” Dev said. “I can’t tab away from the ‘Yes’ button. We need to force a keyboard interrupt.”

“Don’t speak,” Liam whispered. “Switch input modalities. The WCAG guidelines say users should be able to switch between input modes (voice, keyboard, mouse) at any time.”

Liam plugged his portable keyboard into the base of the microphone. He typed: ESCAPE.

The receipt vanished. The “Salami” order was cancelled.

“Fair crack of the whip,” Liam muttered. “That was close.”

CHAPTER 4: THE FOG OF #CCCCCC

They descended the Giant Stairway, but a thick fog rolled in. It wasn’t just white; it was a flat, featureless gray.

“I can’t see the steps,” Dax said, freezing in place. “The contrast ratio between the stone and the fog is 1:1. It’s invisible.”

“The Echo has lowered the contrast of the world,” Dev realized. “It’s targeting users with low vision.”

Dax, the designer, pulled out his “High Contrast” visor—a pair of augmented reality goggles he used for testing.

“I’m switching to High Contrast Mode,” Dax announced. “I’m inverting the colors.”

Through the goggles, the gray fog turned black, and the stone steps glowed neon yellow.

“Follow me!” Dax shouted. “I’ve got sufficient contrast!”

The Text-Only Fallback

But then the fog thickened, blocking even the AR signal. Dax stopped. “I’ve lost the visual.”

“Don’t rely on sensory characteristics alone,” Liam recited. “Don’t rely on shape, size, or visual location”.

Liam closed his eyes. He reached out and felt the railing. It had Braille markings etched into the steel.

“The railing has a text alternative!” Liam said. “It says: ‘Step 842. Turn Left.'”

They descended the rest of the stairs by touch, guided by the tactile “Alt-Text” of the mountain.

CHAPTER 5: THE PHANTOM’S SERVER

At the bottom of the valley, they found it. Not a cave, but a bunker. The door was marked with the “Echo” symbol—a sound wave eating its own tail.

“This is where the Australian Day broadcast is coming from,” Dev said. “If we don’t fix the accessibility settings, the Prime Minister’s speech will be broadcast without captions, without Audio Description, and in a font size no one can read.”

They burst inside. The server room was unguarded, but the console was protected by the ultimate barrier.

A CAPTCHA.

But not just any CAPTCHA. It was a grid of 16 images of Australian animals.

“Select all the Quokkas,” the computer sneered.

“They all look like Quokkas!” Liam yelled. “That one might be a Wallaby! Or a small Kangaroo!”

“It’s a cognitive barrier,” Dev said. “It relies on cultural knowledge and visual acuity. It’s inaccessible.”

The Biometric Twist

“We need an alternative,” Dax said. “Look for the audio icon.”

There was none.

“Wait,” Liam said. “This system is old. It’s running on Legacy Code. It probably supports ‘Device Authentication’.”

Liam pulled out his USB key—his “Authorized User” token.

“Not requiring CAPTCHAs for authorized users,” Liam grinned, plugging it in.

The screen flashed green. AUTHENTICATED.

CHAPTER 6: THE FINAL REFACTOR

They had access. Now they had to patch the broadcast before it went live in 5 minutes.

Dev worked on the player. “I’m adding a transcript toggle. I’m ensuring the media player keyboard controls are standard.”

Dax worked on the visuals. “I’m fixing the color palette. No more red-on-green text. I’m boosting the luminance.”

Liam worked on the content. The speech was written in dense, academic English.

“I’m simplifying,” Liam muttered. “Short sentences. Plain Language. Expanding acronyms.”

3… 2… 1…

The “On Air” light turned red.

On screens all across Australia—from the pubs in Sydney to the stations in the Outback—the broadcast appeared.

It was perfect.

The captions were synced.

The Audio Description described the flag waving in the wind.

The text was readable, high-contrast, and clear.

“She’ll be right,” the Prime Minister said on screen.

“She certainly will be,” Liam smiled, collapsing into a beanbag chair in the corner of the bunker.

EPILOGUE: THE NULL ISLAND

The sun was setting over the Blue Mountains, painting the Three Sisters in gold and purple. The Three Best Friends sat on the bunker roof, eating the lamingtons that had miraculously survived the trek.

“We did good,” Dax said. “We made Australia Day accessible.”

“But who built the Echo?” Dev asked, holding up a strange, black microchip he had pulled from the server.

Liam took it. Etched into the silicon were coordinates.

0°N 0°E.

“Zero Zero,” Liam whispered. “That’s Null Island. The place where bad data goes to die.”

“There’s no land there,” Dax said. “It’s just ocean off the coast of Africa.”

“That’s what the maps say,” Dev said, his eyes gleaming with a new mystery. “But the code says otherwise. Someone is building a digital fortress at Null Island. And they just pinged us.”

Liam stood up, dusting the crumbs off his shorts.

“Well,” he grinned. “I’ve always wanted to go on a cruise.”

“Pack your togs,” Dax laughed.

“And your keyboards,” Dev added.

The Three Best Friends looked at the horizon. The Blue Mountains were behind them, but the Ocean of Null was waiting.

MYSTERY IN BLUE

A TRAVEL TROUBLES NOTES STORY

THE ECHO OF THE BLUE MOUNTAINS

Book III: An Australia Day Mystery

CHAPTER 1: THE TIMEOUT TRAP

It was Australia Day, and the heat was enough to melt the CSS off a stylesheet. The Three Best Friends—Liam, Dax, and Dev—were driving their trusty 4WD up the winding roads of the Blue Mountains. The esky was chockers with lamingtons and snags, and the mood was “she’ll be right”.

“I reckon we camp near the Three Sisters,” Dax said, adjusting his sunglasses. “Great view, high contrast, easy navigation.”

But as they approached Katoomba, the car’s dashboard display flickered. A countdown timer appeared on the GPS screen:
SESSION EXPIRING IN 10 SECONDS.

“Dev, extend the session!” Liam yelled.

Dev reached for the “Continue” button, but the car hit a pothole. His finger slipped.

3… 2… 1…

The GPS went black. The engine sputtered. The car rolled to a halt on the shoulder of the highway.

“It’s the Timeout Trap,” Dev groaned. “The system didn’t give us enough time to interact. It violated the rule: Provide users enough time to read and use content”.

The Genial Fix

“A standard timeout is fine for security,” Liam said, wiping sweat from his brow. “But for a critical task like driving? We need an option to turn off, adjust, or extend the time limit”.

Liam pried open the dashboard panel. He found the physical timer relay. “I’m bypassing the default setting. I’m hard-coding an exception for ‘Real-time Activity’.”

He twisted two wires together. The screen roared back to life, but the map was different. The roads weren’t marked with names; they were marked with code.

“We aren’t in Katoomba anymore,” Dax whispered. “We’re in the Source Code.”

CHAPTER 2: THE RECURSIVE RAVINE

They hiked into the valley, but the path was behaving strangely. Every time they walked 100 meters, they found themselves passing the same gum tree.

“It’s an infinite loop!” Dax cried. “We’re stuck in a recursive function without an exit condition!”

“It’s worse,” Dev said, pointing to a signpost. It spun wildly, the arrows changing direction every second. “The navigation is inconsistent. One minute the ‘Home’ link is on the left, the next it’s in the footer.”

A voice boomed from the canyon walls—a distorted, echoing laugh.

“Welcome to the Echo. Navigation is fluid here. Try to find the breadcrumb trail.”

“Breadcrumbs!” Liam realized. “The Echo is mocking us. We need to create a Site Map to understand the structure of the valley.”

The Physical Site Map

Dax grabbed a stick and began drawing in the red dirt. “If the visual path is broken, we rely on the DOM order.”

He mapped the landmarks like HTML elements: : The Sky (Always visible) : The Valley Floor (Where the content is) : The River (The end of the page)

“The Loop is in the ,” Dev noticed, looking at Dax’s map. “We’ve been walking in a sidebar! We need to Skip to Main Content.”

“Skip Links!” Liam shouted. “Find the anchor!”

They spotted a hidden trail marker labeled #main-content. They jumped over the barrier, breaking the loop and landing on the true path toward the Three Sisters.

CHAPTER 3: THE VOICE OF THE SISTERS

They reached the famous rock formation, but the viewing platform was deserted. A single, massive microphone stood at the edge of the cliff, pointing at the rocks.

“To pass,” the Echo’s voice thundered, “You must speak the Password. But be warned: The Echo listens to all inputs.”

“It’s a Voice Input Control,” Dev said. “But look at the wind. It’s blowing a gale. The background noise is too high.”

Liam stepped up to the mic. “Open Sesame!”

The wind howled. The system responded: “Did you say ‘Open Salami’?”

“No!” Liam yelled. “Cancel! Undo!”

The system processed the command: “Ordering Salami.”

“It’s an Error Prevention nightmare!” Dax panicked. “For inputs that cause legal commitments or financial transactions, we must be able to reversible, checked, or confirmed”.

The Modal Trap

A holographic receipt appeared in the air, blocking their path.
CONFIRM PURCHASE?

There was no “Cancel” button. Only “Yes.”

“It’s a Focus Trap,” Dev said. “I can’t tab away from the ‘Yes’ button. We need to force a keyboard interrupt.”

“Don’t speak,” Liam whispered. “Switch input modalities. The WCAG guidelines say users should be able to switch between input modes (voice, keyboard, mouse) at any time.”

Liam plugged his portable keyboard into the base of the microphone. He typed: ESCAPE.

The receipt vanished. The “Salami” order was cancelled.

“Fair crack of the whip,” Liam muttered. “That was close.”

CHAPTER 4: THE FOG OF #CCCCCC

They descended the Giant Stairway, but a thick fog rolled in. It wasn’t just white; it was a flat, featureless gray.

“I can’t see the steps,” Dax said, freezing in place. “The contrast ratio between the stone and the fog is 1:1. It’s invisible.”

“The Echo has lowered the contrast of the world,” Dev realized. “It’s targeting users with low vision.”

Dax, the designer, pulled out his “High Contrast” visor—a pair of augmented reality goggles he used for testing.

“I’m switching to High Contrast Mode,” Dax announced. “I’m inverting the colors.”

Through the goggles, the gray fog turned black, and the stone steps glowed neon yellow.

“Follow me!” Dax shouted. “I’ve got sufficient contrast!”

The Text-Only Fallback

But then the fog thickened, blocking even the AR signal. Dax stopped. “I’ve lost the visual.”

“Don’t rely on sensory characteristics alone,” Liam recited. “Don’t rely on shape, size, or visual location”.

Liam closed his eyes. He reached out and felt the railing. It had Braille markings etched into the steel.

“The railing has a text alternative!” Liam said. “It says: ‘Step 842. Turn Left.'”

They descended the rest of the stairs by touch, guided by the tactile “Alt-Text” of the mountain.

CHAPTER 5: THE PHANTOM’S SERVER

At the bottom of the valley, they found it. Not a cave, but a bunker. The door was marked with the “Echo” symbol—a sound wave eating its own tail.

“This is where the Australian Day broadcast is coming from,” Dev said. “If we don’t fix the accessibility settings, the Prime Minister’s speech will be broadcast without captions, without Audio Description, and in a font size no one can read.”

They burst inside. The server room was unguarded, but the console was protected by the ultimate barrier.

A CAPTCHA.

But not just any CAPTCHA. It was a grid of 16 images of Australian animals.

“Select all the Quokkas,” the computer sneered.

“They all look like Quokkas!” Liam yelled. “That one might be a Wallaby! Or a small Kangaroo!”

“It’s a cognitive barrier,” Dev said. “It relies on cultural knowledge and visual acuity. It’s inaccessible.”

The Biometric Twist

“We need an alternative,” Dax said. “Look for the audio icon.”

There was none.

“Wait,” Liam said. “This system is old. It’s running on Legacy Code. It probably supports ‘Device Authentication’.”

Liam pulled out his USB key—his “Authorized User” token.

“Not requiring CAPTCHAs for authorized users,” Liam grinned, plugging it in.

The screen flashed green. AUTHENTICATED.

CHAPTER 6: THE FINAL REFACTOR

They had access. Now they had to patch the broadcast before it went live in 5 minutes.

Dev worked on the player. “I’m adding a transcript toggle. I’m ensuring the media player keyboard controls are standard.”

Dax worked on the visuals. “I’m fixing the color palette. No more red-on-green text. I’m boosting the luminance.”

Liam worked on the content. The speech was written in dense, academic English.

“I’m simplifying,” Liam muttered. “Short sentences. Plain Language. Expanding acronyms.”

3… 2… 1…

The “On Air” light turned red.

On screens all across Australia—from the pubs in Sydney to the stations in the Outback—the broadcast appeared.

It was perfect.

The captions were synced.

The Audio Description described the flag waving in the wind.

The text was readable, high-contrast, and clear.

“She’ll be right,” the Prime Minister said on screen.

“She certainly will be,” Liam smiled, collapsing into a beanbag chair in the corner of the bunker.

EPILOGUE: THE NULL ISLAND

The sun was setting over the Blue Mountains, painting the Three Sisters in gold and purple. The Three Best Friends sat on the bunker roof, eating the lamingtons that had miraculously survived the trek.

“We did good,” Dax said. “We made Australia Day accessible.”

“But who built the Echo?” Dev asked, holding up a strange, black microchip he had pulled from the server.

Liam took it. Etched into the silicon were coordinates.

0°N 0°E.

“Zero Zero,” Liam whispered. “That’s Null Island. The place where bad data goes to die.”

“There’s no land there,” Dax said. “It’s just ocean off the coast of Africa.”

“That’s what the maps say,” Dev said, his eyes gleaming with a new mystery. “But the code says otherwise. Someone is building a digital fortress at Null Island. And they just pinged us.”

Liam stood up, dusting the crumbs off his shorts.

“Well,” he grinned. “I’ve always wanted to go on a cruise.”

“Pack your togs,” Dax laughed.

“And your keyboards,” Dev added.

The Three Best Friends looked at the horizon. The Blue Mountains were behind them, but the Ocean of Null was waiting.

MYSTERY IN BLUE

A TRAVEL TROUBLES NOTES STORY

THE ECHO OF THE BLUE MOUNTAINS

Book III: An Australia Day Mystery

CHAPTER 1: THE TIMEOUT TRAP

It was Australia Day, and the heat was enough to melt the CSS off a stylesheet. The Three Best Friends—Liam, Dax, and Dev—were driving their trusty 4WD up the winding roads of the Blue Mountains. The esky was chockers with lamingtons and snags, and the mood was “she’ll be right”.

“I reckon we camp near the Three Sisters,” Dax said, adjusting his sunglasses. “Great view, high contrast, easy navigation.”

But as they approached Katoomba, the car’s dashboard display flickered. A countdown timer appeared on the GPS screen:
SESSION EXPIRING IN 10 SECONDS.

“Dev, extend the session!” Liam yelled.

Dev reached for the “Continue” button, but the car hit a pothole. His finger slipped.

3… 2… 1…

The GPS went black. The engine sputtered. The car rolled to a halt on the shoulder of the highway.

“It’s the Timeout Trap,” Dev groaned. “The system didn’t give us enough time to interact. It violated the rule: Provide users enough time to read and use content”.

The Genial Fix

“A standard timeout is fine for security,” Liam said, wiping sweat from his brow. “But for a critical task like driving? We need an option to turn off, adjust, or extend the time limit”.

Liam pried open the dashboard panel. He found the physical timer relay. “I’m bypassing the default setting. I’m hard-coding an exception for ‘Real-time Activity’.”

He twisted two wires together. The screen roared back to life, but the map was different. The roads weren’t marked with names; they were marked with code.

“We aren’t in Katoomba anymore,” Dax whispered. “We’re in the Source Code.”

CHAPTER 2: THE RECURSIVE RAVINE

They hiked into the valley, but the path was behaving strangely. Every time they walked 100 meters, they found themselves passing the same gum tree.

“It’s an infinite loop!” Dax cried. “We’re stuck in a recursive function without an exit condition!”

“It’s worse,” Dev said, pointing to a signpost. It spun wildly, the arrows changing direction every second. “The navigation is inconsistent. One minute the ‘Home’ link is on the left, the next it’s in the footer.”

A voice boomed from the canyon walls—a distorted, echoing laugh.

“Welcome to the Echo. Navigation is fluid here. Try to find the breadcrumb trail.”

“Breadcrumbs!” Liam realized. “The Echo is mocking us. We need to create a Site Map to understand the structure of the valley.”

The Physical Site Map

Dax grabbed a stick and began drawing in the red dirt. “If the visual path is broken, we rely on the DOM order.”

He mapped the landmarks like HTML elements: : The Sky (Always visible) : The Valley Floor (Where the content is) : The River (The end of the page)

“The Loop is in the ,” Dev noticed, looking at Dax’s map. “We’ve been walking in a sidebar! We need to Skip to Main Content.”

“Skip Links!” Liam shouted. “Find the anchor!”

They spotted a hidden trail marker labeled #main-content. They jumped over the barrier, breaking the loop and landing on the true path toward the Three Sisters.

CHAPTER 3: THE VOICE OF THE SISTERS

They reached the famous rock formation, but the viewing platform was deserted. A single, massive microphone stood at the edge of the cliff, pointing at the rocks.

“To pass,” the Echo’s voice thundered, “You must speak the Password. But be warned: The Echo listens to all inputs.”

“It’s a Voice Input Control,” Dev said. “But look at the wind. It’s blowing a gale. The background noise is too high.”

Liam stepped up to the mic. “Open Sesame!”

The wind howled. The system responded: “Did you say ‘Open Salami’?”

“No!” Liam yelled. “Cancel! Undo!”

The system processed the command: “Ordering Salami.”

“It’s an Error Prevention nightmare!” Dax panicked. “For inputs that cause legal commitments or financial transactions, we must be able to reversible, checked, or confirmed”.

The Modal Trap

A holographic receipt appeared in the air, blocking their path.
CONFIRM PURCHASE?

There was no “Cancel” button. Only “Yes.”

“It’s a Focus Trap,” Dev said. “I can’t tab away from the ‘Yes’ button. We need to force a keyboard interrupt.”

“Don’t speak,” Liam whispered. “Switch input modalities. The WCAG guidelines say users should be able to switch between input modes (voice, keyboard, mouse) at any time.”

Liam plugged his portable keyboard into the base of the microphone. He typed: ESCAPE.

The receipt vanished. The “Salami” order was cancelled.

“Fair crack of the whip,” Liam muttered. “That was close.”

CHAPTER 4: THE FOG OF #CCCCCC

They descended the Giant Stairway, but a thick fog rolled in. It wasn’t just white; it was a flat, featureless gray.

“I can’t see the steps,” Dax said, freezing in place. “The contrast ratio between the stone and the fog is 1:1. It’s invisible.”

“The Echo has lowered the contrast of the world,” Dev realized. “It’s targeting users with low vision.”

Dax, the designer, pulled out his “High Contrast” visor—a pair of augmented reality goggles he used for testing.

“I’m switching to High Contrast Mode,” Dax announced. “I’m inverting the colors.”

Through the goggles, the gray fog turned black, and the stone steps glowed neon yellow.

“Follow me!” Dax shouted. “I’ve got sufficient contrast!”

The Text-Only Fallback

But then the fog thickened, blocking even the AR signal. Dax stopped. “I’ve lost the visual.”

“Don’t rely on sensory characteristics alone,” Liam recited. “Don’t rely on shape, size, or visual location”.

Liam closed his eyes. He reached out and felt the railing. It had Braille markings etched into the steel.

“The railing has a text alternative!” Liam said. “It says: ‘Step 842. Turn Left.'”

They descended the rest of the stairs by touch, guided by the tactile “Alt-Text” of the mountain.

CHAPTER 5: THE PHANTOM’S SERVER

At the bottom of the valley, they found it. Not a cave, but a bunker. The door was marked with the “Echo” symbol—a sound wave eating its own tail.

“This is where the Australian Day broadcast is coming from,” Dev said. “If we don’t fix the accessibility settings, the Prime Minister’s speech will be broadcast without captions, without Audio Description, and in a font size no one can read.”

They burst inside. The server room was unguarded, but the console was protected by the ultimate barrier.

A CAPTCHA.

But not just any CAPTCHA. It was a grid of 16 images of Australian animals.

“Select all the Quokkas,” the computer sneered.

“They all look like Quokkas!” Liam yelled. “That one might be a Wallaby! Or a small Kangaroo!”

“It’s a cognitive barrier,” Dev said. “It relies on cultural knowledge and visual acuity. It’s inaccessible.”

The Biometric Twist

“We need an alternative,” Dax said. “Look for the audio icon.”

There was none.

“Wait,” Liam said. “This system is old. It’s running on Legacy Code. It probably supports ‘Device Authentication’.”

Liam pulled out his USB key—his “Authorized User” token.

“Not requiring CAPTCHAs for authorized users,” Liam grinned, plugging it in.

The screen flashed green. AUTHENTICATED.

CHAPTER 6: THE FINAL REFACTOR

They had access. Now they had to patch the broadcast before it went live in 5 minutes.

Dev worked on the player. “I’m adding a transcript toggle. I’m ensuring the media player keyboard controls are standard.”

Dax worked on the visuals. “I’m fixing the color palette. No more red-on-green text. I’m boosting the luminance.”

Liam worked on the content. The speech was written in dense, academic English.

“I’m simplifying,” Liam muttered. “Short sentences. Plain Language. Expanding acronyms.”

3… 2… 1…

The “On Air” light turned red.

On screens all across Australia—from the pubs in Sydney to the stations in the Outback—the broadcast appeared.

It was perfect.

The captions were synced.

The Audio Description described the flag waving in the wind.

The text was readable, high-contrast, and clear.

“She’ll be right,” the Prime Minister said on screen.

“She certainly will be,” Liam smiled, collapsing into a beanbag chair in the corner of the bunker.

EPILOGUE: THE NULL ISLAND

The sun was setting over the Blue Mountains, painting the Three Sisters in gold and purple. The Three Best Friends sat on the bunker roof, eating the lamingtons that had miraculously survived the trek.

“We did good,” Dax said. “We made Australia Day accessible.”

“But who built the Echo?” Dev asked, holding up a strange, black microchip he had pulled from the server.

Liam took it. Etched into the silicon were coordinates.

0°N 0°E.

“Zero Zero,” Liam whispered. “That’s Null Island. The place where bad data goes to die.”

“There’s no land there,” Dax said. “It’s just ocean off the coast of Africa.”

“That’s what the maps say,” Dev said, his eyes gleaming with a new mystery. “But the code says otherwise. Someone is building a digital fortress at Null Island. And they just pinged us.”

Liam stood up, dusting the crumbs off his shorts.

“Well,” he grinned. “I’ve always wanted to go on a cruise.”

“Pack your togs,” Dax laughed.

“And your keyboards,” Dev added.

The Three Best Friends looked at the horizon. The Blue Mountains were behind them, but the Ocean of Null was waiting.

Semantic HTML is more than clean code. It strengthens SEO, improves accessibility, and creates a clearer structure for both users and search engines.
I’ve published a short article on why semantic elements matter and how they support inclusive, high‑performing websites. Read it here:
https://www.innoweb.com.au/blog/the-role-of-semantic-html-in-seo-and-accessibility

#WebDev #HTML #Accessibility #SEO #a11y #SemanticHTML

#Development #Pitfalls
Semantics beyond the tag name · What it means to actually write semantic HTML https://ilo.im/169akd

_____
#SemanticHTML #Accessibility #Landmarks #ARIA #WebComponents #Browsers #WebDev #Frontend #HTML #JavaScript

#Development #Guidelines
HTML page headings in the header? · Why they don’t really belong there https://ilo.im/167o5x

_____
#Headings #SemanticHTML #Accessibility #Landmarks #ScreenReader #Keyboard #WebPage #WebDev #Frontend #HTML

#Development #Approaches
Structuring web components · Preserving semantics and browser features https://ilo.im/166zdd

_____
#SemanticHTML #Accessibility #Browser #WebComponents #HtmlWebComponents #DOM #ShadowDOM #WebDev #Frontend #HTML

#Development #Approaches
Fixing the fun front-end stuff? · Fix the important front-end stuff too https://ilo.im/166qo0

_____
#Methodology #Workflows #WebDev #Frontend #Accessibility #SemanticHTML #HTML #CSS

Pico CSS • Minimal CSS Framework for Semantic HTML

https://picocss.com

#HackerNews #PicoCSS #Minimalism #SemanticHTML #CSSFramework #WebDesign

#Design #Guidelines
The first rule of ARIA · Benefits of sticking with built-in HTML controls https://ilo.im/16686o

_____
#Accessibility #WCAG #SemanticHTML #ARIA #Browser #WebDev #Frontend #HTML

Also a microformats/semantic HTML question: is there a good accessibility argument for using microformats or other semantic markup for locations specifically?

I ask because I've soured a bit on structured data now that it feels like I'm just making it easier to slurp up my page for AI training.

I like the idea of making things richer and easier to use for humans, but apart from using microformats to add data to webmentions, I'm starting to consider paring back on how much I use them.

#IndieWeb #Microformats #StructuredData #SemanticHTML #AI

I'm looking at the <time> HTML element and I'm confused about the datetime attribute.

I have a definite start, and a duration. What should I put in the datetime attribute? According to the MDN page, I can put a timestamp OR a duration, but not both...

Here's an example:

<span>Concert ran from <time datetime="2024-06-15T20:00-0500" title="2024-06-16T01:00+00">8 to 11 pm, Jun 15th 2024</time></span>

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time

Thoughts? #lazyweb #html5 #semantichtml

Erect a clown website, expect a circus user experience.

#HTML #SemanticHTML #JavaScript #WebDesign #Accessibility

#Development #Resources
The HTML ‘caption’ element · How to properly use ‘caption’ in HTML tables https://ilo.im/164135

_____
#SemanticHTML #Table #Caption #Accessibility #ScreenReader #Content #WebDev #Frontend #HTML

Given that the biggest obstacle to the adoption of microformats is the lack of programs that actually implement them, I have been toying with the idea of writing some useful programs that work with all the information we put onto our websites.

It's frustrating that we're at a point where the bottleneck of the Semantic Web ideal is not actually a low amount of structured information, but the lack of any program to do anything interesting whatsoever with it!

Who cares if we all use the HTML5 tag on our sites, if there is no browser that actually provides a "contact webmaster" button in the sidebar?

Who cares if we all mark up our cooking recipes as perfectly detailed machine readable h-recipe entries, if there is zero cooking apps or whatever actually capable of using any of the data we provide?

Who cares if we all use h-cards and h-feeds and whatnot if there is no feed reader that can actually notify us when our friends posted a new blog entry?

#microformats #microformats2 #HTML #webDev #indieWeb #semanticHTML #semanticWeb #HTML5

I am super excited to announce that I am working on a complete renewal of my entire indie/small website project! :3

I am currently taking the time to get my entire website, including all sub-pages and projects on it, up to speed at once in several categories.

This includes but is very much not limited to:

• XHTML to HTML5 migration
• Bilingual German/English sections
• Semantic HTML everywhere, including microformats2
• Full checkup and improvement of all content on the site
• Better design and reworked CSS
• Massive accessibility improvements

Read the full announcement including a history of the project here (~3 600 words, but with a skip-friendly table of contents):

https://libre.town/thoughts/entry_15_full.html

Please be aware though that what you currently see live on the internet does not represent the state of the rework.
Since I am working on the new version behind the scenes on my own computer, the blog post I linked still is crammed into the old design and structure of the site so I could just get it out there.

#HTML #webDevelopment #gameDev #webDev #semanticWeb #libreTown #semanticHTML #CSS #hobby #indieWeb #smallWeb #webRevival #XHTML #HTML5 #blog

#Development #Events
CSS Naked Day 2025 · April 9 is the day to showcase semantic HTML https://ilo.im/1637um

_____
#Festivities #WebStandards #SemanticHTML #Accessibility #Frontend #HTML #CSS #CssNakedDay #2025

#Development #Guidelines
Mainlining mains · “Use only one (non-hidden) ‘main’ landmark per HTML page.” https://ilo.im/1635cl

_____
#SemanticHTML #HTML #Specification #Accessibility #ScreenReader #ARIA #WebDev #Frontend

I'm improving my Semantic Extractor that is used behind the scenes on https://w3blogy.cz for improved Author Attribution, Descriptions and Tags.

Now I can read metatags, rel and rev links, JSON-LD scripts, microdata and RDFa Lite.

The most used are OpenGraph and TwitterCard metadatada. There are some JSON-LD, a few microdata and none RDFa in my list of recommended articles.

I'm about to implement microformats parser because I'm very curious if there will be some.

#indieweb #semanticHTML

Attention, blind Akkoma users! I will be writing to the developer with my concerns about a few problems with accessibility on this platform. Most should be easy to resolve. Please let me know if you find any more, and also state what browser and screen reader you are using. Note: This is in reference to the site itself, not to your client of choice. I will post about that separately. For the record, I use NVDA with Firefox.

1. Many buttons are unlabelled and simply say "button". This is true on the main page as well as when viewing posts and tabs in profiles. Most work once pressed. They just need to be labelled.
2. Searching for people, tags, groups, and posts is inaccessible. I can enter the edit field and write my text, but then, there are two unlabelled buttons next to that. The first simply takes me back to the edit field. The second does nothing. I am assuming this is a submit button that doesn't work via the keyboard.
3. It is impossible to view followers, as well as those whom I follow. I can see the numbers of each but not the people and groups themselves.
4. I cannot read my own profile without editing it. There appears to be no link where I can simply view it, either as myself or anonymously. If I go to my page and am not logged in, however, I can view it. I can also easily edit it when logged in.
5. The page renders very differently in Chrome than in Firefox. In Chrome, I can't see anything but my notifications, so I can't get to my page or the other timelines.

#accessibility #Akkoma #blind #Blob.cat #Chrome #Fediverse #fediverse #Firefox #JAWS #NVDA #html #ScreenReaders #SemanticHtml #Supermium #Windows

I am unable to view or even edit my sent posts in TweeseCake with Blob.cat! I have no idea why. Maybe, it's different enough from Mastodon (the actual network that TweeseCake is meant to work with) that it won't allow me to do it. Sometimes, I honestly have half a mind to just give up all social networking accept Dreamwidth, because it's the only place that is completely accessible. I don't have to beg developers to make things screenreader-friendly, or hope it will work with this client or that website because I can't do x on the main one, or that y feature that worked on one site will be accessible on the next one. It just works. Say what you like about Facebook, but the Basic Mobile site (not app) worked. I hardly had any problem with it. Then, they closed it, and I left because their main site is a nightmare to work with. Now, I'm in the Fediverse, feeling as if I'm using the main Facebook site all over again!

I don't blame the administrators of friendica.world or blob.cat. It's not their fault. They're just working with what they have. Both are wonderful human beings who have been very kind to me. It's not even the fault of the developers of both sites. It makes sense, when you're a small business or a single developer, not to know about things such as accessibility. I just wish more people would learn and/or write things in semantic html or offer some kind of text-only or basic version of their site. I know that Deque University and Geeks4Geeks teach accessibility and teach html with accessibility included, respectively, but I guess other sites and books don't. As for TweeseCake, this is an excellent client for the blind that works well with Friendica and probably even better with Mastodon. But again, it's by a single developer. While changes are coming, people do have lives and other committments, and one person can't be expected to work as quickly as a huge company.

By the way, my Dreamwidth account is here. I must update it slightly, as I have some new entries to post for the month.

dandylover1.dreamwidth.org

#accessibility #Akkoma #blind #Facebook #Fediverse #fediverse #Friendica #html #Mastodon #NVDA #ScreenReaders #SemanticHTML #TweeseCake #WCAG #Windows

Yay! I'm on Blob.cat! I am happy to note that almost all of it is accessible, minus one or two minor issues. I have a feeling this is not an instance problem, but an Akkoma problem. Even as a non-programmer, I am also fairly certain that this can be fixed easily. No one needs to rewrite the entire front end, as with Friendica. Basically, in the Profile and Settings, and on the main page, there are some buttons and check boxes that are not labelled properly. The check boxes under Settings, for example, just say "check", without stating if they are checked or unchecked. However, when they are unchecked, there is something labelled simply "button" that appears. There are other buttons for things such as post visibility default, but while they are labelled i.e. "Unlisted", "Public", etc. there is no way to tell which button is checked. In the profile, the Bio section appears blank, even though I filled it out during registration and can read it when I go to my profile without trying to edit it. Finally, on the main page, there are two things labelled simply "button". I think they have something to do with emojis. But that's really it! Everything else is accessible with NVDA, and I love the feature set! I really hope these tiny things can be worked on, because it would make everything truly perfect!

By the way, here is my profile page. I haven't written anything yet, as I was only approved recently.

blob.cat/dandylover1

#accessibility #Akkoma #blind #Blob.Cat #Fediverse #fediverse #Friendica #html #NVDA #ScreenReaders #SemanticHtml #WCAG

#Development #Guidelines
Accessibility essentials · What every front-end developer should know https://ilo.im/161slf

_____
#Accessibility #AltText #SemanticHTML #Form #Keyboard #ARIA #React #WebDev #Frontend #HTML

#Development #Opportunities
The underrated HTML ‘dl’ element · A natural fit for common visual design patterns https://ilo.im/161khj

_____
#DescriptionList #HTML #SemanticHTML #Accessibility #ScreenReader #DesignPattern #WebDesign #WebDev #Frontend

Is there a specific recommended way to mark up placeholders and nulls and other non-normal values when they appear in semi-structured contexts (maybe a table, maybe not)?

<i> seems maybe-kind-of appropriate (alternate voice? yeah, if i was reading this out, my tone would be different in a certain way when i got to this part) but maybe i just love <i> too much and am trying to find any excuse to use it more.

Like, if it says “date issued”, it doesn't feel right to just slap arbitrary text like “not issued yet” in there. That's not a date of issue! That's not a date at all!

In ad-hoc syntaxes or handwriting, i'd use some kind of brackets (or maybe a different ink colour) for this.

#SemanticHTML #HTML

#Development #Guides
The HTML ‘b’ element · Is the element still useful in current practice? https://ilo.im/1608z3

_____
#Content #SemanticHTML #Accessibility #ScreenReader #WebDev #Frontend #HTML #HTML5 #HTML4

#Development #Guides
The HTML ‘aside’ element · How it relates to the ‘article’ element and what makes it special https://ilo.im/15zxfp

_____
#Content #Sidebar #Sectioning #Landmark #Accessibility #ARIA #SemanticHTML #WebDev #Frontend #HTML