Old specification: display box
box-ordinal-group
Content can be rearranged with box-ordinal-group.
Test case
1. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Results for accessibility
Keyboard
How are the links in the content boxes reached: along the source order or flex order defined in CSS?
Desktop
| Firefox | Safari | Chrome | Internet Explorer 10 | Opera | |
|---|---|---|---|---|---|
| source code order | no | yes | yes | yes | no |
Mobile
| Safari / iOS | Default / Android | Firefox / Android | Chrome / Android | Opera / Android | |
|---|---|---|---|---|---|
| source code order | yes | yes | no | yes | yes |
Screen reader
How is content read by screen reader: along the source order or flex order defined in CSS?
Desktop
| JAWS / IE | JAWS / FF | NVDA / IE | NVDA / FF | VoiceOver | ChromeVox | Window-Eyes | |
|---|---|---|---|---|---|---|---|
| source code order | yes | no | yes | no | yes | yes | yes |
Mobile
| VoiceOver / iOS | Talkback Default / Android | Talkback FF / Android | Talkback Chrome / Android | |
|---|---|---|---|---|
| source code order | yes | yes | yes | yes |
box-direction: reverse
Content can be rearranged in reverse.
Test case
1. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Results for accessibility
Keyboard
How are the links in the content boxes reached: along the source order or flex order defined in css?
Desktop
| Firefox | Safari | Chrome | Internet Explorer 10 | Opera | |
|---|---|---|---|---|---|
| source code order | yes | yes | yes | yes | yes |
Mobile
| Safari / iOS | Default / Android | Firefox / Android | Chrome / Android | Opera / Android | |
|---|---|---|---|---|---|
| source code order | yes | yes | yes | yes | yes |
Screen reader
How is content read by screen reader: along the source order or flex order defined in CSS?
Desktop
| JAWS / IE | JAWS / FF | NVDA / IE | NVDA / FF | VoiceOver | ChromeVox | Window-Eyes | |
|---|---|---|---|---|---|---|---|
| source code order | yes | yes | yes | yes | yes | yes | yes |
Mobile
| VoiceOver / iOS | Talkback Default / Android | Talkback FF / Android | Talkback Chrome / Android | |
|---|---|---|---|---|
| source code order | yes | yes | yes | yes |
Browser and screen reader used
- Desktop: Current versions of Firefox, Safari, Chrome, Opera and Internet Exporer 10.
- Mobile: Safari on iOS6, Default Browser, Firefox, Chrome and Opera on Android 4.1
- Desktop: JAWS 13, current version of NVDA, VoiceOver and ChromeVox, Window Eyes 7.5.4
- Mobile: VoiceOver on Safari, Talkback on Android 4.1
New specification: display flex
order
Content can be rearranged with order.
Test case
1. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Results for accessibility
Keyboard
How are the links in the content boxes reached: along the source order or flex order defined in css?
Desktop
| Firefox Nightly | Webkit Nightly | Chrome | Internet Explorer 10 | Opera | |
|---|---|---|---|---|---|
| source code order | no | yes | yes | yes | yes |
Mobile
| Safari / iOS | Default / Android | Firefox / Android | Chrome / Android | Opera / Android | |
|---|---|---|---|---|---|
| source code order | n/a | n/a | no | yes | yes |
Screen reader
How is content read by screen reader: along the source order or flex order defined in CSS?
Desktop
| JAWS / IE | JAWS / FF | NVDA / IE | NVDA / FF | VoiceOver | ChromeVox | Window-Eyes | |
|---|---|---|---|---|---|---|---|
| source code order | yes | no | yes | no | yes | yes | yes |
Mobile
| VoiceOver / iOS | Talkback Default / Android | Talkback FF / Android | Talkback Chrome / Android | |
|---|---|---|---|---|
| source code order | n/a | n/a | yes | yes |
flex-direction row-reverse
Content can be rearranged in reverse.
Test case
1. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Results for accessibility
Keyboard
How are the links in the content boxes reached: along the source order or flex order defined in CSS?
Desktop
| Firefox Nightly | Webkit Nightly | Chrome | Internet Explorer 11 Beta | Opera | |
|---|---|---|---|---|---|
| source code order | yes | yes | yes | yes | yes |
Mobile
| Safari / iOS | Default / Android | Firefox / Android | Chrome / Android | Opera / Android | |
|---|---|---|---|---|---|
| source code order | n/a | n/a | yes | yes | yes |
Screen reader
How is content read by screen reader: along the source order or flex order defined in CSS?
Desktop
| JAWS / IE | JAWS / FF | NVDA / IE | NVDA / FF | VoiceOver | ChromeVox | Window-Eyes | |
|---|---|---|---|---|---|---|---|
| source code order | yes | yes | yes | yes | yes | yes | yes |
Mobile
| VoiceOver / iOS | Talkback Default / Android | Talkback FF / Android | Talkback Chrome / Android | |
|---|---|---|---|---|
| source code order | n/a | n/a | yes | yes |
Browser and screen reader used
- Desktop: Nightlies of Firefox, Safari Chrome, Opera and Internet Explorer 11 Beta.
- Mobile: Safari on iOS6, Default Browser, Firefox, Chrome and Opera on Android 4.1
- Desktop: JAWS 14, current version of NVDA, VoiceOver and ChromeVox, Window-Eyes 8.2
- Mobile: VoiceOver on Safari, Talkback on Android 4.1
For testing keyboard support on Blackberry and Windows Phone: There was only unstable bluetooth support. So testing was not possible. And as for screenreader testing: Both - Blackberry and Windows Phone - have no screenreader out of the box.