Docs: add/unify advice on contextual colors and accessibility

docs/components/alerts.md

@@ -30,6 +30,12 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 </div>
 {% endexample %}
 
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
+
 ### Link color
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.

docs/components/buttons.md

@@ -42,7 +42,7 @@ Bootstrap includes six predefined button styles, each serving its own semantic p
 {% callout warning %}
 #### Conveying meaning to assistive technologies
 
-Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
 {% endcallout %}
 
 ## Button tags

docs/components/card.md

@@ -312,6 +312,12 @@ Cards include their own variant classes for quickly changing the `background-col
 </div>
 {% endexample %}
 
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
+
 ## Groups
 
 Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.

docs/components/label.md

@@ -32,6 +32,12 @@ Add any of the below mentioned modifier classes to change the appearance of a la
 <span class="label label-danger">Danger</span>
 {% endexample %}
 
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
+
 ## Pill labels
 
 Use the `.label-pill` modifier class to make labels more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.

docs/components/list-group.md

@@ -110,6 +110,12 @@ Use contextual classes to style list items, default or linked. Also includes `.a
 </div>
 {% endexample %}
 
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
+
 ## Custom content
 
 Add nearly any HTML within, even for linked list groups like the one below.

docs/components/utilities.md

@@ -151,7 +151,7 @@ Sometimes contextual classes cannot be applied due to the specificity of another
 {% callout warning %}
 #### Conveying meaning to assistive technologies
 
-Ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
 {% endcallout %}
 
 ## Close icon

docs/content/tables.md

@@ -420,6 +420,12 @@ Use contextual classes to color table rows or individual cells.
   </table>
 </div>
 
+{% callout warning %}
+#### Conveying meaning to assistive technologies
+
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
+{% endcallout %}
+
 {% highlight html %}
 <!-- On rows -->
 <tr class="table-active">...</tr>