[BLOG] Added interface and accessibility blog post. 13th september.

1 year ago · 0d8aa92234
--- a/all_posts.html
+++ b/all_posts.html
@@ -10,6 +10,9 @@
 </div></div></div>
 <div id="template-wrapper"><div class="template-unit">
 <h3>All posts</h3>
 <h4 class='allposts_header'>September 2021</h4>
 <ul>
 <li><a href="./updates-interface-and-accessibility.html">Updates: Interface and accessibility</a> &mdash; September 13, 2021</li>
 </ul>
 <div id="all_posts"><a href="all_tags.html">All tags</a> &mdash; <a href="feed.rss">Subscribe</a></div>
 </div>
--- a/feed.rss
+++ b/feed.rss
@@ -2,7 +2,100 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <channel><title>My fancy blog</title><link>http://example.com/blog/index.html</link>
 <description>A blog about turtles and carrots</description><language>en</language>
 <lastBuildDate>Wed, 18 Aug 2021 18:06:09 +0100</lastBuildDate>
 <pubDate>Wed, 18 Aug 2021 18:06:09 +0100</pubDate>
 <lastBuildDate>Mon, 13 Sep 2021 17:31:02 +0100</lastBuildDate>
 <pubDate>Mon, 13 Sep 2021 17:31:02 +0100</pubDate>
 <atom:link href="http://example.com/blog/feed.rss" rel="self" type="application/rss+xml" />
 <item><title>
 Updates: Interface and accessibility
 </title><description><![CDATA[

 <p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
 This update has been in the works for a long time&hellip; Many considerations had to be done, and given the current state of
 modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes.</p>

 <p>We hope you like it!</p>

 <h3>The prime directive</h3>

 <blockquote><p>Modern looking, consistent and accessible UI across all browsers.
 Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p></blockquote>

 <p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
 To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
 In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
 markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>

 <h3>Features</h3>

 <ul>
 <li>Accessible

 <ul>
 <li>Easy to use keyboard only navigation

 <ul>
 <li>Feedback on focused elements</li>
 <li>Keyboard shortcuts to access main regions</li>
 <li>Vi-like shortcuts</li>
 </ul>
 </li>
 <li>Screen reader tested

 <ul>
 <li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
 <li>Brief description of navigation links</li>
 <li>Using semantic HTML whenever possible</li>
 </ul>
 </li>
 <li>Special care given for styling solutions that could break accessibility</li>
 <li>Colors and type sizes in accordance to W3C contrast guidelines

 <ul>
 <li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Fast, the content provided to the user really is just markup and some CSS rules

 <ul>
 <li>Optionally there will be some small use cases where JS makes sense (it&rsquo;s the only thing modern browsers understand e.e)

 <ul>
 <li>For example, cropping your avatar before uploading a new one.</li>
 <li>This is the only example until now.</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Dark and light default themes available (according to your system theme)</li>
 <li>Graceful degradation for unsupported HTML elements</li>
 <li>Achieving modern user interface patterns without JS</li>
 <li>Various layout engines tested and work as they should

 <ul>
 <li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc&hellip;)</li>
 <li>WebkitGTK (Epiphany, Midori, etc&hellip;)</li>
 <li>Gecko (Firefox and derivatives)</li>
 <li>Goanna (Palemoon, Basilisk, etc&hellip;)</li>
 <li>Internet Explorer</li>
 </ul>
 </li>
 </ul>


 <h3>Video</h3>

 <h4>Keyboard tests</h4>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>




 <hr>
 ]]></description><link>http://example.com/blog/updates-interface-and-accessibility.html</link>
 <guid>http://example.com/blog/./updates-interface-and-accessibility.html</guid>
 <dc:creator>John Smith</dc:creator>
 <pubDate>Mon, 13 Sep 2021 17:30:12 +0100</pubDate></item>
 </channel></rss>
--- a/index.html
+++ b/index.html
@@ -1,137 +1,111 @@
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
  <meta name="description" content="GNU social; A free software social networking platform.">
  <title>GNU social &mdash; a free software social networking platform</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/reset.css">
  <link rel='stylesheet' type='text/css' href="assets/fonts/opensans/opensans.css">
 </head>

 <body>
  <header class="header">
    <div class="home-menu menu menu-horizontal menu-fixed">
      <a class="menu-heading" href="https://gnusocial.rocks/">
        <img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social">
      </a>
      <ul class="menu-list">
        <li class="menu-item menu-selected"><a href="#" class="menu-link">Home</a></li>
        <li class="menu-item"><a href="v2/" class="menu-link">Version 2</a></li>
        <li class="menu-item"><a href="v3/" class="menu-link">Version 3</a></li>
      </ul>
    </div>
  </header>
  <div class="body-wrapper">
    <div class="splash-container">
    <div class="splash">
      <div class="splash-head">
        <img src="assets/img/gnu-social-logo.svg" alt="GNU social">
        <b>gnu</b>social
      </div>
      <p class="splash-subhead">
        The free software social networking platform.
      </p>
      <!--
      <a href="communities/" class="button button-primary">Join</a>
      <a href="v2/" class="button button-primary">Version 2</a>
      -->
    </div>
  </div>
  <div class="content-wrapper">
    <div class="content">

      <h1 class="content-head">Features</h1>

      <div class="g">
        <div class="l-box u-1 u-md-1-2 u-lg-1-4">

          <h3 class="content-subhead">
            Versatile
          </h3>
          <p>
            GNU social supports both single-user and community modes and can be used in an intranet environment or as part of the wider Free Network.
          </p>
        </div>
        <div class="l-box u-1 u-md-1-2 u-lg-1-4">
          <h3 class="content-subhead">
            Accessible
          </h3>
          <p>
            Follows AnyBrowser and A11Y guidelines. It runs virtually anywhere you can run a common piece of web software, such as WordPress or Drupal. JavaScript is optional.
          </p>
        </div>
        <div class="l-box u-1 u-md-1-2 u-lg-1-4">
          <h3 class="content-subhead">
            Customizable
          </h3>
          <p>
            True to the Unix-philosophy of small programs to do a small job, GNU social can be easily expanded and customized via its simple plugin API.
          </p>
        </div>
        <div class="l-box u-1 u-md-1-2 u-lg-1-4">
          <h3 class="content-subhead">
            Privacy focused
          </h3>
          <p>
            GNU social is part of the GNU project, it's 100% free software, with no malicious features or spyware.
          </p>
        </div>
      </div>
    </div>
    <div class="ribbon-wrapper">
      <div class="ribbon">
        <img alt="Decentralized social network." src="assets/img/connections-gordon-johnson-pixabay.svg">
        <div class="ribbon-content">
          <h1 class="content-head content-head-ribbon">Where can I join GNU social?</h1>

          <p>There are many kinds of GNU social server instances online right now!</p>
          <p><a href="communities/">Click here</a> to see a list of popular GNU social sites you can join!</p>
          <em><b>Disclaimer:</b> Please note that the GNU social development team is not responsible for
          the operation or content of sites that run its software.</em>
        </div>
      </div>
    </div>

    <div class="content-team">
      <h1>Support the team making GNU social possible!</h1>
      <div class="g">
        <div class="l-box-lrg u-1 u-md-1-3">
          <h3>Who makes GNU social?</h3>
          <p>Many developers have been involved in the making of GNU social. It's hard to keep a precise record of so many valuable contributions.</p>
          <p>Version 3 development is being maintained by <a href="https://www.diogo.site/">Diogo Cordeiro</a>, <a href="https://hsal.es/">Hugo Sales</a> and <a href="https://eliseuama.ro/">Eliseu Amaro</a>.</p>
          <p>Version 2 development was maintained by <a href="https://www.diogo.site/">Diogo Cordeiro</a> with many important contributions from <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a> and the help of <a href="soc/">Summer of Code students</a>.</p>
          <p>The project started with <a href="https://mat.tl/">Matt Lee</a> and StatusNet with <a href="https://en.wikipedia.org/wiki/Evan_Prodromou">Evan Prodromou</a>. It was since been maintained by <a href="http://mmn-o.se">Mikael Nordfeldth</a>.</p>
          <p>A list of contributors is available <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/experimental/CREDITS.md">here</a>.</p>
        </div>

        <div class="l-box-lrg u-1 u-md-1-3">
          <h3>Discuss</h3>
          <p>Discuss the project on:<br>
            XMPP: <a
              href="xmpp:gnusocial@conference.bka.li?join">xmpp:gnusocial@conference.bka.li?join</a>,<br>
            IRC: <a
              href="ircs://irc.libera.chat:6697/#social">ircs://irc.libera.chat:6697/#social</a> or<br>
            Matrix: <a
              href="https://matrix.to/#/#social:libera.chat">#social:libera.chat</a>.</p>
          <p>Contribute code, report bugs and request features on our <a href="https://notabug.org/diogo/gnu-social">repository</a>.</p>
          <p>You can also ask for help on our <a href="https://lists.gnu.org/mailman/listinfo/social-discuss">mailing list</a>.</p>
          <p>If you are a student you can also apply to <a href="/soc">GNU social's Summer of Code</a>.</p>
        </div>

        <div class="l-box-lrg u-1 u-md-1-3">
          <h3>Tell Others</h3>
          <p><a href="assets/tgz/logos.tar.gz">gs-logos.tar.gz</a> (14.2 kB)</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <footer class="footer l-box is-center">
    This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
  </footer>
 </body>
 </html>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="main.css" type="text/css" />
 <link rel="stylesheet" href="blog.css" type="text/css" />
 <link rel="alternate" type="application/rss+xml" title="Subscribe to this page..." href="feed.rss" />
 <title>My fancy blog - My fancy blog</title>
 </head><body>
 </div></div></div>
 <div id="template-wrapper"><div class="template-unit">
 <h3><a class="ablack" href="updates-interface-and-accessibility.html">
 Updates: Interface and accessibility
 </a></h3>
 <!-- bashblog_timestamp: #202109131730.12# -->
 <div class="subtitle">September 13, 2021 &mdash; 
 John Smith
 </div>
 <!-- text begin -->

 <p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
 This update has been in the works for a long time&hellip; Many considerations had to be done, and given the current state of
 modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes.</p>

 <p>We hope you like it!</p>

 <h3>The prime directive</h3>

 <blockquote><p>Modern looking, consistent and accessible UI across all browsers.
 Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p></blockquote>

 <p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
 To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
 In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
 markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>

 <h3>Features</h3>

 <ul>
 <li>Accessible

 <ul>
 <li>Easy to use keyboard only navigation

 <ul>
 <li>Feedback on focused elements</li>
 <li>Keyboard shortcuts to access main regions</li>
 <li>Vi-like shortcuts</li>
 </ul>
 </li>
 <li>Screen reader tested

 <ul>
 <li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
 <li>Brief description of navigation links</li>
 <li>Using semantic HTML whenever possible</li>
 </ul>
 </li>
 <li>Special care given for styling solutions that could break accessibility</li>
 <li>Colors and type sizes in accordance to W3C contrast guidelines

 <ul>
 <li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Fast, the content provided to the user really is just markup and some CSS rules

 <ul>
 <li>Optionally there will be some small use cases where JS makes sense (it&rsquo;s the only thing modern browsers understand e.e)

 <ul>
 <li>For example, cropping your avatar before uploading a new one.</li>
 <li>This is the only example until now.</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Dark and light default themes available (according to your system theme)</li>
 <li>Graceful degradation for unsupported HTML elements</li>
 <li>Achieving modern user interface patterns without JS</li>
 <li>Various layout engines tested and work as they should

 <ul>
 <li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc&hellip;)</li>
 <li>WebkitGTK (Epiphany, Midori, etc&hellip;)</li>
 <li>Gecko (Firefox and derivatives)</li>
 <li>Goanna (Palemoon, Basilisk, etc&hellip;)</li>
 <li>Internet Explorer</li>
 </ul>
 </li>
 </ul>


 <h3>Video</h3>

 <h4>Keyboard tests</h4>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>




 <p class="readmore"><a href="./updates-interface-and-accessibility.html">Read more...</a></p>
 <div id="all_posts"><a href="all_posts.html">View more posts</a> &mdash; <a href="all_tags.html">All tags</a> &mdash; <a href="feed.rss">Subscribe</a></div>
 </div>
 <div id="footer">CC by-nc-nd <a href="http://twitter.com/example">John Smith</a> &mdash; <a href="mailto:john&#64;smith&#46;com">john&#64;smith&#46;com</a><br/>
 Generated with <a href="https://github.com/cfenollosa/bashblog">bashblog</a>, a single bash script to easily create blogs like this one</div>
 </div></div>
 </body></html>
