HW task 1 & 2 & 3

[Hovakimyan]

Task 1

1. Web page for home task can be found here:
   • https://hamanovich.github.io/accessibility-training/
2. Clone the repository:
   • https://github.com/hamanovich/accessibility-training
3. Document should contain valid attributes for and required meta tags in .
4. Create cross browser focus for all form elements and links:
   • Visible focus should be contrasting with 2px width outline.
5. Validate and fix contrast of text, links, buttons and etc.
6. Screen readers should read all meaningful images.
7. Use html5 to create landmarks.
8. Add headings according to WCAG AA.
9. Use links and buttons according to their purpose, change styles where is needed.
10. Create class visually-hidden and use it where is needed.
11. Links to external resources opened in new tabs should be provided with additional messages
    • will open in a new tab;
    • will open in a new window etc..
12. Add icons for links to third-party resources.
13. All interactive elements should be accessible via keyboard:
    • Except places where JS code is needed;
14. Create ‘skip navigation link’.
15. Use tag as appropriate.
    • if there are such places on the page.
16. Use valid markup for table data representation:
    • if there are such places on the page.
17. Create extended ‘skip navigation link’.
    • example: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html
18. Create section with "bread crumbs";

Task 2

• Set language for the page, if still no
• Roles: If you skipped or didn’t finish previous home task by any reason, define correct ARIA landmarks for elements.
• Roles: Apply widget roles for at least one component (e.g. Tabs). Note: Don't Invent Roles
• *Roles: Apply widget roles for Modals.
• Labels or Names: For all
  tag use WAI-ARIA attributes ‘aria-label’ or ‘aria-labelledby’ to create unique names that describe the purpose of each landmark.
• Labels or Names: Assign a name or label (aria-label, aria-labelledby) to not only Form elements.
• Properties & States: Add aria-haspopup attribute for expandable elements (e.g. navbar menu)
• Properties & States: Add aria-hidden attribute for elements which should not be vocalized by screen readers (e.g. icons)
• Form: Accessibility for form elements should be fixed: linked labels, placeholders, aria states. Apply WAI-ARIA attributes only for current state/snapshot. Aria updates via JavaScript will be done in next lessons.
• Relationships: Find at least one place to apply relationship WAI-ARIA attributes on the page
• Fix accessibility for Tab component: Add correspond roles and WAI-ARIA attributes
• *Live: Add live region and write a tiny JS function which will invoke the code each 1 minute and notify the updates on a page. Use live ARIA attributes.