diff --git a/source/attributions.html.erb.md b/source/attributions.html.erb.md index 871cff27e..27c8ca473 100644 --- a/source/attributions.html.erb.md +++ b/source/attributions.html.erb.md @@ -1,6 +1,5 @@ --- title: Attributions -status: draft layout: overview order: 1 --- diff --git a/source/beyond.html.erb.md b/source/beyond.html.erb.md index 16118f7be..647788a84 100644 --- a/source/beyond.html.erb.md +++ b/source/beyond.html.erb.md @@ -1,6 +1,5 @@ --- title: Beyond the Tutorial -status: draft layout: overview order: 1 --- diff --git a/source/forms/custom-controls.html.erb.md b/source/forms/custom-controls.html.erb.md deleted file mode 100644 index e74e7ca88..000000000 --- a/source/forms/custom-controls.html.erb.md +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: Custom Controls -status: editors-draft -order: 8 -wcag_success_criteria: -wcag_techniques: ---- - -Where possible, use stylized form elements to provide custom controls. For example, a social media "share button" and "star rating" widget can be built using standard form controls. Using such progressive enhancement techniques helps keep such widgets usable when they are rendered differently, such as by certain assistive technologies. - -## A Share Button -{:.ex} - -The example below shows a social media "share button" that has two functions: It shows how many people have already activated the button ("shared"), and it allows users to press the button to activate the share function. - -The custom button relies on CSS to style a regular ` - - - - - -<%= sample_end %> -{:/nomarkdown} - -{::nomarkdown} -<%= code_start('','HTML') %> -{:/nomarkdown} - -~~~ html -
- -
-~~~ - -{::nomarkdown} -<%= code_end %> -{:/nomarkdown} - -{::nomarkdown} -<%= code_start('','JavaScript') %> -{:/nomarkdown} - -~~~ js -document.getElementById('share-btn').addEventListener('click', function(event){ - event.preventDefault(); - event.stopImmediatePropagation(); - - var count = this.querySelector('.count'); - var text = this.querySelector('.text'); - - count.textContent = parseInt(count.textContent) + 1; - text.textContent = "Shared ✓"; - - this.setAttribute("disabled", "true"); -}); -~~~ - -{::nomarkdown} -<%= code_end %> -{:/nomarkdown} - -{::nomarkdown} -<%= notes_start %> -{:/nomarkdown} - -**Note:** Taking these precautions may or may not be required by WCAG 2.0, depending on your assumptions of which features of these web technologies are sufficiently supported by web browsers and assistive technologies (accessibility supported). However, it is good practice to maximize flexibility and backward compatibility. - -{::nomarkdown} -<%= notes_end %> -{:/nomarkdown} - -## A Star Rating -{:.ex} - -A star rating usually consists of images of five stars that can be used to rate a particular item. The mouse user hovers over the stars and clicks one to select it. For example, if the user clicks on the third star from the left, the rating of the item is 3 of 5 stars. - -To make this as accessible as possible, a form is used but its fields are visually hidden. It contains 6 radio buttons, one for each star and another for 0 stars, which is checked by default. The labels for the radio buttons contain actual text (“1 Star”, “2 Stars”, …), and are also hidden visually. The form also contains a visually hidden submit button so that the form is not automatically submitted when keyboard users browse through the radio buttons. - -The images of the stars are generated using SVG. The coloring animation of these stars is initiated through the CSS `:focus` and `:hover` pseudo classes, so that they can be activated using a mouse, keyboard, and other input methods. The `:checked` pseudo class and the general sibling selector `~` are used to indicate the selected, active, and inactive stars. - -{::nomarkdown} -<%= sample_start %> - -
- - - - - - - - - - - - - - - - - - - - - -
- - - - - -<%= sample_end %> -{:/nomarkdown} - -{::nomarkdown} -<%= code_start('','HTML') %> -{:/nomarkdown} - -~~~ html -
- - - - - - - - - - - - - - - - - - - - - -
-~~~ - -{::nomarkdown} -<%= code_end %> -{:/nomarkdown} - -{::nomarkdown} -<%= code_start('','CSS') %> -{:/nomarkdown} - -~~~ css -#star_rating svg { - width: 1em; - height: 1em; - fill: currentColor; -} -#star_rating label, #star_rating output { - display:block; - float:left; - font-size: 2em; - height: 1.2em; - color: #036; - cursor: pointer; - border-bottom: 2px solid transparent; -} -#star_rating output { - font-size: 1.5em; - padding: 0 1em; -} -#star_rating input:checked ~ label { - color: #999; -} -#star_rating input:checked + label { - color: #036; - border-bottom-color: #036; -} -#star_rating input:focus + label { - border-bottom-style: dotted; -} -#star_rating:hover input + label { - color: #036; -} -#star_rating input:hover ~ label, -#star_rating input:focus ~ label { - color: #999; -} -#star_rating input:hover + label, -#star_rating input:focus + label { - color: #036; -} -~~~ - -{::nomarkdown} -<%= code_end %> -{:/nomarkdown} - -{::nomarkdown} -<%= code_start('','JavaScript') %> -{:/nomarkdown} - -~~~ js -var radios = document.querySelectorAll('#star_rating input[type=radio]'); -var btn = document.querySelector('#star_rating button'); -var output = document.querySelector('#star_rating output'); - -var do_something = function(stars) { - // An AJAX request could send the data to the server - output.textContent = stars; -}; - -Array.prototype.forEach.call(radios, function(el, i){ - var label = el.nextSibling.nextSibling; - label.addEventListener("click", function(event){ - do_something(label.querySelector('span').textContent); - }); -}); - -document.querySelector('#star_rating').addEventListener('submit', function(event){ - do_something(document.querySelector('#star_rating :checked ~ label span').textContent); - event.preventDefault(); - event.stopImmediatePropagation(); -}); -~~~ - -{::nomarkdown} -<%= code_end %> -{:/nomarkdown} diff --git a/source/forms/grouping.html.erb.md b/source/forms/grouping.html.erb.md deleted file mode 100644 index fa78ba1fa..000000000 --- a/source/forms/grouping.html.erb.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Grouping Controls -status: editors-draft -order: 3 -wcag_success_criteria: - - 1.3.1 - - 3.3.2 -wcag_techniques: - - H71 ---- - -Group related form controls both visually and within the code. Use the `
` and `` elements to associate related form controls. - -## Associating related controls -{:.newex} - -The `
` element provides a container for related form elements, and the `` element acts like a heading to identify the group. In the example below there are three checkboxes that are all part of an opt-in function for receiving different types of information. The legend for this group of controls highlights the action that is common to all controls, and the fact that they are all optional. - -{::nomarkdown} -<%= sample_start %> - -
-
-(Optional) I want to receive -
- -
-
- -
-
- -
-
-
- -<%= sample_end %> -{:/nomarkdown} - -{::nomarkdown} -<%= code_start %> -{:/nomarkdown} - -~~~ html -
-(Optional) I want to receive -
- - -
-
- - -
-
- - -
-
-~~~ - -{::nomarkdown} -<%= code_end %> -{:/nomarkdown} - -**Note:** Depending on the configuration, some screen readers read out the legend either _with every form element_, _once_, or _not at all_. To accomodate this consider the following: - -* Make the legend as short as possible for situations in which it is read together with the label each time. -* Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud. -* Hide the legend visually and provide a real heading with the same text (in some cases the same text may be read aloud twice in a row). diff --git a/source/forms/index.html.erb.md b/source/forms/index.html.erb.md deleted file mode 100644 index ccacc149f..000000000 --- a/source/forms/index.html.erb.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Forms Concepts -tutorial_title: Forms -status: editors-draft -order: 1 -topic_order: 3 -wcag_success_criteria: - - 1.3.1 - - 2.4.6 - - 3.3.2 - - 4.1.2 -type: intro ---- - -Forms are usually the main interaction component in websites and web applications. They’re used to send information to the server or for input and output in client-side JavaScript applications. - -- **[Labeling Controls](labels.html)** Use the `