diff options
Diffstat (limited to 'docs/_includes/getting-started')
| -rw-r--r-- | docs/_includes/getting-started/accessibility.html | 5 | ||||
| -rw-r--r-- | docs/_includes/getting-started/browser-device-support.html | 61 |
2 files changed, 40 insertions, 26 deletions
diff --git a/docs/_includes/getting-started/accessibility.html b/docs/_includes/getting-started/accessibility.html index cb9b3e11e..5a60bc83b 100644 --- a/docs/_includes/getting-started/accessibility.html +++ b/docs/_includes/getting-started/accessibility.html @@ -17,9 +17,14 @@ <p>When nesting headings (<code><h1></code> - <code><h6></code>), your primary document header should be an <code><h1></code>. Subsequent headings should make logical use of <code><h2></code> - <code><h6></code> such that screen readers can construct a table of contents for your pages.</p> <p>Learn more at <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">HTML CodeSniffer</a> and <a href="http://accessibility.psu.edu/headings">Penn State's AccessAbility</a>.</p> + <h3>Color contrast</h3> + <p>Currently, some of the default color combinations available in Bootstrap (such as the various <a href="../css/#buttons">styled button</a> classes, some of the code highlighting colors used for <a href="../css/#code-block">basic code blocks</a>, the <code>.bg-primary</code> <a href="..css/#helper-classes-backgrounds">contextual background</a> helper class, and the default link color when used on a white background) have a low contrast ratio (below the <a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">recommended ratio of 4.5:1</a>). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.</p> + <h3>Additional resources</h3> <ul> <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li> + <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome's Accessibility Developer Tools extension</a></li> + <li><a href="http://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a> <li><a href="http://a11yproject.com/">The A11Y Project</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li> </ul> diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html index a0b5ef367..2f3802b84 100644 --- a/docs/_includes/getting-started/browser-device-support.html +++ b/docs/_includes/getting-started/browser-device-support.html @@ -19,33 +19,33 @@ <tbody> <tr> <th>Android</th> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td> + <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td> <td class="text-muted">N/A</td> </tr> <tr> <th>iOS</th> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> <td class="text-muted">N/A</td> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> + <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> </tr> <tr> <th>Mac OS X</th> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> </tr> <tr> <th>Windows</th> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> + <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td> </tr> </tbody> </table> @@ -67,26 +67,26 @@ <tbody> <tr> <th scope="row"><code>border-radius</code></th> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> + <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> </tr> <tr> <th scope="row"><code>box-shadow</code></th> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td> + <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td> </tr> <tr> <th scope="row"><code>transform</code></th> - <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> - <td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported, with <code>-ms</code> prefix</td> + <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td> + <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported, with <code>-ms</code> prefix</td> </tr> <tr> <th scope="row"><code>transition</code></th> - <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> + <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td> </tr> <tr> <th scope="row"><code>placeholder</code></th> - <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td> + <td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td> </tr> </tbody> </table> @@ -165,13 +165,22 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { <h3 id="support-browser-zooming">Browser zooming</h3> <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p> - <h3 id="support-printing">Printer viewports</h3> - <p>Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p> + <h3 id="support-printing">Printing</h3> + <p>Even in some modern browsers, printing can be quirky.</p> + <p>In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. <a href="https://github.com/twbs/bootstrap/issues/12078">See #12078 for some details.</a> Suggested workarounds:</p> <ul> <li>Embrace the extra-small grid and make sure your page looks acceptable under it.</li> <li>Customize the values of the <code>@screen-*</code> Less variables so that your printer paper is considered larger than extra-small.</li> <li>Add custom media queries to change the grid size breakpoints for print media only.</li> </ul> + <p>Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p> + {% highlight css %} +@media print { + .container { + width: auto; + } +} + {% endhighlight %} <h3 id="support-android-stock-browser">Android stock browser</h3> <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p> @@ -193,5 +202,5 @@ $(function () { <h3 id="support-validators">Validators</h3> <p>In order to provide the best possible experience to old and buggy browsers, Bootstrap uses <a href="http://browserhacks.com">CSS browser hacks</a> in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.</p> <p>These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.</p> - <p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of <a href="#support-ie-compatibility-modes">X-UA-Compatible <code><meta></code> tags</a> to avoid Internet Explorer issues and our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p> + <p>Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">a certain Firefox bug</a>.</p> </div> |