APG homepage redesign

[isaacdurazo]

Text-based and Visual High Fidelity Mockup

Text-based Mockup

Hero Section

The hero section of the home pages is comprised of a dark blue box aligned to the left that takes 75% of the width of the main container; it has a welcoming text in white that includes an h2 that reads "Get empowered to create accessible rich internet applications" and the font size for this text is 16px. Underneath there is a p that reads "Learn how to use ARIA to create an accessible Rich Internet Application. The ARIA Authoring Practices project provides guidance on the appropriate application of ARIA, describes recommended usage patterns, and explains concepts behind them"; the font size for this text is 16px.

On the right-hand side of the hero section, there will be an illustration representing APG; this will take the remaining space in the section.

Subtle ornamental and minimalistic geometric elements float around in the hero section.

Main Content

The main content area has three sections that cover APG'a most common resources, current work and how to collaborate with the Task Force and the project.

Every section in the main content area has a consistent style and type of content for its header, which contains an h3 and a p centered on the page; the h3 has two lines of text with different styles each; the text above categorizes the section and is either one or two words; it is in gray color, uppercase, and the font size is 16px. The text below is in "W3C blue" and the font size is 38px; it is a couple of lines of text and uses an inviting message. The p contains a brief two-line description of the section in black text and the font size is 16px.

Our Resources

Header

The h3 in this header reads "Our resources" on the first line and "Everything you need to make de Web Accessible" on the second line. The p reads "Recommended approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties."

Main Content

The main content of this section includes 4 resources that are structured by an h4 that includes the name of the resource in W3C blue, a p in black that briefly describes it, an a styled like a button in dark blue that reads "Learn more". Next to this block of text, there is an illustration on the side that represents the resource.

The text and illustration of each of the resources in this section alternate visually, meaning that the first one has the text on the left and the illustration on the right, the next one does the opposite, so on and so forth.

The resources in the section and their descriptions are:

• h4 Design Patterns and widgets

  • p Learn how to make common rich internet application patterns and widgets accessible by applying WAI-ARIA roles, states, and properties and implementing keyboard support.

• h4 Use of ARIA landmarks

  • p Learn how HTML sectioning elements and ARIA landmark roles are used to make it easy for assistive technology users to understand the meaning of the layout of a page.

• h4 Providing Accessible Names and Descriptions

  • p Providing elements with accessible names, and where appropriate, accessible descriptions is one of the most important responsibilities authors have when developing accessible web experiences.

• h4 And so much more…

  • p Learn about other fundamental accessibility resources and understand how to Provide Accessible Names and Descriptions, implement accessible Grid and Table properties, use Hiding Semantics, and more.

Note: The last resource on this page takes the user to the "Fundamentals" page

Current Work

Header

The h3 in this header reads "Current work" on the first line and "Check out our most recent work" on the second line. The p reads "Review the overall scope of work planned for the APG and supporting deliverables and the timelines for completing our work."

Main Content

The main content of this section includes four resources styled like cards side by side in one row; these cards are white on a light blue background and are structured by an h4 that includes the title of the resource in "W3C blue", a p that briefly describes it, an a that reads "Learn more" in W3C blue.

The resources in the section and their descriptions are:

• h4 Release Plans

  • p Take a look at the plan overview for WAI-ARIA Authoring Practices, priorities, and work in progress.

• h4 Patterns Progress Status

  • p Status of work on design patterns and reference implementations of those patterns for the first release of the ARIA 1.1 Authoring Practices.

• h4 How to write Regression Tests

  • p Learn what the APG Regression Tests test, how to run them, and understand the results.

• h4 Meetings

  • p The APG Task Force meets on Tuesdays from 14:00 until 15:00 Boston time.

Collaboration

Header

The h3 in this header reads "Collaboration" on the first line and "Get involved with our community and our work" on the second line. The p reads "The APG Task Force conducts its work using a variety of synchronous and asynchronous tools. And there are several ways to get involved."

Main Content

The main content of this section includes two resources side by side. They are structured by an icon on top followed by an h4 for the title, a p that briefly describes the resource, and an a in W3C blue.

The resources in the section and their descriptions are:

• h4 Join our community

  • p To join the APG Task Force, individuals must be participants of the ARIA WG. Participants are expected to actively contribute to the work of the Task Force.
  • a Connect With Us

• h4 Contribute to our project

  • p To contribute without joining the task force, see the ARIA Working Group contribute page for general instructions. To contribute to documents under development, see how to contribute to the source repository directly.
  • a Get Involved

Aditional content

At the bottom of the "Collaboration" section, there is a dark blue box with white text that takes 75% of the page and is horizontally centered; it contains information about APG's mailing lists. This component is structured by an icon on the left and an h4 for the title and a p to provide a description; both aligned to the right.

