CorinaMurg / html-tag-quiz

A quiz to help you learn and test your knowledge of HTML tags. Open source.
https://html-tag-quiz.netlify.app/
MIT License
8 stars 10 forks source link

About page #47

Open YuriDevAT opened 1 year ago

YuriDevAT commented 1 year ago

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 https://github.com/YurisCodingClub/html-tag-quiz/issues/23#issuecomment-1787495292

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

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago
  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 commented 1 year ago

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 commented 12 months ago

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 commented 12 months ago

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 🙂