New design for wpaccessibility.org

_includes/components/footer.html

@@ -2,8 +2,9 @@
   <footer>
 
     <p>
+      <span aria-hidden="true">&#x2191;</span>
       <a href="#top" id="back-to-top" class="back-to-top">
-        <span aria-hidden="true">&#x2191;</span> Back to top
+        Back to top
       </a>
     </p>
 

_includes/components/github.html

@@ -11,7 +11,7 @@
         site.gh_edit_link_text and
         site.gh_edit_repository
     %}
-    <p class="text-small text-grey-dk-000 mb-0">
+    <p class="text-small">
         <a href="{{ site.gh_edit_repository }}/tree/main/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
     </p>
     {% endif %}

_includes/components/search_header.html

@@ -1,23 +1,22 @@
-<div class="search">
-  <form class="search-input-wrap" role="search" action="{{ site.baseurl }}/search/" method="get">
+<search class="search">
+  <form class="search-input-wrap" action="{{ site.baseurl }}/search/" method="get">
     <label for="search-input" class="search-label">
       <span class="screen-reader-text">Search {{ site.title }}</span>
       <svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true">
         <use xlink:href="#svg-search"></use>
       </svg>
     </label>
 
-    <input 
-      type="search" 
-      id="search-input" 
-      name="q" 
-      class="search-input" 
-      placeholder="Search {{ site.title }}" 
+    <input
+      type="search"
+      id="search-input"
+      name="q"
+      class="search-input"
       autocomplete="off"
     >
 
     <button type="submit" class="search-submit">Search</button>
   </form>
 
   <div id="search-results" class="search-results"></div>
-</div>
+</search>

_includes/components/sidebar.html

@@ -2,16 +2,21 @@
   <header class="site-header">
 
     <div class="lh-wrapper">
-      <img src="{{site.baseurl}}/assets/images/logo.jpg" alt="Accessibility: Advocate Equal Access">
       <a href="{{ '/' | relative_url }}" class="site-title lh-tight">
-        {{ site.title}}</a>
+        <img src="{{site.baseurl}}/assets/images/logo-wa11ypuu.png" alt="WP Accessibility logo, to homepage">
+        {{ site.title }}
+      </a>
     </div>
-    <button id="menu-button" class="site-button btn-reset" aria-expanded="false">
-      <span>Menu</span>
-      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
-        <use xlink:href="#svg-menu"></use>
-      </svg>
-    </button>
+
+    <div class="menu-button-wrapper">
+      <button id="menu-button" class="site-button" aria-expanded="false">
+        <span>Menu</span>
+        <svg viewBox="0 0 24 24" class="icon" focusable="false" aria-hidden="true">
+          <use xlink:href="#svg-menu"></use>
+        </svg>
+      </button>
+    <div>
+
   </header>
 
   {% include_cached components/site_nav.html %}

_includes/components/site_nav.html

@@ -11,8 +11,6 @@
 
 <nav aria-label="Main" id="site-nav" class="site-nav" tabindex="0">
 
