Homepage redesign

[isaacdurazo]

Here are the mockups (including a text-based version) for the redesigned homepage

Navigation

• New Logomark. The new ARIA AT Logomark uses the Roboto font. The dash between ARIA and AT has been removed and the AT has been put inside a blue square with rounded corners
• Navigation items. The default state for these is now black. A hover state should still be defined.

Hero Section

• Layout. This section has two columns.
• Background. A very light and subtle gradient
• Column 1. This column has the H1, an excerpt about the project, and two calls to action.
  • H1. This heading reads "Enabling Interoperability for Assistive Technology Users". It has been enlarged to 40px and it's now bold. "Enabling Interoperability" is the same blue color as the new logo.
  • Right under the H1, two parapgrahs read:
    • Today, different screen readers often yield conflicting experiences when presenting a web page, disadvantaging or even excluding some users. These differences also create accessibility design and test barriers for web developers.
    • Assistive technology users deserve equal inclusion. The ARIA-AT project aims to empower equal inclusion by realizing interoperability for AT users.
  • following the two paraphraps there are two calls to action, one primary and one secondary.
    • Primary call to action. This button's label is "Learn More" and uses the new blue color. This link takes the user to the wiki entry about "How Gaps in Assistive Technology Interoperability Hinder Inclusion".
    • Secondary call to action. This button's label is "Get Involved" and uses a white background with a gray outline.
• Column 2. A partial image of the "Test Plans Status Summary" table from the Data Management page.

W3C Authorization message

A box with a dark gradient and rounded corners "floats" in the center of the page containing the following text:

The ARIA-AT Project is managed by the ARIA-AT Community Group in coordination with the Authoring Practices Task Force of the ARIA Working Group. The W3C staff contact is Daniel Montalvo.

How are we improving interoperability?

• Layout. This section has two rows. The first row has one column and the second row has 4 columns
• Background. This section has a white background
• Row 1. This row has an H2 and a paragraph centered on the page.
  • H2. This heading reads "How are we improving interoperability?". Above, there's a text in blue, the same font size as the paragraphs that reads "Our Primary Goal".
  • The paragraph under the H2 reads:
    • We are proposing and testing expectations for all accessibility semantics. The ultimate goal is for everyone to agree on the expectations and for them to be tested every time any screen reader or browser makes a change that could affect how the semantics are conveyed.
• Row 2. Each column of the four columns here has new redesigned icon, an H3 and a paragraph
  • Column 1.
    • H3. Proposing expectations for ATs
    • Paragraph. We have written initial drafts for more than a thousand tests that articulate expected screen reader behaviors for 40 examples of common web design patterns. View the Test Writing Progress Report and view the draft test plans preview.
  • Column 2.
    • H3. Testing proposed expectations
    • Paragraph. This website enables us to manage test data, run tests with multiple testers, review results, and publish reports. View our progress on the test queue page.
  • Column 3.
    • H3. Building industry consensus
    • Paragraph. Once a pattern has a reviewed test plan with results data, a candidate report is published and the process of building consensus around the plan begins. View reports generated from candidate test plans on the reports page.
  • Column 4.
    • H3. Enabling scalable automated testing
    • Paragraph. In order to regularly collect test results at scale for multiple web design patterns, browsers, and ATs, we are developing an industry standard for automating assistive technology. Read the explainer for a draft AT automation standard and explore the code repository where experimental drivers are being developed.

Get Involved

• Layout. This section has two columns.
• Background. The same light and subtle gradient used in the Hero section
• Column 1. This column has an h2 followed by a paragraph and a list
  • H2. This heading reads "Get Involved". Above, there's a text in blue, the same font size as the paragraphs that reads "Collaborate".
  • Paragraph. Enabling AT interoperability is a large, ongoing endeavor that requires industry-wide collaboration and support. The W3C ARIA-AT Community Group is currently focusing on a stable and mature test suite for five screen readers. In the future, we plan to test additional screen readers and other kinds of assistive technologies with a broader set of web design patterns and test material. Learn how you can help by:
  • List
    • Reading more about the project and spreading awareness of its mission
    • Browsing the ARIA-AT Frequently Asked Questions (FAQ)
    • Joining the community group to participate in our mailing list and conference calls
• Column 2. A partial image of the "Test Run Page" timeline.

Footer

Centered in the page, is the new ARIA AT logo, underneath a paragraph reads: Copyright © 2024 World Wide Web Consortium (W3C®)

[isaacdurazo]

@mcking65 here's the updated mockup for the homepage with the changes we discussed yesterday at the CG meeting.

The changes are:

1. Reincorporated the video into the Hero section until we have an About page.
2. Added the "Skip to" button that we designed for the APG. For reference, it’s the one here
3. Added the W3C Logo.
4. Note: To keep the current navigation section clean, I created a header that appears before the main navigation, similar to the APG. We now have a header with a white background at the top that includes the “Skip to” button on the left-hand side, followed by the ARIA AT logo mark, and the W3C logo on the far right.