diff --git a/01-responsive-web-design/applied-accessibility.json b/01-responsive-web-design/applied-accessibility.json index 8d5e08d..310d8a2 100644 --- a/01-responsive-web-design/applied-accessibility.json +++ b/01-responsive-web-design/applied-accessibility.json @@ -8,17 +8,17 @@ "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 标准正在考虑强制要求对图片添加alt属性。。", "
", - "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 Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。他想使用一张图片来展示他的忍者技能，为了使所有的访问者都能获取图片中的信息，Camper Cat 给img标签添加了一个alt属性。（当图片的src属性没有指向任何图片时，显示器上才可看到alt属性中的文本。）" ], "tests": [ { - "text": "Your img tag should have an alt attribute, and it should not be empty.", - "testString": "assert($('img').attr('alt'), 'Your img tag should have an alt attribute, and it should not be empty.');" + "text": "你的img标签需要有一个非空的alt属性。", + "testString": "assert($('img').attr('alt'), '你的img标签需要有一个非空的alt属性。');" } ], "solutions": [], @@ -43,22 +43,22 @@ "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 已经编码好了博客页面的框架。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的alt属性。（注意：这里img标签的src属性可以是无效的 —— 不用为显示器没有可显示的图片担心。）" ], "tests": [ { - "text": "Your img tag should have an alt attribute.", - "testString": "assert(!($('img').attr('alt') == undefined), 'Your img tag should have an alt attribute.');" + "text": "你的img标签需要包含alt属性。", + "testString": "assert(!($('img').attr('alt') == undefined), '你的img标签需要包含alt属性。');" }, { - "text": "The alt attribute should be set to an empty string.", - "testString": "assert($('img').attr('alt') == '', 'The alt attribute should be set to an empty string.');" + "text": "alt的值应该为空。", + "testString": "assert($('img').attr('alt') == '', 'alt的值应该为空。');" } ], "solutions": [], @@ -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到h66 个不同级别的标签）有很高的使用率，用于描述内容的主题。屏幕阅读器可以只朗读页面标题，来使用户获知页面的主题。这意味着使标题标签及其包含的主题具有语义化是非常重要的，不要仅仅为了获得不同字号而使用不同级别标题标签。", + "语义化：标签名能准确地表达它所含内容的信息类型。", + "对于一篇含有引言、正文、结论的论文，把结论作为引言的一部分没有任何意义，结论应该是独立的章节。类似的，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。", + "相同级别（或者更高级别）的标题标签作为一个新的章节，低一级别的标题标签作为上一级标题标签的子小节。", + "举个例子：一个h2标签后紧跟若干h4标签的页面，会使屏幕阅读器用户感到疑惑。应该使用 CSS 类来控制字号大小，而不是使用 6 个标题标签，即使这在页面中，它们看起来挺好。", + "最后一点，每个页面只能有一个h1标签，用来说明页面主要内容。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": [], @@ -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，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": [], @@ -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": "你的代码中应该有 3 个article标签。", + "testString": "assert($('article').length == 3, '你的代码中应该有 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.", + "header是下一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。", + "与main类似，header的语义化特性, 可以使辅助技术快速定位到它的内容。", + "注意
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": "你的代码应该包含 1 个header标签。", + "testString": "assert($('header').length == 1, '你的代码应该包含 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": [], @@ -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": "你的代码应该有 1 个nav标签。", + "testString": "assert($('nav').length == 1, '你的代码应该有 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(/