paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 928697a24653183dd3174096ec73f321639f8846
parent 70df66ea10403be684a3491f7d480ed399503680
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Thu,  6 Feb 2020 22:50:28 -0500

Publish new blog post

Diffstat:
Mpages/blog.md | 2++
Mpages/blog/website-redesign.md | 118+++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
Mpages/home.md | 4++--
Mpublic/feeds/blog-feed.xml | 86+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mpublic/feeds/sitewide-feed.xml | 86+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mpublic/sitemap.xml | 1+
6 files changed, 251 insertions(+), 46 deletions(-)

diff --git a/pages/blog.md b/pages/blog.md @@ -18,10 +18,12 @@ Below you can find links to things that I have posted: ### 2020 <ul> + <li>2020-02-06 <a href="blog/website-redesign">Making My Website More Accessible</a></li> </ul> ### 2019 <ul> + <li>2020-02-06 <a href="blog/website-redesign">Making My Website More Accessible</a></li> <li>2019-12-30 <a href="blog/automating-publishing">Automating the Publishing of Articles</a></li> <li>2019-12-21 <a href="blog/arguing-effectively">How to Argue Effectively</a></li> diff --git a/pages/blog/website-redesign.md b/pages/blog/website-redesign.md @@ -1,6 +1,6 @@ -## Redesigning paritybit.ca +## Making My Website More Accessible -[//]: # "" +[//]: # "For about one and a half months now I've been working on redesigning paritybit.ca to make it more accessible. In that time I've completely overhauled the design of the website to make it scale better on different screen sizes and make use of as many accessibility features as I can." [//]: # "main.min.css" @@ -8,47 +8,77 @@ <div class="byline"> <b>Written By:</b> Jake Bauer | - <b>Posted:</b> [DATE] | - <b>Last Updated:</b> [DATE] + <b>Posted:</b> 2020-02-06 | + <b>Last Updated:</b> 2020-02-06 </div> -### What I Did - -Added regions with <header> <nav> <main> <footer> thanks to http://wave.webaim.org/ and using https://www.w3.org/WAI/tutorials/page-structure/regions/ as reference. - -Left underlines in links in text so that they are easier to differentiate other -than relying on boldness and colour. - -Making sure to choose colours with a minimum contrast ratio of 4.5:1 but aiming -for 7:1. - -Checking the colourscheme using colourblind filters (toptal). - -Changing the layout of the site so that it scales a lot better between different -screen sizes. Also bringing in the width so that it's easier to follow the text -with your eyes. - -Using descriptive links instead of "click here" or "this". - -Making fonts larger so it's easier for people on mobile and on desktop to read. - -Optimising page loading times by shrinking images (pngcompressor.com), minifying -CSS, keeping requests down to a minimum (except where embedding images would -make an html document larger thereby teachnically making it worse for someone -who is browsing in pure-text mode). - -Obsessively checking the site with contrast checkers, colourblind filters, -accesisbility checkers, and schema validators. - -Dark and light modes using pure css, no javascript. - -### References - -[](https://www.w3.org/WAI/fundamentals/accessibility-intro/) -[](https://webaim.org/resources/contrastchecker/) -[](https://anybrowser.org/campaign/) -[](https://www150.statcan.gc.ca/n1/pub/11-627-m/11-627-m2017008-eng.htm) -[](http://romeo.elsevier.com/accessibility_checklist/) -[](https://contrast-finder.tanaguru.com/) -[](https://www.w3.org/WAI/tutorials/page-structure/regions/) -[](https://www.w3schools.com/css) +For about one and a half months now I've been working on redesigning +paritybit.ca to make it more accessible. In that time I've completely overhauled +the design of the website to make it scale better on different screen sizes and +make use of as many accessibility features as I can. I've gone from this: + +<figure> + <a href="/img/website-before.png"><img + src="/img/website-before-thumb.png"/></a> + <figcaption>My website before the redesign.</figcaption> +</figure> + +To this: + +<figure> + <a href="/img/website-after.png"><img + src="/img/website-after-thumb.png"/></a> + <figcaption>My website after the redesign.</figcaption> +</figure> + +Which I think also looks a lot better and cleaner in addition to being much +better in terms of accessibility. + +To make my website more accessible, I've added page landmarks using `<header>`, +`<nav>`, `<main>`, `<footer>`, and `<section>` tags to make it easier for those +with screen readers to navigate throughout the macro-structure of the page, I +re-designed the link styling to make differing between regular text and links +easier, I shrunk the width of the page to keep the text within a reasonable +field of view so that you don't have to move side to side while reading, I +increased the font size, and I made heavy use of a contrast checker to make sure +that my colours had a bare minimum contrast ratio of 4.5:1 (WCAG AA) with an +ideal goal of 7:1 (WCAG AAA) for regular text. I also ran my colour scheme +through the Toptal Colour Blind Filter website to make sure that the different +colours I chose didn't cause critical issues with understanding page content for +the (quite sizeable) population with a form of colourblindness. + +I also tested my website using Firefox's built-in accessibility tools which +notified me of anything that I may have missed with other tools and helped me +realize that I was being dumb with the way I added internal page links for pages +with a table of contents. + +As the ultimate test, I used the Orca screen reader software so that I could +experience my website as someone who actually needs to use screen reader +software would experience it. + +In terms of page content, I made sure that all of my images have `alt` text, all +of my links are descriptive instead of just reading "click here" or "this", and +all of my `<input>` elements have a `label` tag. + +In addition to accessibility for those with disabilities, I also made my website +more accessible to those with slower internet connections by attempting to +optimize page loading times by shrinking images and keeping requests down to a +minimum. The only thing I didn't do was embed images, no matter how small, into +my HTML because that would needlessly increase page sizes for those who browse +using browsers that don't render images or display favicons. I tried to make my +website look good with any browser, no matter how old. + +I also took this opportunity to add a light-mode theme to the website by making +use of the `@media` query `prefers-color-scheme: light`. If you are using a +light OS theme, you should be able to see my website in a light colour scheme. + +Below is a list of resources that I used in redesigning my website: + +* [Tanaguru Contrast Finder](https://contrast-finder.tanaguru.com/) +* [Toptal Colour Blind Filter](https://www.toptal.com/designers/colorfilter) +* [Viewable with Any Browser](https://anybrowser.org/campaign/) +* [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) +* [Website Accessibility Checklist](http://romeo.elsevier.com/accessibility_checklist/) +* [W3 Introduction to Accesibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/) +* [W3 Page Structure Explanation](https://www.w3.org/WAI/tutorials/page-structure/regions/) +* [W3 Schools CSS Reference](https://www.w3schools.com/css) diff --git a/pages/home.md b/pages/home.md @@ -21,6 +21,8 @@ projects on the site. src="/img/feed-icon.png" width="15" height="15" alt="Click for RSS Feed"/> </a> </div> +2020-02-06 <a class="feed-item" href="blog/website-redesign">New Blog Post: Making My Website More Accessible</a> + 2020-01-08 <a class="feed-item" href="guides/firefox-new-tab-dark">New Guide: How to Make the New Tab Page Dark Themed in Firefox</a> 2019-12-31 <a class="feed-item" href="projects/borderlands-3-dps-calculator">New Project: Borderlands 3 DPS Calculator</a> @@ -30,8 +32,6 @@ projects on the site. 2019-12-21 <a class="feed-item" href="blog/arguing-effectively">New Blog Post: How to Argue Effectively</a> -2019-12-21 <a class="feed-item" href="projects/usrmnt">New Project: usrmnt</a> - ### What is a Parity Bit? It is a bit (in the 1's and 0's sense) used in checking for errors in digital diff --git a/public/feeds/blog-feed.xml b/public/feeds/blog-feed.xml @@ -7,6 +7,92 @@ <description>The latest blog posts from paritybit.ca. </description> <item> + <title>New Blog Post: Making My Website More Accessible</title> + <link>https://www.paritybit.ca/blog/website-redesign</link> + <guid>https://www.paritybit.ca/blog/website-redesign</guid> + <pubDate>Thu, 06 Feb 2020 22:06:19 -0500</pubDate> + <description><![CDATA[<h2>Making My Website More Accessible</h2> + +<p>[//]: # ""</p> + +<div class="byline"> +<b>Written By:</b> Jake Bauer | + <b>Posted:</b> 2020-02-06 | + <b>Last Updated:</b> 2020-02-06 +</div> + +<p>For about one and a half months now I've been working on redesigning +paritybit.ca to make it more accessible. In that time I've completely overhauled +the design of the website to make it scale better on different screen sizes and +make use of as many accessibility features as I can. I've gone from this:</p> + +<p><figure> + <a href="/img/website-before.png"><img + src="/img/website-before-thumb.png" alt="My website before the redesign." /></a> + <figcaption>My website before the redesign.</figcaption> +</figure></p> + +<p>To this:</p> + +<p><figure> + <a href="/img/website-after.png"><img + src="/img/website-after-thumb.png" alt="My website after the redesign." /></a> + <figcaption>My website after the redesign.</figcaption> +</figure></p> + +<p>Which I think also looks a lot better and cleaner in addition to being much +better in terms of accessibility.</p> + +<p>To make my website more accessible, I've added page landmarks using <code>&lt;header&gt;</code>, +<code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;footer&gt;</code>, and <code>&lt;section&gt;</code> tags to make it easier for those +with screen readers to navigate throughout the macro-structure of the page, I +re-designed the link styling to make differing between regular text and links +easier, I shrunk the width of the page to keep the text within a reasonable +field of view so that you don't have to move side to side while reading, I +increased the font size, and I made heavy use of a contrast checker to make sure +that my colours had a bare minimum contrast ratio of 4.5:1 (WCAG AA) with an +ideal goal of 7:1 (WCAG AAA) for regular text. I also ran my colour scheme +through the Toptal Colour Blind Filter website to make sure that the different +colours I chose didn't cause critical issues with understanding page content for +the (quite sizeable) population with a form of colourblindness.</p> + +<p>I also tested my website using Firefox's built-in accessibility tools which +notified me of anything that I may have missed with other tools and helped me +realize that I was being dumb with the way I added internal page links for pages +with a table of contents.</p> + +<p>As the ultimate test, I used the Orca screen reader software so that I could +experience my website as someone who actually needs to use screen reader +software would experience it.</p> + +<p>In terms of page content, I made sure that all of my images have <code>alt</code> text, all +of my links are descriptive instead of just reading "click here" or "this", and +all of my <code>&lt;input&gt;</code> elements have a <code>label</code> tag.</p> + +<p>In addition to accessibility for those with disabilities, I also made my website +more accessible to those with slower internet connections by attempting to +optimize page loading times by shrinking images and keeping requests down to a +minimum. The only thing I didn't do was embed images, no matter how small, into +my HTML because that would needlessly increase page sizes for those who browse +using browsers that don't render images or display favicons. I tried to make my +website look good with any browser, no matter how old.</p> + +<p>I also took this opportunity to add a light-mode theme to the website by making +use of the <code>@media</code> query <code>prefers-color-scheme: light</code>. If you are using a +light OS theme, you should be able to see my website in a light colour scheme.</p> + +<p>Below is a list of resources that I used in redesigning my website:</p> + +<p><a href="https://contrast-finder.tanaguru.com/">Tanaguru Contrast Finder</a> +<a href="https://www.toptal.com/designers/colorfilter">Toptal Colour Blind Filter</a> +<a href="https://anybrowser.org/campaign/">Viewable with Any Browser</a> +<a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a> +<a href="http://romeo.elsevier.com/accessibility_checklist/">Website Accessibility Checklist</a> +<a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">W3 Introduction to Accesibility</a> +<a href="https://www.w3.org/WAI/tutorials/page-structure/regions/">W3 Page Structure Explanation</a> +<a href="https://www.w3schools.com/css">W3 Schools CSS Reference</a></p>]]></description> +</item> +<item> <title>New Blog Post: Automating the Publishing of Articles</title> <link>https://www.paritybit.ca/blog/automating-publishing</link> <guid>https://www.paritybit.ca/blog/automating-publishing</guid> diff --git a/public/feeds/sitewide-feed.xml b/public/feeds/sitewide-feed.xml @@ -7,6 +7,92 @@ <description>The feed that covers all notable additions, updates, announcements, and other changes for the entire paritybit.ca website.</description> <item> + <title>New Blog Post: Making My Website More Accessible</title> + <link>https://www.paritybit.ca/blog/website-redesign</link> + <guid>https://www.paritybit.ca/blog/website-redesign</guid> + <pubDate>Thu, 06 Feb 2020 22:06:19 -0500</pubDate> + <description><![CDATA[<h2>Making My Website More Accessible</h2> + +<p>[//]: # ""</p> + +<div class="byline"> +<b>Written By:</b> Jake Bauer | + <b>Posted:</b> 2020-02-06 | + <b>Last Updated:</b> 2020-02-06 +</div> + +<p>For about one and a half months now I've been working on redesigning +paritybit.ca to make it more accessible. In that time I've completely overhauled +the design of the website to make it scale better on different screen sizes and +make use of as many accessibility features as I can. I've gone from this:</p> + +<p><figure> + <a href="/img/website-before.png"><img + src="/img/website-before-thumb.png" alt="My website before the redesign." /></a> + <figcaption>My website before the redesign.</figcaption> +</figure></p> + +<p>To this:</p> + +<p><figure> + <a href="/img/website-after.png"><img + src="/img/website-after-thumb.png" alt="My website after the redesign." /></a> + <figcaption>My website after the redesign.</figcaption> +</figure></p> + +<p>Which I think also looks a lot better and cleaner in addition to being much +better in terms of accessibility.</p> + +<p>To make my website more accessible, I've added page landmarks using <code>&lt;header&gt;</code>, +<code>&lt;nav&gt;</code>, <code>&lt;main&gt;</code>, <code>&lt;footer&gt;</code>, and <code>&lt;section&gt;</code> tags to make it easier for those +with screen readers to navigate throughout the macro-structure of the page, I +re-designed the link styling to make differing between regular text and links +easier, I shrunk the width of the page to keep the text within a reasonable +field of view so that you don't have to move side to side while reading, I +increased the font size, and I made heavy use of a contrast checker to make sure +that my colours had a bare minimum contrast ratio of 4.5:1 (WCAG AA) with an +ideal goal of 7:1 (WCAG AAA) for regular text. I also ran my colour scheme +through the Toptal Colour Blind Filter website to make sure that the different +colours I chose didn't cause critical issues with understanding page content for +the (quite sizeable) population with a form of colourblindness.</p> + +<p>I also tested my website using Firefox's built-in accessibility tools which +notified me of anything that I may have missed with other tools and helped me +realize that I was being dumb with the way I added internal page links for pages +with a table of contents.</p> + +<p>As the ultimate test, I used the Orca screen reader software so that I could +experience my website as someone who actually needs to use screen reader +software would experience it.</p> + +<p>In terms of page content, I made sure that all of my images have <code>alt</code> text, all +of my links are descriptive instead of just reading "click here" or "this", and +all of my <code>&lt;input&gt;</code> elements have a <code>label</code> tag.</p> + +<p>In addition to accessibility for those with disabilities, I also made my website +more accessible to those with slower internet connections by attempting to +optimize page loading times by shrinking images and keeping requests down to a +minimum. The only thing I didn't do was embed images, no matter how small, into +my HTML because that would needlessly increase page sizes for those who browse +using browsers that don't render images or display favicons. I tried to make my +website look good with any browser, no matter how old.</p> + +<p>I also took this opportunity to add a light-mode theme to the website by making +use of the <code>@media</code> query <code>prefers-color-scheme: light</code>. If you are using a +light OS theme, you should be able to see my website in a light colour scheme.</p> + +<p>Below is a list of resources that I used in redesigning my website:</p> + +<p><a href="https://contrast-finder.tanaguru.com/">Tanaguru Contrast Finder</a> +<a href="https://www.toptal.com/designers/colorfilter">Toptal Colour Blind Filter</a> +<a href="https://anybrowser.org/campaign/">Viewable with Any Browser</a> +<a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a> +<a href="http://romeo.elsevier.com/accessibility_checklist/">Website Accessibility Checklist</a> +<a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">W3 Introduction to Accesibility</a> +<a href="https://www.w3.org/WAI/tutorials/page-structure/regions/">W3 Page Structure Explanation</a> +<a href="https://www.w3schools.com/css">W3 Schools CSS Reference</a></p>]]></description> +</item> +<item> <title>New Guide: How to Make the New Tab Page Dark Themed in Firefox</title> <link>https://www.paritybit.ca/guides/firefox-new-tab-dark</link> <guid>https://www.paritybit.ca/guides/firefox-new-tab-dark</guid> diff --git a/public/sitemap.xml b/public/sitemap.xml @@ -3,6 +3,7 @@ <url><loc>https://www.paritybit.ca</loc></url> <url><loc>https://www.paritybit.ca/home</loc></url> <url><loc>https://www.paritybit.ca/blog</loc></url> + <url><loc>https://www.paritybit.ca/blog/website-redesign</loc></url> <url><loc>https://www.paritybit.ca/blog/automating-publishing</loc></url> <url><loc>https://www.paritybit.ca/blog/arguing-effectively</loc></url> <url><loc>https://www.paritybit.ca/blog/difficulty-of-privacy-education</loc></url>