From 0b555538ff5df7baa32a393c516b8bbb5c2e423e Mon Sep 17 00:00:00 2001 From: Sergiy_Novikov Date: Fri, 9 Dec 2022 18:55:51 +0100 Subject: [PATCH 1/2] [fix-1] Test commit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index fa627dd..e18f571 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,7 @@
About Us
-
We of all trades, master of "some"
+
We of all trades master of "some"

Web developers with more than 4 years of well-rounded experience with a degree in the field of From ff19498d28cf639cd0f1cf38615dd31f7c690f6d Mon Sep 17 00:00:00 2001 From: Sergiy_Novikov Date: Tue, 13 Dec 2022 23:53:54 +0300 Subject: [PATCH 2/2] [feature-1] Hometask #1 --- wiki/a11tyReview.md | 229 ++++++++++++++++++++++++++++++++++++++++ wiki/imgForWiki/1.JPG | Bin 0 -> 147950 bytes wiki/imgForWiki/10.JPG | Bin 0 -> 234942 bytes wiki/imgForWiki/11.JPG | Bin 0 -> 210952 bytes wiki/imgForWiki/12.JPG | Bin 0 -> 130367 bytes wiki/imgForWiki/13.JPG | Bin 0 -> 143030 bytes wiki/imgForWiki/14.JPG | Bin 0 -> 182305 bytes wiki/imgForWiki/15.JPG | Bin 0 -> 49995 bytes wiki/imgForWiki/2.JPG | Bin 0 -> 146932 bytes wiki/imgForWiki/2_1.JPG | Bin 0 -> 202066 bytes wiki/imgForWiki/2_2.JPG | Bin 0 -> 213874 bytes wiki/imgForWiki/3.JPG | Bin 0 -> 276851 bytes wiki/imgForWiki/4.JPG | Bin 0 -> 217064 bytes wiki/imgForWiki/5.JPG | Bin 0 -> 227704 bytes wiki/imgForWiki/6.JPG | Bin 0 -> 67813 bytes wiki/imgForWiki/7.JPG | Bin 0 -> 244251 bytes wiki/imgForWiki/8.JPG | Bin 0 -> 74778 bytes wiki/imgForWiki/9.JPG | Bin 0 -> 45316 bytes 18 files changed, 229 insertions(+) create mode 100644 wiki/a11tyReview.md create mode 100644 wiki/imgForWiki/1.JPG create mode 100644 wiki/imgForWiki/10.JPG create mode 100644 wiki/imgForWiki/11.JPG create mode 100644 wiki/imgForWiki/12.JPG create mode 100644 wiki/imgForWiki/13.JPG create mode 100644 wiki/imgForWiki/14.JPG create mode 100644 wiki/imgForWiki/15.JPG create mode 100644 wiki/imgForWiki/2.JPG create mode 100644 wiki/imgForWiki/2_1.JPG create mode 100644 wiki/imgForWiki/2_2.JPG create mode 100644 wiki/imgForWiki/3.JPG create mode 100644 wiki/imgForWiki/4.JPG create mode 100644 wiki/imgForWiki/5.JPG create mode 100644 wiki/imgForWiki/6.JPG create mode 100644 wiki/imgForWiki/7.JPG create mode 100644 wiki/imgForWiki/8.JPG create mode 100644 wiki/imgForWiki/9.JPG diff --git a/wiki/a11tyReview.md b/wiki/a11tyReview.md new file mode 100644 index 0000000..967c6d1 --- /dev/null +++ b/wiki/a11tyReview.md @@ -0,0 +1,229 @@ +

Homework

+ +

Three-stars task ⭐ ⭐ ⭐

+##Work with Audit tools + +1. Open training.epam.com in Google Chrome and check the page using the Accessibility Audit in the dev tools +

+ Illustration1 + Illustration2 +

