Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • A a11yproject.com
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 40
    • Issues 40
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 10
    • Merge requests 10
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • The A11Y Project
  • a11yproject.com
  • Merge requests
  • !826
An error occurred while fetching the assigned milestone of the selected merge_request.

Makes code block syntax highlighting consistent

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/matyus/consistent-syntax-highlighting into gh-pages 6 years ago
  • Overview 3
  • Commits 1
  • Pipelines 0
  • Changes 10

Created by: matyus

Fixes #825 (closed).

Before

Screen Shot 2019-07-28 at 12 11 35 AM

After

Screen Shot 2019-07-28 at 12 11 42 AM
Compare
  • gh-pages (base)

and
  • latest version
    9812849b
    1 commit, 2 years ago

10 files
+ 100
- 84

    Preferences

    File browser
    Compare changes
_po‎sts‎
2013-01-11-how-t‎o-hide-content.md‎ +25 -17
2013-01-14-aria-‎landmark-roles.md‎ +3 -2
2013-01-14-never-u‎se-maximum-scale.md‎ +2 -2
2013-04-22-titl‎e-attributes.md‎ +1 -1
2013-05-11-ski‎p-nav-links.md‎ +2 -2
2013-05-15-understanding‎-vestibular-disorders.md‎ +3 -3
2013-07-17-using-caption-s‎ervices-with-html5-video.md‎ +23 -19
2014-05-15-gettin‎g-started-aria.md‎ +30 -30
2016-01-07-placehold‎er-input-elements.md‎ +8 -6
2016-03-05-accessi‎ble-data-tables.md‎ +3 -2
_posts/2013-01-11-how-to-hide-content.md
+ 25
- 17
  • View file @ 9812849b

  • Edit in single-file editor

  • Open in Web IDE


@@ -19,22 +19,26 @@ Developers commonly use `display: none` to hide content on the page. Unfortunate
There are real world situations where you might need to hide elements visually (e.g., a form `label`), but keep the element text available to be announced by a screen reader. The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers. Unlike CSS positioning and negative text-indent techniques, the "clip pattern" also works with RTL (Right-to-left) languages for localization. See the article *[Hiding Content for Accessibility](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility)* for more information on the visually-hidden pattern.
.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
```css
.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
```
It is possible to apply the `.visually-hidden` class to content that contains natively focusable elements (such as `a`, `button`, `input`, etc). It's important to show these elements visually when they receive focus, otherwise a keyboard-only user might not know which element currently has focus. CSS for this might look something like:
.visually-hidden a:focus,
.visually-hidden input:focus,
.visually-hidden button:focus {
position:static;
width:auto; height:auto;
}
```css
.visually-hidden a:focus,
.visually-hidden input:focus,
.visually-hidden button:focus {
position:static;
width:auto; height:auto;
}
```
Consider adding these HTML classes and CSS rules to your base stylesheet and use them when applicable.
@@ -44,10 +48,14 @@ The `aria-hidden="true"` HTML attribute is the logical opposite of the `.visuall
There may be cases where you want to use `aria-hidden` and also visually hide the content. This can be accomplished with some CSS like:
.my-component[aria-hidden="true"] {
display: none;
}
```css
.my-component[aria-hidden="true"] {
display: none;
}
```
Another way to hide content both visually and from assistive technology is the [HTML5 `hidden` attribute](https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute). To support older browsers like IE9, you might want to add the following css to your pages:
[hidden] { display: none; }
```css
[hidden] { display: none; }
```
_posts/2013-01-14-aria-landmark-roles.md
+ 3
- 2
  • View file @ 9812849b

  • Edit in single-file editor

  • Open in Web IDE


@@ -65,7 +65,8 @@ The following are common landmark roles that tend to be useful on many pages:
</dl>
Implementing landmarks in your documents is a straight forward process. Simply add the <code>role</code> attribute referencing the appropriate landmark value. For example:
```
```html
<footer role="contentinfo">...</footer>
```
@@ -73,7 +74,7 @@ Implementing landmarks in your documents is a straight forward process. Simply a
## HTML5 implicit mappings of Landmark roles
Before you start adding <abbr>ARIA</abbr> roles to your HTML elements, you should be aware that many of these landmarks will be natively conveyed by proper HTML usage. For example, the following markup snippet will produce a warning in modern HTML and accessibility automated checkers:
```
```html
<header role="banner" class="site-header">...</header>
```
_posts/2013-01-14-never-use-maximum-scale.md
+ 2
- 2
  • View file @ 9812849b

  • Edit in single-file editor

  • Open in Web IDE


@@ -18,13 +18,13 @@ By setting `maximum-scale=1.0`, you are disabling the functionality to use pinch
### The bad way:
``` html
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
```
### The good way:
``` html
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
_posts/2013-04-22-title-attributes.md
+ 1
- 1
  • View file @ 9812849b

  • Edit in single-file editor

  • Open in Web IDE


@@ -39,7 +39,7 @@ Based on the intended behavior for Text Alternative Computation the precedence f
In cases where two or more of the above are used, whatever is highest in that list becomes what gets used. Consider the following example:
```
```html
<img src="/path/to/image.png" alt="" title="some stuff that could be useful" />
```
_posts/2013-05-11-skip-nav-links.md
+ 2
- 2
  • View file @ 9812849b

  • Edit in single-file editor

  • Open in Web IDE


@@ -17,7 +17,7 @@ Skip nav links are useful for users who use keyboard navigation only, but screen
### Example
{% highlight html %}
```html
<body>
<a href="#main">Skip to main content</a>
<nav role="navigation">
@@ -31,7 +31,7 @@ Skip nav links are useful for users who use keyboard navigation only, but screen
<!-- page specific content -->
</main>
</body>
{% endhighlight %}
```
**Disclaimer**: The mechanism by which skip navigation links work had for some time been broken in Webkit based browsers and has only [recently been fixed](https://code.google.com/p/chromium/issues/detail?id=37721). Until these browsers release the fixes, you may need to use a JavaScript polyfill to make skip nav links work.
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
1
1 participant
Administrator
Reference:
Source branch: github/fork/matyus/consistent-syntax-highlighting

Menu

Explore Projects Groups Snippets