From c031584bcde710841ef4324558f40242080c53a9 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 13 Dec 2018 13:09:47 +0000 Subject: [PATCH] SVG accessibility fixes (#27826) * SVG accessibility fixes - add `focusable="false"` to all SVGs, to stop IE from including the `` in its default focus cycle - completely hide decorative SVGs using `aria-hidden="true"` - add `role="img"` to meaningful/"content" SVGs, ensure they have an appropriate `` and/or `aria-label` - simplify placeholder default title * Simplify usage of placeholder.svg in the docs - in most cases, no need for separate/redundant text and title (now that we make text itself part of the alternative text explicitly) - no need (expect in rare cirumstances) to describe the placeholder image (unless the look of the image is important/the actual content, as is the case with the image thumbnail class) * Simplify example.html rewriting of to code sample - as the `alt` for the placeholder isn't really important, just add an ellipsis instead (otherwise, to be correct, we'd have to construct the whole "title+text" construct like we do now in the placeholder.svg itself * Change svgo configuration to retain role attribute and add/force focusable=false - regarding `focusable=false`, see https://github.com/svg/svgo/issues/1011 (which would be the "proper" SVGO fix) and the (hacky) solution https://github.com/svg/svgo/pull/817 --- build/svgo.yml | 9 +++- site/_includes/example.html | 8 +--- site/_includes/icons/bootstrap-stack.svg | 2 +- site/_includes/icons/bootstrap.svg | 2 +- site/_includes/icons/download.svg | 2 +- site/_includes/icons/github.svg | 2 +- site/_includes/icons/import.svg | 2 +- site/_includes/icons/lightning.svg | 2 +- site/_includes/icons/menu.svg | 2 +- site/_includes/icons/placeholder.svg | 4 +- site/_includes/icons/slack.svg | 2 +- site/_includes/icons/twitter.svg | 2 +- .../4.1/assets/brand/bootstrap-outline.svg | 3 +- .../4.1/assets/brand/bootstrap-punchout.svg | 3 +- .../docs/4.1/assets/brand/bootstrap-solid.svg | 3 +- site/docs/4.1/components/card.md | 42 +++++++++---------- site/docs/4.1/components/carousel.md | 36 ++++++++-------- site/docs/4.1/components/media-object.md | 20 ++++----- site/docs/4.1/content/figures.md | 4 +- site/docs/4.1/content/images.md | 10 ++--- site/docs/4.1/examples/album/index.html | 2 +- site/docs/4.1/examples/blog/index.html | 6 +-- site/docs/4.1/examples/carousel/index.html | 12 +++--- site/docs/4.1/examples/product/index.html | 4 +- site/docs/4.1/utilities/sizing.md | 2 +- 25 files changed, 94 insertions(+), 92 deletions(-) diff --git a/build/svgo.yml b/build/svgo.yml index a12cf421c4..047e6947f0 100644 --- a/build/svgo.yml +++ b/build/svgo.yml @@ -15,6 +15,10 @@ js2svg: indent: 2 plugins: + # remove this with IE 11 is no longer supported + - addAttributesToSVGElement: + attributes: + - focusable: false - cleanupAttrs: true - cleanupEnableBackground: true - cleanupIDs: true @@ -41,8 +45,9 @@ plugins: - removeHiddenElems: true - removeMetadata: true - removeNonInheritableGroupAttrs: true - - removeTitle: true - - removeUnknownsAndDefaults: true + - removeTitle: false + - removeUnknownsAndDefaults: + keepRoleAttr: true - removeUnusedNS: true - removeUselessDefs: true - removeUselessStrokeAndFill: true diff --git a/site/_includes/example.html b/site/_includes/example.html index dd1cc63823..dcd148b02a 100644 --- a/site/_includes/example.html +++ b/site/_includes/example.html @@ -34,16 +34,10 @@ {%- assign image_class = image_class[1] | replace: 'bd-placeholder-img-lg', '' | strip -%} {%- endif -%} - {%- assign image_alt = include.content - | replace: '', '<title>✂️' - | replace: '', '✂️' - | split: '✂️' -%} - {%- assign image_alt = image_alt[1] -%} - {%- for content_chunk in modified_content -%} {%- if content_chunk contains ' + {%- endcapture -%} {{- img_placeholder -}} {%- else -%} diff --git a/site/_includes/icons/bootstrap-stack.svg b/site/_includes/icons/bootstrap-stack.svg index 2ced27898f..6b35354490 100644 --- a/site/_includes/icons/bootstrap-stack.svg +++ b/site/_includes/icons/bootstrap-stack.svg @@ -1 +1 @@ - \ No newline at end of file +Bootstrap \ No newline at end of file diff --git a/site/_includes/icons/bootstrap.svg b/site/_includes/icons/bootstrap.svg index 816028bd8e..a60e29f33b 100644 --- a/site/_includes/icons/bootstrap.svg +++ b/site/_includes/icons/bootstrap.svg @@ -1 +1 @@ -Bootstrap +Bootstrap diff --git a/site/_includes/icons/download.svg b/site/_includes/icons/download.svg index aa5f3f1bee..d0c1fd2cc3 100644 --- a/site/_includes/icons/download.svg +++ b/site/_includes/icons/download.svg @@ -1 +1 @@ -Download icon + diff --git a/site/_includes/icons/github.svg b/site/_includes/icons/github.svg index 5d6ad18040..4fcd9ed374 100644 --- a/site/_includes/icons/github.svg +++ b/site/_includes/icons/github.svg @@ -1 +1 @@ -GitHub +GitHub diff --git a/site/_includes/icons/import.svg b/site/_includes/icons/import.svg index 0a9dbb2696..5db5bf8d82 100644 --- a/site/_includes/icons/import.svg +++ b/site/_includes/icons/import.svg @@ -1 +1 @@ -Import icon + diff --git a/site/_includes/icons/lightning.svg b/site/_includes/icons/lightning.svg index be6f475ef4..bfc14b0e6a 100644 --- a/site/_includes/icons/lightning.svg +++ b/site/_includes/icons/lightning.svg @@ -1 +1 @@ -Lightning icon + diff --git a/site/_includes/icons/menu.svg b/site/_includes/icons/menu.svg index 03e15dc492..779870a541 100644 --- a/site/_includes/icons/menu.svg +++ b/site/_includes/icons/menu.svg @@ -1 +1 @@ -Menu +Menu diff --git a/site/_includes/icons/placeholder.svg b/site/_includes/icons/placeholder.svg index 159c2a335c..415d55c479 100644 --- a/site/_includes/icons/placeholder.svg +++ b/site/_includes/icons/placeholder.svg @@ -11,7 +11,7 @@ height: default: 180px {%- endcomment -%} -{%- assign title = include.title | default: 'Generic Placeholder Image' -%} +{%- assign title = include.title | default: 'Placeholder' -%} {%- assign class = include.class | default: '' -%} {%- assign color = include.color | default: site.data.grays[2].hex -%} {%- assign background = include.background | default: site.data.grays[5].hex -%} @@ -25,7 +25,7 @@ {%- endif -%} {%- capture svg -%} - + {% if title != ' ' %}{{ title }}{% endif %} {% if text != ' ' %}{{ text }}{% endif %} diff --git a/site/_includes/icons/slack.svg b/site/_includes/icons/slack.svg index 3927fa458b..93a4a29432 100644 --- a/site/_includes/icons/slack.svg +++ b/site/_includes/icons/slack.svg @@ -1 +1 @@ -Slack +Slack diff --git a/site/_includes/icons/twitter.svg b/site/_includes/icons/twitter.svg index 450c393b92..9b978a8784 100644 --- a/site/_includes/icons/twitter.svg +++ b/site/_includes/icons/twitter.svg @@ -1 +1 @@ -Twitter +Twitter diff --git a/site/docs/4.1/assets/brand/bootstrap-outline.svg b/site/docs/4.1/assets/brand/bootstrap-outline.svg index f331db63f3..6e136ca87b 100644 --- a/site/docs/4.1/assets/brand/bootstrap-outline.svg +++ b/site/docs/4.1/assets/brand/bootstrap-outline.svg @@ -1,4 +1,5 @@ - + + Bootstrap diff --git a/site/docs/4.1/assets/brand/bootstrap-punchout.svg b/site/docs/4.1/assets/brand/bootstrap-punchout.svg index 8538ee95c8..81c20b0d8f 100644 --- a/site/docs/4.1/assets/brand/bootstrap-punchout.svg +++ b/site/docs/4.1/assets/brand/bootstrap-punchout.svg @@ -1,4 +1,5 @@ - + + Bootstrap diff --git a/site/docs/4.1/assets/brand/bootstrap-solid.svg b/site/docs/4.1/assets/brand/bootstrap-solid.svg index 5d860a70e4..4eed29bb72 100644 --- a/site/docs/4.1/assets/brand/bootstrap-solid.svg +++ b/site/docs/4.1/assets/brand/bootstrap-solid.svg @@ -1,4 +1,5 @@ - + + Bootstrap diff --git a/site/docs/4.1/components/card.md b/site/docs/4.1/components/card.md index 5691ea84ab..221c9da54a 100644 --- a/site/docs/4.1/components/card.md +++ b/site/docs/4.1/components/card.md @@ -18,7 +18,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards {% capture example %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

@@ -70,7 +70,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-t {% capture example %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}

Some quick example text to build on the card title and make up the bulk of the card's content.

@@ -113,7 +113,7 @@ Mix and match multiple content types to create the card you need, or throw every {% capture example %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

@@ -358,7 +358,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"— {% capture example %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -371,7 +371,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

- {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
{% endcapture %} {% include example.html content=example %} @@ -382,7 +382,7 @@ Turn an image into a card background and overlay your card's text. Depending on {% capture example %}
- {% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" title="Card image" %} + {% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -462,7 +462,7 @@ Use card groups to render cards as a single, attached element with equal width a {% capture example %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -470,7 +470,7 @@ Use card groups to render cards as a single, attached element with equal width a
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This card has supporting text below as a natural lead-in to additional content.

@@ -478,7 +478,7 @@ Use card groups to render cards as a single, attached element with equal width a
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

@@ -494,7 +494,7 @@ When using card groups with footers, their content will automatically line up. {% capture example %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -504,7 +504,7 @@ When using card groups with footers, their content will automatically line up.
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This card has supporting text below as a natural lead-in to additional content.

@@ -514,7 +514,7 @@ When using card groups with footers, their content will automatically line up.
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

@@ -534,7 +534,7 @@ Need a set of equal width and height cards that aren't attached to one another? {% capture example %}
- {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -542,7 +542,7 @@ Need a set of equal width and height cards that aren't attached to one another?
- {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
Card title

This card has supporting text below as a natural lead-in to additional content.

@@ -550,7 +550,7 @@ Need a set of equal width and height cards that aren't attached to one another?
- {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

@@ -566,7 +566,7 @@ Just like with card groups, card footers in decks will automatically line up. {% capture example %}
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -576,7 +576,7 @@ Just like with card groups, card footers in decks will automatically line up.
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This card has supporting text below as a natural lead-in to additional content.

@@ -586,7 +586,7 @@ Just like with card groups, card footers in decks will automatically line up.
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

@@ -608,7 +608,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column {% capture example %}
- {% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" %}
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

@@ -625,7 +625,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
- {% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %} + {% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" %}
Card title

This card has supporting text below as a natural lead-in to additional content.

@@ -650,7 +650,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
- {% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" title="Card image" %} + {% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" %}
diff --git a/site/docs/4.1/components/carousel.md b/site/docs/4.1/components/carousel.md index bf8f5c250f..a0ff8c34f9 100644 --- a/site/docs/4.1/components/carousel.md +++ b/site/docs/4.1/components/carousel.md @@ -32,13 +32,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w- @@ -53,13 +53,13 @@ Adding in the previous and next controls: