Recent searches

No recent searches

Search options

Only available when logged in.
eupolicy.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This Mastodon server is a friendly and respectful discussion space for people working in areas related to EU policy. When you request to create an account, please tell us something about you.

Administered by:

Server stats:

196
active users

eupolicy.social: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.1

#html5

0 posts0 participants0 posts today
*
Thomas Weibel

Das Wandern ist des Schweizers Lust: "Mont" ist eine #AugmentedReality-#Webapp, die Schweizer Berggipfel und Hügelkuppen benennt und auf dem Handybildschirm anzeigt (iOS only).

thomasweibel.ch/mont2/

Endlich ist nun auch mein Paper über die verwendete Technik erschienen:

phaidra.fhstp.ac.at/detail/o:7

Für alle, die hoch hinaus wollen - mit #VanillaJS oder in Wanderschuhen.

#html5 #ar #geoinformatics #geography #topography #ios #opendata #geodata #swisstopo #switzerland @OpendataCH

Replied in thread
this.ven

@stephan Ich stimme Dir von der ästhetischen Perspektive her zu.

Allerdings hätte ich vom.technischen Standpunkt zwei Optimierungsvorschläge:

1. Die Website verwendet kein TLS, sodass beim Besuch mit HTTPS-only Setups eine Warnmeldung erscheint. Das kann weniger erfahrene Nutzer:innen abschrecken. @letsencrypt könnte hier pflegeleicht eingesetzt werden.

2. Das Design ist nicht responsive o.ä.,.sodass Nutzer:innen, die die Website per Smartphone aufrufen, wahrscheinlich abspringen. Es braucht kein #JavaScriot oder aufwändige Frameworks für die notwendige Responsiveness. Etwas #CSS3 und #HTML5 reichen da schon.

*
Terence Eden’s Blog

Simultaneous Translation in HTML

shkspr.mobi/blog/2022/07/simul

How do you show two languages simultaneously in HTML? If you want to show text in a foreign language, the markup is simple:

<html lang="en-GB">...As Caesar said: <i lang="la">veni vidi vici</i>

That says the page is in British English (en-GB) but the specific phrase is in Latin (la). But how can you offer an in-text translation of that phrase into the page's native language?

Here are a few options - and their drawbacks.

Title Text

<i lang="la" title="I came, I saw, I conquered">veni vidi vici</i>

veni vidi vici

The user has to hover their pointer over the text and a pop-up will appear with the translation. There are two disadvantages to this:

  1. Not all devices - like mobile browsers - support title text.
  2. The title text has no separate language attribute - so is semantically in Latin.

The language can be corrected by wrapping the title in a separate span.

Tables

The humble <table> can present two or more items of text adjacent to one another.

<table>   <tr>      <td lang="la">veni vidi vici</td>      <td lang="en">I came, I saw, I conquered</td>   </td></table>

veni vidi viciI came, I saw, I conquered

Tables can be problematic on narrow screens - either requiring wrapping or scrolling.

Details

<details>    <summary lang="la">veni vidi vici</summary>    I came, I saw, I conquered</details>

veni vidi vici

I came, I saw, I conquered

Again, it requires interaction - which may not work on devices like eReaders. Unfortunately, details is a block element, but you can read my experiments in making them inline.

Ruby

As suggested by John Ribbens

<ruby lang="la">   veni vidi vici   <rt lang="en-GB">I came, I saw, I conquered</rt></ruby>

veni vidi vici I came, I saw, I conquered

That works quite well - although Ruby text is pretty small. But it can be styled with CSS.

Ruby is usually used for showing pronunciation of characters. But, crucially, it isn't restricted to that.

Description Lists

<dl>    <dt lang="la">veni vidi vici</dt>    <dd>I came, I saw, I conquered</dd></dl>

veni vidi vici I came, I saw, I conquered

Again, very easy to style with CSS. One of the nice things about Description Lists is that it allows for multiple definitions:

<dl>    <dt lang="la">veni vidi vici</dt>    <dd>I came, I saw, I conquered</dd>    <dd lang="ja">私は私が征服した来た</dd></dl>

MIX THEM ALL TOGETHER!