--- a/updates-interface-and-accessibility.html
+++ b/updates-interface-and-accessibility.html
@@ -0,0 +1,143 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="main.css" type="text/css" />
 <link rel="stylesheet" href="blog.css" type="text/css" />
 <link rel="alternate" type="application/rss+xml" title="Subscribe to this page..." href="feed.rss" />
 <title>Updates: Interface and accessibility - My fancy blog</title>
 </head><body>
 </div></div></div>
 <div id="template-wrapper"><div class="template-unit">
 <!-- entry begin -->
 <h3><a class="ablack" href="updates-interface-and-accessibility.html">
 Updates: Interface and accessibility
 </a></h3>
 <!-- bashblog_timestamp: #202109131730.12# -->
 <div class="subtitle">September 13, 2021 &mdash; 
 John Smith
 </div>
 <!-- text begin -->

 <p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
 This update has been in the works for a long time&hellip; Many considerations had to be done, and given the current state of
 modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes.</p>

 <p>We hope you like it!</p>

 <h3>The prime directive</h3>

 <blockquote><p>Modern looking, consistent and accessible UI across all browsers.
 Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p></blockquote>

 <p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
 To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
 In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
 markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>

 <h3>Features</h3>

 <ul>
 <li>Accessible

 <ul>
 <li>Easy to use keyboard only navigation

 <ul>
 <li>Feedback on focused elements</li>
 <li>Keyboard shortcuts to access main regions</li>
 <li>Vi-like shortcuts</li>
 </ul>
 </li>
 <li>Screen reader tested

 <ul>
 <li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
 <li>Brief description of navigation links</li>
 <li>Using semantic HTML whenever possible</li>
 </ul>
 </li>
 <li>Special care given for styling solutions that could break accessibility</li>
 <li>Colors and type sizes in accordance to W3C contrast guidelines

 <ul>
 <li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Fast, the content provided to the user really is just markup and some CSS rules

 <ul>
 <li>Optionally there will be some small use cases where JS makes sense (it&rsquo;s the only thing modern browsers understand e.e)

 <ul>
 <li>For example, cropping your avatar before uploading a new one.</li>
 <li>This is the only example until now.</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Dark and light default themes available (according to your system theme)</li>
 <li>Graceful degradation for unsupported HTML elements</li>
 <li>Achieving modern user interface patterns without JS</li>
 <li>Various layout engines tested and work as they should

 <ul>
 <li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc&hellip;)</li>
 <li>WebkitGTK (Epiphany, Midori, etc&hellip;)</li>
 <li>Gecko (Firefox and derivatives)</li>
 <li>Goanna (Palemoon, Basilisk, etc&hellip;)</li>
 <li>Internet Explorer</li>
 </ul>
 </li>
 </ul>


 <h3>Video</h3>

 <h4>Keyboard tests</h4>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>




 <hr>




 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Login, Update nickname" src="https://tube.tchncs.de/videos/embed/8c86754a-8c71-4a28-8e47-8ef83a9b5b35" frameborder="0" allowfullscreen></iframe>




 <hr>


 <h3>Images</h3>

 <p><em>Default dark theme</em>
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_dark.png" alt="" style="display: block; width: 600px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_dark.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem"></p>

 <blockquote><p>Settings are re-organized, allowing to focus into view each &ldquo;tab&rdquo; using the <em>details</em> HTML element.</p></blockquote>

 <p><em>Default light theme</em>
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_light.png" alt="" style="display: block; width: 600px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_light.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem"></p>

 <h4>Bonus :&lsquo;)</h4>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Eliseu was recording a reply with orca, but I had non-tested changes" src="https://tube.tchncs.de/videos/embed/17a0c9c5-0f1c-4bae-a77d-08b4be67c986?start=54s" frameborder="0" allowfullscreen></iframe>



 <!-- text end -->
 <!-- entry end -->
 </div>
 <div id="footer">CC by-nc-nd <a href="http://twitter.com/example">John Smith</a> &mdash; <a href="mailto:john&#64;smith&#46;com">john&#64;smith&#46;com</a><br/>
 Generated with <a href="https://github.com/cfenollosa/bashblog">bashblog</a>, a single bash script to easily create blogs like this one</div>
 </div></div>
 </body></html>
