Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Hooli-popup-task homework #85

Merged
merged 5 commits into from
Aug 12, 2022
Merged

Add Hooli-popup-task homework #85

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
79809a0
Add Hooli-popup-task homework
LuckyDnepr Aug 7, 2022
232158d
Resolved all comments from AnnaStoyano (18).
LuckyDnepr Aug 10, 2022
be24e3e
Resolved new 4 comments from AnnaStoyano.
LuckyDnepr Aug 11, 2022
b600b47
Add some changes by comments from @AnnaStoyano and @A-Ostrovnyy
LuckyDnepr Aug 11, 2022
752db34
Make some changes
LuckyDnepr Aug 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 169 additions & 0 deletions submissions/LuckyDnepr/Hooli-popup-task/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles-menu.css" />
<title>HTML & CSS практика: Hooli-style Popup</title>
</head>

<body>
<div class="wrapper">
<header class="header">
<div class="logo">LOGO</div>
LuckyDnepr marked this conversation as resolved.
Show resolved Hide resolved
<nav class="navigation">
LuckyDnepr marked this conversation as resolved.
Show resolved Hide resolved
<a href="#Mail" class="nav_item">Mail</a>
<a href="#Images" class="nav_item">Images</a>
<input id="nav_popup_check" type="checkbox" />
<label for="nav_popup_check" id="nav_popup_label">
<img
class="nav_icons"
src="./icons/popup-button.png"
alt="popup-menu"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Read this article to find out how and when populating alt attribute

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I read the article. Focusing on using screen readers, I think I fixed the code in the part about setting the attribute.
Although without experience, some fixes may be unnecessary. Please comment on it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First of all, don't resolve comments., it's for reviewers)
Icon is a decorative image which means alt attribute must be empty.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I need to unresolved all comments?
About on icons, I will resolve this...

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

About unresolved comments, right now all good, I mean that for future homeworks.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

W3C standard saying:
When an [a] element that creates a [hyperlink], or a [button] element, has no textual content but contains one or more images, the [alt] attributes must contain text that together convey the purpose of the link or button.
Other opinion in W3C:
Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.

I tested my page in NVDA, and I think, my new changes are correct.
Please review.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Impressive 😮
In browser focus going to interactive elements, and we can implement some strategies:

  1. Add aria-label attribute to the interactive element and the screen reader will read him;
  2. Add text along with the image but hide him using visually-hidden utility class;

No matter what strategy you choose be sure it solves your current task.

/>
</label>
<div class="nav_popup_menu">
<div class="nav_popup_menu_links">
<a href="#Applications" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/apps.png"
title="Apps"
alt="apps"
/>
</a>
<a href="#Blogs" class="nav_menu_link" id="nav_menu_blogs">
LuckyDnepr marked this conversation as resolved.
Show resolved Hide resolved
<img
class="menu_icons"
src="./icons/blogs.png"
title="Blogs"
alt="Blogs"
/>
</a>
<a href="#Calendar" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/calendar.png"
title="Calendar"
alt="Calendar"
/>
</a>
<a href="#Chat" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/chat.png"
title="Chat"
alt="Chat"
/>
</a>
<a href="#Classroom" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/classroom.png"
title="Classroom"
alt="Classroom"
/>
</a>
<a href="#Contacts" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/contacts.png"
title="Contacts"
alt="Contacts"
/>
</a>
<a href="#Documents" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/documents.png"
title="Documents"
alt="Documents"
/>
</a>
<a href="#Files" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/files.png"
title="Files"
alt="Files"
/>
</a>
<a href="#Maps" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/maps.png"
title="Maps"
alt="Maps"
/>
</a>
</div>
<input id="popup_show_more_check" type="checkbox" />
<label id="menu_show_more_label" for="popup_show_more_check">
<span class="menu_show_more show_more_span">Show more</span>
<span class="menu_show_more show_less_span">Show less</span>
</label>
<div class="nav_popup_menu_links_hidden">
<a href="#News" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/news.png"
title="News"
alt="News"
/>
</a>
<a href="#Photos" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/photos.png"
title="Photos"
alt="Photos"
/>
</a>
<a href="#Promo" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/promo.png"
title="Promo"
alt="Promo"
/>
</a>
<a href="#Search" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/search.png"
title="Search"
alt="Search"
/>
</a>
<a href="#Translation" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/tanslation.png"
title="Translation"
alt="Translation"
/>
</a>
<a href="#Videos" class="nav_menu_link">
<img
class="menu_icons"
src="./icons/videos.png"
title="Videos"
alt="Videos"
/>
</a>
</div>
</div>
<a
href="#Notification"
id="nav_item_notify"
class="nav_item_icon"
></a>
<a href="#User" id="nav_item_user" class="nav_item_icon"></a>
</nav>
</header>
<main class="main"></main>
<footer class="footer"></footer>
LuckyDnepr marked this conversation as resolved.
Show resolved Hide resolved
</div>
</body>
</html>
Loading