Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 8 commits
  • 20 files changed
  • 0 commit comments
  • 1 contributor
View
42 source/images/complex.html.md.erb
@@ -22,29 +22,24 @@ description, but only where it is important that the user understands
the image construction. This page shows several possible approaches that
can be used to provide both short and long descriptions.
-## Example 1: Image containing substantial information {#ex1}
-
-This bar chart of website visitor statistics has the short description "
-Bar chart showing monthly and total visitors for the first quarter 2013
-for sites 1 to 3" as the *alt* attribute, identifying the image. The
-long description details the information, including scales, values,
-relationships and trends, that are represented visually. For example,
-the declining values for site 1, consistent values for site 2, and
-increasing values for site 3 are highlighted through the bar chart
-representation. This information needs to be made available in the [long
-text description](2013first_qtr_text)as well.
+## Image containing substantial information
+{:.ex}
+
+This bar chart of website visitor statistics has the short description “Bar chart showing monthly and total visitors for the first quarter 2013 for sites 1 to 3” as the `alt` attribute, identifying the image. The long description details the information, including scales, values, relationships and trends, that are represented visually. For example, the declining values for site 1, consistent values for site 2, and increasing values for site 3 are highlighted through the bar chart representation. This information needs to be made available in the [long text description](2013first_qtr_text) as well.
+
+<%= sample_start('todo') %>
**2013 first quarter example.com website visitors**
![Bar chart showing monthly and total visitors for the first quarter
2013 for sites 1 to 3](../img/chart2.jpg)
-### Approach 1: Providing a link to the long description via *longdesc* {#ap1}
+<%= sample_end %>
-Here the *longdesc* attribute contains the URI of the page containing
-the long description. Where appropriate, the *longdesc* value could
-simply contain a hash link to the long description if it is published on
-the same page as the image.
+### Providing a link to the long description via *longdesc*
+{:.ap}
+
+Here the `longdesc` attribute contains the URI of the page containing the long description. Where appropriate, the `longdesc` value could simply contain a hash link to the long description if it is published on the same page as the image.
<%= code_start %>
@@ -59,12 +54,17 @@ the same page as the image.
<%= code_end %>
+<%= notes_start %>
+
**Note:** Both Firefox and Chrome browsers are working on
implementations that will make the *longdesc linked* long description
location reachable by all users. In older or other browsers it is only
available to screen reader users.
-### Approach 2: A text link to the long description adjacent to the image {#ap2}
+<%= notes_end %>
+
+### A text link to the long description adjacent to the image
+{:.ap}
This approach provides a text link next to the image. The link text
makes both the destination and the association with the image clear.
@@ -91,11 +91,12 @@ what browser or assistive technologies they may use.
<%= notes_end %>
-### Approach 3: Describing the location of the long description in the *alt* attribute {#ap3}
+### Describing the location of the long description in the `alt` attribute
+{:.ap}
If the long description is on the same page as the image and its
location can be accurately pinpointed by being described, the
-*alt* attribute can include location information.
+`alt` attribute can include location information.
<%= code_start %>
@@ -110,7 +111,8 @@ location can be accurately pinpointed by being described, the
<%= code_end %>
-### Approach 4: Structurally associating the image and its adjacent long description (HTML5) {#ap4}
+### Structurally associating the image and its adjacent long description (HTML5)
+{:.ap}
The HTML5 `<figure>` element can be used to enclose both the image and
its long description. The long description, presented as headings, text
View
BIN source/images/examples/harabarahand.eot
Binary file not shown.
View
BIN source/images/examples/harabarahand.ttf
Binary file not shown.
View
35 source/images/examples/imagemap.html.md.erb
@@ -0,0 +1,35 @@
+---
+title: Complete Image Maps Example
+status: draft
+source: ../../imagemap/#an-organizational-chart-with-links-to-individual-pages
+layout: fullcode
+---
+
+~~~ html
+
+<img src="orgchart.png"
+ alt="Board of directors and related staff: "
+ usemap="#Map">
+
+<map name="Map" id="Map">
+ <area
+ shape="rect"
+ coords="176,14,323,58"
+ href=""
+ alt="Davy Jones: Chairman"
+ >
+ <area shape="rect" coords="81,75,226,114" href=""
+ alt="Carole Brewster: Company Secretary"
+ >
+ <area shape="rect" coords="6,138,155,182" href=""
+ alt="Harry H Brown: Marketing Director"
+ >
+ <area shape="rect" coords="175,138,323,182" href=""
+ alt="Paula Holbein: Sales Director"
+ >
+ <area shape="rect" coords="345,136,496,186" href=""
+ alt="Hugh Howard: Finance Director"
+ >
+</map>
+
+~~~
View
22 source/images/groups.html.md.erb
@@ -4,22 +4,12 @@ status: draft
order: 7
---
-A grouped collection of images is sometimes used to convey a single
-piece of information, for instance star images to denote a product
-rating. In this case, the text alternative for one of the images should
-convey the information conveyed by the entire group, all other images
-should have null (empty) *alt* attributes. For instance, as shown in
-example 1 below, the descriptive text alternative on one image should be
-"3.5 out of 5 stars", rather than "1 star", "Half star" or "Unfilled
-star" on each image.
-
-## Example 1: Group of images for rating
-
-This group of five images shows a product rating. There are five images,
-three filled stars, one half filled star and one empty star, indicating
-the overall rating. The text alternative for the first image is "Rating:
-3.5 out of 5 stars", all other images have a null (empty) *alt*
-attribute (alt="").
+A grouped collection of images is sometimes used to convey a single piece of information, for instance star images to denote a product rating. In this case, the text alternative for one of the images should convey the information conveyed by the entire group, all other images should have null (empty) `alt` attributes. For instance, as shown in example 1 below, the descriptive text alternative on one image should be “3.5 out of 5 stars”, rather than “1 star”, “Half star” or “Unfilled star” on each image.
+
+## Group of images for rating
+{:.ex}
+
+This group of five images shows a product rating. There are five images, three filled stars, one half filled star and one empty star, indicating the overall rating. The text alternative for the first image is “Rating: 3.5 out of 5 stars”, all other images have a null (empty) `alt` attribute (`alt=""`).
<%= sample_start %>
View
19 source/images/imagemap.html.md.erb
@@ -4,20 +4,12 @@ status: draft
order: 8
---
-A client-side image map is an image divided into selectable regions
-defined by \<area\> elements ("hotspots") that allow user interaction,
-such as providing links to other pages. In this case, text alternatives
-are needed on the \<img\> element itself to convey the informative
-context and on each of the \<area\> elements to convey the link
-destination or the action that will be initiated if the link is
-followed.
+A client-side image map is an image divided into selectable regions defined by `<area>` elements (“hotspots”) that allow user interaction, such as providing links to other pages. In this case, text alternatives are needed on the `<img>` element itself to convey the informative context and on each of the `<area>` elements to convey the link destination or the action that will be initiated if the link is followed.
-## Example 1: An organizational chart with links to individual pages
+## An organizational chart with links to individual pages
+{:.ex}
-The following organizational chart is used to provide links to each
-Director's home page. The text alternative for the image is "Board of
-Directors and related staff: ", and each linked \<area\> has a text
-alternative to identify the individual, such as "Davy Jones: Chairman".
+The following organizational chart is used to provide links to each Director's home page. The text alternative for the image is “Board of Directors and related staff:”, and each linked `<area>` has a text alternative to identify the individual, such as “Davy Jones: Chairman”.
<%= sample_start %>
@@ -50,8 +42,7 @@ alternative to identify the individual, such as "Davy Jones: Chairman".
<%= code_end %>
-[Full code for Image map example ![(new
-window)](../img/new-win-icon.gif)](example1.txt)
+[Full code for Image map example](../examples/imagemap/)
<%= notes_start %>
View
109 source/images/textual.html.md.erb
@@ -35,11 +35,102 @@ effects (stylized text and green line) should not be described.
<%= code_end %>
+### Alternative approach
+
+<aside class="annotation">
+ <h4 class="annotation-header">Modern Browsers</h4>
+ <div class="annotation-content">
+ <p>To display the full effect the browser needs to support the following web technologies:</p>
+ <ul>
+ <li><a href="http://www.w3.org/TR/css3-transforms/">CSS3 Transformations</a></li>
+ <li><a href="http://www.w3.org/TR/css3-webfonts/">Webfont embedding</a></li>
+ </ul>
+ </div>
+</aside>
+
+The visual effects in the above image can be produced using CSS3 and an embedded font. However some authors and developers may need to support older browsers and may find the image example useful.
+
+
+<%= sample_start %>
+
+<div class="background">
+ <div class="tagline"><span>Your access to the city</span></div>
+</div>
+<style>
+ /*@font-face {
+ font-family: 'Harabara Hand';
+
+ }*/
+ @font-face {
+ font-family: 'Harabara Hand';
+ src: url('../examples/harabarahand.eot#');
+ src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'),
+ url('../examples/harabarahand.ttf') format('truetype');
+ font-weight: normal;
+ font-style: italic;
+}
+ .background {
+ background-color: #FFF;
+ padding: 2em;
+ }
+ .tagline {
+ padding-left: 1em;
+ background-color: #DDD9D6;
+ font-family: 'Harabara Hand', cursive;
+ text-transform: lowercase;
+ color: #226C8E;
+ font-size: 1.5em;
+ box-shadow: 0 2px 4px rgba(0,0,0,.5);
+ letter-spacing: -1px;
+ }
+ .tagline span {
+ display: inline-block;
+ -webkit-transform: rotate(-10deg);
+ -ms-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ }
+</style>
+
+<%= sample_end %>
+
+<%= code_start %>
+
+**HTML:**
+
+~~~ html
+<div class="tagline"><span>Your access to the city</span></div>
+~~~
+
+**CSS:**
+
+~~~ css
+.background {
+ background-color: #FFF;
+ padding: 2em;
+}
+.tagline {
+ font-family: 'Harabara Hand', cursive;
+ text-transform: lowercase;
+ color: #226C8E;
+ font-size: 1.5em;
+ letter-spacing: -1px;
+ padding-left: 1em;
+ background-color: #DDD9D6;
+ box-shadow: 0 2px 4px rgba(0,0,0,.5);
+}
+.tagline span {
+ display: inline-block;
+ transform: rotate(-10deg);
+}
+~~~
+
+<%= code_end %>
+
<%= notes_start %>
-**Note:** The visual effects in the above image could have been produced
-using CSS3 and an embedded font. However some authors and developers may
-need to support older browsers and may find this example useful.
+**Note 1:** The code snippet doesn’t show any vendor prefixes. **Do we need to link vendor prefixes to a description?**{:.todo} These should be added to increase compatibility with older versions of browsers.
+
+**Note 2:** The specific `@font-face` rule was left out intentionally as it is not important for the example.
<%= notes_end %>
@@ -50,7 +141,7 @@ The following image is the logo for the Web Accessibility Initiative. It is not
<%= sample_start %>
-![Web Accessibility initiative](wai.png)
+![Web Accessibility Initiative](wai.png)
<%= sample_end %>
@@ -112,10 +203,12 @@ Math ML can be incorporated into both XHTML and HTML5: @@@Seems not to work in a
<%= code_start %>
~~~ html
-<mstack stackalign="right">
- <msline length="1"/>
- <mn> 0.3333 </mn>
-</mstack>
+<math>
+ <mstack stackalign="right">
+ <msline length="1"/>
+ <mn> 0.3333 </mn>
+ </mstack>
+</math>
~~~
<%= code_end %>
View
85 source/images/tips.html.md.erb
@@ -7,83 +7,38 @@ type: tips
---
Feedback on this page is welcome, if you have a question about images
-that isn't answered by this tutorial, you can send it to
+that isnt answered by this tutorial, you can send it to
[wai-eo-editors@w3.org](mailto:wai-eo-editors@w3.org).
## Tips
-- **Logos:** Images of text that are used as logos are exempt from
- some of the accessibility guidance that applies to other images of
- text, for instance there is no minimum color contrast requirement;
-- **Prioritize information in *alt* values:** Aim to put the most
- important information at the start of the *alt* value, as people
- using high screen magnification may be unable to see more than the
- first two or three words in the *alt* "tooltip" and people who can't
- read quickly may not be able to read as far as the important part of
- the text alternative before the "tooltip" disappears. .
-- **Choosing appropriate text alternatives:**Imagine that you are
- reading the web page aloud over the phone to someone who needs to
- understand the page. This should help you decide what (if any)
- information or function the images have. If they appear to have no
- informative value and aren't links or buttons, it is probably safe
- to treat them as [decorative](../decorative/).
-- **Punctuation within *alt* attributes:**As in visible text, using
- punctuation within the text alternative can make it easier to
- understand. In addition, a space character may be needed within the
- *alt* value if there is no space between the image and adjacent
- text, to avoid having words run together when read by a screen
- reader.
+- **Logos:** Images of text that are used as logos are exempt from some of the accessibility guidance that applies to other images of text, for instance there is no minimum color contrast requirement;
+- **Prioritize information in `alt` values:** Aim to put the most important information at the start of the `alt` value, as people using high screen magnification may be unable to see more than the first two or three words in the `alt` “tooltip” and people who can’t read quickly may not be able to read as far as the important part of the text alternative before the "tooltip" disappears.
+- **Choosing appropriate text alternatives:**Imagine that you are reading the web page aloud over the phone to someone who needs to understand the page. This should help you decide what (if any) information or function the images have. If they appear to have no informative value and aren’t links or buttons, it is probably safe to treat them as [decorative](../decorative/).
+- **Punctuation within `alt` attributes:**As in visible text, using punctuation within the text alternative can make it easier to understand. In addition, a space character may be needed within the `alt` value if there is no space between the image and adjacent text, to avoid having words run together when read by a screen reader.
## FAQ
-- **I've been told to remove the *alt* from most of the images in my
- template, is that right?**
+- **I've been told to remove the `alt` from most of the images in my template, is that right?**
- No that's incorrect, the *alt* is a required attribute. If the
- images are part of the page design, and don't convey information,
- you can remove any text values, leaving just the quotes (`alt=""`).
-- **I can't remember - should the alt be a space or null (empty) if a
- description is not needed?**
+ No that's incorrect, the `alt` is a required attribute. If the images are part of the page design, and don’t convey information, you can remove any text values, leaving just the quotes (`alt=""`).
- It should be null (empty) *alt* text (`alt=""`), with no space
- between the quotes. Having a space between the quotes doesn't
- effectively hide the image from all assistive technologies, for
- instance some screen readers will still announce the presence of an
- image if a space is put between the quotes.
-- **My CMS system puts in a default *alt* of "image of", can I just
- add to that?**
+- **I can’t remember – should the alt be a space or null (empty) if a description is not needed?**
- It will depend on the function of the image, but default values may
- result in inappropriate alternative text. Normally there's no need
- to include words like "image", "icon" or "picture" in the *alt*
- text, people who can see will know this already and screen readers
- announce the presence of an image. There's a good case for including
- text that describes the type of image if it is a painting,
- photograph or illustration, but it's best to avoid the more generic
- terms.
+ It should be null (empty) `alt` text (`alt=""`), with no space between the quotes. Having a space between the quotes doesn’t effectively hide the image from all assistive technologies, for instance some screen readers will still announce the presence of an image if a space is put between the quotes.
-- **How long can the *alt* text be, is it up to 90 words?**
- The *alt* text should be the briefest, most concise description of
- the image's purpose as possible. If anything more than a short
- phrase or sentence is needed, it would be better to use one of the
- long description methods discussed on the [complex
- images](../complex/) page. People using high screen magnification may be
- able to see only two or three short words in their magnified view of
- the *alt* "tooltip and screen readers are likely to truncate or
- break any long *alt* value.
+- **My CMS system puts in a default `alt` of “image of“, can I just add to that?**
+
+ It will depend on the function of the image, but default values may result in inappropriate alternative text. Normally there's no need to include words like “image”, “icon” or “picture” in the `alt` text, people who can see will know this already and screen readers announce the presence of an image. There's a good case for including text that describes the type of image if it is a painting, photograph or illustration, but it's best to avoid the more generic terms.
+
+- **How long can the `alt` text be, is it up to 90 words?**
+
+ The `alt` text should be the briefest, most concise description of the image's purpose as possible. If anything more than a short phrase or sentence is needed, it would be better to use one of the long description methods discussed on the [complex images](../complex/) page. People using high screen magnification may be able to see only two or three short words in their magnified view of the `alt`: tooltip and screen readers are likely to truncate or break any long `alt` value.
## Other W3C Resources
-- Background information on [providing text alternatives for non-text
- content](http://www.w3.org/WAI/intro/people-use-web/principles#alternatives)
- in How People with Disabilities Use the Web;
-- Further examples and a helpful decision tree: [HTML5: Techniques for
- providing useful text
- alternatives](http://www.w3.org/TR/html-alt-techniques/) ;
-- Test the accessibility of images on your site: [Quick Checks Image
- text
- alternatives;](http://www.w3.org/WAI/EO/Drafts/eval/checks#images)
-- Examples of good and bad practice in selecting text alternatives can
- be found in the [Before and After
- Demonstration](http://www.w3.org/WAI/demos/bad/)(BAD).
+- Background information on [providing text alternatives for non-text content](http://www.w3.org/WAI/intro/people-use-web/principles#alternatives) in How People with Disabilities Use the Web;
+- Further examples and a helpful decision tree: [HTML5: Techniques for providing useful text alternatives](http://www.w3.org/TR/html-alt-techniques/) ;
+- Test the accessibility of images on your site: [Quick Checks Image text alternatives;](http://www.w3.org/WAI/EO/Drafts/eval/checks#images)
+- Examples of good and bad practice in selecting text alternatives can be found in the [Before and After Demonstration](http://www.w3.org/WAI/demos/bad/) (BAD).
View
10 source/layouts/_prevnext.erb
@@ -2,16 +2,16 @@
<ul>
<% if current_page.data.type == 'intro' %>
<% current_page.children.sort_by { |resource| resource.data.order }.each do |item| %>
- <% if item.data.order && item.data.order == current_page.data.order - 1 %><li class="prev"><span><span class="dir">Previous:</span><span class="title"><%= nav_link(item.data.title, '/' + item.path, :relative => true) %></span></span></li><% end %>
- <% if item.data.order && item.data.order-1 == current_page.data.order %><li class="next"><span><span class="dir">Next:</span><span class="title"><%= nav_link(item.data.title, '/' + item.path, :relative => true) %></span></span></li><% end %>
+ <% if item.data.order && item.data.order == current_page.data.order - 1 %><li class="prev"><span><%= nav_link('<span class="dir">Previous:</span><span class="title">' + item.data.title + '</span>', '/' + item.path, :relative => true) %></span></li><% end %>
+ <% if item.data.order && item.data.order-1 == current_page.data.order %><li class="next"><span><%= nav_link('<span class="dir">Next:</span><span class="title">' + item.data.title + '</span>', '/' + item.path, :relative => true) %></span></li><% end %>
<% end %>
<% else %>
<% if current_page.data.order == 2 %>
- <li class="prev"><span><span class="dir">Previous:</span><span class="title"><%= nav_link(current_page.parent.data.nav_title, '/' + current_page.parent.path, :relative => true) %></span></span></li>
+ <li class="prev"><span><%= nav_link('<span class="dir">Previous:</span><span class="title">' + current_page.parent.data.title + '</span>', '/' + current_page.parent.path, :relative => true) %></span></li>
<% end %>
<% current_page.parent.children.sort_by { |resource| resource.data.order }.each do |item| %>
- <% if item.data.order && item.data.order == current_page.data.order - 1 %><li class="prev"><span><span class="dir">Previous:</span><span class="title"><%= nav_link(item.data.title, '/' + item.path, :relative => true) %></span></span></li><% end %>
- <% if item.data.order && item.data.order-1 == current_page.data.order %><li class="next"><span><span class="dir">Next:</span><span class="title"><%= nav_link(item.data.title, '/' + item.path, :relative => true) %></span></span></li><% end %>
+ <% if item.data.order && item.data.order == current_page.data.order - 1 %><li class="prev"><span><%= nav_link('<span class="dir">Previous:</span><span class="title">' + item.data.title + '</span>', '/' + item.path, :relative => true) %></span></li><% end %>
+ <% if item.data.order && item.data.order-1 == current_page.data.order %><li class="next"><span><%= nav_link('<span class="dir">Next:</span><span class="title">' + item.data.title + '</span>', '/' + item.path, :relative => true) %></span></li><% end %>
<% end %>
<% end %>
</ul>
View
2 source/layouts/_topic_navigation.erb
@@ -1,7 +1,7 @@
<h4 class="list-heading">
All Tutorials:
</h4>
-<ul>
+<ul class="topics">
<li><%= nav_link('Images', '/images/index.html', :relative => true) %></li>
<li><%= nav_link('Tables', '/tables/index.html', :relative => true) %></li>
</ul>
View
30 source/layouts/fullcode.erb
@@ -0,0 +1,30 @@
+<%= partial "layouts/header" %>
+<div class="navigation">
+ <nav role="navigation">
+ <a href="<%= current_page.data.source %>">Back to the example</a>
+ </nav>
+</div>
+<div class="content <%= current_page.data.status %>">
+ <header class="tutorial-heading">
+ <div class="breadcrumb">&nbsp;</div>
+ <h1>
+ <%= current_page.data.title %>
+ </h1>
+ </header>
+
+ <% if current_page.data.status=="draft" %>
+
+ <div class="status">
+ <h3>Status - </h3>
+ <p>This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: <a href="mailto:wai-eo-editors@w3.org">wai-eo-editors@w3.org.</a>
+ </p>
+ </div>
+ <% end %>
+
+ <div class="inner">
+
+ <%= yield %>
+ </div>
+</div>
+</main>
+<%= partial "layouts/footer" %>
View
99 source/stylesheets/wai-act.scss
@@ -41,7 +41,7 @@ $container_margin: 0.5%; // auto|px|% //
// Body
body {
- counter-reset: examples;
+ counter-reset: examples, approaches;
@extend .font-primary;
background-color: #F5F5F5;
color: #333;
@@ -59,14 +59,27 @@ body, h1, h2, h3, h4, h5, h6 {
font-size-adjust: 0.5;
}
-h2 {
- &.ex {
- counter-increment: examples;
- &:before {
- content: 'Example ' counter(examples) ': ';
- color: #930;
- }
+.ex, .ap {
+ &:before {
+ color: #930;
+ }
+}
+
+.ex {
+ counter-increment: examples;
+ &:before {
+ content: 'Example ' counter(examples) ': ';
}
+}
+
+.ap {
+ counter-increment: approaches;
+ &:before {
+ content: 'Approach ' counter(approaches) ': ';
+ }
+}
+
+h2 {
.content > .inner & {
padding-top: 1em;
}
@@ -207,6 +220,7 @@ footer {
@extend main;
border: 5px solid #993300;
border-width: 5px 0;
+ font-size: 0.8em;
h2 {
font-size: 1em;
}
@@ -322,6 +336,13 @@ a {
ul {
background-color: #ddd;
counter-reset: navli;
+ &.topics {
+ a, .current-a {
+ &:before {
+ content: "\00a0"; // Don’t display counter
+ }
+ }
+ }
}
&.tabbed {
@include container-full();
@@ -389,7 +410,7 @@ a {
counter-increment: none;
a, .current-a {
&:before {
- content: "\00a0"; /* Display the counter */
+ content: "\00a0"; // Don’t display counter
}
}
}
@@ -596,13 +617,21 @@ a {
}
}
.inner {
- @extend .two3rds;
+ @include mq($big) {
+ @include column(8);
+ }
padding:0 !important;
}
.annotation {
- width: percentage(1/2) - 2%;
+ @include mq($medium) {
+ width: percentage(1/2) - 6%;
+ margin-left: 1%;
+ }
+ @include mq($big) {
+ width: percentage(1/2) - 4%;
+ margin-right: -1 * percentage(1/2);
+ }
padding-left:1%;
- margin-right: -1 * percentage(1/2);
float:right;
border-left: 2px solid #930;
.annotation-header {
@@ -668,6 +697,10 @@ a {
}
figure {
+ clear: both;
+ @include mq($big) {
+ clear: none;
+ }
@extend .box;
.figcontent {
@extend .box-content;
@@ -675,6 +708,11 @@ figure {
figcaption {
@extend .box-caption;
}
+ p {
+ @extend .box-content;
+ padding-bottom: 0;
+ margin-bottom: 0;
+ }
&.code {
//width:150%;
@extend .box-secondary;
@@ -832,21 +870,38 @@ select {
// Buttons
-.btn-primary {
- display:inline-block;
- background: linear-gradient(to bottom, #004c99, #003366);
- color: #fff;
+.btn {
+ background: linear-gradient(to bottom, lighten(#ccc, 10%), #ccc);
+ color: #333;
font-weight: normal;
- font-size: 1.25em;
- padding: .25em;
+ font-size: 1em;
+ padding: .25em .5em;
border: {
- style: none;
+ color: #ccc;
+ width: 1px;
+ style: solid;
radius: .25em;
}
+ &:hover {
+ color: #333;
+ }
+}
+
+.btn-primary {
+ @extend .btn;
+ background: linear-gradient(to bottom, lighten(#036, 10%), #036);
+ color: #fff;
+ border-color: darken(#036, 10%);
+ &:hover, &:focus {
+ color: #fff;
+ text-decoration: underline;
+ }
}
.btn-small {
- padding: .1em .25em;
+ @extend .btn;
+ padding: .15em .2em;
+ line-height: 1;
}
.btn-icon {
@@ -855,6 +910,10 @@ select {
padding: 0;
}
+.btn-next {
+ float:right;
+}
+
.permalink {
@extend .font-primary;
display: inline-block;
View
5 source/tables/caption.html.md.erb
@@ -10,11 +10,12 @@ practice because the `<caption>` element is explicitly associated with
the table. The `<caption>` value should be a succinct description of the
content of the table.
-Examples on the [Header cells page](../headers) use other ways to introduce
+Examples on the [Header cells page](../headers/) use other ways to introduce
tables, but this and all other pages in this tutorial apply the
`<caption>` element to tables.
-## Example 1: `<caption>` used as a table heading
+## `<caption>` used as a table heading
+{:.ex}
This example has the table heading marked up using the `<caption>`
element, its value "Concert dates" tells users what information the
View
33 source/tables/examples/headertoprow.html.md.erb
@@ -0,0 +1,33 @@
+---
+title: Complete “Table with header cells in the top row only” Example
+status: draft
+source: ../../headers/#table-with-header-cells-in-the-top-row-only
+layout: fullcode
+---
+
+~~~ html
+
+<table>
+ <tr>
+ <th>Date</th>
+ <th>Event</th>
+ <th>Venue</th>
+ </tr>
+ <tr>
+ <td>12 Feb</td>
+ <td>Waltz with Strauss</td>
+ <td>Main Hall</td>
+ </tr>
+ <tr>
+ <td>24 Mar</td>
+ <td>The Obelisks</td>
+ <td>West Wing</td>
+ </tr>
+ <tr>
+ <td>14 Apr</td>
+ <td>The What</td>
+ <td>Main Hall</td>
+ </tr>
+</table>
+
+~~~
View
53 source/tables/examples/headertoprowfirstcol.html.md.erb
@@ -0,0 +1,53 @@
+---
+title: Complete “Table with header cells in the top row only” Example
+status: draft
+source: ../../headers/#table-with-header-cells-in-the-top-row-and-first-column
+layout: fullcode
+---
+
+~~~ html
+
+<table>
+ <tr>
+ <th>Delivery slots</th>
+ <th>Monday</th>
+ <th>Tuesday</th>
+ <th>Wednesday</th>
+ <th>Thursday</th>
+ <th>Friday</th>
+ </tr>
+ <tr>
+ <th>09:00 - 11:00</th>
+ <td>Closed</td>
+ <td>Open</td>
+ <td>Open</td>
+ <td>Closed</td>
+ <td>Closed</td>
+ </tr>
+ <tr>
+ <th>11:00 - 13:00</th>
+ <td>Open</td>
+ <td>Open</td>
+ <td>Closed</td>
+ <td>Closed</td>
+ <td>Closed</td>
+ </tr>
+ <tr>
+ <th>13:00 - 15:00</th>
+ <td>Open</td>
+ <td>Open</td>
+ <td>Open</td>
+ <td>Closed</td>
+ <td>Closed</td>
+ </tr>
+ <tr>
+ <th>15:00 - 17:00</th>
+ <td>Closed</td>
+ <td>Closed</td>
+ <td>Closed</td>
+ <td>Open</td>
+ <td>Open</td>
+ </tr>
+</table>
+
+~~~
View
53 source/tables/examples/scope-multiple.html.md.erb
@@ -0,0 +1,53 @@
+---
+title: Complete “Table with header cells in one column only” Example
+status: draft
+source: ../../scope/#table-with-headers-spanning-multiple-rows-or-columns
+layout: fullcode
+---
+
+~~~ html
+
+<table>
+ <caption>
+ Poster availability
+ </caption>
+ <tr>
+ <th scope="col">Poster name</th>
+ <th scope="col">Color</th>
+ <th colspan="3" scope="colgroup">Sizes available</th>
+ </tr>
+ <tr>
+ <th rowspan="3" scope="rowgroup">Zodiac</th>
+ <td>Full color</td>
+ <td>A2</td>
+ <td>A3</td>
+ <td>A4</td>
+ </tr>
+ <tr>
+ <td>Black and white</td>
+ <td>A1</td>
+ <td>A2</td>
+ <td>A3</td>
+ </tr>
+ <tr>
+ <td>Sepia</td>
+ <td>A3</td>
+ <td>A4</td>
+ <td>A5</td>
+ </tr>
+ <tr>
+ <th rowspan="2" scope="rowgroup">Angels</th>
+ <td>Black and white</td>
+ <td>A1</td>
+ <td>A3</td>
+ <td>A4</td>
+ </tr>
+ <tr>
+ <td>Sepia</td>
+ <td>A2</td>
+ <td>A3</td>
+ <td>A5</td>
+ </tr>
+</table>
+
+~~~
View
86 source/tables/examples/scope-offset.html.md.erb
@@ -0,0 +1,86 @@
+---
+title: Complete “Table with header cells in one column only” Example
+status: draft
+source: ../../scope/#table-with-an-offset-internal-column-of-header-cells
+layout: fullcode
+---
+
+~~~ html
+
+<table>
+ <caption>
+ Holidays taken in the last six months
+ </caption >
+
+ <thead>
+ <tr>
+ <th scope="col">PayrollRef. </th>
+ <th scope="col">Name</th>
+ <th scope="col">Jul</th>
+ <th scope="col">Aug</th>
+ <th scope="col">Sept</th>
+ <th scope="col">Oct</th>
+ <th scope="col">Nov</th>
+ <th scope="col">Dec</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr>
+ <td>215</td>
+ <th scope="row">Abel</th>
+ <td>5</td>
+ <td>2</td>
+ <td>0</td>
+ <td>0</td>
+ <td>0</td>
+ <td>3</td>
+ </tr>
+
+ <tr>
+ <td>231</td>
+ <th scope="row">Annette </th>
+ <td>0</td>
+ <td>5</td>
+ <td>3</td>
+ <td>0</td>
+ <td>0</td>
+ <td>6</td>
+ </tr>
+
+ <tr>
+ <td>173</td>
+ <th scope="row">Bernard</th>
+ <td>2</td>
+ <td>0</td>
+ <td>0</td>
+ <td>5</td>
+ <td>0</td>
+ <td>0</td>
+ </tr>
+
+ <tr>
+ <td>141</td>
+ <th scope="row">Gerald</th>
+ <td>0</td>
+ <td>10</td>
+ <td>0</td>
+ <td>0</td>
+ <td>0</td>
+ <td>8</td>
+ </tr>
+
+ <tr>
+ <td>99</td>
+ <th scope="row">Michael</th>
+ <td>8</td>
+ <td>8</td>
+ <td>8</td>
+ <td>8</td>
+ <td>&nbsp;</td>
+ <td>4</td>
+ </tr>
+ </tbody>
+</table>
+
+~~~
View
40 source/tables/examples/scope-simple.html.md.erb
@@ -0,0 +1,40 @@
+---
+title: Complete “Table with header cells in one column only” Example
+status: draft
+source: ../../scope/#table-with-header-cells-in-one-column-only
+layout: fullcode
+---
+
+~~~ html
+
+<table>
+ <caption>
+ Capital cities
+ </caption>
+ <tr>
+ <th scope="row">Belgium</th>
+ <td>Brussels</td>
+ </tr>
+ <tr>
+ <th scope="row">France</th>
+ <td>Paris</td>
+ </tr>
+ <tr>
+ <th scope="row">Holland</th>
+ <td>Amsterdam</td>
+ </tr>
+ <tr>
+ <th scope="row">Luxembourg</th>
+ <td>Luxembourg</td>
+ </tr>
+ <tr>
+ <th scope="row">Spain</th>
+ <td>Madrid</td>
+ </tr>
+ <tr>
+ <th scope="row">UK</th>
+ <td>London</td>
+ </tr>
+</table>
+
+~~~
View
25 source/tables/headers.html.md.erb
@@ -4,19 +4,13 @@ status: draft
order: 2
---
-Header cells are those that contain the information that is critical to
-understanding the raw data in a table. For example the number 210 is
-meaningless on its own, but becomes information if you know that it is
-the data for a) the number of properties in b) a given street. The
-`<th>` element needs to be used for header cells so that they are
-distinguishable from and can be associated with the correct data `<td>`
-cells.
+Header cells are those that contain the information that is critical to understanding the raw data in a table. For example the number 210 is meaningless on its own, but becomes information if you know that it is the data for a) the number of properties in b) a given street. The `<th>` element needs to be used for header cells so that they are distinguishable from and can be associated with the correct data `<td>` cells.
-## Example 1: Table with header cells in the top row only
+## Table with header cells in the top row only
+{:.ex}
-This table of concert dates only needs the cells in the top row marked
-up as `<th>` cells. This is partly because it is such a small table and
-partly because the data itself is distinctly different in each column.
+This table of concert dates only needs the cells in the top row marked up as `<th>` cells. This is partly because it is such a small table and partly because the data itself is
+distinctly different in each column.
<%= sample_start %>
@@ -67,10 +61,10 @@ partly because the data itself is distinctly different in each column.
<%= code_end %>
-[Full code for Example 1: Table with header cells in the top row only
-![(new window)](../img/new-win-icon.gif)](example1.txt)
+[Full code for “Table with header cells in the top row only”](../examples/headertoprow/)
-## Example 2: Table with header cells in the top row and first column
+## Table with header cells in the top row and first column
+{:.ex}
This table of opening times has header information contained in both the
top row and the first column. All header cells are marked up as `<th>`
@@ -156,8 +150,7 @@ cells.
<%= code_end %>
-[Full code for Example 2: Table with header cells in the top row and
-first column ![(new window)](../img/new-win-icon.gif)](example5.txt)
+[Full code for “Table with header cells in the top row and first column”](../examples/headertoprowfirstcol/)
## Related WCAG2.0 Techniques
View
32 source/tables/scope.html.md.erb
@@ -4,19 +4,13 @@ status: draft
order: 4
---
-*Scope* is the attribute used to define the direction and range of data
-cells that are covered by a header cell. For example a header cell that
-spans three columns with the *scope* value "colgroup" associates the
-header with the data cells in all three columns. The *scope attribute
-should be used for*all `<th>` cells where either the direction or range
-of data cell coverage needs to be clearly associated. **@@@Or always?@@@.**{:.todo}
-Possible values for the *scope attribute are* "row", "col", rowgroup" or
-"colgroup".
+`Scope` is the attribute used to define the direction and range of data cells that are covered by a header cell. For example a header cell that spans three columns with the `scope` value "colgroup" associates the header with the data cells in all three columns. The `scope` attribute should be used for all `<th>` cells where either the direction or range of data cell coverage needs to be clearly associated. **@@@Or always?@@@.**{:.todo} Possible values for the `scope` attribute are “`row`”, “`col`”, “`rowgroup`” or “`colgroup`”.
-## Example 1: Table with header cells in one column only
+## Table with header cells in one column only
+{:.ex}
This example has `<th>` elements for all cells in the left column of a
-table. The *scope* value "row" is used on each `<th>` cell to ensure
+table. The `scope` value “`row`” is used on each `<th>` cell to ensure
that it cannot be mistaken as a header for other cells in the same
column.
@@ -74,14 +68,13 @@ column.
<%= code_end %>
-[Full code Example 1:Table with header cells in one column only ![ (new
-window)](../img/new-win-icon.gif)](example3.txt)
+[Full code Example “Table with header cells in one column only”](../examples/scope-simple/)
-## Example 2: Table with an offset (@@@internal?@@@) column of header cells
-{:.todo}
+## Table with an offset (@@@internal?@@@) column of header cells
+{:.ex}
In this table the row header cells are in the second column rather than
-the first. The *scope* values "row" and has been used on the `<th>`
+the first. The `scope` values "row" and has been used on the `<th>`
second column cells to ensure that data cells in the first column, as
well as those in cells to the right of the headers are correctly
associated.
@@ -186,10 +179,10 @@ associated.
<%= code_end %>
-[Full code for Example 2: Table with an offset column of header cells
-![(new window)](../img/new-win-icon.gif)](example3.txt)
+[Full code for “Table with an offset column of header cells”](../examples/scope-offset/)
-## Example 3: Table with headers spanning multiple rows or columns
+## Table with headers spanning multiple rows or columns
+{:.ex}
In this example, some of the row header cells span two or more rows of
data cells and one column header spans three columns.
@@ -262,8 +255,7 @@ data cells and one column header spans three columns.
<%= code_end %>
-[Full code for Example 3: Table with headers spanning multiple rows or
-columns ![(new window)](../img/new-win-icon.gif)](example3.txt)
+[Full code for “Table with headers spanning multiple rows or columns”](../examples/scope-multiple/)
## Related WCAG2.0 Techniques

No commit comments for this range

Something went wrong with that request. Please try again.