Flexbox Tests - test cases for CSS Accessibility Community Group

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.