From 0d8aa9223447427f0a563d421ddeeed66645b547 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Mon, 13 Sep 2021 17:37:40 +0100 Subject: [PATCH] [BLOG] Added interface and accessibility blog post. 13th september. --- all_posts.html | 3 + feed.rss | 97 +++++++- index.html | 230 ++++++++---------- updates-interface-and-accessibility.html | 143 +++++++++++ updates-interface-and-accessibility.md | 66 +++++ v3/feed.rss | 85 ++++++- v3/index.html | 4 + ...ocumentation-and-tests-infrastructure.html | 2 + v3/milestone-port-media-handling-from-v2.html | 2 + v3/updates-finish-the-avatar-component.html | 2 + ...toreremotemedia-for-v3-and-port-embed.html | 2 + ...pdates-improve-the-attachments-system.html | 2 + v3/updates-interface-and-accessibility.html | 137 +++++++++++ v3/updates-interface-and-accessibility.md | 66 +++++ v3/updates-v3-blog.html | 2 + 15 files changed, 711 insertions(+), 132 deletions(-) create mode 100644 updates-interface-and-accessibility.html create mode 100644 updates-interface-and-accessibility.md create mode 100644 v3/updates-interface-and-accessibility.html create mode 100644 v3/updates-interface-and-accessibility.md diff --git a/all_posts.html b/all_posts.html index bfcf7c6..5c964e4 100644 --- a/all_posts.html +++ b/all_posts.html @@ -10,6 +10,9 @@

All posts

+

September 2021

+
diff --git a/feed.rss b/feed.rss index b7d3a1a..f436a4c 100644 --- a/feed.rss +++ b/feed.rss @@ -2,7 +2,100 @@ My fancy bloghttp://example.com/blog/index.html A blog about turtles and carrotsen -Wed, 18 Aug 2021 18:06:09 +0100 -Wed, 18 Aug 2021 18:06:09 +0100 +Mon, 13 Sep 2021 17:31:02 +0100 +Mon, 13 Sep 2021 17:31:02 +0100 + +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

+ + + + + + +
+]]>http://example.com/blog/updates-interface-and-accessibility.html +http://example.com/blog/./updates-interface-and-accessibility.html +John Smith +Mon, 13 Sep 2021 17:30:12 +0100 diff --git a/index.html b/index.html index 943967a..19743b5 100644 --- a/index.html +++ b/index.html @@ -1,137 +1,111 @@ - - + + + + + + + +My fancy blog - My fancy blog + +
+
+

+Updates: Interface and accessibility +

+ +
September 13, 2021 — +John Smith +
+ - - - - - GNU social — a free software social networking platform - - - - - +

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.

- -
-
- - GNU social - - -
-
-
-
-
-
- GNU social - gnusocial -
-

- The free software social networking platform. -

- -
-
-
-
+

We hope you like it!

-

Features

+

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.

-

- Versatile -

-

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

-
-
-

- Accessible -

-

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

-
-
-

- Customizable -

-

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

-
-
-

- Privacy focused -

-

- GNU social is part of the GNU project, it's 100% free software, with no malicious features or spyware. -

-
-
-
-
-
- Decentralized social network. -
-

Where can I join GNU social?

+

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.

-

There are many kinds of GNU social server instances online right now!

-

Click here to see a list of popular GNU social sites you can join!

- Disclaimer: Please note that the GNU social development team is not responsible for - the operation or content of sites that run its software. -
-
-
+

Features

-
-

Support the team making GNU social possible!

-
-
-

Who makes GNU social?

-

Many developers have been involved in the making of GNU social. It's hard to keep a precise record of so many valuable contributions.

-

Version 3 development is being maintained by Diogo Cordeiro, Hugo Sales and Eliseu Amaro.

-

Version 2 development was maintained by Diogo Cordeiro with many important contributions from Alexei Sorokin and the help of Summer of Code students.

-

The project started with Matt Lee and StatusNet with Evan Prodromou. It was since been maintained by Mikael Nordfeldth.

-

A list of contributors is available here.

