GNUsocial/gnusocial.rocks
4
0
Fork 1
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
Eliseu Amaro 2021-09-13 17:37:40 +01:00
parent cf28f30a4d
commit 0d8aa92234
15 changed files with 711 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
all_posts.html
View File

@ -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>

97
feed.rss
View File

@ -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>

230
index.html
View File

@ -1,137 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<!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 -->
<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>
<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>
<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">
<p>We hope you like it!</p>
<h1 class="content-head">Features</h1>
<h3>The prime directive</h3>
<div class="g">
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
<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>
<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>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>
<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>
<h3>Features</h3>
<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>
<ul>
<li>Accessible
<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>
<ul>
<li>Easy to use keyboard only navigation
<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>
<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>

143
updates-interface-and-accessibility.html Normal file
View File

@ -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>

66
updates-interface-and-accessibility.md Normal file
View File

@ -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>

85
v3/feed.rss
View File

@ -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>

4
v3/index.html
View File

@ -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>

2
v3/milestone-documentation-and-tests-infrastructure.html
View File

@ -88,6 +88,8 @@ is properly tested, we have the
<!-- text end -->
<!-- entry end -->
</div>

2
v3/milestone-port-media-handling-from-v2.html
View File

@ -92,6 +92,8 @@ The key ones are:</p>
<!-- text end -->
<!-- entry end -->
</div>

2
v3/updates-finish-the-avatar-component.html
View File

@ -121,6 +121,8 @@ GNU social development team

2
v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html
View File

@ -60,6 +60,8 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when
<!-- text end -->
<!-- entry end -->
</div>

2
v3/updates-improve-the-attachments-system.html
View File

@ -93,6 +93,8 @@ any remote URL being shared in a note.</li>
<!-- text end -->
<!-- entry end -->
</div>

137
v3/updates-interface-and-accessibility.html Normal file
View File

@ -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>

66
v3/updates-interface-and-accessibility.md Normal file
View File

@ -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>

2
v3/updates-v3-blog.html
View File

@ -68,6 +68,8 @@ forget to subscribe!</p>
<!-- text end -->
<!-- entry end -->
</div>