search

w3c / apg-redesign

Other
0 stars 1 forks source link

APG homepage redesign #8

Open isaacdurazo opened 2 years ago

isaacdurazo commented 2 years ago

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:

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:

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:

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:

Visual High Fidelity Mockup

APG Home Page

jscholes commented 2 years ago

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:

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:

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 commented 2 years ago

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.

  1. 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?

  1. Font size Font size can use em for responsive design, not necessarily fixed font size
a11ydoer commented 2 years ago

Overall feedback