-
+
-
-
-
- - - +
    +
  • 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

    + + + + + + +

    Read more...

    + +
    + +
    + diff --git a/updates-interface-and-accessibility.html b/updates-interface-and-accessibility.html new file mode 100644 index 0000000..06eb02f --- /dev/null +++ b/updates-interface-and-accessibility.html @@ -0,0 +1,143 @@ + + + + + + + +Updates: Interface and accessibility - My fancy blog + + +
    + +

    +Updates: Interface and accessibility +

    + +
    September 13, 2021 — +John Smith +
    + + +

    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

    + + + + + + +
    + + + + + + + + + +
    + + +

    Images

    + +

    Default dark theme + +

    + +

    Settings are re-organized, allowing to focus into view each “tab” using the details HTML element.

    + +

    Default light theme + +

    + +

    Bonus :‘)

    + + + + + + + +
    + +
    + diff --git a/updates-interface-and-accessibility.md b/updates-interface-and-accessibility.md new file mode 100644 index 0000000..1d1f5d1 --- /dev/null +++ b/updates-interface-and-accessibility.md @@ -0,0 +1,66 @@ +Updates: Interface and accessibility + +Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI. +This update has been in the works for a long time... Many considerations had to be done, and given the current state of +modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes. + +We hope you like it! + +### The prime directive +> Modern looking, consistent and accessible UI across all browsers. +> Non-JS version as the primary focus, **JS is optional** and should be regarded as such. + +The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing. +To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader. +In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the +markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon. + +### Features +* Accessible + * Easy to use keyboard only navigation + * Feedback on focused elements + * Keyboard shortcuts to access main regions + * Vi-like shortcuts + * Screen reader tested + * Notifies the user when focusing on key elements, such as the feed, notes and actions + * Brief description of navigation links + * Using semantic HTML whenever possible + * Special care given for styling solutions that could break accessibility + * Colors and type sizes in accordance to W3C contrast guidelines + * Chosen specifically blue-ish and grey-ish hues for faster page loading perception +* Fast, the content provided to the user really is just markup and some CSS rules + * Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e) + * For example, cropping your avatar before uploading a new one. + * This is the only example until now. +* Dark and light default themes available (according to your system theme) +* Graceful degradation for unsupported HTML elements +* Achieving modern user interface patterns without JS +* Various layout engines tested and work as they should + * Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...) + * WebkitGTK (Epiphany, Midori, etc...) + * Gecko (Firefox and derivatives) + * Goanna (Palemoon, Basilisk, etc...) + * Internet Explorer + +### Video +#### Keyboard tests + + +
    + + + +
    + +### Images +*Default dark theme* + + +> Settings are re-organized, allowing to focus into view each "tab" using the *details* HTML element. + +*Default light theme* + + + +#### Bonus :') + diff --git a/v3/feed.rss b/v3/feed.rss index d3abf2e..2f517c1 100644 --- a/v3/feed.rss +++ b/v3/feed.rss @@ -2,10 +2,79 @@ GNU social V3https://gnusocial.rocks/v3/index.html Development blog where we announce our progress.en -Mon, 13 Sep 2021 13:04:45 +0100 -Mon, 13 Sep 2021 13:04:45 +0100 +Mon, 13 Sep 2021 17:36:14 +0100 +Mon, 13 Sep 2021 17:36:14 +0100 +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

    + + + +
    +]]>    https://gnusocial.rocks/v3/updates-interface-and-accessibility.html +https://gnusocial.rocks/v3/./updates-interface-and-accessibility.html +GNU social development team +Mon, 13 Sep 2021 17:32:55 +0100     + Updates: V3 blog + + ]]>https://gnusocial.rocks/v3/updates-v3-blog.html https://gnusocial.rocks/v3/./updates-v3-blog.html @@ -62,6 +133,8 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when + + ]]>https://gnusocial.rocks/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html https://gnusocial.rocks/v3/./updates-implement-storeremotemedia-for-v3-and-port-embed.html @@ -122,6 +195,8 @@ any remote URL being shared in a note. + + ]]>https://gnusocial.rocks/v3/updates-improve-the-attachments-system.html https://gnusocial.rocks/v3/./updates-improve-the-attachments-system.html @@ -210,6 +285,8 @@ Updates: Finish the Avatar component + + @@ -268,6 +345,8 @@ is properly tested, we have the + + ]]>https://gnusocial.rocks/v3/milestone-documentation-and-tests-infrastructure.html https://gnusocial.rocks/v3/./milestone-documentation-and-tests-infrastructure.html @@ -327,6 +406,8 @@ The key ones are:

    + + ]]>https://gnusocial.rocks/v3/milestone-port-media-handling-from-v2.html https://gnusocial.rocks/v3/./milestone-port-media-handling-from-v2.html diff --git a/v3/index.html b/v3/index.html index 7fff0c2..094daf1 100644 --- a/v3/index.html +++ b/v3/index.html @@ -43,6 +43,10 @@ Our objective is to further differentiate GNU social from the alternative softwa

    Blog

    +

    September 2021

    +

    August 2021

    • Updates: V3 blog — August 16, 2021
      • diff --git a/v3/milestone-documentation-and-tests-infrastructure.html b/v3/milestone-documentation-and-tests-infrastructure.html index 5af0ff2..9f6b83b 100644 --- a/v3/milestone-documentation-and-tests-infrastructure.html +++ b/v3/milestone-documentation-and-tests-infrastructure.html @@ -88,6 +88,8 @@ is properly tested, we have the + +
    diff --git a/v3/milestone-port-media-handling-from-v2.html b/v3/milestone-port-media-handling-from-v2.html index 02efc6c..72384cd 100644 --- a/v3/milestone-port-media-handling-from-v2.html +++ b/v3/milestone-port-media-handling-from-v2.html @@ -92,6 +92,8 @@ The key ones are:

    + +
    diff --git a/v3/updates-finish-the-avatar-component.html b/v3/updates-finish-the-avatar-component.html index f201564..5f5d9f7 100644 --- a/v3/updates-finish-the-avatar-component.html +++ b/v3/updates-finish-the-avatar-component.html @@ -121,6 +121,8 @@ GNU social development team + + diff --git a/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html b/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html index 6965f36..ded1a33 100644 --- a/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html +++ b/v3/updates-implement-storeremotemedia-for-v3-and-port-embed.html @@ -60,6 +60,8 @@ attempts to generate a page preview from open graph and oembed. I.e., acts when + + diff --git a/v3/updates-improve-the-attachments-system.html b/v3/updates-improve-the-attachments-system.html index 8a1b39b..d04518e 100644 --- a/v3/updates-improve-the-attachments-system.html +++ b/v3/updates-improve-the-attachments-system.html @@ -93,6 +93,8 @@ any remote URL being shared in a note. + + diff --git a/v3/updates-interface-and-accessibility.html b/v3/updates-interface-and-accessibility.html new file mode 100644 index 0000000..fb32934 --- /dev/null +++ b/v3/updates-interface-and-accessibility.html @@ -0,0 +1,137 @@ + + + + + + + + + +Updates: Interface and accessibility - GNU social V3 + +
    +
    + +GNU social +gnusocial + +
    +
    + +
    +
    + +
    +
    +
    +
    + +

    +Updates: Interface and accessibility +

    + +
    September 13, 2021 — +GNU social development team +
    + + +

    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

    + + + +
    + + + +
    + +

    Images

    + +

    Default dark theme + +

    + +
    +

    Settings are re-organized, allowing to focus into view each "tab" using the details HTML element.

    +
    + +

    Default light theme + +

    + +

    Bonus :')

    + + + + + + +
    +
    + diff --git a/v3/updates-interface-and-accessibility.md b/v3/updates-interface-and-accessibility.md new file mode 100644 index 0000000..61b5482 --- /dev/null +++ b/v3/updates-interface-and-accessibility.md @@ -0,0 +1,66 @@ +Updates: Interface and accessibility + +Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI. +This update has been in the works for a long time... Many considerations had to be done, and given the current state of +modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes. + +We hope you like it! + +### The prime directive +> Modern looking, consistent and accessible UI across all browsers. +> Non-JS version as the primary focus, **JS is optional** and should be regarded as such. + +The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing. +To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader. +In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the +markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon. + +### Features +* Accessible + * Easy to use keyboard only navigation + * Feedback on focused elements + * Keyboard shortcuts to access main regions + * Vi-like shortcuts + * Screen reader tested + * Notifies the user when focusing on key elements, such as the feed, notes and actions + * Brief description of navigation links + * Using semantic HTML whenever possible + * Special care given for styling solutions that could break accessibility + * Colors and type sizes in accordance to W3C contrast guidelines + * Chosen specifically blue-ish and grey-ish hues for faster page loading perception +* Fast, the content provided to the user really is just markup and some CSS rules + * Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e) + * For example, cropping your avatar before uploading a new one. + * This is the only example until now. +* Dark and light default themes available (according to your system theme) +* Graceful degradation for unsupported HTML elements +* Achieving modern user interface patterns without JS +* Various layout engines tested and work as they should + * Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...) + * WebkitGTK (Epiphany, Midori, etc...) + * Gecko (Firefox and derivatives) + * Goanna (Palemoon, Basilisk, etc...) + * Internet Explorer + +### Video +#### Keyboard tests + + +
    + + + +
    + +### Images +*Default dark theme* + + +> Settings are re-organized, allowing to focus into view each "tab" using the *details* HTML element. + +*Default light theme* + + + +#### Bonus :') + diff --git a/v3/updates-v3-blog.html b/v3/updates-v3-blog.html index 1c6fb0a..ba82f23 100644 --- a/v3/updates-v3-blog.html +++ b/v3/updates-v3-blog.html @@ -68,6 +68,8 @@ forget to subscribe!

    + +