[REQUEST] Create a new landing page for a Theme Builder microsite, using Theme Builder

[PaulaPaul]

Suggestion/Concern

The goal of this issue is to design and implement a simple landing page for a new Theme Builder microsite, and document the steps and any issues encountered so that the end to end workflow for Theme Builder can be improved if there are gaps.

Multiple design and implementation proposals are welcome for this issue! Please add comments below for any and all proposed solutions.

Please include your thoughts on accessibility testing for the new landing page and microsite, including considerations for people who need accommodation for cognitive abilities such as autism, dyslexia, ADHD, and thoughts on WCAG AAA.

Proposed Solution

To be shared in comments on this issue, and evaluated / selected by the Theme Builder core maintainers.

[Sweetdevil144]

Hey @PaulaPaul , I'd like to work on this Issue if it's open to work on!

[PaulaPaul]

Hello! Feel free to share your ideas / mocks here is comments, and thank you!

[Sweetdevil144]

Following you, I'd assume that our main objective is to create a visually appealing and accessible landing page for the Theme Builder microsite that aligns with modern web standards and accessibility guidelines. Following steps can be followed to tackle each problem mentioned by you. Starting with :

thoughts on WCAG AAA

• We'll follow WCAG AAA guidelines to ensure the page is accessible to all users.
• Use ARIA roles and properties to improve accessibility of the web content.
• Test the page with various assistive technologies like screen readers and voice recognition software.

Frontend, Design and Implementation

• UI Libraries Like Material-UI & Chakra-UI are one of the best CSS frameworks I've worked on.
• We can utilize Figma or Adobe XD for creating design mockups.
• Frontend can be implemented in NextJS APP. Integration with Backend is easily achieved via Next Apps

Testing and Documentation

• We can utilize frameworks like mocha and jest for testing. In Parallel to our Development and Testing, documentation too will be moved forward via tools like Gitbook.

Finally, the most important initiative for this Project :

Please include your thoughts on accessibility testing for the new landing page and microsite, including considerations for people who need accommodation for cognitive abilities such as autism, dyslexia, ADHD

Here are some considerations and strategies:

• Simplicity: Keep the design and navigation simple and consistent. We should avoid complex structures and interactions that could be confusing. The simplest method would be One Link : One Navigation

• Clear Instructions: Maybe we can provide clear instructions for any interactive elements. Can we initiate an assistant as a part of our Project. Objectives : Not yet clear, but maybe it may help as I have a few Ideas in Mind. Take the example of PayPal's Chatbot assistant.

• Readability: Use readable fonts and ensure sufficient contrast between text and background. Consider providing a feature to adjust font size. Providing users multiple fonts to switch between as their comfort. Additionally, we can provide various reading modes. Themes like Kindle reading mode would Provide a classical look to our website, while a dark theme may Provide a Standard theme.)

• Avoidance of Sensory Overload: We should avoid rapid animations and flashing elements that could cause sensory overload. However, this does not means degrading the quality of animation. It would require slowing down animation speeds that may cause trouble for some people.
  (For example: I feel a but of headache after playing Dying Light 2 always. I reached the conclusion that maybe the fast frame rate and animations were the cause. Seems like many others across the globe have been facing the same problem)

• Alternative Texts and Descriptions: Use alt texts for images and provide transcripts for videos.

• Keyboard Navigation: We should ensure the site can be fully navigated using a keyboard.

[Sweetdevil144]

@PaulaPaul I'd love to hear your views on these points. Additionally, I'd suggest that maybe we can break this issue into multiple segmented tasks and proceed accordingly (if we're on the same track with my Proposal)

Do you have any other Plans in mind while reviewing this Issue? I'd love to hear that too.

[Sweetdevil144]

@aaronreed708 any suggestions here?

[aaronreed708]

@Sweetdevil144 thank you for putting together your list of recommendations! They were all great and align with best practices. But for this issue I'm thinking that we need to design what the page should do before we get too far down the track of implementation, as that may drive some of the decisions. For example, there may be no need for a backend if this ends up just being comprised of mostly informative, static pages.

@PaulaPaul has the Community WG designed anything for this page, yet? Or can you outline the purpose or scope of the page(s)? So that we can better gauge the requirements?

[aaronreed708]

@PaulaPaul is asking for design thinking on this issue. FINOS is asking for a landing page, but we are free to develop the page however we'd like. @Chessel can you help here?

[Chessel]

yes! I can design the landing page. Where can I find the requirements?

[aaronreed708]

@PaulaPaul were requirements discussed in the Community WG, yet?

[aaronreed708]

This page should probably have a link to resources.finos.org that filters for A11y-Theme-Builder content (where we will have videos) -> https://resources.finos.org/category/projects-sigs/a11y-theme-builder?projects-sigs=a11y-theme-builder&c=cG9zdDo5OTE2NTU%3D

[aaronreed708]

We've started design thinking meetings around this topic. Please contact me if you'd like to participate in the meetings.

We've started a FigJam board at: https://www.figma.com/board/Yh61Lcy6m9rITv5sKUCYwb/Theme-Builder-Landing-Page?node-id=1-472&t=LTeJcqqnWrLEIoFr-0. It contains personas and we've started identifying points of empathy for each. Then we'll identify how the landing page can help (or not help) each.

[aaronreed708]

@codyzu please comment here so that I can add you as an assignee to help with our brainstorming efforts!

[kburk1997]

Thoughts on WCAG AAA:

• AAA has success criteria that may conflict with each other - so it may not be feasible to have every AAA success criterion opted in by default - perhaps we can have AA as the baseline with a few AAA success criteria (such as avoiding parallax scrolling and aiming for 8th grade reading level or below) baked in, and an opt-in mechanism for things like AAA color contrast - which may be too bright when sensory overload is taken into consideration.
• From WCAG 2.2:

It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

[kburk1997]

Testing + documentation:

• Seconding frameworks like mocha + jest at the unit testing layer
• Integration testing layer - may be worth exploring Cypress or Playwright - we can also automate some accessibility scans in our Cypress/Playwright tests

Accessibility testing - I believe I left an in-depth explanation on #922

Accommodation for cognitive abilities:

• Seconding avoiding sensory overload
• Avoid making the page too "busy"
• Ensure compatibility with Reader mode on desktop + mobile
• Avoid overwhelming the user with excessive push + toast notifications and/or have a way to opt out/reduce the amount of push notifications - this is something I personally struggle with because I feel that I must pay attention to every single notification and can get easily sidetracked
• Ensure captioning + transcripts on video/audio content - this is important for both Deaf/HoH folks as well as people with auditory processing difficulties (which commonly co-occur with autism+ADHD)
• Maybe provide a TL;DR/summary on pages with lengthy content