fix(curriculum) Improved readability and grammar (#41340)
* fix(curriculum) Improved readability and grammar * fix missing tags and grammar * fix(curriculum) changes to grammar * fix(curriculum) grammar fixes * Update curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix(curriculum) Grammar fix * chore: apply suggestions from code review Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Sem Bauke
GitHub
@ -9,7 +9,7 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
It's likely that 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 for it. This helps in cases where 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:
|
||||
You've likely seen an `alt` attribute on an `img` tag in other challenges. `alt` text describes the image's content and provides a text-alternative for it. An `alt` attribute helps in cases where the image fails to load or can't be seen by a user. Search engines also use it to understand what an image contains to include it in search results. Here's an example:
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: 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 reader users have various options for what type of content their device reads. These options include 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.
|
||||
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, use brief but descriptive text within the `a` tags to provide more meaning for these users.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 introduced the `figure` element, along with the related `figcaption`. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the `figure`.
|
||||
HTML5 introduced the `figure` element and the related `figcaption`. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the `figure`.
|
||||
|
||||
For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
|
||||
# --description--
|
||||
|
||||
Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.
|
||||
Improving accessibility with semantic HTML markup applies to using both appropriate tag names and attributes. The next several challenges cover some important scenarios using attributes in forms.
|
||||
|
||||
The `label` tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The `for` attribute on a `label` tag explicitly associates that `label` with the form control and is used by screen readers.
|
||||
|
||||
You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a `label` element along with the label text in order to make the text clickable. Another way to achieve this is by using the `for` attribute as explained in this lesson.
|
||||
You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a `label` element along with the label text in order to make the text clickable. Another way to achieve this is by using the `for` attribute, as explained in this lesson.
|
||||
|
||||
The value of the `for` attribute must be the same as the value of the `id` attribute of the form control. Here's an example:
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: 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?
|
||||
Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves your content's readability, 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.
|
||||
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 most substantial contrast. There are many contrast checking tools available online that calculate this ratio for you.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: 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.
|
||||
HTML5 introduced several 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 similar to the humble `div`. However, using them where appropriate gives additional meaning to 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` 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 related to your page's central topic. 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 the `main` tag automatically gives assistive devices that functionality.
|
||||
The `main` tag also has an embedded landmark feature that assistive technology can use to navigate to the main content quickly. If you've ever seen a "Jump to Main Content" link at the top of a page, using the `main` tag automatically gives assistive devices that functionality.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: know-when-alt-text-should-be-left-blank
|
||||
|
||||
# --description--
|
||||
|
||||
In the last challenge, you learned that including an `alt` attribute when using `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 the last challenge, you learned that including an `alt` attribute when using `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:
|
||||
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 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.
|
||||
**Note:** For images with a caption, you may still want to include `alt` text since it helps search engines catalog the image's content.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: 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.
|
||||
Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This shows the importance of using a logical document outline and 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.
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: make-links-navigable-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.
|
||||
HTML offers the `accesskey` attribute to specify a shortcut key to activate or bring focus to an element. Adding an `accesskey` attribute 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.
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ The next HTML5 element that adds semantic meaning and improves accessibility is
|
||||
|
||||
`header` shares the embedded landmark feature you saw with `main`, allowing assistive technologies to quickly navigate to that content.
|
||||
|
||||
**Note:** The `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.
|
||||
**Note:** The `header` is meant for use in the `body` tag of your HTML document. It is different than the `head` element, which contains the page's title, meta information, etc.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the `datetime` attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.
|
||||
Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. The `datetime` attribute is an inline element that can wrap a date or time on a page. A `datetime` attribute holds a valid format of that date. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's informally or colloquially written in the text.
|
||||
|
||||
Here's an example:
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elem
|
||||
|
||||
# --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.
|
||||
The `tabindex` attribute also specifies the exact tab order of elements. This is achieved when the attribute's value 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.
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: 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.
|
||||
`article` is another one of the new HTML5 elements that add 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 of 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?
|
||||
Determining whether content can stand alone is usually a judgment call, but you can use a couple of simple tests. 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.
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
The next form topic covers the accessibility of radio buttons. Each choice is given a `label` with a `for` attribute tying to the `id` of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.
|
||||
|
||||
The `fieldset` tag surrounds the entire grouping of radio buttons to achieve this. It often uses a `legend` tag to provide a description for the grouping, which is read by screen readers for each choice in the `fieldset` element.
|
||||
The `fieldset` tag surrounds the entire grouping of radio buttons to achieve this. It often uses a `legend` tag to provide a description for the grouping, which screen readers read for each choice in the `fieldset` element.
|
||||
|
||||
The `fieldset` wrapper and `legend` tag are not necessary when the choices are self-explanatory, like a gender selection. Using a `label` with the `for` attribute for each radio button is sufficient.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user