Merge pull request HackYourFuture#11 from ivanasetiawan/feature/aria

mkruijt · web-flow · commit 3fd7a1f8acba · 2017-09-17T12:31:44.000+02:00
Feature/aria
diff --git a/README.md b/README.md
@@ -4,8 +4,7 @@
 
 In this module you will learn HTML and CSS. HTML is the language in which you define the structure of the content of your pages (e.g. headings, paragraphs, links and images). CSS is used to write down how everything should look (e.g. font sizes, colors and positions). While learning the basics of these two languages, you will also get familiar with text editors and the developer tools of your browser.
 
-We will focus on _responsive_ web development: you will learn how to make your website adapt to the size of the screen, using the _mobile first_ approach. Last but not least we will spend time practicing some soft skills that are important for becoming a good developer. These include: giving feedback to your colleagues, presenting and explaining your work, and finding documentation on the web.
-
+We will focus on _responsive_ web development : you will learn how to make your website adapt to the size of the screen, using the _mobile first_ approach. As well as the _accessibility_ part of it, by adpoting ARIA (Accessible Rich Internet Applications) as part of our dicipline. ARIA defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. Last but not least we will spend time practicing some soft skills that are important for becoming a good developer. These include: giving feedback to your colleagues, presenting and explaining your work, and finding documentation on the web.
 
 So since this is your first module, what can you expect the next three weeks?
 
@@ -21,11 +20,12 @@ Please get yourself familiar with this repository by navigating your way through
 
 ## Learning goals for this module:
 • Basic understanding of HTML and CSS
+* Basic understanding of Accessible Rich Internet Applications (ARIA)
 • Know how to organize your files
-• Know your way around your text editor 
+• Know your way around your text editor
 • Feel comfortable working with the inspector
 • Properly indent your code
-• Properly naming classes, id's 
+• Properly naming classes, id's
 • Responsive, _mobile first_ development
 • Know good and bad practices when it comes to HTML
 • Get an understanding of where to find information on the web
diff --git a/Week0/README.md b/Week0/README.md
@@ -21,12 +21,18 @@
  * How do you reference CSS in your HTML?
  * Why would you use CSS resets?
 
->Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material.
-
 ### Watch these videos:
  * <a href="https://www.youtube.com/watch?v=7_LPdttKXPc" target="_blank">How the Internet Works in 5 Minutes</a>
  * <a href="https://www.youtube.com/watch?v=WjDrMKZWCt0" target="_blank">How Web Browsers Work</a>
 
+### 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/)
+
+>Don't worry if you don't understand everything, but make sure to prepare some questions for your first session about the reading material.
+
 ### Add a card in Trello:
 *  In Trello, create a card with your name (there is an example in there) and add the link to your CodePen that contains you application assignment.
 
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -10,6 +10,10 @@
     • Indentation
     • Semantic elements
     • Paragraphs, links, images, lists
+ • Introduction to ARIA:
+    • What is ARIA and why is it important?
+    • Using ARIA in HTML
+    • Validating ARIA
  • Introduction to CSS:
     • Where can we write it and what difference does that make?
     • Selectors (id, class, element type), properties
@@ -24,23 +28,23 @@
 Before you start check out this [video](http://www.learningscientists.org/videos/) and/or this [article](https://www.cultofpedagogy.com/learning-strategies/) about good learning practices.
 
 #### HTML5
-Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) 
+Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
 
 #### CSS:
-- [CSS reference](http://cssreference.io/) 
+- [CSS reference](http://cssreference.io/)
 - [MDN - Introduction to CSS layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction)
 - [CSS-tricks - CSS Properties](https://css-tricks.com/almanac/properties/)
 - [MDN - CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
 
 ## Step 2: Give feedback
 - In Trello, you are assigned to one of the cards of your fellow students (in the Class11 Week0 HTML/CSS list). Give feedback on the application assignment of your fellow student. Please be critical but most of all give constructive feedback. If there are resources that you used and might be useful, share them.
-- revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates.  
+- revisit you own application assignment and improve it with the feedback and suggestions given by one of your classmates.
 
 > Don't forget, you can always revisit Khan Academy: [Into to HTML/CSS: Making web pages](https://nl.khanacademy.org/computing/computer-programming/html-css) if you are stuck and need a reminder
 
 ## Step 3: Assignment
  - Make your own web resume:
-    - One page 
+    - One page
     - Two files: HTML and CSS
     - Include the following:
         - Your personal info (name, place of birth, etc.)
@@ -54,8 +58,8 @@ Read about [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
         - Another list (`<ul>`). In this list you include the most important platforms/resources where you can find all hyf related information.
         - `<img>`
         - `<p>`
-        - Some CSS properties: `margin`, `padding` 
-        - Make sure that you page looks nice, and that your text is readable
+        - Some CSS properties: `margin`, `padding`
+        - Make sure that you page looks nice, and that your text is readable & accessible (ARIA)
     - BEFORE you hand it in, read the [Style guide](http://www.w3schools.com/html/html5_syntax.asp) and check your files (you can also use the [HTML validator](https://validator.w3.org)).
 
 ### How to hand in Homework:
@@ -68,7 +72,7 @@ _Steps_:
 6. Open the files in your folder to check if all of this worked.
 7. Now go to the settings of your repository:![settings overview](./assets/github_pages1.png)
 8. And go to _Github Pages_ select "master" instead of "none"![pages overview](./assets/github_pages2.png)
-9. Now you can view your homework online at: https://_hereyouplaceyourgithubusername_/hyf-html-css/week1 
+9. Now you can view your homework online at: https://_hereyouplaceyourgithubusername_/hyf-html-css/week1
 10. Please upload a link to your homework in Trello.
 
 ### Here is an example of how your homework repository should look:
