You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

138 lines
6.5 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
  6. <link rel="shortcut icon" href="/favicon.ico">
  7. <link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/reset.css">
  8. <link rel="stylesheet" href="https://www.gnusocial.rocks//assets/css/blog.css">
  9. <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>
  10. </head><body>
  11. <header>
  12. <div class="home-menu menu menu-horizontal menu-fixed">
  13. <a class="menu-heading" href="https://gnusocial.rocks/">
  14. <img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social">
  15. <b>gnu</b>social
  16. </a>
  17. </div>
  18. <div class="sidebar">
  19. <ul class="menu-list">
  20. <li class="menu-item menu-selected"><a href="index.html" class="menu-link">Blog Index</a></li>
  21. <li class="menu-item"><a href="https://code.gnusocial.rocks/" class="menu-link">Repository</a></li>
  22. <li class="menu-item"><a href="https://coverage.gnusocial.rocks/" class="menu-link">Code Coverage</a></li>
  23. <li class="menu-item"><a href="https://docs.gnusocial.rocks/" class="menu-link">Documentation</a></li>
  24. <li class="menu-item"><a href="https://agile.gnusocial.rocks/" class="menu-link">Wiki</a></li>
  25. <li class="menu-item"><a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463" class="menu-link">Roadmap</a></li>
  26. </ul>
  27. </div>
  28. </header>
  29. <div class="content-wrapper">
  30. <div class="content">
  31. </div></div></div>
  32. <div id="template-wrapper"><div class="template-unit">
  33. <!-- entry begin -->
  34. <h3><a class="ablack" href="updates-interface-and-accessibility.html">
  35. Updates: Interface and accessibility
  36. </a></h3>
  37. <!-- bashblog_timestamp: #202109131732.55# -->
  38. <div class="subtitle">September 13, 2021 &mdash;
  39. GNU social development team
  40. </div>
  41. <!-- text begin -->
  42. <p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
  43. This update has been in the works for a long time... Many considerations had to be done, and given the current state of
  44. modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes. </p>
  45. <p>We hope you like it!</p>
  46. <h3>The prime directive</h3>
  47. <blockquote>
  48. <p>Modern looking, consistent and accessible UI across all browsers.
  49. Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p>
  50. </blockquote>
  51. <p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
  52. To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
  53. In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
  54. markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>
  55. <h3>Features</h3>
  56. <ul>
  57. <li>Accessible
  58. <ul>
  59. <li>Easy to use keyboard only navigation</li>
  60. <li>Feedback on focused elements</li>
  61. <li>Keyboard shortcuts to access main regions</li>
  62. <li>Vi-like shortcuts</li>
  63. <li>Screen reader tested</li>
  64. <li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
  65. <li>Brief description of navigation links</li>
  66. <li>Using semantic HTML whenever possible</li>
  67. <li>Special care given for styling solutions that could break accessibility</li>
  68. <li>Colors and type sizes in accordance to W3C contrast guidelines</li>
  69. <li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
  70. </ul></li>
  71. <li>Fast, the content provided to the user really is just markup and some CSS rules
  72. <ul>
  73. <li>Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e)</li>
  74. <li>For example, cropping your avatar before uploading a new one.</li>
  75. <li>This is the only example until now.</li>
  76. </ul></li>
  77. <li>Dark and light default themes available (according to your system theme)</li>
  78. <li>Graceful degradation for unsupported HTML elements</li>
  79. <li>Achieving modern user interface patterns without JS</li>
  80. <li>Various layout engines tested and work as they should
  81. <ul>
  82. <li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...)</li>
  83. <li>WebkitGTK (Epiphany, Midori, etc...)</li>
  84. <li>Gecko (Firefox and derivatives)</li>
  85. <li>Goanna (Palemoon, Basilisk, etc...)</li>
  86. <li>Internet Explorer</li>
  87. </ul></li>
  88. </ul>
  89. <h3>Video</h3>
  90. <h4>Keyboard tests</h4>
  91. <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>
  92. <hr>
  93. <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>
  94. <hr>
  95. <h3>Images</h3>
  96. <p><em>Default dark theme</em>
  97. <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_dark.png" alt="" style="display: block; width: 900px; max-width: 100%;">
  98. <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>
  99. <blockquote>
  100. <p>Settings are re-organized, allowing to focus into view each "tab" using the <em>details</em> HTML element.</p>
  101. </blockquote>
  102. <p><em>Default light theme</em>
  103. <img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_light.png" alt="" style="display: block; width: 900px; max-width: 100%;">
  104. <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>
  105. <h4>Bonus :')</h4>
  106. <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>
  107. <!-- text end -->
  108. <!-- entry end -->
  109. </div>
  110. </div></div>
  111. <footer class="footer l-box is-center">
  112. This site's source is
  113. <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
  114. </footer></body></html>