Let's take a section from Chaucer's Canterbury Tales. Most of the Middle English is understandable - but a few archaic words need translation. It's also useful to have some commentary on the text.

<dl>   <dt lang="enm">Full many a fat partridge had he in       <ruby>mew<rp>(</rp><rt lang="en-GB">cage</rt><rp>)</rp></ruby>   </dt>   <dd>The place behind Whitehall, where the King's hawks were caged was called the Mews.</dd></dl><details>   <summary lang="enm">And many a bream, and many a       <ruby>luce<rp>(</rp><rt lang="en-GB">pike</rt><rp>)</rp>      in       <ruby>stew<rp>(</rp><rt lang="en-GB">fish-pond</rt><rp>)</rp>   </summary>   In those Catholic days, when much fish was eaten, no gentleman's mansion was complete without a "stew".</details>

Full many a fat partridge had he in mew(cage) The place behind Whitehall, where the King's hawks were caged was called the Mews. And many a bream, and many a luce(pike) in stew(fish-pond)

In those Catholic days, when much fish was eaten, no gentleman's mansion was complete without a "stew".

Which should you use?

Yes.

There's no definitive "correct" answer here. title text might make sense for occasional words which need translating - and you're sure either the user's device supports it, or they won't be substantially disadvantaged if it doesn't.

Similarly, details works for interactive content which is optional to understanding.

The ruby elements are great if you want a fairly unobtrusive way to translate specific words.

Lists are great if you need to offer multiple translations.

Mashing them all together is a bit silly and complicated - but allows for a greater variety in the way the texts are displayed.

Terence Eden’s Blog · Simultaneous Translation in HTML
More from Terence Eden
#HTML5#i18n
Claudio Pires

Rare WordPress theme is all about building unique, creative and professional websites through industry-leading options network without having to touch a line of code visualmodo.com/theme/rare-word Our amazingly flexible network of options is paired with an easy to use interface that allows anyone from beginner to advanced build beautiful, responsive websites 📱💻🖥️
#webdesign #HTML5 #CSS3 #template #plugins #themes #WordPress #ecommerce #responsive #retina #marketing #website #blog #bootstrap #slider

VisualmodoRare WordPress Theme - Ultimate Responsive Template by VisualmodoRare WordPress Theme can be used for any type of website design building; business, corporate, portfolio, blog, shop, agency and much more in only one tool
*
Terence Eden’s Blog

HTML Ruby and Bidirectional Text

shkspr.mobi/blog/2022/06/html-

The set of HTML <ruby> elements allow us to add pronunciation above text. For example:

"When you visit the zoo, be sure to see the panda - 熊(Xióng)猫(māo)."

This is written as:

<ruby>熊<rp>(</rp><rt>Xióng</rt><rp>)</rp></ruby><ruby>猫<rp>(</rp><rt>māo</rt><rp>)</rp></ruby>.

That is, the word or character which needs text above it is wrapped in <ruby>. The pronunciation is wrapped in <rt>. The <rp> element indicates the presence of a parenthesis - which isn't usually displayed, but will be shown if the browser doesn't support <ruby> syntax.

That's fairly easy for scripts written left-to-right. But how does it work for scripts like Arabic where the text is written right-to-left, but the user may want the pronunciations left-to-right?

Let's take the phrase "Hello World" in Arabic: مرحبا بالعالم. Google Translate tells me this is pronounced "marhaban bialealami".

For a single word, the directionality can be ignored. The browser should be smart enough to place the pronunciation above the word:

<p>Hello is: <ruby>مرحبا<rp>(</rp><rt>marhaban</rt><rp>)</rp></ruby>. What a useful word!</p>

Hello is: مرحبا(marhaban). What a useful word!

What about if we have a few words - or a whole sentence - which is entirely RTL?

<p dir="rtl">مرحبا بالعالم</p>

Is displayed aligned to the right side of the screen:

مرحبا بالعالم

There are a few ways to add pronunciation.

Separate The Words

The first is to write each word separately. For example <ruby>1st word</ruby> <ruby>2nd word</ruby>. Obviously, this isn't normally how you'd write a RTL language! But it does work:

<p dir="rtl"><ruby>مرحبا<rp>(</rp><rt>marhaban</rt><rp>)</rp></ruby> <ruby>بالعالم<rp>(</rp><rt>bialealami</rt><rp>)</rp></ruby></p>

Which displays as:

مرحبا(marhaban) بالعالم(bialealami)

It helps to think of the way the characters of the script are stored in memory.

A word that displays as ABC is stored as C B A.

So the above is written "correctly" - even though it looks odd in the source-code view.

All At Once

But there is an alternative if you want the source text to look natural - i.e. [2nd word] [1st word].

It's a bit messy, but you can write the LTR text in <rt> "backwards"!

<p dir="rtl"><ruby>مرحبا بالعالم<rt>bialealami marhaban</rt></ruby></p>

مرحبا بالعالمbialealami marhaban

But, again, that doesn't seem very satisfying! It also divorces the pronunciation from the original word - which is unfortunate for screenreaders.

The Ruby layout algorithm is usually clever enough to group words separated by spaces:

مرحبا بالعالمB A

مرحبا بالعالمBbbbbbbbbbbbbb Aaaaaaaaaaaaa

Although, if the pronunciations have a significantly different length than each other, it can get a bit messy:

مرحبا بالعالمBbbbbbbbbbbbbb A

مرحبا بالعالمB Aaaaaaaaaaaaa

In which case, you probably need to go for the first technique and wrap each word in its own <ruby> element:

مرحبا(A) بالعالم(Bbbbbbbbbbbbbb)

BDO

It's tempting to think that simply using the <bdo> element can help us here. It can't!

Using the bidirectional override will display characters RTL, rather than words.

<p dir="rtl"><ruby>مرحبا بالعالم<rt><bdo dir="rtl">marhaban bialealami</bdo></rt></ruby></p>

Becomes:

مرحبا بالعالمmarhaban bialealami

I guess you could spell each word backwards. Which would be extremely annoying for everyone and a complete nightmare for screen readers!

Instead, it can be fixed if each word is then given an explicit LTR direction:

<p dir="rtl"><ruby>مرحبا بالعالم<rt>   <bdo dir="rtl">      <span dir="ltr">marhaban</span> <span dir="ltr">bialealami</span>   </bdo></rt></ruby></p>

مرحبا بالعالم marhaban bialealami

Is that it?

So, I think those are the only ways to achieving mixing bidirectional text pronunciation. But I'd welcome any corrections and suggestions!

Terence Eden’s Blog · HTML Ruby and Bidirectional Text
More from Terence Eden
#HTML5#i18n
Timo Tijhof

You'd think Google, having launched schema.org, knows how to produce valid schema.org metadata and HTML5.

YouTube: How about a `<span>` inside the head, and `<link rel=alternative>` inside the body?

HTML5 parsers:
Thanks, I'll take that span as your implied end of `<head>`, and raise you an implied start of `<body>`. Everything that follows is now part of the body.

Context:
github.com/Ranchero-Software/N

GitHubFeature request: construct feed URLs for YouTube channels · Issue #902 · Ranchero-Software/NetNewsWireBy superlex
#NetNewsWire#WebStandards#whatwg
Terence Eden’s Blog

Stop using preg_* on HTML and start using \Dom\HTMLDocument instead

shkspr.mobi/blog/2025/05/stop-

It is a truth universally acknowledged that a programmer in possession of some HTML will eventually try to parse it with a regular expression.

This makes many people very angry and is widely regarded as a bad move.

In the bad old days, it was somewhat understandable for a PHP coder to run a quick-and-dirty preg_replace() on a scrap of code. They probably could control the input and there wasn't a great way to manipulate an HTML5 DOM.

Rejoice sinners! PHP 8.4 is here to save your wicked souls. There's a new HTML5 Parser which makes everything better and stops you having to write brittle regexen.

Here are a few tips - mostly notes to myself - but I hope you'll find useful.

Sanitise HTML

This is the most basic example. This loads HTML into a DOM, tries to fix all the mistakes it finds, and then spits out the result.

 PHP$html = '<p id="yes" id="no"><em>Hi</div><h2>Test</h3><img />';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED , "UTF-8" );echo $dom->saveHTML();