--- a/updates-interface-and-accessibility.md
+++ b/updates-interface-and-accessibility.md
@@ -0,0 +1,66 @@
 Updates: Interface and accessibility

 Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI. 
 This update has been in the works for a long time... Many considerations had to be done, and given the current state of 
 modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes. 

 We hope you like it!

 ### The prime directive
 > Modern looking, consistent and accessible UI across all browsers. 
 > Non-JS version as the primary focus, **JS is optional** and should be regarded as such.

 The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
 To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader. 
 In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
 markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.

 ### Features
 * Accessible
  * Easy to use keyboard only navigation
    * Feedback on focused elements
    * Keyboard shortcuts to access main regions
    * Vi-like shortcuts
  * Screen reader tested
    * Notifies the user when focusing on key elements, such as the feed, notes and actions
    * Brief description of navigation links
    * Using semantic HTML whenever possible
  * Special care given for styling solutions that could break accessibility
  * Colors and type sizes in accordance to W3C contrast guidelines
    * Chosen specifically blue-ish and grey-ish hues for faster page loading perception
 * Fast, the content provided to the user really is just markup and some CSS rules
  * Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e)
    * For example, cropping your avatar before uploading a new one.
    * This is the only example until now.
 * Dark and light default themes available (according to your system theme)
 * Graceful degradation for unsupported HTML elements
 * Achieving modern user interface patterns without JS
 * Various layout engines tested and work as they should
  * Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...)
  * WebkitGTK (Epiphany, Midori, etc...)
  * Gecko (Firefox and derivatives)
  * Goanna (Palemoon, Basilisk, etc...)
  * Internet Explorer

 ### Video
 #### Keyboard tests
 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>

 <hr>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Login, Update nickname" src="https://tube.tchncs.de/videos/embed/8c86754a-8c71-4a28-8e47-8ef83a9b5b35" frameborder="0" allowfullscreen></iframe>

 <hr>

 ### Images
 *Default dark theme*
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_dark.png" alt="" style="display: block; width: 600px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_dark.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem">
 > Settings are re-organized, allowing to focus into view each "tab" using the *details* HTML element.

 *Default light theme*
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_light.png" alt="" style="display: block; width: 600px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_light.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem">

 #### Bonus :')
 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Eliseu was recording a reply with orca, but I had non-tested changes" src="https://tube.tchncs.de/videos/embed/17a0c9c5-0f1c-4bae-a77d-08b4be67c986?start=54s" frameborder="0" allowfullscreen></iframe>