+ +Issues: + +- [aria-*] attributes do not match their roles +- Buttons do not have an accessible name +- Form elements do not have associated labels +- Links do not have a discernible name (element does not have text that is visible to screen readers) +- Background and foreground colors do not have a sufficient contrast ratio. +- Lists do not contain only
  • elements and script supporting elements. + +2. Install the Siteimprove plugin in Google Chrome +Audit the training.epam.com page in Siteimprove plugin (Uncheck the Editor filter)я + +

    + Illustration3 + Illustration4 +

    + +Issues: + +- Page zoom is restricted +1.4.4 Resize text +1.4.10 Reflow + +- Container element is empty +1.3.1 Info and Relationships + +- Color contrast is not sufficient +1.4.3 Contrast (Minimum) +1.4.6 Contrast (Enhanced) + + + +3. Install the WAVE plugin in Google Chrome. +Audit the training.epam.com page in WAVE plugin + +

    + Illustration3 +

    + +Issues: + +- Missing form label +- Empty form label +- Empty heading +- Empty button +- Empty link +- Broken ARIA menu +- Contrast Errors +- Select missing label +- Redundant alternative text +- Suspicious alternative text +- Broken same-page link +- Redundant link +- Very small text + +4. I’ve checked additionally by Axe tool: +

    + Illustration3 + Illustration3 +

    + + +5. In your homework report, provide a list of all the NOT met Success Criteria found by the three auditing tools. For each analysis, provide data in the format: +- Report screenshots, +- List of errors found + +Done (please see above). + + +6. Are there any Success Criteria that you think are misidentified by the audit tools? Why do you think so? +- Contrast 1.4.6 (Enhanced) by Siteimprove plugin is the requirement for AAA level, but we only need AA level requirements + +- Redundant alternative text by WAVE plugin: + Alt text is good enough + +- Broken same-page link text by WAVE plugin: + Links works in a proper way + +- Redundant link by WAVE plugin: + Links works in a proper way + + +

    Four-stars task ⭐ ⭐ ⭐ ⭐

    +Work with NVDA (Windows) or with VoiceOver (Mac) +1. Install NVDA https://www.nvaccess.org/download/ for Windows or use Voice Over on Mac +2. Launch the Speech Viewer window +3. Open page training.epam.com and an Elements list. Insert + F7 for NVDA. +4. Explore all categories of navigation elements +- links, +- headings, +- form elements, +- buttons, +- landmarks + + +5. Provide elements with a11y issues in the following format: + • Name of the navigation element with a screenshot of the opened Elements list window + • The problems you have identified Additionally, you can list the Success Criteria that are not met because of these issues. + +THERE ARE A11TY ISSUES REGARDING LINKS: +

    + Illustration3 +

    +- Link text must describe the link target. When the accessible name of a link does not describe its target or purpose, users will not have the information they need to determine the usefulness of the target resources. + WCAG Success Criteria: 2.4.4 Link Purpose (In Context) (Level A, Primary Success Criterion) + +THERE ARE A11TY ISSUES REGARDING HEADINGS: +

    + Illustration3 +

    + +- h1 must match part of the title +WCAG Success Criteria +2.4.2 Page Titled (Level A, Primary Success Criterion) + +- Consistent h1 and h2 page section labels +WCAG Success Criteria +3.2.4 Consistent Identification (Level AA, Primary Success Criterion) + +- Consistent ordering of h1 and h2 labels +WCAG Success Criteria +3.2.3 Consistent Navigation (Level AA, Primary Success Criterion) + +- Page must have h1 element +WCAG Success Criteria +2.4.1 Bypass Blocks (Level A, Primary Success Criterion) + +- h1 must be in main or banner landmark +WCAG Success Criteria +2.4.6 Headings and Labels (Level AA, Primary Success Criterion) + +- Headings must be properly nested +WCAG Success Criteria +1.3.1 Info and Relationships (Level A, Primary Success Criterion) + + +THERE ARE A11TY ISSUES REGARDING FORMS: +

    + Illustration3 +

    +- Missing form label. Empty form label. Form controls must have labels +WCAG Success Criteria +3.3.2 Labels or Instructions (Level A, Primary Success Criterion) + + + +THERE ARE A11TY ISSUES REGARDING BUTTONS: +

    + Illustration3 +

    + +- button elements must have text content. + WCAG Success Criteria + 3.3.2 Labels or Instructions (Level A, Primary Success Criterion) + +THERE ARE A11TY ISSUES REGARDING LANDMARKS: +

    + Illustration3 +

    + +- All content must be contained in landmarks +WCAG Success Criteria +1.3.1 Info and Relationships (Level A, Primary Success Criterion) + +- main landmark: at least one + WCAG Success Criteria + 2.4.1 Bypass Blocks (Level A, Primary Success Criterion) + + + + +

    Five-stars task ⭐ ⭐ ⭐ ⭐ ⭐

    +Work with contrast +1. Audit the page contrast at training.epam.com using each of the following tools: + • Color contrast analyzer, + • Siteimprove + +2. Provide the list of the contrast issues in the following format: + • Name of the tool, + • Screenshot of the report after analysis, + • Found contrast issues + +Color contrast analyzer +

    + Illustration3 +

    +-Text content must exceed Color Contrast Ratio (CCR) of 3.1 for large and/or bolded text and 4.5 for any other size or style of text (PLEASE SEE SCREENSHOT ABOVE). +WCAG Success Criteria +1.4.3 Contrast (Minimum) (Level AA, Primary Success Criterion) + + +Siteimprove +

    + Illustration3 +

    + +There are 232 cases, there`s 1 example: + +Issue Description +Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds +Element Location +.nav-container[ng-show="isAnonymousUser"] > .nav-list__item[href$="/#!/TrainingList"][ng-repeat="basicRoute in basicRoutes"] +Element Source + +Training list + +To solve this problem, you need to... +Fix the following: +Element has insufficient color contrast of 1.82 (foreground color: #ffffff, background color: #76cdd8, font size: 10.9pt (14.5px), font weight: bold). Expected contrast ratio of 4.5:1 +Related Node +