Enhance Accessibility Statement Settings to include options for floating button

[amberhinds]

Several users have requested a floating accessibility icon button to be added to their website because they (or their clients) like it as a virtue signal. They are hesitant to switch from other solutions or remove overlays because they believe that removing the floating accessibility button will hurt them.

We all agree that we don't want to build overlay functionality; however, an accessibility icon that includes information and links could achieve the same thing and help users.

Current Settings

These are the current "Footer Accessibility Statement" settings:

Proposed changes:

1. Change heading to "Accessibility Statement" (Remove Footer).
2. Shorten the initial paragraph to read:
   "Share your efforts to make your website more accessible with your customers and let them know you're using Accessibility Checker to ensure all people can use your website."
3. Add this description to the "Add Footer Accessibility Statement" input (text linked to input with aria-describedby)
   "Adds this text to the footer of your website:
   $site-name uses Accessibility Checker to monitor our website's accessibility."
4. Add a setting for enabling an accessibility button with this help text:
   " Adds a floating accessibility icon button that opens a modal with accessibility information and links."
5. Add a setting for positioning the button left, right or manual insertion. (Create a shortcode that allows the button to be manually placed on the page.)
6. Add a more descriptive label to the Accessibility Policy URL input:
   "Full URL to accessibility policy (starting with https://)"
7. Add a setting for including a help link and an input for the help link URL.

In an ideal world, settings would conditionally display only if applicable (for example, don't show the position setting if the button setting is not checked).

Change to Footer Accessibility Statement Text

This is how it currently looks:

<p class="edac-accessibility-statement"><small>City of Fairview uses <a href="https://equalizedigital.com/accessibility-checker?utm_source=accessibility-checker&amp;utm_medium=software&amp;utm_campaign=wordpress-general" target="_blank" aria-label="Accessibility Checker (opens in a new window)">Accessibility Checker</a> to monitor our website's accessibility. Read our <a href="https://equalizedigital.com/accessibility-statement">Accessibility Policy</a>.</small></p>

Changes needed:

1. Add a landmark region around the paragraph. It should be <aside aria-label="Accessibility Information"> </aside>
2. If the Help Link setting is enabled, add this link at the end (after the policy link if enabled): <a href="/link-here">Get accessibility help.</a>

Accessibility Button

The accessibility button would open an accessible modal when clicked. The modal would have the following:

• heading: Accessibility
• paragraph: Site name is committed to accessibility on our website. We regularly monitor and improve our website to support ongoing WCAG conformance. Read our Accessibility Policy. <-- This should probably be editable and have text field setting.
• [button link]Get Accessibility Help[/button link]
• Small Accessibility Checker logo linked to our website (I can get you SVGs if needed)

- Close button

The button would look something like this: https://commons.wikimedia.org/wiki/File:Accessibility.svg

We might want to give a limited option for setting the button colors. For example:

• dark background with white
• light background with black (for a dark mode website)
  I wouldn't do it with a color picker though, but maybe if the colors can be set with CSS a dev can override it.

Accessible name for the button should be "Accessibility Information". It should be high in the DOM/tab order - maybe even before the skip links.

It would be nice if there were a way for website visitors to hide or remove the button - especially on mobile. Or we might want to think about collapsing to a rectangle with text that is less tall on mobile.