--- a/v3/feed.rss
+++ b/v3/feed.rss
@@ -2,10 +2,79 @@
 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <channel><title>GNU social V3</title><link>https://gnusocial.rocks/v3/index.html</link>
 <description>Development blog where we announce our progress.</description><language>en</language>
 <lastBuildDate>Mon, 13 Sep 2021 13:04:45 +0100</lastBuildDate>
 <pubDate>Mon, 13 Sep 2021 13:04:45 +0100</pubDate>
 <lastBuildDate>Mon, 13 Sep 2021 17:36:14 +0100</lastBuildDate>
 <pubDate>Mon, 13 Sep 2021 17:36:14 +0100</pubDate>
 <atom:link href="https://gnusocial.rocks/v3/feed.rss" rel="self" type="application/rss+xml" />
 <item><title>
 Updates: Interface and accessibility
 </title><description><![CDATA[

 <p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI. 
 This update has been in the works for a long time... Many considerations had to be done, and given the current state of 
 modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes. </p>

 <p>We hope you like it!</p>

 <h3>The prime directive</h3>

 <blockquote>
  <p>Modern looking, consistent and accessible UI across all browsers. 
 Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p>
 </blockquote>

 <p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
 To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader. 
 In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
 markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>

 <h3>Features</h3>

 <ul>
 <li>Accessible
 <ul>
 <li>Easy to use keyboard only navigation</li>
 <li>Feedback on focused elements</li>
 <li>Keyboard shortcuts to access main regions</li>
 <li>Vi-like shortcuts</li>
 <li>Screen reader tested</li>
 <li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
 <li>Brief description of navigation links</li>
 <li>Using semantic HTML whenever possible</li>
 <li>Special care given for styling solutions that could break accessibility</li>
 <li>Colors and type sizes in accordance to W3C contrast guidelines</li>
 <li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
 </ul></li>
 <li>Fast, the content provided to the user really is just markup and some CSS rules
 <ul>
 <li>Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e)</li>
 <li>For example, cropping your avatar before uploading a new one.</li>
 <li>This is the only example until now.</li>
 </ul></li>
 <li>Dark and light default themes available (according to your system theme)</li>
 <li>Graceful degradation for unsupported HTML elements</li>
 <li>Achieving modern user interface patterns without JS</li>
 <li>Various layout engines tested and work as they should
 <ul>
 <li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...)</li>
 <li>WebkitGTK (Epiphany, Midori, etc...)</li>
 <li>Gecko (Firefox and derivatives)</li>
 <li>Goanna (Palemoon, Basilisk, etc...)</li>
 <li>Internet Explorer</li>
 </ul></li>
 </ul>

 <h3>Video</h3>

 <h4>Keyboard tests</h4>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>

 <hr>
 ]]></description><link>https://gnusocial.rocks/v3/updates-interface-and-accessibility.html</link>
 <guid>https://gnusocial.rocks/v3/./updates-interface-and-accessibility.html</guid>
 <dc:creator>GNU social development team</dc:creator>
 <pubDate>Mon, 13 Sep 2021 17:32:55 +0100</pubDate></item>
 <item><title>
 Updates: V3 blog
 </title><description><![CDATA[

@@ -35,6 +104,8 @@ forget to subscribe!</p>





 <!-- text end -->
 ]]></description><link>https://gnusocial.rocks/v3/updates-v3-blog.html</link>
 <guid>https://gnusocial.rocks/v3/./updates-v3-blog.html</guid>
