@@ -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> — September 13, 2021</li> | |||
</ul> | |||
<div id="all_posts"><a href="all_tags.html">All tags</a> — <a href="feed.rss">Subscribe</a></div> | |||
</div> | |||
@@ -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… 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’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…)</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>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> |
@@ -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 — 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 — | |||
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… 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’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…)</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> | |||
<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> — <a href="all_tags.html">All tags</a> — <a href="feed.rss">Subscribe</a></div> | |||
</div> | |||
<div id="footer">CC by-nc-nd <a href="http://twitter.com/example">John Smith</a> — <a href="mailto:john@smith.com">john@smith.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> |
@@ -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 — | |||
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… 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’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…)</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: 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 “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: 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 :‘)</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> — <a href="mailto:john@smith.com">john@smith.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> |
@@ -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> |
@@ -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> | |||
@@ -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> — September 13, 2021</li> | |||
</ul> | |||
<h4 class='allposts_header'>August 2021</h4> | |||
<ul> | |||
<li><a href="./updates-v3-blog.html">Updates: V3 blog</a> — August 16, 2021</li> | |||
@@ -88,6 +88,8 @@ is properly tested, we have the | |||
<!-- text end --> | |||
<!-- entry end --> | |||
</div> | |||
@@ -92,6 +92,8 @@ The key ones are:</p> | |||
<!-- text end --> | |||
<!-- entry end --> | |||
</div> | |||
@@ -121,6 +121,8 @@ GNU social development team | |||
@@ -60,6 +60,8 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when | |||
<!-- text end --> | |||
<!-- entry end --> | |||
</div> | |||
@@ -93,6 +93,8 @@ any remote URL being shared in a note.</li> | |||
<!-- text end --> | |||
<!-- entry end --> | |||
</div> | |||
@@ -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 — | |||
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> |
@@ -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> |
@@ -68,6 +68,8 @@ forget to subscribe!</p> | |||
<!-- text end --> | |||
<!-- entry end --> | |||
</div> | |||