-    <h2 class="screen-reader-text">Menu</h2>
-
     {% assign pages_top_size = site.html_pages
     | where_exp:"item", "item.title != nil"
     | where_exp:"item", "item.parent == nil"

_posts/2025-08-16-accessible-error-messages-in-forms.md

@@ -10,7 +10,7 @@ date: 2025-08-16
 ---
 
 When you put care into preventing errors and clearly indicating when something goes wrong, users are much more likely to successfully submit a form.
-{: .fs-6 .fw-300 }
+{: .lead }
 
 In this post, we’ll walk step-by-step through how to prevent errors, indicate them clearly, and offer help with error messages in forms for different types of users.
 
@@ -36,15 +36,15 @@ Only ask for information you truly need in order to process the request. The few
 
 Be clear about why you need sensitive personal information, such as an identification number, race, religion or medical data. Check your local legislation to see if you are allowed to request such private information in an open online form.
 
-{: .info }
+{: .callout  .info }
 In the Netherlands there are strict rules about [when to ask for a citizen service number](https://www.rijksoverheid.nl/onderwerpen/privacy-en-persoonsgegevens/vraag-en-antwoord/welke-organisaties-mogen-mijn-burgerservicenummer-bsn-gebruiken#:~:text=Alle%20overheidsorganisaties%20mogen%20gebruik%20maken%20van%20uw%20burgerservicenummer%20(BSN)). Canada has similar rules governing [how you can request Personally Identifying Information (PII)](https://www.priv.gc.ca/en/privacy-topics/privacy-laws-in-canada/the-personal-information-protection-and-electronic-documents-act-pipeda/p_principle/).
 
 
 ## How will I ask for this information?
 
 The input mechanism you use to ask for information has a profound impact on your users. Should you design new custom input fields or use recognizable, familiar patterns? Please don’t reinvent the web for something as essential as form fields. As Heydon Pickering explains in his talk [Get Your Priorities Straight](https://www.youtube.com/watch?v=ediHVy0869c): “Real people aren't looking to be delighted. People want to get the task done and get on with their lives".
 
-{: .example }
+{: .callout  .example }
 For example: users recognize radio buttons as circles and checkboxes as squares. They know from experience they can choose one option from the radio buttons and multiple options from the checkboxes. Also, the [keyboard interaction](https://webaim.org/techniques/keyboard/#testing) for radio buttons and checkboxes differs from each other.
 
 Some field types are better avoided due to poor usability, such as multi-selects. Using date pickers? Check the experience for keyboard or screen reader users.
@@ -56,7 +56,7 @@ For a deep dive into asking for dates in forms, see the GOV.UK Design System pat
 
 Don't force the user to enter information (like an email address) more than once, or expect them to remember entries entered on previous screens, like in a multistep form.
 
-{: .info }
+{: .callout  .info }
 This success criterion was added in [WCAG 2.2: 3.3.7 Redundant Entry](https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html).
 
 ## What information can I provide in advance to help the user?
@@ -88,7 +88,7 @@ One option could be that when most fields are required, mark the *optional* ones
 
 But, keep the way you indicate required/non-required fields consistent with all forms in your site.
 
-{: .example }
+{: .callout  .example }
 For example: "Please complete all fields. If a field is not required, it will be labeled "(Optional)".
 
 Whatever you choose, be consistent within the form and across all forms on your website. Inform users above the form how field requirements are indicated.
@@ -101,7 +101,7 @@ Checking during typing can be confusing. Imagine typing an email address and see
 
 That leaves two options: check after leaving a field, or after submission. These can be combined. For certain fields, like dates that must be in the future, immediate checking is helpful. But checking after submission is always necessary.
 
-{: .warning }
+{: .callout  .warning }
 HTML5 form validation is not accessible at this moment (in 2025). The W3C summarizes the options in [Validating Input ](https://www.w3.org/WAI/tutorials/forms/validation/). "If your web browser supports HTML5, it will not allow you to submit the form without entering text into the input field. Instead, it will display a message that is generated by the web browser itself".  Write custom error messages and provide server side generated error messages. The W3C explains the options in [Validating Input ](https://www.w3.org/WAI/tutorials/forms/validation/).
 
 ## How do I indicate that an answer is incomplete or filled out incorrectly?
@@ -117,7 +117,7 @@ Use more than color alone to indicate errors. A user with visual impairments or
 
 Messages like “This field is required” or “Invalid value” don’t offer much help. Write clear error messages that explain what’s missing or needs changing.
 
-{: .example }
+{: .callout  .example }
 “Enter your first name”  
 “Your chosen password is too short. It must be at least 12 characters long.”  
 “The expiration date must be in the future.”
@@ -130,7 +130,7 @@ You click "Send" and… nothing happens. Or you're redirected to the homepage. W
 
 Give users clear confirmation that their form has been submitted and what will happen next. You can also include this messsage in a confirmation email.
 
-{: .example }
+{: .callout  .example }
 A confirmation text could be:  
 Thank you for your registration for our workshop "Knitting socks". A confirmation email has been sent to [email protected] with the time and location of the workshop. If you haven't received an email? [Please contact us](#).
 
@@ -142,7 +142,7 @@ Don't hide contact details. They shouldn't be buried at the bottom of the form,
 
 Always offer multiple ways to get in touch on your contact page — not everyone can make a phone call.
 
-{: .example }
+{: .callout  .example }
 A help text could be:  
 Do you need help filling out this form or do you have questions? [Please contact us](#).
 

_posts/2025-08-27-offer-multiple-ways-to-contact-you.md

@@ -9,9 +9,9 @@ excerpt: "It’s better to offer multiple ways to get in touch, so people can ch
 date: 2025-08-27
 ---
 You want to reach out to customer service, and they say  *“Send us a WhatsApp message.”* What if you don’t use WhatsApp, or cannot make a phone call, or use the chatbox? 
-{: .fs-6 .fw-300 }
+{: .callout  .lead }
 By offering multiple contact options, you make sure every customer has a way to connect.
-{: .fs-6 .fw-300 }
+{: .callout  .lead }
 
 ## Don’t make getting in touch their problem
 
@@ -109,7 +109,7 @@ Provide an address on your website where customers can send a letter.
 
 It’s essential to provide multiple options for people to contact you. And don’t just ask for their preferences; respect them.
 
-{: .example }
+{: .callout  .example }
 You could ask for example:
 “Would you like us to call you back or send an email instead?”
 

_sass/abstracts/_mixins.scss

@@ -44,108 +44,3 @@
     padding-left: $gutter-spacing;
   }
 }
-
-@mixin fs-1 {
-  & {
-    font-size: $font-size-1 !important;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-1-sm !important;
-  }
-}
-
-@mixin fs-2 {
-  & {
-    font-size: $font-size-2 !important;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-3 !important;
-  }
-}
-
-@mixin fs-3 {
-  & {
-    font-size: $font-size-3 !important;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-4 !important;
-  }
-}
-
-@mixin fs-4 {
-  & {
-    font-size: $font-size-4 !important;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-5 !important;
-  }
-}
-
-@mixin fs-5 {
-  & {
-    font-size: $font-size-5 !important;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-6 !important;
-  }
-}
-
-@mixin fs-6 {
-  & {
-    font-size: $font-size-6 !important;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-7 !important;
-    line-height: $body-heading-line-height;
-  }
-}
-
-@mixin fs-7 {
-  & {
-    font-size: $font-size-7 !important;
-    line-height: $body-heading-line-height;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-8 !important;
-  }
-}
-
-@mixin fs-8 {
-  & {
-    font-size: $font-size-8 !important;
-    line-height: $body-heading-line-height;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-9 !important;
-  }
-}
-
-@mixin fs-9 {
-  & {
-    font-size: $font-size-9 !important;
-    line-height: $body-heading-line-height;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-10 !important;
-  }
-}
-
-@mixin fs-10 {
-  & {
-    font-size: $font-size-10 !important;
-    line-height: $body-heading-line-height;
-  }
-
-  @include mq(sm) {
-    font-size: $font-size-10-sm !important;
-  }
-}