This boxes text reads:

• h4 Mailing Lists
  • p The APG Task Force uses the public-aria-practices@w3.org mailing list (mailing list archives) for email discussion. Participants are automatically added to the mailing list when they become a participant of the Task Force.
    Discussions of the task force prior to September 2017 are archived on the public-aria mailing list.

Visual High Fidelity Mockup

[jscholes]

As always, thank you for providing detailed design info in text! Some thoughts:

an h2 that reads "Get empowered to create accessible rich internet applications"

This doesn't feel like a heading. I may just be misunderstanding the intent, but it seems like a page subtitle, which should semantically be plain text.

Subtle ornamental and minimalistic geometric elements float around in the hero section.

Does this imply animation? If so, does it last more than five seconds, can it be turned off, and will reduced motion preferences be respected?

Every section in the main content area has a consistent style and type of content for its header, which contains an h3

Is this to follow on from the h2 I already highlighted? If the h2 is not intended to be an actual semantic heading, the actual page subsection headings should be h2 instead, not h3.

the text above categorizes the section and is either one or two words; it is in gray color, uppercase

By "uppercase", do you mean all caps? This would present reading issue for some, and title casing would be a better choice. E.g. "Design Patterns", not "DESIGN PATTERNS", just to make up an example.

the h3 has two lines of text ... The text below is in "W3C blue" and the font size is 38px; it is a couple of lines of text and uses an inviting message.

The current wording implies that the h3 will contain this text in blue, and the rest of the design description confirms this. However, this can make the headings too long and unwieldy. Headings should usually only contain the title for the section.

Example: "Our resources Everything you need to make de Web Accessible", is how a screen reader will read this heading. This either needs to be:

• "Our resources: Everything you need to make de Web Accessible", with a separator; or
• heading: "Our resources", with text: "Everything you need to make de Web Accessible", below.

I'd probably vote more for the first option in this specific case. But, it really depends on the length of the secondary text. Any longer than this, and it doesn't belong in the heading.

Aside: what is "de web"? Is this intentional, because if so, I don't understand it? It should be "the web", no?

The main content of this section includes 4 resources that are structured by an h4

Again, if the first h2 is semantically negated, these should be h3.

4 resources ... an a styled like a button in dark blue that reads "Learn more".

This won't be WCAG compliant, without some additional context provided in the link text for screen reader users as a minimum. To make it better for everyone, I'd recommend either:

• block links wrapping the heading, descriptive text and CTA;
• block links, wrapping the heading and descriptive text, with the "learn more" CTAs removed; or
• just making the heading the link, and also not having "learn more" CTAs (the link can be aria-describedby the descriptive text).

The text and illustration of each of the resources in this section alternate visually, meaning that the first one has the text on the left and the illustration on the right, the next one does the opposite, so on and so forth.

This sounds inconsistent for a screen reader user, possibly in a confusing way. If I learn to navigate using particular commands, e.g. by illustration graphic with G/Shift+G, and then find that the graphic is in a different place on different cards, that navigation becomes less usable/more frustrating. In any case, the content must come after the title heading in all cases, it can never be before it.

Note: the illustrations aren't described in this text-based mockup, not sure if they've been developed/designed yet?

Similar feedback relating to the "Current Work" section, i.e. heading levels and "learn more" context.

At the bottom of the "Collaboration" section, there is a dark blue box ... structured by an icon on the left and an h4 for the title and a p to provide a description; both aligned to the right.

Note that if the icon is provided with alternative text (although it sounds potentially decorative), it must be positioned after the heading in the DOM, regardless of its visual position.

CC @sinabahram

[a11ydoer]

Feedback Regarding Hero section.

1. Content review

I wonder whether it is ready for content review or not but I am adding some content review here.

• "accessible rich internet applications" may not be useer friendly word. can it be "accessible application"?
• The same case for "Get empowered to create accessible rich internet applications" too.
• ARIA is redundant in "Learn how to use ARIA to create an accessible Rich Internet Application."

2. Necessity of Hero section

Hero section is popular design these days but I wonder whether we really need the section because it pushes down the important content under the page fold such as "our recent work". As an alternative, can hero section have a direct link to APG example and pattern?

3. Font size
   Font size can use em for responsive design, not necessarily fixed font size

[a11ydoer]

Overall feedback

• I like that APG patterns and Landmark example have a distinctive and prime location to access.
• I see W3C log on the top right corner. This may be the fixed part of W3C EO template. I am wondering whether we can reinfoce this is legitimate W3C resources which is different from other third party contents. I had the visual impression that these are the content from third party group.