From 3769a0801446b85cb576b3b48945c8001e2f61e4 Mon Sep 17 00:00:00 2001 From: xinleiye Date: Sun, 22 Jul 2018 10:56:04 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E7=BD=91?= =?UTF-8?q?=E9=A1=B5=E8=AE=BE=E8=AE=A1=20-->=20=E6=97=A0=E9=9A=9C=E7=A2=8D?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=20=E7=BF=BB=E8=AF=91=EF=BC=8C=E8=BF=9B?= =?UTF-8?q?=E5=BA=A65%=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 响应式网页设计 --> 无障碍设计 翻译，进度5%。 --- 01-responsive-web-design/applied-accessibility.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index 8d5e08d..8284fb4 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -8,16 +8,16 @@ "id": "587d774c367417b2b2512a9c", "title": "Add a Text Alternative to Images for Visually Impaired Accessibility", "description": [ - "It's likely you've seen an alt attribute on an img tag in other challenges. Alt text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:", + "在其他挑战里你应该已经使用过 img 标签的alt属性了。Alt属性中的文本作为备选文字描述了图片的内容。这有助于用户在图片加载失败或者不可见的情况下理解图片内容。这点也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：", "<img src="importantLogo.jpeg" alt="Company logo">", - "People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the alt attribute and read its contents to deliver key information.", - "Good alt text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an alt attribute on your image. Per HTML5 specification, this is now considered mandatory.", + "那些无法通过视觉获取信息的用户，只能通过屏幕阅读器将网页内容转换为音频的方式获取信息。而屏幕阅读器是通过识别并朗读图片 alt 属性中的内容，来传递图片包含的内容", + "良好的 alt 文本可以简明扼要的描述图片信息。所以你的图片最好总是包含一个alt属性。HTML5文档正在考虑强制要求这点。", "
", - "Camper Cat happens to be both a coding ninja and an actual ninja, and is building a website to share his knowledge. The profile picture he wants to use shows his skills, and should be appreciated by all site visitors. Add an alt attribute in the img tag, that explains Camper Cat is doing karate. (The image src doesn't link to an actual file, so you should see the alt text in the display.)" + "碰巧，无论是Camper新手还是Camper老鸟，正在建立一个可以分享他们的知识的网站。他们将要使用一张对所有网站访问者都能有效识别的个人资料图片来展示他的技巧。给 img 标签上添加一个 alt 属性，就是Camper Cat的绝招。（如果img 的 src 属性是无效的，我们就能在显示器上看到 alt 文本。）" ], "tests": [ { - "text": "Your img tag should have an alt attribute, and it should not be empty.", + "text": "你的 img 应该有一个包含说明性文字 alt 属性。", "testString": "assert($('img').attr('alt'), 'Your img tag should have an alt attribute, and it should not be empty.');" } ], From 8c43e1f076cb8c4faf49e768f0ef6405acd6d8fb Mon Sep 17 00:00:00 2001 From: xinleiye Date: Tue, 24 Jul 2018 22:31:12 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E7=BD=91?= =?UTF-8?q?=E9=A1=B5=E8=AE=BE=E8=AE=A1=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 响应式网页设计 --> 无障碍设计 翻译，进度：2 / 22。 --- .../applied-accessibility.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index 8284fb4..c02b712 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -43,21 +43,21 @@ "id": "587d774c367417b2b2512a9d", "title": "Know When Alt Text Should be Left Blank", "description": [ - "In 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. In these cases 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:", + "在上一个挑战中，我们了解到在 img 标签里必须要包含一个 alt 属性。但是有时候，图片已经有了文字说明，或者仅仅为了美化页面。在这些情况下，alt 属性似乎有些多余。", + "但是即使图片已经有文字说明或者对页面来说没有意义，我们仍然需要为 img 标签添加 alt 属性，这种情况下，可以把它设为空，例如：", "<img src="visualDecoration.jpeg" alt="">", - "Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.", - "Note
For images with a caption, you may still want to include alt text, since it helps search engines catalog the content of the image.", + "对于背景图片，它们通常起装饰作用，而且含有CSS类，所以，背景图片不会被屏幕阅读器处理。", + "Note
对于有说明文字的图片，我们依然需要添加 alt 属性，因为这样有助于搜索引擎记录图片内容。", "
", - "Camper Cat has coded a skeleton page for the blog part of his website. 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 and set it to an empty string. (Note that the image src doesn't link to an actual file - don't worry that there are no swords showing in the display.)" + "Camper Cat已经为他的网站中的博客页面编码好了框架。他打算使用武士刀图片作为两篇文章之间的分割线。为 img 标签添加一个空的 alt 属性。（img标签的 src 不需要连接到真实的图片 - 显示器不会显示任何刀剑。）" ], "tests": [ { - "text": "Your img tag should have an alt attribute.", + "text": "你的 img 标签需要包含一个 alt 属性", "testString": "assert(!($('img').attr('alt') == undefined), 'Your img tag should have an alt attribute.');" }, { - "text": "The alt attribute should be set to an empty string.", + "text": "alt 属性的值应该为空字符串。", "testString": "assert($('img').attr('alt') == '', 'The alt attribute should be set to an empty string.');" } ], From d8b5dd570c2482b5bad1e1f17e2e30e498c244b9 Mon Sep 17 00:00:00 2001 From: xinleiye Date: Thu, 26 Jul 2018 01:05:37 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E7=BD=91?= =?UTF-8?q?=E9=A1=B5=E8=AE=BE=E8=AE=A1=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 响应式网页设计 --> 无障碍设计 翻译，进度：3 / 22。 --- .../applied-accessibility.json | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index c02b712..1eff049 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -93,23 +93,23 @@ "id": "587d774d367417b2b2512a9e", "title": "Use Headings to Show Hierarchical Relationships of Content", "description": [ - "Headings (h1 through h6 elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.", - "Semantic meaning means that the tag you use around content indicates the type of information it contains.", - "If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.", - "Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.", - "As an example, a page with an h2 element followed by several subsections labeled with h4 tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.", - "One final point, each page should always have one (and only one) h1 element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.", + "标题标签（包含从h1 到 h6 的六个不同级别的标签）有很高的使用率，它们有助于为你的内容安排结构和标志。屏幕阅读器可以设置为只朗读页面的标题，以使用户获得页面的主题。这意味着一个重要的事实：要使你的标志具有语义化并相互关联，而不要仅仅为了利用它们之间不同的字体大小。", + "语义化是说为你的内容所用的标签，能表示出它所含内容的信息类型。", + "如果你正在写一篇含有引言、正文、结论的论文，在你的概述中，把结论作为正文的一小节是没有意义的。结论应该作为一个单独部分。类似的，页面中的标题标签应该是有序的，并且能指明内容的层次关系。", + "同级别（或者更高级别）的标题应该作为一个新的章节，而低级别的标题作为上一级标题的小节部分。", + "例如：一个 h2 标签后紧跟若干用 h4 标签标记的小节的页面，会使屏幕阅读器用户感到疑惑。使用6个标题标签来控制字体的大小是很吸引人的，因为在浏览器中，它们看起来更好，但是你也可以使用CSS来控制字体的相对大小。", + "最后一点，每个页面只能有一个 h1 标签，用来说明页面主要内容。这个标签和其他的标题标签一起用于辅助搜索引擎理解页面的主题。", "
", - "Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the h5 tags to the proper heading level to indicate they are subsections of the h2 ones." + "Camper Cat希望他的网站有个页面，指明如何成为忍者。帮助他修改标题标签，使它们对标题具有语义，并且父子关系正确。将所有的 h5 标题标签修改为恰当的级别，以表示它们是 h2 标题标签的子级。" ], "tests": [ { - "text": "Your code should have six h3 tags.", - "testString": "assert($('h3').length === 6, 'Your code should have six h3 tags.');" + "text": "你的代码需要包含6个 h3 标签。", + "testString": "assert($('h3').length === 6, '你的代码需要包含6个 h3 标签。" }, { - "text": "Your code should not have any h5 tags.", - "testString": "assert($('h5').length === 0, 'Your code should not have any h5 tags.');" + "text": "你的代码不能包含 h5 标签。", + "testString": "assert($('h5').length === 0, '你的代码需要包含6个 h3 标签。" } ], "solutions": [], From 20c9cd3a34901099359654920867469434f287eb Mon Sep 17 00:00:00 2001 From: xinleiye Date: Thu, 26 Jul 2018 23:39:51 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E7=BD=91?= =?UTF-8?q?=E9=A1=B5=E8=AE=BE=E8=AE=A1=20-->=20=E6=97=A0=E9=9A=9C=E7=A2=8D?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=EF=BC=8C=E8=BF=9B=E5=BA=A6=EF=BC=9A4=20/=202?= =?UTF-8?q?2=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 响应式网页设计 --> 无障碍设计，进度：4 / 22。 --- .../applied-accessibility.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index 1eff049..2060ca6 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -148,21 +148,21 @@ "id": "587d774e367417b2b2512a9f", "title": "Jump Straight to the Content Using the main Element", "description": [ - "HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.", - "By default, a browser renders these elements similarly to the humble div. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.", - "The main element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.", - "The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a \"Jump to Main Content\" link at the top of a page, using a main tag automatically gives assistive devices that functionality.", + "HTML5引入了很多新标签，它们为开发人员提供了更多选择与辅助特性。这些新标签包括 main, header, footer, nav, article, and section等。", + "默认情况下，浏览器呈现这些新标签的方式与 div 类似。但是，在适当的地方使用它们，可以为你的标志提供额外的信息。仅标签的名字就能指示其所包含内容的信息类型，这也使内容具有语义化含义。辅助技术可以访问这些信息，以便为其用户提供更好的页面概要或导航选项。", + " main 标签用于修饰（你猜对了）主题，且每个页面应该只有一个。它旨在包含与页面中心主题相关的信息。这并不意味着包含那些跨页面重复出现的项目，如导航连接、横幅。", + "main 标签也具有锚点功能，使辅助技术可以快速定位到主题。如果你曾在页面顶部见到过“跳转到主题”连接的话，使用 main 标签就能使辅助设备自动具备这个功能。", "
", - "Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing main tags between the header and footer (covered in other challenges). Keep the main tags empty for now." + "Camper Cat对他的忍者武器页面有一些重要想法。通过在 header 标签和 footer 标签（在其他挑战中会涉及）之间添加起始和闭合 main 标签来帮助他建立标志。现在保持 main 为空。" ], "tests": [ { - "text": "Your code should have one main tag.", - "testString": "assert($('main').length == 1, 'Your code should have one main tag.');" + "text": "你的代码应该有一个 main 标记。", + "testString": "assert($('main').length == 1, '你的代码应该有一个 main 标记。');" }, { - "text": "The main tags should be between the closing header tag and the opening footer tag.", - "testString": "assert(code.match(/<\\/header>\\s*?
\\s*?<\\/main>/gi), 'The main tags should be between the closing header tag and the opening footer tag.');" + "text": "main标签应该在闭合的 header 标签与起始的 footer 标签之间。", + "testString": "assert(code.match(/<\\/header>\\s*?
\\s*?<\\/main>/gi), 'main标签应该在闭合的 header 标签与起始的 footer 标签之间。');" } ], "solutions": [], From 285faa3a436bb40e9ce58470ce82c60f63b37908 Mon Sep 17 00:00:00 2001 From: xinleiye Date: Sun, 29 Jul 2018 23:33:17 +0800 Subject: [PATCH 5/8] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E7=BD=91?= =?UTF-8?q?=E9=A1=B5=E8=AE=BE=E8=AE=A1=20-->=20=E6=97=A0=E9=9A=9C=E7=A2=8D?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=EF=BC=8C=E8=BF=9B=E5=BA=A6=EF=BC=9A6=20/=202?= =?UTF-8?q?2=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 响应式网页设计 --> 无障碍设计，进度：6 / 22。 --- .../applied-accessibility.json | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index 2060ca6..8d86dce 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -150,7 +150,7 @@ "description": [ "HTML5引入了很多新标签，它们为开发人员提供了更多选择与辅助特性。这些新标签包括 main, header, footer, nav, article, and section等。", "默认情况下，浏览器呈现这些新标签的方式与 div 类似。但是，在适当的地方使用它们，可以为你的标志提供额外的信息。仅标签的名字就能指示其所包含内容的信息类型，这也使内容具有语义化含义。辅助技术可以访问这些信息，以便为其用户提供更好的页面概要或导航选项。", - " main 标签用于修饰（你猜对了）主题，且每个页面应该只有一个。它旨在包含与页面中心主题相关的信息。这并不意味着包含那些跨页面重复出现的项目，如导航连接、横幅。", + " main 标签用于修饰（你猜对了）主题，且每个页面应该只有一个。它旨在包含与页面中心主题相关的信息。这并不意味着包含那些跨页面重复出现的项目，如导航连接、网页横幅。", "main 标签也具有锚点功能，使辅助技术可以快速定位到主题。如果你曾在页面顶部见到过“跳转到主题”连接的话，使用 main 标签就能使辅助设备自动具备这个功能。", "
", "Camper Cat对他的忍者武器页面有一些重要想法。通过在 header 标签和 footer 标签（在其他挑战中会涉及）之间添加起始和闭合 main 标签来帮助他建立标志。现在保持 main 为空。" @@ -192,22 +192,22 @@ "id": "587d774e367417b2b2512aa0", "title": "Wrap Content in the article Element", "description": [ - "article is another one of the new HTML5 elements that adds semantic meaning to your markup. Article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.", - "Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?", - "Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.", - "Note about section and div
The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.", - "
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
", + "article是另一个可以使你的标志语义化的新HTML5标签。Article是一个分段标签，用于修饰独立的、自包含的内容。这个标签适用于博客入口，论坛帖子或者新闻文章。", + "这里有些技巧可以用来判断内容是否独立。问自己如果删除了上下文，该内容是否仍然有意义？相似地，对于文本，如果它在RSS提要中，它的意义是否保留。", + "请牢记，使用辅助技术的用户依赖于组织良好的、语义化的标志，来更好的理解你的页面。", + "注意section与div
section也是一个新的HTML5标签，与article标签的语义含义略有不同。article用于独立的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要批次之间互相包含着使用。如果一本书是一个article的话，那么每个章节就是section。如果内容组之间没有联系，请使用div。", + "
<div> - 内容组
<section> - 有联系的内容组
<article> - 独立的、自包含的内容
", "
", - "Camper Cat used article tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the div tag to use an article tag instead." + "Camper Cat使用article标签来修饰他的博客页面里的帖子，但是他忘记在顶部的帖子上使用它。使用article标签来代替div标签。" ], "tests": [ { - "text": "Your code should have three article tags.", - "testString": "assert($('article').length == 3, 'Your code should have three article tags.');" + "text": "你的代码中应该有三个 article 标签。", + "testString": "assert($('article').length == 3, '你的代码中应该有三个 article 标签。');" }, { - "text": "Your code should not have any div tags.", - "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');" + "text": "你的代码不能含有 div 标签。", + "testString": "assert($('div').length == 0, '你的代码不能含有 div 标签。');" } ], "solutions": [], @@ -251,28 +251,28 @@ "id": "587d7787367417b2b2512aa1", "title": "Make Screen Reader Navigation Easier with the header Landmark", "description": [ - "The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.", - "header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content.", - "Note
header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.", + "下一个可以增加语义化与可访问性的HTML5标签是header。它用于为它的父级标签包装简介信息或者导航链接，也适用于在多个页面顶端重复出现的内容。", + "header shares the embedded landmark feature you saw with main, 可以使辅助技术快速导航到它的内容。", + "注意
header用于HTML文档的body标签中。这点不同于包含页面标题、元信息的head标签。", "
", - "Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top div that currently contains the h1 to a header tag instead." + "Camper Cat正在写一些关于忍者训练的精彩文章，他想在他的站点中为这些文章建立一个页面。使用header替代位于页面顶端的包含h1的div标签。" ], "tests": [ { - "text": "Your code should have one header tag.", - "testString": "assert($('header').length == 1, 'Your code should have one header tag.');" + "text": "你的代码因该包含一个header标签。", + "testString": "assert($('header').length == 1, '你的代码因该包含一个header标签。');" }, { - "text": "Your header tags should wrap around the h1.", - "testString": "assert($('header').children('h1').length == 1, 'Your header tags should wrap around the h1.');" + "text": "你的header标签应该包含h1。", + "testString": "assert($('header').children('h1').length == 1, '你的header标签应该包含h1。');" }, { - "text": "Your code should not have any div tags.", - "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');" + "text": "你的代码不能包含任何div标签。", + "testString": "assert($('div').length == 0, '你的代码不能包含任何div标签。');" }, { - "text": "Make sure your header element has a closing tag.", - "testString": "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(/
/g).length, 'Make sure your header element has a closing tag.');" + "text": "确保你的header标签是闭合的。", + "testString": "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(/
/g).length, '确保你的header标签是闭合的。');" } ], "solutions": [], From bf1f5bde99fdcaccfc9c202793f9f4a5c4f20e72 Mon Sep 17 00:00:00 2001 From: tEgRaT Date: Mon, 30 Jul 2018 21:13:33 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?= =?UTF-8?q?=E7=BF=BB=E8=AF=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../applied-accessibility.json | 642 +----------------- 1 file changed, 8 insertions(+), 634 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index 8d86dce..9c77488 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -8,16 +8,16 @@ "id": "587d774c367417b2b2512a9c", "title": "Add a Text Alternative to Images for Visually Impaired Accessibility", "description": [ - "在其他挑战里你应该已经使用过 img 标签的alt属性了。Alt属性中的文本作为备选文字描述了图片的内容。这有助于用户在图片加载失败或者不可见的情况下理解图片内容。这点也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：", + "在其他挑战里你应该已经使用过 img 标签的 alt 属性了。Alt 属性中的文本作为备选文字描述了图片的内容，这有助于用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：", "<img src="importantLogo.jpeg" alt="Company logo">", - "那些无法通过视觉获取信息的用户，只能通过屏幕阅读器将网页内容转换为音频的方式获取信息。而屏幕阅读器是通过识别并朗读图片 alt 属性中的内容，来传递图片包含的内容", - "良好的 alt 文本可以简明扼要的描述图片信息。所以你的图片最好总是包含一个alt属性。HTML5文档正在考虑强制要求这点。", + "那些无法通过视觉获取信息的用户，只能通过屏幕阅读器将网页内容转换为音频的方式获取信息，而屏幕阅读器是通过识别并朗读图片 alt 属性中的内容，来传递图片包含的关键信息。", + "良好的 alt 文本可以简明扼要地描述图片信息，所以你的图片最好总是包含一个alt属性。HTML5 文档正在考虑强制要求这点。", "
", - "碰巧，无论是Camper新手还是Camper老鸟，正在建立一个可以分享他们的知识的网站。他们将要使用一张对所有网站访问者都能有效识别的个人资料图片来展示他的技巧。给 img 标签上添加一个 alt 属性，就是Camper Cat的绝招。（如果img 的 src 属性是无效的，我们就能在显示器上看到 alt 文本。）" + "碰巧，无论是 Camper 新手还是 Camper 老鸟，正在建立一个可以分享其知识的网站。他要使用一张对所有网站访问者都能有效识别的个人资料图片来展示他的技巧。给 img 标签上添加一个 alt 属性，就是Camper Cat的绝招。（图片的 src 并不指向任何文件，你应该能在显示器上看到 alt 文本。）" ], "tests": [ { - "text": "你的 img 应该有一个包含说明性文字 alt 属性。", + "text": "你的 img 应该有一个包含说明性文字的 alt 属性。", "testString": "assert($('img').attr('alt'), 'Your img tag should have an alt attribute, and it should not be empty.');" } ], @@ -93,7 +93,7 @@ "id": "587d774d367417b2b2512a9e", "title": "Use Headings to Show Hierarchical Relationships of Content", "description": [ - "标题标签（包含从h1 到 h6 的六个不同级别的标签）有很高的使用率，它们有助于为你的内容安排结构和标志。屏幕阅读器可以设置为只朗读页面的标题，以使用户获得页面的主题。这意味着一个重要的事实：要使你的标志具有语义化并相互关联，而不要仅仅为了利用它们之间不同的字体大小。", + "标题标签（包含从h1 到 h6 的六个不同级别的标签）有很高的使用率，它们有助于为你的内容安排结构并标记内容。屏幕阅读器可以设置为只朗读页面的标题，以使用户获得页面的主题。这意味着一个重要的事实：要使你的标志具有语义化并相互关联，而不要仅仅为了利用它们之间不同的字体大小。", "语义化是说为你的内容所用的标签，能表示出它所含内容的信息类型。", "如果你正在写一篇含有引言、正文、结论的论文，在你的概述中，把结论作为正文的一小节是没有意义的。结论应该作为一个单独部分。类似的，页面中的标题标签应该是有序的，并且能指明内容的层次关系。", "同级别（或者更高级别）的标题应该作为一个新的章节，而低级别的标题作为上一级标题的小节部分。", @@ -192,7 +192,7 @@ "id": "587d774e367417b2b2512aa0", "title": "Wrap Content in the article Element", "description": [ - "article是另一个可以使你的标志语义化的新HTML5标签。Article是一个分段标签，用于修饰独立的、自包含的内容。这个标签适用于博客入口，论坛帖子或者新闻文章。", + "article是另一个可以使你的标记语义化的新HTML5标签。Article是一个分段标签，用于修饰独立的、自包含的内容。这个标签适用于博客入口，论坛帖子或者新闻文章。", "这里有些技巧可以用来判断内容是否独立。问自己如果删除了上下文，该内容是否仍然有意义？相似地，对于文本，如果它在RSS提要中，它的意义是否保留。", "请牢记，使用辅助技术的用户依赖于组织良好的、语义化的标志，来更好的理解你的页面。", "注意section与div
section也是一个新的HTML5标签，与article标签的语义含义略有不同。article用于独立的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要批次之间互相包含着使用。如果一本书是一个article的话，那么每个章节就是section。如果内容组之间没有联系，请使用div。", @@ -871,630 +871,4 @@ "tests": [ { "text": "Your time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".", - "testString": "assert($('time').text().match(/Thursday, September 15th/g), 'Your time tags should wrap around the text \"Thursday, September 15<sup>th</sup>\".');" - }, - { - "text": "Your time tag should have a datetime attribute that is not empty.", - "testString": "assert($('time').attr('datetime'), 'Your time tag should have a datetime attribute that is not empty.');" - }, - { - "text": "Your datetime attribute should be set to a value of 2016-09-15.", - "testString": "assert($('time').attr('datetime') === \"2016-09-15\", 'Your datetime attribute should be set to a value of 2016-09-15.');" - }, - { - "text": "Make sure your time element has a closing tag.", - "testString": "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'Make sure your time element has a closing tag.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - "
", - "

Tournaments

", - "
", - "
", - "

Mortal Kombat Tournament Survey Results

", - " ", - " ", - " ", - "

Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15th. May the best ninja win!

", - " ", - " ", - " ", - "
", - "

Comments:

", - "
", - "

Posted by: Sub-Zero on

", - "

Johnny Cage better be there, I'll finish him!

", - "
", - "
", - "

Posted by: Doge on

", - "

Wow, much combat, so mortal.

", - "
", - "
", - "

Posted by: The Grim Reaper on

", - "

Looks like I'll be busy that day.

", - "
", - "
", - "
", - "
© 2016 Camper Cat
", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d778d367417b2b2512aaa", - "title": "Make Elements Only Visible to a Screen Reader by Using Custom CSS", - "description": [ - "Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.", - "However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.", - "Here's an example of the CSS rules that accomplish this:", - "
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
", - "Note
The following CSS approaches will NOT do the same thing:", - "
    ", - "
  • display: none; or visibility: hidden; hides content for everyone, including screen reader users
    • ", - "
  • Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it
    • ", - "
", - "
", - "Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an sr-only class, but the CSS rules aren't filled in yet. Give the position an absolute value, the left a -10000px value, and the width and height both 1px values." - ], - "tests": [ - { - "text": "Your code should set the position property of the sr-only class to a value of absolute.", - "testString": "assert($('.sr-only').css('position') == 'absolute', 'Your code should set the position property of the sr-only class to a value of absolute.');" - }, - { - "text": "Your code should set the left property of the sr-only class to a value of -10000px.", - "testString": "assert($('.sr-only').css('left') == '-10000px', 'Your code should set the left property of the sr-only class to a value of -10000px.');" - }, - { - "text": "Your code should set the width property of the sr-only class to a value of 1 pixel.", - "testString": "assert(code.match(/width:\\s*?1px/gi), 'Your code should set the width property of the sr-only class to a value of 1 pixel.');" - }, - { - "text": "Your code should set the height property of the sr-only class to a value of 1 pixel.", - "testString": "assert(code.match(/height:\\s*?1px/gi), 'Your code should set the height property of the sr-only class to a value of 1 pixel.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - " ", - "", - "", - "
", - "

Training

", - " ", - "
", - "
", - "

Master Camper Cat's Beginner Three Week Training Program

", - "
", - " ", - "

[Stacked bar chart]

", - "
", - "
Breakdown per week of time to spend training in stealth, combat, and weapons.
", - "
", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - "
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & AgilityCombatWeaponsTotal
Week One35210
Week Two45312
Week Three46313
", - "
", - "
", - "

Stealth & Agility Training

", - "

Climb foliage quickly using a minimum spanning tree approach

", - "

No training is NP-complete without parkour

", - "
", - "
", - "

Combat Training

", - "

Dispatch multiple enemies with multithreaded tactics

", - "

Goodbye, world: 5 proven ways to knock out an opponent

", - "
", - "
", - "

Weapons Training

", - "

Swords: the best tool to literally divide and conquer

", - "

Breadth-first or depth-first in multi-weapon training?

", - "
", - "
© 2016 Camper Cat
", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d778e367417b2b2512aab", - "title": "Improve Readability with High Contrast Text", - "description": [ - "Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves the readability of your content, but what exactly does \"sufficient\" mean?", - "The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you.", - "
", - "Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the color of the text from the current gray (#D3D3D3) to a darker gray (#636363) to improve the contrast ratio to 6:1." - ], - "tests": [ - { - "text": "Your code should change the text color for the body to the darker gray.", - "testString": "assert($('body').css('color') == 'rgb(99, 99, 99)', 'Your code should change the text color for the body to the darker gray.');" - }, - { - "text": "Your code should not change the background-color for the body.", - "testString": "assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'Your code should not change the background-color for the body.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - " ", - "", - "", - "
", - "

Deep Thoughts with Master Camper Cat

", - "
", - "
", - "

A Word on the Recent Catnip Doping Scandal

", - "

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

", - "

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

", - "
", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d778f367417b2b2512aac", - "title": "Avoid Colorblindness Issues by Using Sufficient Contrast", - "description": [ - "Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them.", - "Previous challenges covered having text alternatives to address the first issue. The last challenge introduced contrast checking tools to help with the second. The WCAG-recommended contrast ratio of 4.5:1 applies for color use as well as gray-scale combinations.", - "Colorblind users have trouble distinguishing some colors from others - usually in hue but sometimes lightness as well. You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors.", - "In practice, the 4.5:1 ratio can be reached by darkening the darker color and lightening the lighter one with the aid of a color contrast checker. Darker colors on the color wheel are considered to be blues, violets, magentas, and reds, whereas lighter colors are oranges, yellows, greens, and blue-greens.", - "
", - "Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish background-color with maroon text color has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS hsl() property (which stands for hue, saturation, lightness) by changing the third argument. Increase the background-color lightness value from 35% to 55%, and decrease the color lightness value from 20% to 15%. This improves the contrast to 5.9:1." - ], - "tests": [ - { - "text": "Your code should only change the lightness value for the text color property to a value of 15%.", - "testString": "assert(code.match(/color:\\s*?hsl\\(0,\\s*?55%,\\s*?15%\\)/gi), 'Your code should only change the lightness value for the text color property to a value of 15%.');" - }, - { - "text": "Your code should only change the lightness value for the background-color property to a value of 55%.", - "testString": "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'Your code should only change the lightness value for the background-color property to a value of 55%.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - " ", - "", - "", - "
", - "

Deep Thoughts with Master Camper Cat

", - "
", - "
", - "

A Word on the Recent Catnip Doping Scandal

", - "

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

", - "

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

", - "
", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d778f367417b2b2512aad", - "title": "Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information", - "description": [ - "There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.", - "For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.", - "Note
Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.", - "
", - "Camper Cat is testing different styles for an important button, but the yellow (#FFFF33) background-color and the green (#33FF33) text color are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text color to a dark blue (#003366) to solve both problems." - ], - "tests": [ - { - "text": "Your code should change the text color for the button to the dark blue.", - "testString": "assert($('button').css('color') == 'rgb(0, 51, 102)', 'Your code should change the text color for the button to the dark blue.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - " ", - "", - "", - "
", - "

Danger!

", - "
", - " ", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d778f367417b2b2512aae", - "title": "Give Links Meaning by Using Descriptive Link Text", - "description": [ - "Screen reader users have different options for what type of content their device reads. This includes skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.", - "Screen readers do this by reading the link text, or what's between the anchor (a) tags. Having a list of \"click here\" or \"read more\" links isn't helpful. Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users.", - "
", - "The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (a) tags so they wrap around the text \"information about batteries\" instead of \"Click here\"." - ], - "tests": [ - { - "text": "Your code should move the anchor a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".", - "testString": "assert($('a').text().match(/^(information about batteries)$/g), 'Your code should move the anchor a tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');" - }, - { - "text": "Make sure your a element has a closing tag.", - "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(//g).length, 'Make sure your a element has a closing tag.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - "
", - "

Deep Thoughts with Master Camper Cat

", - "
", - " ", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d7790367417b2b2512aaf", - "title": "Make Links Navigatable with HTML Access Keys", - "description": [ - "HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.", - "HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.", - "Here's an example:", - "<button accesskey="b">Important Button</button>", - "
", - "Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an accesskey attribute to both links and set the first one to \"g\" (for Garfield) and the second one to \"c\" (for Chuck Norris)." - ], - "tests": [ - { - "text": "Your code should add an accesskey attribute to the a tag with the id of \"first\".", - "testString": "assert($('#first').attr('accesskey'), 'Your code should add an accesskey attribute to the a tag with the id of \"first\".');" - }, - { - "text": "Your code should add an accesskey attribute to the a tag with the id of \"second\".", - "testString": "assert($('#second').attr('accesskey'), 'Your code should add an accesskey attribute to the a tag with the id of \"second\".');" - }, - { - "text": "Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.", - "testString": "assert($('#first').attr('accesskey') == 'g', 'Your code should set the accesskey attribute on the a tag with the id of \"first\" to \"g\". Note that case matters.');" - }, - { - "text": "Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.", - "testString": "assert($('#second').attr('accesskey') == 'c', 'Your code should set the accesskey attribute on the a tag with the id of \"second\" to \"c\". Note that case matters.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - "
", - "

Deep Thoughts with Master Camper Cat

", - "
", - "
", - " ", - " ", - "

The Garfield Files: Lasagna as Training Fuel?

", - " ", - " ", - "

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

", - "
", - "
", - " ", - " ", - "

Is Chuck Norris a Cat Person?

", - " ", - " ", - "

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

", - "
", - "
© 2016 Camper Cat
", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d7790367417b2b2512ab0", - "title": "Use tabindex to Add Keyboard Focus to an Element", - "description": [ - "The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.", - "Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex=\"0\" attribute on them. Here's an example:", - "<div tabindex="0">I need keyboard focus!</div>", - "Note
A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated), and is beyond the scope of these challenges.", - "
", - "Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a tabindex attribute to the p tag and set its value to \"0\". Bonus - using tabindex also enables the CSS pseudo-class :focus to work on the p tag." - ], - "tests": [ - { - "text": "Your code should add a tabindex attribute to the p tag that holds the form instructions.", - "testString": "assert($('p').attr('tabindex'), 'Your code should add a tabindex attribute to the p tag that holds the form instructions.');" - }, - { - "text": "Your code should set the tabindex attribute on the p tag to a value of 0.", - "testString": "assert($('p').attr('tabindex') == '0', 'Your code should set the tabindex attribute on the p tag to a value of 0.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - " ", - "", - "", - "
", - "

Ninja Survey

", - "
", - "
", - "
", - " ", - " ", - "

Instructions: Fill in ALL your information then click Submit

", - " ", - " ", - " ", - "
", - "
", - " What level ninja are you?", - " ", - "
", - " ", - "
", - " ", - " ", - "
", - "
", - "
", - " Select your favorite weapons:", - " ", - "
", - " ", - "
", - " ", - "
", - " ", - " ", - "
", - "
", - " ", - "

", - "
", - "
© 2016 Camper Cat
", - "" - ], - "head": [], - "tail": [] - } - } - }, - { - "id": "587d7790367417b2b2512ab1", - "title": "Use tabindex to Specify the Order of Keyboard Focus for Several Elements", - "description": [ - "The tabindex attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.", - "Setting a tabindex=\"1\" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex=\"0\" items.", - "It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.", - "Here's an example:", - "<div tabindex="1">I get keyboard focus, and I get it first!</div>", - "<div tabindex="2">I get keyboard focus, and I get it second!</div>", - "
", - "Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search input and submit input form controls to be the first two items in the tab order. Add a tabindex attribute set to \"1\" to the search input, and a tabindex attribute set to \"2\" to the submit input." - ], - "tests": [ - { - "text": "Your code should add a tabindex attribute to the search input tag.", - "testString": "assert($('#search').attr('tabindex'), 'Your code should add a tabindex attribute to the search input tag.');" - }, - { - "text": "Your code should add a tabindex attribute to the submit input tag.", - "testString": "assert($('#submit').attr('tabindex'), 'Your code should add a tabindex attribute to the submit input tag.');" - }, - { - "text": "Your code should set the tabindex attribute on the search input tag to a value of 1.", - "testString": "assert($('#search').attr('tabindex') == '1', 'Your code should set the tabindex attribute on the search input tag to a value of 1.');" - }, - { - "text": "Your code should set the tabindex attribute on the submit input tag to a value of 2.", - "testString": "assert($('#submit').attr('tabindex') == '2', 'Your code should set the tabindex attribute on the submit input tag to a value of 2.');" - } - ], - "solutions": [], - "hints": [], - "releasedOn": "Feb 17, 2017", - "challengeType": 0, - "files": { - "indexhtml": { - "key": "indexhtml", - "ext": "html", - "name": "index", - "contents": [ - "", - "
", - "

Even Deeper Thoughts with Master Camper Cat

", - " ", - "
", - "
", - " ", - " ", - " ", - " ", - " ", - " ", - " ", - "
", - "

Inspirational Quotes

", - "
", - "

“There's no Theory of Evolution, just a list of creatures I've allowed to live.”
", - " - Chuck Norris

", - "
", - "
", - "

“Wise men say forgiveness is divine, but never pay full price for late pizza.”
", - " - TMNT

", - "
", - "
© 2016 Camper Cat
", - "" - ], - "head": [], - "tail": [] - } - } - } - ] -} \ No newline at end of file + "testString": "assert($('time'). From 7f154a9cd4674939b908965ce44fccce17f8b7f0 Mon Sep 17 00:00:00 2001 From: xinleiye Date: Mon, 30 Jul 2018 23:34:40 +0800 Subject: [PATCH 7/8] =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E7=BD=91?= =?UTF-8?q?=E9=A1=B5=E8=AE=BE=E8=AE=A1=20-->=20=E6=97=A0=E9=9A=9C=E7=A2=8D?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=EF=BC=8C=E8=BF=9B=E5=BA=A6=EF=BC=9A7=20/=202?= =?UTF-8?q?2=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 响应式网页设计 --> 无障碍设计，进度：7 / 22。 --- .../applied-accessibility.json | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index 8d86dce..44e0b0c 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -320,27 +320,27 @@ "id": "587d7788367417b2b2512aa2", "title": "Make Screen Reader Navigation Easier with the nav Landmark", "description": [ - "The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.", - "If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next challenge) is sufficient.", + "nav是另一个具有标识特性的HTML5标签，便于屏幕阅读器快速识别导航内容。它用于包含页面中的主导航链接。", + "对于页面底部辅助性质的链接，无需使用nav，用footer（在下个挑战中介绍）就可以了", "
", - "Camper Cat included navigation links at the top of his training page, but wrapped them in a div. Change the div to a nav tag to improve the accessibility on his page." + "Camper Cat在他的忍者训练页面中使用了很多导航链接，但是将它们包含在div中。将div改为nav标签，以提升页面的可访问性。" ], "tests": [ { - "text": "Your code should have one nav tag.", - "testString": "assert($('nav').length == 1, 'Your code should have one nav tag.');" + "text": "你的代码应该有一个nav标签。", + "testString": "assert($('nav').length == 1, '你的代码应该有一个nav标签。');" }, { - "text": "Your nav tags should wrap around the ul and its list items.", - "testString": "assert($('nav').children('ul').length == 1, 'Your nav tags should wrap around the ul and its list items.');" + "text": "你的nav标签应该包含ul标签及其列表项。", + "testString": "assert($('nav').children('ul').length == 1, '你的nav标签应该包含ul标签及其列表项。');" }, { - "text": "Your code should not have any div tags.", - "testString": "assert($('div').length == 0, 'Your code should not have any div tags.');" + "text": "你的代码不能含有div标签。", + "testString": "assert($('div').length == 0, '你的代码不能含有div标签。');" }, { - "text": "Make sure your nav element has a closing tag.", - "testString": "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(/