@@ -62,6 +133,8 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when





 <!-- text end -->
 ]]></description><link>https://gnusocial.rocks/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html</link>
 <guid>https://gnusocial.rocks/v3/./updates-implement-storeremotemedia-for-v3-and-port-embed.html</guid>
@@ -122,6 +195,8 @@ any remote URL being shared in a note.</li>





 <!-- text end -->
 ]]></description><link>https://gnusocial.rocks/v3/updates-improve-the-attachments-system.html</link>
 <guid>https://gnusocial.rocks/v3/./updates-improve-the-attachments-system.html</guid>
@@ -210,6 +285,8 @@ Updates: Finish the Avatar component








@@ -268,6 +345,8 @@ is properly tested, we have the





 <!-- text end -->
 ]]></description><link>https://gnusocial.rocks/v3/milestone-documentation-and-tests-infrastructure.html</link>
 <guid>https://gnusocial.rocks/v3/./milestone-documentation-and-tests-infrastructure.html</guid>
@@ -327,6 +406,8 @@ The key ones are:</p>





 <!-- text end -->
 ]]></description><link>https://gnusocial.rocks/v3/milestone-port-media-handling-from-v2.html</link>
 <guid>https://gnusocial.rocks/v3/./milestone-port-media-handling-from-v2.html</guid>
--- a/v3/index.html
+++ b/v3/index.html
@@ -43,6 +43,10 @@ Our objective is to further differentiate GNU social from the alternative softwa
 </div></div></div>
 <div id="template-wrapper"><div class="template-unit">
 <h3>Blog</h3>
 <h4 class='allposts_header'>September 2021</h4>
 <ul>
 <li><a href="./updates-interface-and-accessibility.html">Updates: Interface and accessibility</a> &mdash; September 13, 2021</li>
 </ul>
 <h4 class='allposts_header'>August 2021</h4>
 <ul>
 <li><a href="./updates-v3-blog.html">Updates: V3 blog</a> &mdash; August 16, 2021</li>
--- a/v3/milestone-documentation-and-tests-infrastructure.html
+++ b/v3/milestone-documentation-and-tests-infrastructure.html
@@ -88,6 +88,8 @@ is properly tested, we have the





 <!-- text end -->
 <!-- entry end -->
 </div>
--- a/v3/milestone-port-media-handling-from-v2.html
+++ b/v3/milestone-port-media-handling-from-v2.html
@@ -92,6 +92,8 @@ The key ones are:</p>





 <!-- text end -->
 <!-- entry end -->
 </div>
--- a/v3/updates-finish-the-avatar-component.html
+++ b/v3/updates-finish-the-avatar-component.html
@@ -121,6 +121,8 @@ GNU social development team








--- a/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html
+++ b/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html
@@ -60,6 +60,8 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when





 <!-- text end -->
 <!-- entry end -->
 </div>
--- a/v3/updates-improve-the-attachments-system.html
+++ b/v3/updates-improve-the-attachments-system.html
@@ -93,6 +93,8 @@ any remote URL being shared in a note.</li>





 <!-- text end -->
 <!-- entry end -->
 </div>
--- a/v3/updates-interface-and-accessibility.html
+++ b/v3/updates-interface-and-accessibility.html
@@ -0,0 +1,137 @@
 <!DOCTYPE html>
 <html lang="en">

 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
 <link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
 <link rel='stylesheet' type='text/css' href="https://www.gnusocial.rocks//assets/fonts/opensans/opensans.css"><title>Updates: Interface and accessibility - GNU social V3</title>
 </head><body>
 <header>
 <div class="home-menu menu menu-horizontal menu-fixed">
 <a class="menu-heading" href="https://gnusocial.rocks/">
 <img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social">
 <b>gnu</b>social
 </a>
 </div>
 <div class="sidebar">
 <ul class="menu-list">
 <li class="menu-item menu-selected"><a href="index.html" class="menu-link">Blog Index</a></li>
 <li class="menu-item"><a href="https://code.gnusocial.rocks/" class="menu-link">Repository</a></li>
 <li class="menu-item"><a href="https://coverage.gnusocial.rocks/" class="menu-link">Code Coverage</a></li>
 <li class="menu-item"><a href="https://docs.gnusocial.rocks/" class="menu-link">Documentation</a></li>
 <li class="menu-item"><a href="https://agile.gnusocial.rocks/" class="menu-link">Wiki</a></li>
 <li class="menu-item"><a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463" class="menu-link">Roadmap</a></li>
 </ul>
 </div>
 </header>

 <div class="content-wrapper">
 <div class="content">
 </div></div></div>
 <div id="template-wrapper"><div class="template-unit">
 <!-- entry begin -->
 <h3><a class="ablack" href="updates-interface-and-accessibility.html">
 Updates: Interface and accessibility
 </a></h3>
 <!-- bashblog_timestamp: #202109131732.55# -->
 <div class="subtitle">September 13, 2021 &mdash; 
 GNU social development team
 </div>
 <!-- text begin -->

 <p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI. 
 This update has been in the works for a long time... Many considerations had to be done, and given the current state of 
 modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes. </p>

 <p>We hope you like it!</p>

 <h3>The prime directive</h3>

 <blockquote>
  <p>Modern looking, consistent and accessible UI across all browsers. 
 Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p>
 </blockquote>

 <p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
 To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader. 
 In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
 markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>

 <h3>Features</h3>

 <ul>
 <li>Accessible
 <ul>
 <li>Easy to use keyboard only navigation</li>
 <li>Feedback on focused elements</li>
 <li>Keyboard shortcuts to access main regions</li>
 <li>Vi-like shortcuts</li>
 <li>Screen reader tested</li>
 <li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
 <li>Brief description of navigation links</li>
 <li>Using semantic HTML whenever possible</li>
 <li>Special care given for styling solutions that could break accessibility</li>
 <li>Colors and type sizes in accordance to W3C contrast guidelines</li>
 <li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
 </ul></li>
 <li>Fast, the content provided to the user really is just markup and some CSS rules
 <ul>
 <li>Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e)</li>
 <li>For example, cropping your avatar before uploading a new one.</li>
 <li>This is the only example until now.</li>
 </ul></li>
 <li>Dark and light default themes available (according to your system theme)</li>
 <li>Graceful degradation for unsupported HTML elements</li>
 <li>Achieving modern user interface patterns without JS</li>
 <li>Various layout engines tested and work as they should
 <ul>
 <li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...)</li>
 <li>WebkitGTK (Epiphany, Midori, etc...)</li>
 <li>Gecko (Firefox and derivatives)</li>
 <li>Goanna (Palemoon, Basilisk, etc...)</li>
 <li>Internet Explorer</li>
 </ul></li>
 </ul>

 <h3>Video</h3>

 <h4>Keyboard tests</h4>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>

 <hr>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Login, Update nickname" src="https://tube.tchncs.de/videos/embed/8c86754a-8c71-4a28-8e47-8ef83a9b5b35" frameborder="0" allowfullscreen></iframe>

 <hr>

 <h3>Images</h3>

 <p><em>Default dark theme</em>
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_dark.png" alt="" style="display: block; width: 900px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_dark.png" alt="" style="display: block; width: 900px; max-width: 100%; margin-top: 1rem"></p>

 <blockquote>
  <p>Settings are re-organized, allowing to focus into view each "tab" using the <em>details</em> HTML element.</p>
 </blockquote>

 <p><em>Default light theme</em>
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_light.png" alt="" style="display: block; width: 900px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_light.png" alt="" style="display: block; width: 900px; max-width: 100%; margin-top: 1rem"></p>

 <h4>Bonus :')</h4>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Eliseu was recording a reply with orca, but I had non-tested changes" src="https://tube.tchncs.de/videos/embed/17a0c9c5-0f1c-4bae-a77d-08b4be67c986?start=54s" frameborder="0" allowfullscreen></iframe>


 <!-- text end -->
 <!-- entry end -->
 </div>
 </div></div>
 <footer class="footer l-box is-center">
 This site's source is
 <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
 </footer></body></html>