It uses LIBXML_HTML_NOIMPLIED because we don't want a full HTML document with a doctype, head, body, etc.

If you want Pretty Printing, you can use my library.

Get the plain text

OK, so you've got the DOM, how do you get the text of the body without any of the surrounding HTML

 PHP$html = '<p><em>Hello</em> World!</p>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR , "UTF-8" );echo $dom->body->textContent;

Note, this doesn't replace images with their alt text.

Get a single element

You can use the same querySelector() function as you do in JavaScript!

 PHP$element = $dom->querySelector( "h2" );

That returns a pointer to the element. Which means you can run:

 PHP$element->setAttribute( "id", "interesting" );echo $dom->querySelector( "h2" )->attributes["id"]->value;

And you will see that the DOM has been manipulated!

Search for multiple elements

Suppose you have a bunch of headings and you want to get all of them. You can use the same querySelectorAll() function as you do in JavaScript!

To get all headings, in the order they appear:

 PHP$headings = $dom->querySelectorAll( "h1, h2, h3, h4, h5, h6" );foreach ( $headings as $heading ) {   // Do something}

Advanced Search

Suppose you have a bunch of links and you want to find only those which point to "example.com/test/". Again, you can use the same attribute selectors as you would elsewhere

 PHP$dom->querySelectorAll( "a[href^=https\:\/\/example\.com\/test\/]" );

Replacing content

Sadly, it isn't quite as simple as setting the innerHTML. Each search returns a node. That node may have children. Those children will also be node which, themselves, may have children, and so on.

Let's take a simple example:

 PHP$html = '<h2>Hello</h2>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );$element = $dom->querySelector( "h2" );$element->childNodes[0]->textContent = "Goodbye";echo $dom->saveHTML();

That changes "Hello" to "Goodbye".

But what if the element has child nodes?

 PHP$html = '<h2>Hello <em>friend</em></h2>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );$element = $dom->querySelector( "h2" );$element->childNodes[0]->textContent = "Goodbye";echo $dom->saveHTML();

That outputs <h2>Goodbye<em>friend</em></h2> - so think carefully about the structure of the DOM and what you want to replace.

Adding a new node

This one is tricky! Let's suppose you have this:

 HTML<div id="page">   <main>      <h2>Hello</h2>

You want to add an <h1> before the <h2>. Here's how to do this.

First, you need to construct the DOM:

 PHP$html = '<div id="page"><main><h2>Hello</h2>';$dom = \Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );

Next, you need to construct an entirely new DOM for your new node.

 PHP$newHTML = "<h1>Title</h1>";$newDom = \Dom\HTMLDocument::createFromString( $newHTML, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );

Next, extract the new element from the new DOM, and import it into the original DOM:

 PHP$element = $dom->importNode( $newDom->firstChild, true );

The element now needs to be inserted somewhere in the original DOM. In this case, get the h2, tell its parent node to insert the new node before the h2:

 PHP$h2 = $dom->querySelector( "h2" );$h2->parentNode->insertBefore( $element, $h2 );echo $dom->saveHTML();

Out pops:

 HTML<div id="page">   <main>      <h1>Title</h1>      <h2>Hello</h2>   </main></div>

An alternative is to use the appendChild() method. Note that it appends it to the end of the children. For example:

 PHP$div = $dom->querySelector( "#page" );$div->appendChild( $element );echo $dom->saveHTML();

Produces:

 HTML<div id="page">   <main>      <h2>Hello</h2>   </main>   <h1>Title</h1></div>

And more?

I've only scratched the surface of what the new 8.4 HTML Parser can do. I've already rewritten lots of my yucky old preg_ code to something which (hopefully) is less likely to break in catastrophic ways.

If you have any other tips, please leave a comment.

Terence Eden’s Blog · Stop using preg_* on HTML and start using \Dom\HTMLDocument instead
More from Terence Eden
#HTML#HTML5#php
Replied in thread
Kevin Karhan :verified:

@ajsadauskas @JessTheUnstill @tomiahonen yes, and to add insult to injury #Mozilla didn't even wanted to sell people like @fuchsiii or me a #FirefoxOS device, with the only one being "launched" in the #EU being a #SimLock'd & #NetLock'd #prepaid phone in #Spain one could only attain in-store with all the "#KYC" nonsense they had, demanding a legal address in Spain back then.

And #nerds like myself are far from the "#consoomer #Normies" for whom stuff that isn't on shelves at Staturn/MediaMarkt, BestBuy, Walmart, ... doesn't exist. I'm used to importing #tech that I want!

YouTubeWe Tried Signal's MobileCoin So You Never Have To...By Techlore
#mobilecoin
Terence Eden’s Blog

An opinionated HTML Serializer for PHP 8.4

shkspr.mobi/blog/2025/04/an-op

A few days ago, I wrote a shitty pretty-printer for PHP 8.4's new Dom\HTMLDocument class.

I've since re-written it to be faster and more stylistically correct.

It turns this:

<html lang="en-GB"><head><title id="something">Test</title></head><body><h1 class="top upper">Testing</h1><main><p>Some <em>HTML</em> and an <img src="example.png" alt="Alternate Text"></p>Text not in an element<ol><li>List</li><li>Another list</li></ol></main></body></html>

Into this:

<!doctype html><html lang=en-GB>    <head>        <title id=something>Test</title>    </head>    <body>        <h1 class="top upper">Testing</h1>        <main>            <p>                Some                 <em>HTML</em>                 and an                 <img src=example.png alt="Alternate Text">            </p>            Text not in an element            <ol>                <li>List</li>                <li>Another list</li>            </ol>        </main>    </body></html>

I say it is "opinionated" because it does the following:

  • Attributes are unquoted unless necessary.
  • Every element is logically indented.
  • Text content of CSS and JS is unaltered. No pretty-printing, minification, or checking for correctness.
  • Text content of elements may have extra newlines and tabs. Browsers will tend to ignore multiple whitespaces unless the CSS tells them otherwise.
    • This fucks up <pre> blocks which contain markup.

It is primarily designed to make the markup easy to read. Because according to the experts:

A computer language is not just a way of getting a computer to perform operations but rather … it is a novel formal medium for expressing ideas about methodology. Thus, programs must be written for people to read, and only incidentally for machines to execute.

I'm fairly sure this all works properly. But feel free to argue in the comments or send me a pull request.

Here's how it works.

When is an element not an element? When it is a void!

Modern HTML has the concept of "Void Elements". Normally, something like <a> must eventually be followed by a closing </a>. But Void Elements don't need closing.

This keeps a list of elements which must not be explicitly closed.

$void_elements = [    "area",    "base",    "br",    "col",    "embed",    "hr",    "img",    "input",    "link",    "meta",    "param",    "source",    "track",    "wbr",];

Tabs 🆚 Space

Tabs, obviously. Users can set their tab width to their personal preference and it won't get confused with semantically significant whitespace.

$indent_character = "\t";

Setting up the DOM

The new HTMLDocument should be broadly familiar to anyone who has used the previous one.

$html = '<html lang="en-GB"><head><title id="something">Test</title></head><body><h1 class="top upper">Testing</h1><main><p>Some <em>HTML</em> and an <img src="example.png" alt="Alternate Text"></p>Text not in an element<ol><li>List</li><li>Another list</li></ol></main></body></html>>'$dom = Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR, "UTF-8" );

This automatically adds <head> and <body> elements. If you don't want that, use the LIBXML_HTML_NOIMPLIED flag:

$dom = Dom\HTMLDocument::createFromString( $html, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED, "UTF-8" );

To Quote or Not To Quote?

Traditionally, HTML attributes needed quotes:

<img src="example.png" class="avatar no-border" id="user-123">

Modern HTML allows those attributes to be unquoted as long as they don't contain ASCII Whitespace or certain other characters

For example, the above becomes:

<img src=example.png class="avatar no-border" id=user-123>

This function looks for the presence of those characters:

function value_unquoted( $haystack ){    //  Must not contain specific characters    $needles = [         //  https://infra.spec.whatwg.org/#ascii-whitespace        "\t", "\n", "\f", "\n", " ",         //  https://html.spec.whatwg.org/multipage/syntax.html#unquoted         "\"", "'", "=", "<", ">", "`" ];    foreach ( $needles as $needle )    {        if ( str_contains( $haystack, $needle ) )        {            return false;        }    }    //  Must not be null    if ( $haystack == null ) { return false; }    return true;}

Re-re-re-recursion

I've tried to document this as best I can.

It traverses the DOM tree, printing out correctly indented opening elements and their attributes. If there's text content, that's printed. If an element needs closing, that's printed with the appropriate indentation.

function serializeHTML( $node, $treeIndex = 0, $output = ""){    global $indent_character, $preserve_internal_whitespace, $void_elements;    //  Manually add the doctype to start.    if ( $output == "" ) {        $output .= "<!doctype html>\n";    }    if( property_exists( $node, "localName" ) ) {        //  This is an Element.        //  Get all the Attributes (id, class, src, &c.).        $attributes = "";        if ( property_exists($node, "attributes")) {            foreach( $node->attributes as $attribute ) {                $value = $attribute->nodeValue;                //  Only add " if the value contains specific characters.                $quote = value_unquoted( $value ) ? "" : "\"";                $attributes .= " {$attribute->nodeName}={$quote}{$value}{$quote}";            }        }        //  Print the opening element and all attributes.        $output .= "<{$node->localName}{$attributes}>";    } else if( property_exists( $node, "nodeName" ) &&  $node->nodeName == "#comment" ) {        //  Comment        $output .= "<!-- {$node->textContent} -->";    }    //  Increase indent.    $treeIndex++;    $tabStart = "\n" . str_repeat( $indent_character, $treeIndex );     $tabEnd   = "\n" . str_repeat( $indent_character, $treeIndex - 1);    //  Does this node have children?    if( property_exists( $node, "childElementCount" ) && $node->childElementCount > 0 ) {        //  Loop through the children.        $i=0;        while( $childNode = $node->childNodes->item( $i++ ) ) {            //  Is this a text node?            if ($childNode->nodeType == 3 ) {                //  Only print output if there's no HTML inside the content.                //  Ignore Void Elements.                if (                       !str_contains( $childNode->textContent, "<" ) &&                     property_exists( $childNode, "localName" ) &&                           !in_array( $childNode->localName, $void_elements ) )                 {                    $output .= $tabStart . $childNode->textContent;                }            } else {                $output .= $tabStart;            }            //  Recursively indent all children.            $output = serializeHTML( $childNode, $treeIndex, $output );        };        //  Suffix with a "\n" and a suitable number of "\t"s.        $output .= "{$tabEnd}";     } else if ( property_exists( $node, "childElementCount" ) && property_exists( $node, "innerHTML" ) ) {        //  If there are no children and the node contains content, print the contents.        $output .= $node->innerHTML;    }    //  Close the element, unless it is a void.    if( property_exists( $node, "localName" ) && !in_array( $node->localName, $void_elements ) ) {        $output .= "</{$node->localName}>";    }    //  Return a string of fully indented HTML.    return $output;}

Print it out

The serialized string hardcodes the <!doctype html> - which is probably fine. The full HTML is shown with:

echo serializeHTML( $dom->documentElement );

Next Steps

Please raise any issues on GitLab or leave a comment.

Terence Eden’s Blog · An opinionated HTML Serializer for PHP 8.4
More from Terence Eden
#HowTo#HTML5#php
Terence Eden

🆕 blog! “An opinionated HTML Serializer for PHP 8.4”

A few days ago, I wrote a shitty pretty-printer for PHP 8.4's new Dom\HTMLDocument class.

I've since re-written it to be faster and more stylistically correct.

It turns this:

<html lang="en-GB"><head><title id="something">Test</title></head><body><h1 class="top upper">Testing</h1><main><p>Some <em>HTML</em> and an…

👀 Read more: shkspr.mobi/blog/2025/04/an-op
⸻
#HowTo #HTML5 #php

Terence Eden’s Blog · An opinionated HTML Serializer for PHP 8.4
More from Terence Eden
Georgiana Brummell

I tried to post this to the Friendica support forum, but it kept timing out when I entered my information. I am now attempting to subscribe to their e-mail list. However, I thought I would write this here so that those who know coding, etc. might be able to offer a solution, or at least, to pass this on to the developers.

I joined Friendica in October of 2024, when Facebook decided to shut down their Basic Mobile site (not app). I am totally blind, and their main page is a nightmare to use with a screen readre (NVDA in my case). I chose Friendica because of the huge character limit, the ability to edit and delete posts, local posting, extensive profiles with keywords, and the ability to connect with all sorts of accounts in the Fediverse. For the most part, I am enjoying my time here. However, I am noticing a lot of inaccessibility on the Friendica page. I am not a programmer, but I'm guessing this is at the core of the software and is not due to the instance I'm using (friendica.world). I am also guessing that the page is not written in HTML5 and does not follow WCAG guidelines, though I may be wrong about that. If not, I strongly urge the developers to review them and implement them if possible. If so, perhaps, some changes can still be made that would make this a more screen reader-friendly site. Note that I tried this with Firefox and Supermium (a direct fork of Chrome).

Mostly, I use TweeseCake to access the site, but there are some things I can't do with that client. All of the following refer to the site itself.

  1. There is a list of links at the top of the page that acts like a menu. This causes many problems while trying to perform basic tasks, particularly editing posts and handling notifications. I can't always activate said links/menu either.

1A. I can't stress how frustrating editing posts is. It sometimes takes over ten minutes. The "edit" option is a link/menu, and it can only be found via another menu. Once I finally find and activate it, I hear the sound indicating that I have entered focus Mode. Usually, this means that I am in an edit box and can type. However, in this case, I am taken back to the main page, as if I never entered the option to edit my post. Using e to try to find an edit box doesn't help, as it just sends me to the replies to different comments. So I am forced to find the post, and start all over again. The only way I can do this successfully is to try to tab through the links/menu at the top of the page (when it works), then through other posts, until, finally, I am placed in an edit box where I can type.

1B. When I go to the Notifications" link, I have to tab to "Mark all System Notifications as Seen". This isn't even a regular link, as I can't copy and paste the text from it. Once I tab to and out of that, I can then read my notifications. But here is what I have to do if I want to see follow requests.
1. Try to get the notifications link to work, then click on it.
2. Tab to marking notifications.
3. Perform a search for the word follow.
4. Click on the link of the notification that someone wants to follow me. I open this in a new window, to try to keep the original one available.
5. Make my choice as to whether to approve that notification, then close that window.
6. Return to the main window. Only now, I am not where I left off. Instead, I am placed back at the beginning of the page and the Notifications menu is not open.
7. Repeat steps 1 through 3.
Ideally, I should be able to go to a normal notifications link, perform steps 3 through 5, then return back to the link, and perform steps 3 through 5 again, as many times as necessary, without having to repeat 1 through 3.

  1. I can't just go to the site and enter an edit box to post. I must go through a menu to find the link to do so. Yet there is an edit box for searching for content, tags, etc.
  2. Some pinned posts don't always read properly. I can see my name, when I posted, that it's pinned, a public message, tags (if applicable), buttons for resharing, etc., and the number of comments. But I cannot simply read the post itself. ""Comments" is also a button, not a link. Even when I expand them, I still can't see my post, and finding the button again to close them takes a lot of time, as posts also have their own buttons. Note that unpinned posts are read properly.
  3. While the process of editing my profile is completely accessible, finding the edit option might be slightly confusing for new users, as it requires entering yet another link/menu, this time with the user name as the title..
  4. If I go to a profile of someone not on Friendica (usually Mastodon) and wish to reply to a post, after I enter my credentials, it takes me back to my profile, not to the relevant post. It only worked once.
  5. The Friendica app for Windows is basically the site itself. I don't understand this at all.

If you want to see a truly accessible site, try this link. I don't work for them, though I do have an account there.

dreamwidth.org

Please, if any changes can be made, I urge you to do so. The site is otherwise a pleasure to use, but my frustration at not being able to easily perform such basic tasks is increasing.

www.dreamwidth.orgDreamwidth StudiosDreamwidth Studios: A blog/journal system for people who create.
#accessibility#blind#coding
TrendingLive feeds
About