152 lines
6.6 KiB
HTML
152 lines
6.6 KiB
HTML
<!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>
|