--- a/v3/updates-interface-and-accessibility.md
+++ b/v3/updates-interface-and-accessibility.md
@@ -0,0 +1,66 @@
 Updates: Interface and accessibility

 Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI. 
 This update has been in the works for a long time... Many considerations had to be done, and given the current state of 
 modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes. 

 We hope you like it!

 ### The prime directive
 > Modern looking, consistent and accessible UI across all browsers. 
 > Non-JS version as the primary focus, **JS is optional** and should be regarded as such.

 The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
 To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader. 
 In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
 markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.

 ### Features
 * Accessible
  * Easy to use keyboard only navigation
    * Feedback on focused elements
    * Keyboard shortcuts to access main regions
    * Vi-like shortcuts
  * Screen reader tested
    * Notifies the user when focusing on key elements, such as the feed, notes and actions
    * Brief description of navigation links
    * Using semantic HTML whenever possible
  * Special care given for styling solutions that could break accessibility
  * Colors and type sizes in accordance to W3C contrast guidelines
    * Chosen specifically blue-ish and grey-ish hues for faster page loading perception
 * Fast, the content provided to the user really is just markup and some CSS rules
  * Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e)
    * For example, cropping your avatar before uploading a new one.
    * This is the only example until now.
 * Dark and light default themes available (according to your system theme)
 * Graceful degradation for unsupported HTML elements
 * Achieving modern user interface patterns without JS
 * Various layout engines tested and work as they should
  * Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...)
  * WebkitGTK (Epiphany, Midori, etc...)
  * Gecko (Firefox and derivatives)
  * Goanna (Palemoon, Basilisk, etc...)
  * Internet Explorer

 ### Video
 #### Keyboard tests
 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>

 <hr>

 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Login, Update nickname" src="https://tube.tchncs.de/videos/embed/8c86754a-8c71-4a28-8e47-8ef83a9b5b35" frameborder="0" allowfullscreen></iframe>

 <hr>

 ### Images
 *Default dark theme*
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_dark.png" alt="" style="display: block; width: 900px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_dark.png" alt="" style="display: block; width: 900px; max-width: 100%; margin-top: 1rem">
 > Settings are re-organized, allowing to focus into view each "tab" using the *details* HTML element.

 *Default light theme*
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_light.png" alt="" style="display: block; width: 900px; max-width: 100%;">
 <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_light.png" alt="" style="display: block; width: 900px; max-width: 100%; margin-top: 1rem">

 #### Bonus :')
 <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Eliseu was recording a reply with orca, but I had non-tested changes" src="https://tube.tchncs.de/videos/embed/17a0c9c5-0f1c-4bae-a77d-08b4be67c986?start=54s" frameborder="0" allowfullscreen></iframe>
--- a/v3/updates-v3-blog.html
+++ b/v3/updates-v3-blog.html
@@ -68,6 +68,8 @@ forget to subscribe!</p>





 <!-- text end -->
 <!-- entry end -->
 </div>