{"action":"created","issue":{"url":"https://api.github.com/repos/FreeCodeCamp/CurriculumExpansion/issues/9","repository_url":"https://api.github.com/repos/FreeCodeCamp/CurriculumExpansion","labels_url":"https://api.github.com/repos/FreeCodeCamp/CurriculumExpansion/issues/9/labels{/name}","comments_url":"https://api.github.com/repos/FreeCodeCamp/CurriculumExpansion/issues/9/comments","events_url":"https://api.github.com/repos/FreeCodeCamp/CurriculumExpansion/issues/9/events","html_url":"https://github.com/FreeCodeCamp/CurriculumExpansion/issues/9","id":163615920,"number":9,"title":"Applied Accessibility Challenges","user":{"login":"QuincyLarson","id":985197,"avatar_url":"https://avatars.githubusercontent.com/u/985197?v=3","gravatar_id":"","url":"https://api.github.com/users/QuincyLarson","html_url":"https://github.com/QuincyLarson","followers_url":"https://api.github.com/users/QuincyLarson/followers","following_url":"https://api.github.com/users/QuincyLarson/following{/other_user}","gists_url":"https://api.github.com/users/QuincyLarson/gists{/gist_id}","starred_url":"https://api.github.com/users/QuincyLarson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/QuincyLarson/subscriptions","organizations_url":"https://api.github.com/users/QuincyLarson/orgs","repos_url":"https://api.github.com/users/QuincyLarson/repos","events_url":"https://api.github.com/users/QuincyLarson/events{/privacy}","received_events_url":"https://api.github.com/users/QuincyLarson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2016-07-04T07:11:16Z","updated_at":"2016-08-17T23:36:44Z","closed_at":null,"body":"@quincylarson is in charge of coordinating the expansion of these challenges, but he needs your help.\r\n\r\nFor each challenge, please reply to this GitHub issue with:\r\n1. Challenge description text\r\n2. Test suite (using the assert method)\r\n3. The seed code, which is pre-populated in the editor at the beginning of the challenge\r\n4. A working solution that makes all tests pass\r\n\r\nHere are the challenges we have currently planned (these can be further expanded):\r\n- [ ] Add Alt Text to Images for Visually Impaired Accessibility\r\n- [ ] Know when alt text should be left blank\r\n- [ ] [Jump Straight to the Content Using the Main Element](https://thepaciellogroup.github.io/AT-browser-tests/test-files/main.html)\r\n- [ ] [Wrap Content in the Article Element](http://thepaciellogroup.github.io/AT-browser-tests/test-files/article.html)\r\n- [ ] [Make Screen Reader Navigation easier with the Header Landmark](http://thepaciellogroup.github.io/AT-browser-tests/test-files/header.html)\r\n- [ ] [Make Screen Reader Navigation easier to access with the Nav Landmark](http://thepaciellogroup.github.io/AT-browser-tests/test-files/nav.html)\r\n- [ ] [Make Screen Reader Navigation Easier with the Footer Landmark](http://thepaciellogroup.github.io/AT-browser-tests/test-files/footer.html)\r\n- [ ] [Improve Chart Accessibility with the Figure Element](http://thepaciellogroup.github.io/AT-browser-tests/test-files/figure.html)\r\n- [ ] Improve Form Field Accessibility with the Label Element (use the \"for\" property)\r\n- [ ] Wrap Radio Buttons in a Label Element for Better Accessibility (use the \"for\" property)\r\n- [ ] [Add Subtitles to a Video to Improve Accessibility](https://thepaciellogroup.github.io/AT-browser-tests/test-files/video.html)\r\n- [ ] [Add a Date Picker](https://thepaciellogroup.github.io/AT-browser-tests/test-files/input-date.html)\r\n- [ ] Make Elements only Visible to a Screen Reader by Using Custom CSS\r\n- [ ] [Standardize Times with the DateTime HTML5 Property](https://thepaciellogroup.github.io/AT-browser-tests/test-files/time.html)\r\n- [ ] Improve readability with high contrast text (WCAG requires at least a 4.5 to 1 contrast ratio)\r\n- [ ] [Make Links Navigatable with HTML Access Keys](http://www.w3schools.com/tags/att_global_accesskey.asp)\r\n- [ ] [Avoid Colorblindness Colors](http://www.templatemonster.com/blog/designing-colorblind-friendly-website/) (using close colors to convey important information)\r\n- [ ] Give Links Meaning by using Descriptive Link Text (and not just things like \"click here\")\r\n- [ ] Use Headings to Show Hierarchical Relationships of Content (Don't skip from H1 to H3 or leave out H1)\r\n- [ ] Use tabindex to add keyboard focus to an element\r\n- [ ] Use tabindex to specify the order of keyboard focus for several elements\r\n- [ ] Use tabindex to remove keyboard focus from an element\r\n\r\nI found this website quite helpful in constructing this list: http://www.html5accessibility.com"},"comment":{"url":"https://api.github.com/repos/FreeCodeCamp/CurriculumExpansion/issues/comments/240581845","html_url":"https://github.com/FreeCodeCamp/CurriculumExpansion/issues/9#issuecomment-240581845","issue_url":"https://api.github.com/repos/FreeCodeCamp/CurriculumExpansion/issues/9","id":240581845,"user":{"login":"HKuz","id":9591826,"avatar_url":"https://avatars.githubusercontent.com/u/9591826?v=3","gravatar_id":"","url":"https://api.github.com/users/HKuz","html_url":"https://github.com/HKuz","followers_url":"https://api.github.com/users/HKuz/followers","following_url":"https://api.github.com/users/HKuz/following{/other_user}","gists_url":"https://api.github.com/users/HKuz/gists{/gist_id}","starred_url":"https://api.github.com/users/HKuz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HKuz/subscriptions","organizations_url":"https://api.github.com/users/HKuz/orgs","repos_url":"https://api.github.com/users/HKuz/repos","events_url":"https://api.github.com/users/HKuz/events{/privacy}","received_events_url":"https://api.github.com/users/HKuz/received_events","type":"User","site_admin":false},"created_at":"2016-08-17T23:36:44Z","updated_at":"2016-08-17T23:36:44Z","body":"# Know when alt text should be left blank\r\n\r\n## Challenge Description\r\n\r\nIn the last challenge, you learned that including an `alt` attribute on `img` tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only, and `alt` text may seem redundant or unnecessary. In situations when an image is already explained with text content, or does not add meaning to a page, the `img` still needs an `alt` attribute, but it can be set to an empty string. Here's an example:\r\n\r\n`<img src=\"visualDecoration.jpeg\" alt=\"\">`\r\n\r\nBackground images usually fall under the 'decorative' label as well, but they are typically applied with CSS rules, and are therefore not part of the markup that screen readers process.\r\n\r\n## Instructions\r\n\r\nCamperCat has coded a skeleton page for the blog part of his website below. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an `alt` attribute to the `img` tag in the code below and set it to an empty string.\r\n\r\n## Challenge Seed\r\n\r\n```html\r\n<header>\r\n  <h1>Deep Thoughts with Master CamperCat</h1>\r\n  <nav></nav>\r\n</header>\r\n<article>\r\n  <h2>Defeating your Foe: the Red Dot is Ours!</h2>\r\n  <p>To Come...</p>\r\n</article>\r\n\r\n<img src=\"samuraiSwords.jpeg\">\r\n\r\n<article>\r\n  <h2>Is Chuck Norris a Cat Person?</h2>\r\n  <p>To Come...</p>\r\n</article>\r\n<footer></footer>\r\n```\r\n\r\n## Challenge Tests\r\n\r\n```\r\nassert(!($('img').attr('alt') == undefined), 'message: Make sure to add an <code>alt</code> attribute to the <code>img</code> tag.');\r\n\r\nassert($('img').attr('alt') == \"\", 'message: The <code>alt</code> attribute should be set to an empty string.');\r\n```\r\n\r\n## Challenge Solution\r\n\r\n```html\r\n<header>\r\n  <h1>Deep Thoughts with Master CamperCat</h1>\r\n  <nav></nav>\r\n</header>\r\n<article>\r\n  <h2>Defeating your Foe: the Red Dot is Ours!</h2>\r\n  <p>To Come...</p>\r\n</article>\r\n\r\n<img src=\"samuraiSwords.jpeg\" alt=\"\">\r\n\r\n<article>\r\n  <h2>Is Chuck Norris a Cat Person?</h2>\r\n  <p>To Come...</p>\r\n</article>\r\n<footer></footer>\r\n```\r\n"}}
{"actor":{"display_login":"HKuz"}}