About page

[YuriDevAT]

Description

The about page talks briefly about the importance of semantic HTML. I may also contains a guide on how to use the app.
By adding this, the subtitle might change since important details are not shown in the about page.

Reference

Originally posted by @CorinaMurg in #23 (comment)

### Tasks
- [x] Browser Support `<details><summary>` [Julia]
- [x] Convenience of having all information on one page vs navigating between pages [Julia]

[CorinaMurg]

Here's a draft I have for now. It was good to think about it since it pointed to certain missing features (eg let users know about the status of their submission) and maybe the need to update existing components (eg. should the progress bar reveal to sighted users the numbers of tags entered so far. It's already set for screen reader to announce it)

About OR Instructions OR Guide to the HTML Quiz

The Importance of HTML Tags
HTML, or HyperText Markup Language, serves as the foundational structure of web content. The significance of HTML extends far beyond mere content presentation. The semantics of HTML tags, when used correctly, ensure that websites and applications are accessible to everyone, including users with disabilities. Using appropriate tags means that assistive technologies, like screen readers, can interpret and convey the information in a way that's meaningful to its users.

User Guide
Our quiz is designed to test and reinforce your knowledge of these vital HTML tags. Here's how it works:

1. One Tag at a Time: To maintain focus and precision, you are prompted to enter one tag at a time and then click "submit".

2. Automatic Grouping: Once submitted, tags are automatically categorized alphabetically by their initial letter. Tags that don't start with a letter will be conveniently displayed at the top of your list.

3. Progress Indicators: As you work through the quiz, you'll receive notifications about your progress.
   The Progress Bar feature reveals how many tags you've successfully entered relative to the quiz's total.
   You will also be informed when you've successfully identified all the tags that start with a particular letter.
   Furthermore, milestones such as reaching 50% completion will be highlighted, and of course, a celebratory note when you've identified every tag in the quiz.

We hope this quiz not only tests your existing knowledge but also reinforces the importance of understanding and utilizing HTML tags for creating accessible and inclusive web experiences.

Excited to dive into the world of tags?
Ready, set, code!

[YuriDevAT]

This sounds perfect!

As for the about page, how could this look like?

1. A minimalist two tab design where one tab contains the app and the other one the about, beneath the heading?
2. Or, the user guide is contained inside a <detail> <summary> and the app remains on one page?

[CorinaMurg]

I like both! Would either one be more problematic for screen readers? My question is more general, in terms of what's more convenient: to switch between two pages or work with just one page but have to open/close the accordion.
(I read recently that Apple had a bug related to the detail/summary elements. I think it's been fixed, but the recommendation is still to avoid them. I really liked them though, and used to use them all the time, but I'm sure there are other ways to set up an accordion. )

[YuriDevAT]

I will do some research on the apple problem. I can only assume that it would be easier to stay on the same page instead of switching, but of course I don't know that. I will also research that!

[YuriDevAT]

Browser Support: Regarding to MDN browser support as well as Adrian Roselli (the god of a11y), <details><summary> is supported in all major browsers now.

Links

MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#browser_compatibility
Adrian Roselli https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html#Update04

[YuriDevAT]

About disclosure widget vs navigation:
I could not find any specific on what is more convenient or accessible, I guess it always depends on how it is implemented.
After some thinking (I am still not sure what would be best 👈🏽 ),

1. maybe it makes sense to have an About nav link, e.g. on the upper right. Depending on the length of the content for the About, it maybe is not very usable when the app itself is moving (further to the bottom) every time the disclosure widget is opened.
2. Otherwise, the user can leave the widget open to read the guide while adding tags.

[CorinaMurg]

1. You make a good point: the nav link might be a better option. As the list gets longer, the About section can get out of view if it's on the same page. But it could be easily accessed if linked in the navbar (and even in the footer maybe?) We would need a navbar anyway (Quiz, About, YCC).

2. Not sure I see what you mean here. It would involve scrolling up and down the page, no?

(I learned about the details/summary issue from this conversation on the Collab Lab slack channel)
https://the-collab-lab.slack.com/archives/CLRUG5G8G/p1697841756693219

[YuriDevAT]

I guess we think of the implementation of the widget in a different way (since you mentioned that the about section may be out of sight, you maybe would implement it beneath the list). I would have implemented beneath the heading, therefore, when open it, it could stay open and maybe still have the input field in side. Maybe, people what to have the instruction right in front of them the whole time, that was my thought scenario 😅

[CorinaMurg]

I was thinking that a mobile user will have a hard time accessing the input field with the About page open. But in terms of where to place the About page I agree that the top of the page is better . Now, where and how exactly to place it? I'm afraid I won't be very helpful here because I can never make a decision and stick with it when it comes to UI/UX 😅. (Changing the design of my site every other day because I can't decide what I want...)

[YuriDevAT]

I will either create a quick wireframe or open a draft PR start adding and we make decision based on what we are currently see 🙂