From 42656c5ab1cbaee23c21d2d0708e71b3272e8046 Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Mon, 30 Sep 2019 18:51:39 +0200 Subject: [PATCH 1/2] Incorporate ARIA-compliance links --- Week3/MAKEME.md | 9 +++++++-- homework/index.js | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index dabca83d2..17f3300fd 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -128,10 +128,15 @@ _Read:_ #### 3.2.5 ARIA-compliance (BONUS) -Please review the material from the HTML/CSS module: [Get familiar with Accessible Rich Internet Applications (ARIA)](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1#get-familiar-with-accessible-rich-internet-applications-aria). - For the GitHub application ARIA-compliance means that the Contributors list should either be a native HTML list (i.e. using `ul` and `li` elements) or otherwise marked with an appropriate ARIA **role**. Furthermore, a user should be able to navigate through all interactive elements using the keyboard (e.g., using the **Tab** key). Pressing **Enter** on such an element should be equivalent to clicking the mouse. +**Get familiar with Accessible Rich Internet Applications (ARIA)** + +- [What is ARIA and why is it important?](https://www.youtube.com/watch?v=HtTyRajRuyY) +- [Introduction to ARIA](https://www.youtube.com/watch?v=g9Qff0b-lHk&t=4s) +- [Web applications and ARIA FAQ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ) +- _Bonus knowlegde:_ [Practical guide for developers on how to add accessibility information to HTML elements using the ARIA specification](https://w3c.github.io/using-aria/) + #### 3.2.6 Handing in your homework If necessary, review the instructions how to [Hand in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) using GitHub pull request. diff --git a/homework/index.js b/homework/index.js index 3886cbac9..7e9c3a666 100644 --- a/homework/index.js +++ b/homework/index.js @@ -18,7 +18,6 @@ function createAndAppend(name, parent, options = {}) { const elem = document.createElement(name); - parent.appendChild(elem); Object.entries(options).forEach(([key, value]) => { if (key === 'text') { elem.textContent = value; @@ -26,6 +25,7 @@ elem.setAttribute(key, value); } }); + parent.appendChild(elem); return elem; } From 3847d8ac5dc6b7579e4c60b425c3e802e6da0dd2 Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Thu, 3 Oct 2019 09:57:27 +0200 Subject: [PATCH 2/2] Update MAKEME --- Week2/MAKEME.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 34ff8823c..fd0b28bf1 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -75,9 +75,9 @@ A suggested HTML structure could be: ``` -* To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare). +- The JSON data that is returned from the initial request to get repository information includes a property named `contributors_url`. Use the value of this property to fetch a list of contributors. -* Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive. +- Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive. ### Handing in your homework