From 29886d67f0ddf2be715ad6f6c48271d8c3c3898f Mon Sep 17 00:00:00 2001 From: Jim Allan Date: Thu, 12 Apr 2018 16:52:19 -0500 Subject: [PATCH 01/66] updated to include @wayneedick image --- understanding/21/reflow.html | 1 + 1 file changed, 1 insertion(+) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 8cf303e6..702afc7e 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -19,6 +19,7 @@

Intent

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

+

image showing the size of character needed by viewing distance to make the same image on the retina
In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope.

Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

From 2528f82a668e7130ef9dc21fc9fa3fb0e0fcd4f7 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 24 Apr 2018 16:46:56 +0200 Subject: [PATCH 02/66] added section explaining responsive zooming --- understanding/21/reflow.html | 1 + 1 file changed, 1 insertion(+) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 8cf303e6..9a23bceb 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,6 +16,7 @@

Understanding Reflow

Intent

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

+

In many cases, when people use the zoom function of their desktop browser to enlarge content, the web page showing 2, 3 or more columns will at some point trigger a change of its layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menus or addtional content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into single menu button.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From f30cbb91100326f741c88bd49d0f04de5c80e2c1 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 24 Apr 2018 16:50:40 +0200 Subject: [PATCH 03/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 9a23bceb..a638b981 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,7 +16,7 @@

Understanding Reflow

Intent

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

-

In many cases, when people use the zoom function of their desktop browser to enlarge content, the web page showing 2, 3 or more columns will at some point trigger a change of its layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menus or addtional content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into single menu button.

+

In many cases, when people use the zoom function of their desktop browser to enlarge content, the web page showing 2, 3 or more columns will at some point trigger a change of its layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From 47a3b2f0d0956773039bc6ccf2903189108dfa99 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 24 Apr 2018 17:00:18 +0200 Subject: [PATCH 04/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index a638b981..f3e810ad 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,7 +16,7 @@

Understanding Reflow

Intent

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

-

In many cases, when people use the zoom function of their desktop browser to enlarge content, the web page showing 2, 3 or more columns will at some point trigger a change of its layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into single menu button so they take up less screen space.

+

Many low vision people use the zoom function of their desktop browser to enlarge content because they cannot read content at the default text sizes. Zoomin ginto web pages that support reflow and show 2, 3 or more columns in a typical desktop browser at 100% will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From 897d6d0797e6a1a76373730c0013570ab76603b9 Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Tue, 24 Apr 2018 21:34:02 +0100 Subject: [PATCH 05/66] Corrected image source, added Jims edits Jim's edits from: https://github.com/w3c/wcag21/commit/d436cb0db2c4a514053a3caa9fbb7896a7bc078c#diff-7b2c1f5b9ff33741c9df9c0c14a126fe --- understanding/21/reflow.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 702afc7e..7fab0d05 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -19,8 +19,8 @@

Intent

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

-

image showing the size of character needed by viewing distance to make the same image on the retina
In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

-

Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope.

+

image showing the size of character needed by viewing distance to make the same image on the retina
In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

+

Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

@@ -46,7 +46,7 @@

Does this mean web sites have to be responsive?

What happens if sites move/change things at smaller sizes?

So long as the information and functionality are still available that is ok. If some content is hidden behind a show/hide button, or navigation is moved into a drop-down it is still available. (Like the 'hamburger' icon pattern for navigation).

It is possible people might get confused if things move or get hidden, however, the physics demands that something has to move down or be hidden, you cannot make things bigger and fit them in the same space. Also, the people who need it most would typically be zoomed-in when arriving, so may not notice the difference.

-

However, if content or functionality is removed that would fail this success criteria.

+

However, if content or functionality is removed that would fail this success criteria unless there is a link to the removed content in place of the removed content.

What is the relation to Resize Text?

The focus of the Reflow success criteria is to enable users to zoom in without scrolling in two directions. Resize Text (Success criterion 1.4.4) also applies, so it should be possible to increase the size of all text by at least 200% as well. If text is reduced in size when people zoom in (or for small-screen usage), it should still be possible to get to 200% bigger. For example, if text is set at 20px when the window is 1280px wide, at 200% zoom it should be at least 20px (so 200% larger), but at 400% zoom it could be set to 10px (therefore still 200% larger than the 100% view. It is not required to be 200% larger at every breakpoint, but it should be possible to get 200% large text in some way.

From 638ce3439020f5f3d9b89d37d588aea2eee8a42a Mon Sep 17 00:00:00 2001 From: Alastair Campbell Date: Tue, 24 Apr 2018 23:09:51 +0100 Subject: [PATCH 06/66] Re-doing edits from TPG comment for TPG comment in #694 --- understanding/21/reflow.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 032854d3..e62d062a 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -43,20 +43,22 @@

Mobile devices start smaller, how does that work?

Is the 400% by area or dimension?

It is by dimension, in the same way that Resize Text (Success criterion 1.4.4) is by dimension. Zooming 200% means the width is 200% wider and height is 200% taller.

Does this mean web sites have to be responsive?

-

Using responsive design is the most effective method of achieving the goal of allowing people to zoom in to 400%. For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout.

+

Using responsive design is the most effective method of achieving the goal of allowing people to zoom in to 400%. For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

What happens if sites move/change things at smaller sizes?

So long as the information and functionality are still available that is ok. If some content is hidden behind a show/hide button, or navigation is moved into a drop-down it is still available. (Like the 'hamburger' icon pattern for navigation).

It is possible people might get confused if things move or get hidden, however, the physics demands that something has to move down or be hidden, you cannot make things bigger and fit them in the same space. Also, the people who need it most would typically be zoomed-in when arriving, so may not notice the difference.

However, if content or functionality is removed that would fail this success criteria unless there is a link to the removed content in place of the removed content.

What is the relation to Resize Text?

The focus of the Reflow success criteria is to enable users to zoom in without scrolling in two directions. Resize Text (Success criterion 1.4.4) also applies, so it should be possible to increase the size of all text by at least 200% as well. If text is reduced in size when people zoom in (or for small-screen usage), it should still be possible to get to 200% bigger. For example, if text is set at 20px when the window is 1280px wide, at 200% zoom it should be at least 20px (so 200% larger), but at 400% zoom it could be set to 10px (therefore still 200% larger than the 100% view. It is not required to be 200% larger at every breakpoint, but it should be possible to get 200% large text in some way.

+

Does every variation of the page have to conform?

+

Conformance for WCAG 2.1 is for full pages including variations (at the same URL), so each variation (break point in CSS) should conform. The amount of work involved is greatly reduced if you know what changes happen at each variation.

Examples

Example 1: Responsive Design

-

Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu, and eventually most navigation options are behind a "hamburger" menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling..

+

Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu, and eventually most navigation options are behind a "hamburger" menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling..

From d2305903840dafbcb23e10f1678a18a607f3d2b3 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Thu, 26 Apr 2018 11:14:40 +0200 Subject: [PATCH 07/66] Very minor editorial corrections --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index e62d062a..0c4ed549 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,7 +16,7 @@

Understanding Reflow

Intent

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

-

Many low vision people use the zoom function of their desktop browser to enlarge content because they cannot read content at the default text sizes. Zoomin ginto web pages that support reflow and show 2, 3 or more columns in a typical desktop browser at 100% will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into single menu button so they take up less screen space.

+

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read it at the default text size. Typical web pages that support reflow show 2, 3 or more columns in a desktop browser at 100% (default) scale. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like the navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From 8e135655ca7dd611222388478a86893efba1dda7 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:05:55 +0200 Subject: [PATCH 08/66] Update reflow.html --- understanding/21/reflow.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 0c4ed549..d1adc578 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -14,9 +14,9 @@

Understanding Reflow

-

Intent

+

Intent of this Success Criterion

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

-

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read it at the default text size. Typical web pages that support reflow show 2, 3 or more columns in a desktop browser at 100% (default) scale. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like the navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

+

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. Typical web pages that support reflow show 2, 3 or more columns in a desktop browser at 100% (default) scale. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like the navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From db7b77fb33e7997103275179c8d87437f660d74f Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:08:37 +0200 Subject: [PATCH 09/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index d1adc578..f7130b34 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,7 +16,7 @@

Understanding Reflow

Intent of this Success Criterion

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

-

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. Typical web pages that support reflow show 2, 3 or more columns in a desktop browser at 100% (default) scale. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like the navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

+

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow have two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like the navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From 0f2f70bc7d4fef2c95fe62badcde3d189655d692 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:10:53 +0200 Subject: [PATCH 10/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index f7130b34..474403ef 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,7 +16,7 @@

Understanding Reflow

Intent of this Success Criterion

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

-

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow have two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like the navigation menu or supplementary content, will now typically appear on top of or below the main content. How much content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

+

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much of the content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From 6398af0c0a72c3fedf000489d80c3cf6f6a77582 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:11:28 +0200 Subject: [PATCH 11/66] Update reflow.html --- understanding/21/reflow.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 474403ef..f15abcef 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,7 +16,8 @@

Understanding Reflow

Intent of this Success Criterion

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

-

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much of the content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

+

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

+

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much of the content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From 603b2312f4eee38ac3bb70e2291fb8aa3ecb22aa Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:12:43 +0200 Subject: [PATCH 12/66] Update reflow.html --- understanding/21/reflow.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index f15abcef..18180d31 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -17,7 +17,8 @@

Understanding Reflow

Intent of this Success Criterion

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

-

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content. How much of the content is displayed by default may also change. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

+

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

+

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

From 807171dfb24561ac2452055e64445e8b732e13f4 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:26:50 +0200 Subject: [PATCH 13/66] Update reflow.html --- understanding/21/reflow.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 18180d31..e34c1590 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,7 +15,8 @@

Understanding Reflow

Intent of this Success Criterion

-

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

+

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

+

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

@@ -28,13 +29,13 @@

Intent of this Success Criterion

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

-

Benefits

-

The benefits are primarily for people with low vision. Of the 285 million people worldwide who are visually impaired, 14% are blind and 86% have low vision according to the World Health Organization (WHO). A significant proportion of people with low vision need more than a 200% increase in the size of content. From the WebAIM survey 25% of low vision users indicated needing magnification to 400% or more.

+

Specific Benefits of Success Crtierion 1.4.10

    -
  • A site uses responsive design and when a person zooms-in by over 300% the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.
    • -
  • A PDF is created that conforms to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.
    • +
  • One column view through responsive design
    A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.
    • +
  • PDF offering reflow
    In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.
+

FAQ

Mobile devices start smaller, how does that work?

From 4ac9815dd4d74badf85880e2e5c3eae4dd7c11b9 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:35:58 +0200 Subject: [PATCH 14/66] Update reflow.html --- understanding/21/reflow.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index e34c1590..45522e07 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,15 +15,17 @@

Understanding Reflow

Intent of this Success Criterion

-

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction.

+

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction. Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

-

Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

+ +

Viewing distance and display resolution

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

image showing the size of character needed by viewing distance to make the same image on the retina
In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

+

Exceptions for reflow

Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

From 93e3eb35d374ab8c892e8cd706c7b099f977ce9e Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:36:41 +0200 Subject: [PATCH 15/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 45522e07..5b1e59e9 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -31,7 +31,7 @@

Exceptions for reflow

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

-

Specific Benefits of Success Crtierion 1.4.10

+

Specific Benefits of Success Criterion 1.4.10

  • One column view through responsive design
    A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.
  • PDF offering reflow
    In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.
    • From 4fc7455975aca2152bb895152118c2d1d178fcc8 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:39:02 +0200 Subject: [PATCH 16/66] Update reflow.html --- understanding/21/reflow.html | 1 + 1 file changed, 1 insertion(+) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 5b1e59e9..aab405f4 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -20,6 +20,7 @@

    Intent of this Success Criterion

    Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

    At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

    +

    Avoiding vertical scrolling and hiding content

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

    Viewing distance and display resolution

    From b3a7854911179590fc805f45f7147531a164655e Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:40:00 +0200 Subject: [PATCH 17/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index aab405f4..51e6800a 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -34,7 +34,7 @@

    Exceptions for reflow

    Specific Benefits of Success Criterion 1.4.10

      -
    • One column view through responsive design
      A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.
      • +
    • One column view through responsive design
      A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.
    • PDF offering reflow
      In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.
    From d0eb5a685a34818b7d3803a360adda507ea0fd16 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:47:18 +0200 Subject: [PATCH 18/66] Update reflow.html --- understanding/21/reflow.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 51e6800a..1d3741a0 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -30,6 +30,8 @@

    Exceptions for reflow

    Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

    User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

    +

    Mobile browsers

    +

    While sone mobile user agents offer reflow, the layout method of common browsers in mobile operating systems does not offer reflow in the same way as desktop browsers. On mobile operating systems, content can be magnified in different ways, fr example, by using a pinch gesture to scale content or a double tap to enlarge the chosen column so its width will increase to fi into the viewport width. This means that mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

Specific Benefits of Success Criterion 1.4.10

From dc42b59674fc95a735dd45b43e70dd026519b092 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:52:13 +0200 Subject: [PATCH 19/66] Update reflow.html --- understanding/21/reflow.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 1d3741a0..5ffcf619 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -30,8 +30,8 @@

Exceptions for reflow

Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

-

Mobile browsers

-

While sone mobile user agents offer reflow, the layout method of common browsers in mobile operating systems does not offer reflow in the same way as desktop browsers. On mobile operating systems, content can be magnified in different ways, fr example, by using a pinch gesture to scale content or a double tap to enlarge the chosen column so its width will increase to fi into the viewport width. This means that mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

+

Browsers in mobile operating systems

+

While some mobile user agents (like the Dolphin browser for Android) offer reflow when users zoom into content, the layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

Specific Benefits of Success Criterion 1.4.10

From c7dcccc834c8be3d3266e48d07c806f958de6c80 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 12:57:13 +0200 Subject: [PATCH 20/66] Update reflow.html --- understanding/21/reflow.html | 1 + 1 file changed, 1 insertion(+) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 5ffcf619..9bcb4f4f 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -32,6 +32,7 @@

Exceptions for reflow

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

Browsers in mobile operating systems

While some mobile user agents (like the Dolphin browser for Android) offer reflow when users zoom into content, the layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

+

Note that the Success criterion 1.4.4 Resize Text requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

Specific Benefits of Success Criterion 1.4.10

From 318ef58c890706f0994711bc0619bb841e2f120b Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 13:12:42 +0200 Subject: [PATCH 21/66] Update reflow.html --- understanding/21/reflow.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 9bcb4f4f..dfa44917 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -31,7 +31,8 @@

Exceptions for reflow

Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

Browsers in mobile operating systems

-

While some mobile user agents (like the Dolphin browser for Android) offer reflow when users zoom into content, the layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

+

The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

+

In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent suport issue, not an issue for authors.

Note that the Success criterion 1.4.4 Resize Text requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

From aa42fb358564d6bbb91551309a66840d6fd453c8 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 13:17:20 +0200 Subject: [PATCH 22/66] Update reflow.html --- understanding/21/reflow.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index dfa44917..4970a589 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,9 +15,9 @@

Understanding Reflow

Intent of this Success Criterion

-

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction. Zoom functionality in browsers allows users to increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

- -

Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

+

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction. Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. Zooming in, they can increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

+

How reflow works

+ The concept of reflow is enabled by media queries (in CSS). Media queries were designed to enable reformatting of web content for mobile devices. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Avoiding vertical scrolling and hiding content

From d8ddea8851b08da40a1b36f07f5a695105404f02 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 13:20:51 +0200 Subject: [PATCH 23/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 4970a589..8f4745d3 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,7 +15,7 @@

Understanding Reflow

Intent of this Success Criterion

-

The intent of this Success Criterion is to help people with low vision by allowing the browser zoom function to increase the size of most content to 400% without requiring scrolling in more than one direction. Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. Zooming in, they can increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

+

The intent of this Success Criterion is to enable people with low vision to use the browser zoom to increase the size of most content to 400% so that the content reflows - i.e., that it is presented in a way that sscrolling in more than one direction is not necessary. Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. Zooming in, they can increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

How reflow works

The concept of reflow is enabled by media queries (in CSS). Media queries were designed to enable reformatting of web content for mobile devices. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

From d0f1ebd981bc7f25a63b278b0d631c1edb509165 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 13:30:46 +0200 Subject: [PATCH 24/66] Update reflow.html --- understanding/21/reflow.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 8f4745d3..d8584c9d 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,9 +15,10 @@

Understanding Reflow

Intent of this Success Criterion

-

The intent of this Success Criterion is to enable people with low vision to use the browser zoom to increase the size of most content to 400% so that the content reflows - i.e., that it is presented in a way that sscrolling in more than one direction is not necessary. Many people with low vision use the zoom function of their desktop browser to enlarge content because they cannot read text at the default size. Zooming in, they can increase the size of all content. When appropriately authored, the content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available.

+

The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

How reflow works

- The concept of reflow is enabled by media queries (in CSS). Media queries were designed to enable reformatting of web content for mobile devices. In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

+ When appropriately authored, page content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available. The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

+

In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Avoiding vertical scrolling and hiding content

From 507442c9190e5d9f20bdd021804d61fcbce24bf8 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 13:35:04 +0200 Subject: [PATCH 25/66] Update reflow.html --- understanding/21/reflow.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index d8584c9d..56a9bdfd 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -17,9 +17,9 @@

Understanding Reflow

Intent of this Success Criterion

The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

How reflow works

- When appropriately authored, page content can reflow (wrap) to stay within the windows boundaries (viewport). Spatial relationships can vary, but all information and functionality should continue to be available. The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

-

In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Using the browser zoom function to zoom in will at some point trigger a change of layout, so content will now be displayed in fewer columns.

-

At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

+ When appropriately authored, page content can reflow (wrap) to stay within the windows boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

+

The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

+

In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Avoiding vertical scrolling and hiding content

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

From fb8171c171a68c03c05d976be78f85aed300590c Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 13:35:38 +0200 Subject: [PATCH 26/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 56a9bdfd..67acb1b1 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -17,7 +17,7 @@

Understanding Reflow

Intent of this Success Criterion

The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

How reflow works

- When appropriately authored, page content can reflow (wrap) to stay within the windows boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

+ When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

From 751df7d3be6f8abfa4d3966be492b0d067b04ac8 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:00:39 +0200 Subject: [PATCH 27/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 67acb1b1..cc531a18 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -28,7 +28,7 @@

Viewing distance and display resolution

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

image showing the size of character needed by viewing distance to make the same image on the retina
In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

Exceptions for reflow

-

Certain content cannot be reflowed without losing meaning so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

+

content which requires two-dimensional layout for usage or meaning cannot be reflowed without losing meaning, so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

Browsers in mobile operating systems

From 77a020dc6976eb1f788589039570215e67f3d048 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:02:22 +0200 Subject: [PATCH 28/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index cc531a18..92bfced9 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -21,7 +21,7 @@

How reflow works

The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

-

Avoiding vertical scrolling and hiding content

+

Avoiding scrolling in horizontally and vertically written languages

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

Viewing distance and display resolution

From 6239429ed294f927e51791c212d9d55ceebb49d4 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:09:50 +0200 Subject: [PATCH 29/66] Update reflow.html --- understanding/21/reflow.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 92bfced9..fc4459e7 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,14 +15,14 @@

Understanding Reflow

Intent of this Success Criterion

-

The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

+

The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary. Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because the impact of such scrolling can multiply the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

How reflow works

When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

Avoiding scrolling in horizontally and vertically written languages

-

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling. The impact of horizontal scrolling can increase the effort required to read by 40-100 times, so avoiding scrolling should be the aim whenever feasible. It is also important that content is not hidden off-screen, for example zooming on a vertically scrolling page should not cause content to be hidden to one side.

+

Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

Viewing distance and display resolution

The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

@@ -75,6 +75,7 @@

Example 1: Responsive Design

Resources

    +
  • The impact of horizontal scrolling on reading effort
  • Accessibility Requirements for People with Low Vision.
  • Responsive design resources from MDN Web docs.
  • Responsive web design basics tutorial from Google.
    • From 03101b3eb48a8531d2e473db5c525c3e6a9d9ac3 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:10:32 +0200 Subject: [PATCH 30/66] Update reflow.html --- understanding/21/reflow.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index fc4459e7..6bbe6df8 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,7 +15,8 @@

    Understanding Reflow

    Intent of this Success Criterion

    -

    The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary. Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because the impact of such scrolling can multiply the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

    +

    The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

    +

    Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because the impact of such scrolling can multiply the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

    How reflow works

    When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

    The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

    From 4f8974f02b5ca2b2266a6b6bbbaeeb8d84f43d11 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:12:00 +0200 Subject: [PATCH 31/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 6bbe6df8..77d61099 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -16,7 +16,7 @@

    Understanding Reflow

    Intent of this Success Criterion

    The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

    -

    Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because the impact of such scrolling can multiply the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

    +

    Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

    How reflow works

    When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

    The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

    From d984c8986acc5841fee18b315a036bba334dad43 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:20:43 +0200 Subject: [PATCH 32/66] Update reflow.html --- understanding/21/reflow.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 77d61099..cfc96a9e 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -23,10 +23,10 @@

    How reflow works

    In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

    Avoiding scrolling in horizontally and vertically written languages

    -

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    +

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    desktop

    Viewing distance and display resolution

    -

    The value of "320 CSS pixels" was chosen as a reasonable minimum size that authors can acheive as it lines up with small displays on mobile devices. A browser on a desktop or laptop at 1280px wide and then zoomed in to 400% means the view is then "equivelent to" 320px wide. Many sites currently cater to that range of sizes, and that number will only increase as more sites update to be small-screen friendly.

    +

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can acheive as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels corresponds to a desktop browser window 1280px wide and a zoomed in to 400%.

    image showing the size of character needed by viewing distance to make the same image on the retina
    In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

    Exceptions for reflow

    content which requires two-dimensional layout for usage or meaning cannot be reflowed without losing meaning, so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    From bd389c405db486404780d2759a9bfd5a52fa6761 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:21:39 +0200 Subject: [PATCH 33/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index cfc96a9e..82f2699e 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -23,7 +23,7 @@

    How reflow works

    In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

    Avoiding scrolling in horizontally and vertically written languages

    -

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    desktop +

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    Viewing distance and display resolution

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can acheive as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels corresponds to a desktop browser window 1280px wide and a zoomed in to 400%.

    From f73dcb5aa0f24f4bfecea579cb77c045e93fb10c Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:23:24 +0200 Subject: [PATCH 34/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 82f2699e..e0238522 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -26,7 +26,7 @@

    Avoiding scrolling in horizontally and vertically written languages

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    Viewing distance and display resolution

    -

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can acheive as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels corresponds to a desktop browser window 1280px wide and a zoomed in to 400%.

    +

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window with a with of 1280px and a zoomed in to 400%.

    image showing the size of character needed by viewing distance to make the same image on the retina
    In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

    Exceptions for reflow

    content which requires two-dimensional layout for usage or meaning cannot be reflowed without losing meaning, so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    From 10496a5e83ee42eba8c574e71f9343d024b26eed Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:32:25 +0200 Subject: [PATCH 35/66] Update reflow.html --- understanding/21/reflow.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index e0238522..a2d1769d 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -27,7 +27,10 @@

    Avoiding scrolling in horizontally and vertically written languages

    Viewing distance and display resolution

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window with a with of 1280px and a zoomed in to 400%.

    -

    image showing the size of character needed by viewing distance to make the same image on the retina
    In the image above each vertical line represents a 16px letter. The letter on the retina remains the same size. The same letter is shown as its relative size on a phone, tablet, laptop and desktop. Each device is at a different distance, with the phone being closest and the desktop having the largest viewing distance. Each device has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. This should be 12pt height. When we enlarge on the laptop or desktop, the resolution goes down hence the 16px letter at low resolution will cast a bigger image on the retina at the same distance. 320px is about 400% or a little larger.

    +

    image showing the size of character needed by viewing distance to make the same image on the retina

    +

    Different displays are used at different viewing distances as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance. In the image above each vertical line shall represent a 16px letter. The letter on the retina remains the same size een though the absolute size on the different displays (phone, tablet, laptop and desktop) is different. Each of these devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the leter will go up, causing 16px letter to cast a bigger image on the retina at the same distance.

    + +

    Exceptions for reflow

    content which requires two-dimensional layout for usage or meaning cannot be reflowed without losing meaning, so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

    From fc7edfdfd4267dfdda1a7c10596a900058874f29 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:34:38 +0200 Subject: [PATCH 36/66] Update reflow.html --- understanding/21/reflow.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index a2d1769d..c32b7cff 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -27,7 +27,9 @@

    Avoiding scrolling in horizontally and vertically written languages

    Viewing distance and display resolution

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window with a with of 1280px and a zoomed in to 400%.

    -

    image showing the size of character needed by viewing distance to make the same image on the retina

    +
    image showing the size of character needed by viewing distance to make the same image on the retina +
    Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions
    +

    Different displays are used at different viewing distances as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance. In the image above each vertical line shall represent a 16px letter. The letter on the retina remains the same size een though the absolute size on the different displays (phone, tablet, laptop and desktop) is different. Each of these devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the leter will go up, causing 16px letter to cast a bigger image on the retina at the same distance.

    From 941f1fe6923f0d3e97f664fe86799d680abd50df Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:37:31 +0200 Subject: [PATCH 37/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index c32b7cff..3a9c0a56 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -30,7 +30,7 @@

    Viewing distance and display resolution

    image showing the size of character needed by viewing distance to make the same image on the retina
    Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions
    -

    Different displays are used at different viewing distances as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance. In the image above each vertical line shall represent a 16px letter. The letter on the retina remains the same size een though the absolute size on the different displays (phone, tablet, laptop and desktop) is different. Each of these devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance with the recommended screen resolution. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the leter will go up, causing 16px letter to cast a bigger image on the retina at the same distance.

    +

    Different displays are used at different viewing distances as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In fig. 1 above, each vertical line shall represent a 16px letter. The letter on the retina remains the same size even though the absolute size of the letter shown on different displays (phone, tablet, laptop and desktop) is different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

    Exceptions for reflow

    From de1d445c8e101885e0a6113043c8fc33b4f61ca1 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:41:55 +0200 Subject: [PATCH 38/66] Update reflow.html --- understanding/21/reflow.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 3a9c0a56..51ea38a4 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -26,11 +26,11 @@

    Avoiding scrolling in horizontally and vertically written languages

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    Viewing distance and display resolution

    -

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window with a with of 1280px and a zoomed in to 400%.

    +

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window having a width of 1280px and a zoomed in to 400%.

    image showing the size of character needed by viewing distance to make the same image on the retina
    Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions
    -

    Different displays are used at different viewing distances as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In fig. 1 above, each vertical line shall represent a 16px letter. The letter on the retina remains the same size even though the absolute size of the letter shown on different displays (phone, tablet, laptop and desktop) is different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

    +

    Different types of display are typically used at different viewing distances, as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In fig. 1 above, each vertical line shall represent a 16px letter. The letter on the retina remains the same size even though the absolute size of the letter shown on different displays (phone, tablet, laptop and desktop) is different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

    Exceptions for reflow

    From 55bfcf6d64355f85523ec3fb556c032e801cfb93 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:51:58 +0200 Subject: [PATCH 39/66] Update reflow.html --- understanding/21/reflow.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 51ea38a4..981fc3c3 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -22,8 +22,7 @@

    How reflow works

    The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

    In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

    -

    Avoiding scrolling in horizontally and vertically written languages

    -

    Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    +

    Viewing distance and display resolution

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window having a width of 1280px and a zoomed in to 400%.

    @@ -41,11 +40,15 @@

    Browsers in mobile operating systems

    The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

    In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent suport issue, not an issue for authors.

    Note that the Success criterion 1.4.4 Resize Text requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

    + +

    Avoiding scrolling in horizontally and vertically written languages

    +

    The success Criterion applies to both horizontally and verticaly written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    +

    Specific Benefits of Success Criterion 1.4.10

      -
    • One column view through responsive design
      A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.
      • +
    • One column view in responsive design
      A site uses responsive design. When a person zooms in to over 300%, the layout is reflowed to one column. The user can read the content easily and does not have to scroll sideways to read.
    • PDF offering reflow
      In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.
    From 8a8c9c4b11e8232fde92f992ec29d6bd69049a4b Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 14:52:47 +0200 Subject: [PATCH 40/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 981fc3c3..43b12422 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -33,7 +33,7 @@

    Viewing distance and display resolution

    Exceptions for reflow

    -

    content which requires two-dimensional layout for usage or meaning cannot be reflowed without losing meaning, so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    +

    Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

    User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

    Browsers in mobile operating systems

    From 492043f449a95008c956a700a23dd22460d4ec7f Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:00:52 +0200 Subject: [PATCH 41/66] Update reflow.html --- understanding/21/reflow.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 43b12422..68b1772a 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -18,7 +18,7 @@

    Intent of this Success Criterion

    The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

    Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

    How reflow works

    - When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

    + User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

    The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

    In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

    @@ -31,15 +31,14 @@

    Viewing distance and display resolution

    Different types of display are typically used at different viewing distances, as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In fig. 1 above, each vertical line shall represent a 16px letter. The letter on the retina remains the same size even though the absolute size of the letter shown on different displays (phone, tablet, laptop and desktop) is different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

    -

    Exceptions for reflow

    -

    Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, so there is an exception for that type of content. For example, graphics and video are by their nature two dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    -

    Complex data tables have a two-dimensional relationship between the headings and data cells. As that relationship is essential to convey the content, this success criteria does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content, and the toolbar in the viewport. Given enough buttons, that toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

    -

    User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport).

    +

    Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    +

    Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This success criteria therefore does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

    +

    Browsers in mobile operating systems

    The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

    In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent suport issue, not an issue for authors.

    -

    Note that the Success criterion 1.4.4 Resize Text requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

    +

    Note that the Success criterion 1.4.4 "Resize Text" requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

    Avoiding scrolling in horizontally and vertically written languages

    The success Criterion applies to both horizontally and verticaly written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    From 39b9d20360fcc2e0e3cc4bb287932088876379a4 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:10:07 +0200 Subject: [PATCH 42/66] Update reflow.html --- understanding/21/reflow.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 68b1772a..901815f7 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -22,10 +22,9 @@

    How reflow works

    The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

    In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

    - -

    Viewing distance and display resolution

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window having a width of 1280px and a zoomed in to 400%.

    +

    400% applies to the dimension, not the area. It means four times the default width and four times the default height.

    image showing the size of character needed by viewing distance to make the same image on the retina
    Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions
    @@ -39,7 +38,8 @@

    Browsers in mobile operating systems

    The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

    In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent suport issue, not an issue for authors.

    Note that the Success criterion 1.4.4 "Resize Text" requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

    - +

    Responsive web design and other ways to meet thi Success Criterion

    +

    Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

    Avoiding scrolling in horizontally and vertically written languages

    The success Criterion applies to both horizontally and verticaly written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    From 57689c0934d4d18909a89e763bb68120e76a7766 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:22:10 +0200 Subject: [PATCH 43/66] Update reflow.html --- understanding/21/reflow.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 901815f7..0c30d60c 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -21,7 +21,9 @@

    How reflow works

    User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

    The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

    In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    -

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button so they take up less screen space.

    +

    Visibility and availability of content

    +

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

    +

    The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.

    Viewing distance and display resolution

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window having a width of 1280px and a zoomed in to 400%.

    400% applies to the dimension, not the area. It means four times the default width and four times the default height.

    From d8a592ba0ddbcb8661a8982ab072be17ad584d9c Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:27:56 +0200 Subject: [PATCH 44/66] Update reflow.html --- understanding/21/reflow.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 0c30d60c..5b70045e 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -22,10 +22,10 @@

    How reflow works

    The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

    In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

    Visibility and availability of content

    -

    How much of the content is displayed by default may also change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

    +

    How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

    The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.

    Viewing distance and display resolution

    -

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window having a width of 1280px and a zoomed in to 400%.

    +

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window having a width of 1280px and zoomed in to 400%.

    400% applies to the dimension, not the area. It means four times the default width and four times the default height.

    image showing the size of character needed by viewing distance to make the same image on the retina
    Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions
    @@ -44,6 +44,9 @@

    Responsive web design and other ways to meet thi Success Criterion

    Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

    Avoiding scrolling in horizontally and vertically written languages

    The success Criterion applies to both horizontally and verticaly written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

    + +

    The relation of Reflow to the Success Criterion 1.4.4 Resize Text

    +

    The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. The Resize Text (Success criterion 1.4.4) also applies, so it should be possible to increase the size of all text by at least 200% as well. If text is reduced in size when people zoom in (or for small-screen usage), it should still be possible to get to 200% bigger. For example, if text is set at 20px when the window is 1280px wide, at 200% zoom it should be at least 20px (so 200% larger), but at 400% zoom it could be set to 10px (therefore still 200% larger than the 100% view. It is not required to be 200% larger at every breakpoint, but it should be possible to get 200% large text in some way.

@@ -69,8 +72,7 @@

What happens if sites move/change things at smaller sizes?

So long as the information and functionality are still available that is ok. If some content is hidden behind a show/hide button, or navigation is moved into a drop-down it is still available. (Like the 'hamburger' icon pattern for navigation).

It is possible people might get confused if things move or get hidden, however, the physics demands that something has to move down or be hidden, you cannot make things bigger and fit them in the same space. Also, the people who need it most would typically be zoomed-in when arriving, so may not notice the difference.

However, if content or functionality is removed that would fail this success criteria unless there is a link to the removed content in place of the removed content.

-

What is the relation to Resize Text?

-

The focus of the Reflow success criteria is to enable users to zoom in without scrolling in two directions. Resize Text (Success criterion 1.4.4) also applies, so it should be possible to increase the size of all text by at least 200% as well. If text is reduced in size when people zoom in (or for small-screen usage), it should still be possible to get to 200% bigger. For example, if text is set at 20px when the window is 1280px wide, at 200% zoom it should be at least 20px (so 200% larger), but at 400% zoom it could be set to 10px (therefore still 200% larger than the 100% view. It is not required to be 200% larger at every breakpoint, but it should be possible to get 200% large text in some way.

+

Does every variation of the page have to conform?

Conformance for WCAG 2.1 is for full pages including variations (at the same URL), so each variation (break point in CSS) should conform. The amount of work involved is greatly reduced if you know what changes happen at each variation.

From b3251e43d8ef28d95d0e3a9c70c119d9b485cfa9 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:32:55 +0200 Subject: [PATCH 45/66] Update reflow.html --- understanding/21/reflow.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 5b70045e..02c55e7e 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -41,7 +41,8 @@

Browsers in mobile operating systems

In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent suport issue, not an issue for authors.

Note that the Success criterion 1.4.4 "Resize Text" requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

Responsive web design and other ways to meet thi Success Criterion

-

Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

+

Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare Conformance for WCAG 2.1).

+

For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

Avoiding scrolling in horizontally and vertically written languages

The success Criterion applies to both horizontally and verticaly written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

@@ -72,9 +73,8 @@

What happens if sites move/change things at smaller sizes?

So long as the information and functionality are still available that is ok. If some content is hidden behind a show/hide button, or navigation is moved into a drop-down it is still available. (Like the 'hamburger' icon pattern for navigation).

It is possible people might get confused if things move or get hidden, however, the physics demands that something has to move down or be hidden, you cannot make things bigger and fit them in the same space. Also, the people who need it most would typically be zoomed-in when arriving, so may not notice the difference.

However, if content or functionality is removed that would fail this success criteria unless there is a link to the removed content in place of the removed content.

- -

Does every variation of the page have to conform?

-

Conformance for WCAG 2.1 is for full pages including variations (at the same URL), so each variation (break point in CSS) should conform. The amount of work involved is greatly reduced if you know what changes happen at each variation.

+ +

Examples

From 790a7b85e4861253829841431e023035edc77c8f Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:33:34 +0200 Subject: [PATCH 46/66] Update reflow.html --- understanding/21/reflow.html | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 02c55e7e..1b4497d6 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -57,24 +57,7 @@

Specific Benefits of Success Criterion 1.4.10

  • PDF offering reflow
    In a PDF created to conform to PDF/Universal Accessibility (ISO 14289), the content can be reflowed and zoomed in to make reading possible for someone with low-vision.
    • - -
    -

    FAQ

    -

    Mobile devices start smaller, how does that work?

    -

    The main principle here is that the web content must be capable of resizing. It is not a device-specific issue. Starting with a desktop browser at 1280px wide and zooming 400% provides a mobile view of 320 px. This works in desktop/laptop browsers.

    -

    The whole concept is enabled by media queries (in CSS), which were designed to enable reformatting for mobile devices. However, the physics of the smaller screens means that expanding text and/or other content is more constrained. The layout method browsers use on small screen devices does not reflow in the same way, it magnifies (e.g. with pinch-zoom) and causes horizontal scrolling regardless of what an author does.

    -

    Note that the Resize Text (Success criterion 1.4.4) still applies so there should still be a method of increasing the text-size on smaller screen devices, even if it causes scrolling.

    -

    For content that is of a fixed ratio (video, images etc) they come under the "require two-dimensional layout" exception. In practice they can expand up to the width (and/or height) of the viewport, and be limited to that.

    -

    Is the 400% by area or dimension?

    -

    It is by dimension, in the same way that Resize Text (Success criterion 1.4.4) is by dimension. Zooming 200% means the width is 200% wider and height is 200% taller.

    -

    Does this mean web sites have to be responsive?

    -

    Using responsive design is the most effective method of achieving the goal of allowing people to zoom in to 400%. For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

    -

    What happens if sites move/change things at smaller sizes?

    -

    So long as the information and functionality are still available that is ok. If some content is hidden behind a show/hide button, or navigation is moved into a drop-down it is still available. (Like the 'hamburger' icon pattern for navigation).

    -

    It is possible people might get confused if things move or get hidden, however, the physics demands that something has to move down or be hidden, you cannot make things bigger and fit them in the same space. Also, the people who need it most would typically be zoomed-in when arriving, so may not notice the difference.

    -

    However, if content or functionality is removed that would fail this success criteria unless there is a link to the removed content in place of the removed content.

    - - +

    Examples

    From 59027a8f48dc647f57052e52d4437fc803493512 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:34:29 +0200 Subject: [PATCH 47/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 1b4497d6..8f8e1828 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -32,7 +32,7 @@

    Viewing distance and display resolution

    Different types of display are typically used at different viewing distances, as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In fig. 1 above, each vertical line shall represent a 16px letter. The letter on the retina remains the same size even though the absolute size of the letter shown on different displays (phone, tablet, laptop and desktop) is different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

    -

    Exceptions for reflow

    +

    Content exceptions for reflow

    Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This success criteria therefore does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

    From 68e9dd12282e92a8ce54575f385725e1d17b4d4a Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:36:42 +0200 Subject: [PATCH 48/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 8f8e1828..55c41aa2 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -30,7 +30,7 @@

    Viewing distance and display resolution

    image showing the size of character needed by viewing distance to make the same image on the retina
    Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions
    -

    Different types of display are typically used at different viewing distances, as shown in fig. 1. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In fig. 1 above, each vertical line shall represent a 16px letter. The letter on the retina remains the same size even though the absolute size of the letter shown on different displays (phone, tablet, laptop and desktop) is different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

    +

    Different types of display are typically used at different viewing distances. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In Fig. 1 above, each vertical line shall represent a 16px letter. The letter projected onto the retina remains the same size even though the absolute size of the letter on different displays (phone, tablet, laptop and desktop) is quite different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

    Content exceptions for reflow

    Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    From de43756542071032dc1a81d371a2f69a21856053 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:39:09 +0200 Subject: [PATCH 49/66] Update reflow.html --- understanding/21/reflow.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 55c41aa2..62411be9 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -25,8 +25,7 @@

    Visibility and availability of content

    How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

    The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.

    Viewing distance and display resolution

    -

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve as it lines up with the viewport of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window having a width of 1280px and zoomed in to 400%.

    -

    400% applies to the dimension, not the area. It means four times the default width and four times the default height.

    +

    The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.

    image showing the size of character needed by viewing distance to make the same image on the retina
    Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions
    From c11d7125e95d317fb11cbc358c4da9981157c236 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:41:48 +0200 Subject: [PATCH 50/66] Update reflow.html --- understanding/21/reflow.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 62411be9..d51df746 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -33,7 +33,8 @@

    Viewing distance and display resolution

    Content exceptions for reflow

    Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

    -

    Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This success criteria therefore does not apply to data tables. Lastly, interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g. horizontally in a vertically scrolling page).

    +

    Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This success criteria therefore does not apply to data tables.

    +

    Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page).

    Browsers in mobile operating systems

    The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

    From 2d7803e18934234dbc1d81fe39fbf45d7ed8ba4e Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:45:15 +0200 Subject: [PATCH 51/66] Update reflow.html --- understanding/21/reflow.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index d51df746..d77c83b9 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -37,8 +37,8 @@

    Content exceptions for reflow

    Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page).

    Browsers in mobile operating systems

    -

    The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, fr example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

    -

    In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent suport issue, not an issue for authors.

    +

    The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, for example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

    +

    In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent support issue.

    Note that the Success criterion 1.4.4 "Resize Text" requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

    Responsive web design and other ways to meet thi Success Criterion

    Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare Conformance for WCAG 2.1).

    From 6f0f748229f201eff31027109314a107ac236efc Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:45:55 +0200 Subject: [PATCH 52/66] Update reflow.html --- understanding/21/reflow.html | 1 - 1 file changed, 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index d77c83b9..bab84977 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -39,7 +39,6 @@

    Content exceptions for reflow

    Browsers in mobile operating systems

    The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, for example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

    In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent support issue.

    -

    Note that the Success criterion 1.4.4 "Resize Text" requires that users have some way of increasing the text-size on smaller screen devices to 200%, even if it causes scrolling.

    Responsive web design and other ways to meet thi Success Criterion

    Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare Conformance for WCAG 2.1).

    For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

    From 93276c4909d3802e098caa40fbb359c0ebd30024 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:47:08 +0200 Subject: [PATCH 53/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index bab84977..ee39f64a 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -63,7 +63,7 @@

    Examples

    Example 1: Responsive Design

    -

    Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu, and eventually most navigation options are behind a "hamburger" menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling..

    +

    Note that as the zoom percentage increases, the navigation changes first to hide options behind a "More" dropdown menu. As zooming continues, most navigation options are eventually behind a "hamburger" menu button. All the information and functionality is still available from this web page. There is no horizontal scrolling.

    From b598a964a4b6d39cce683b3fe2c8d4783e453f06 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:48:35 +0200 Subject: [PATCH 54/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index ee39f64a..22d8a377 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -69,7 +69,7 @@

    Example 1: Responsive Design

    Resources

      -
    • The impact of horizontal scrolling on reading effort +
    • Operational Overhead Caused by Horizontal Scrolling Text by Wayne Dick, 2017. The study shows the impact of horizontal scrolling on reading effort.
    • Accessibility Requirements for People with Low Vision.
    • Responsive design resources from MDN Web docs.
    • Responsive web design basics tutorial from Google.
      • From bed1fe474df6e50b532ac4562fd138e8ea40de09 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:51:28 +0200 Subject: [PATCH 55/66] Update reflow.html --- understanding/21/reflow.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 22d8a377..ed8a4cfa 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -69,8 +69,8 @@

      Example 1: Responsive Design

      Resources

      From 174383503333dfe0cc45a39bdba23f19b57999ac Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:53:18 +0200 Subject: [PATCH 56/66] Update reflow.html --- understanding/21/reflow.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index ed8a4cfa..63318052 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -71,12 +71,12 @@

      Resources

      -

      Techniques

      +

      Techniques for Success Criterion 1.4.10 Reflow

      Sufficient

        From 0bffac817009a767334b83f2df263b9820cbd486 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:54:10 +0200 Subject: [PATCH 57/66] Update reflow.html --- understanding/21/reflow.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 63318052..9c693e09 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -78,7 +78,7 @@

        Resources

        Techniques for Success Criterion 1.4.10 Reflow

        -

        Sufficient

        +

        Sufficient Techniques

        -

        Advisory

        +

        Advisory Techniques

        • CSS, Fitting images to the viewport;
        • CSS, Reflowing simple data tables.
          • @@ -99,7 +99,7 @@

          Advisory

        -

        Failure

        +

        Failures

        • @@ Using fixed sized containers and fixed position content (CSS)
        • @@ "Interfering with a user agent's ability to zoom" i.e., author using: maximum-scale or minimum-scale or user-scalable=no or user-scalable=0 in the meta element ?? @@ Note: In Pinch zoom thread on the WCAG list people did not seem to be in favor of this as a failure.
          • From 540ce77655fc13265e9262569696c1d2a27d9027 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:55:12 +0200 Subject: [PATCH 58/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 9c693e09..5e34f372 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -76,7 +76,7 @@

          Resources

        -

        Techniques for Success Criterion 1.4.10 Reflow

        +

        Techniques for Success Criterion 1.4.10: Reflow

        Sufficient Techniques

          From d389b0dd2bc430c7abf12863a9baf61c538a7309 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:56:24 +0200 Subject: [PATCH 59/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 5e34f372..12aa14c7 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -15,7 +15,7 @@

          Understanding Reflow

          Intent of this Success Criterion

          -

          The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to increase the size of content to 400%, the content reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

          +

          The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

          Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

          How reflow works

          User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

          From 64a0ee5965702afdcc17747a5eb57568ed907344 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 15:57:57 +0200 Subject: [PATCH 60/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 12aa14c7..7c49c869 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -18,7 +18,7 @@

          Intent of this Success Criterion

          The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.

          Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

          How reflow works

          - User agents for technologies such as HTML/CSS, PDF and ePub have methods of reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

          + User agents for technologies such as HTML/CSS, PDF and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

          The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

          In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

          Visibility and availability of content

          From 2cabc187217bb2aa77ca560417b192d88539581c Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 16:01:50 +0200 Subject: [PATCH 61/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 7c49c869..0afb5117 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -19,7 +19,7 @@

          Intent of this Success Criterion

          Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

          How reflow works

          User agents for technologies such as HTML/CSS, PDF and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

          -

          The concept of reflow is enabled by CSS media queries which were designed to enable reformatting of web content for mobile devices.

          +

          Supporting the reflow of content is also known as Responsive Web Design. It is enabled by CSS media queries which reformat the web content for different viewport widths in order to provide adapted layouts for mobile devices such as tablets or smartphones.

          In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

          Visibility and availability of content

          How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

          From ec0bff3f8a5dfb9dd9cb02cdfc2c481661d2a8b9 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 16:04:51 +0200 Subject: [PATCH 62/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 0afb5117..7d832b93 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -19,7 +19,7 @@

          Intent of this Success Criterion

          Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

          How reflow works

          User agents for technologies such as HTML/CSS, PDF and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

          -

          Supporting the reflow of content is also known as Responsive Web Design. It is enabled by CSS media queries which reformat the web content for different viewport widths in order to provide adapted layouts for mobile devices such as tablets or smartphones.

          +

          Supporting the reflow of content is also known as Responsive Web Design. It is enabled by CSS media queries which reformat the web content for different viewport widths in order to provide adapted layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.

          In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

          Visibility and availability of content

          How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

          From 8cac5d65525e4eacc096c074bb76353e9d0b87e3 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 16:05:38 +0200 Subject: [PATCH 63/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 7d832b93..9371daf9 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -39,7 +39,7 @@

          Content exceptions for reflow

          Browsers in mobile operating systems

          The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, for example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.

          In principle, mobile user agents can equally offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of reflow support in mobile operating systems can therefore be regarded as a user agent support issue.

          -

          Responsive web design and other ways to meet thi Success Criterion

          +

          Responsive web design and other ways to meet this Success Criterion

          Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare Conformance for WCAG 2.1).

          For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.

          Avoiding scrolling in horizontally and vertically written languages

          From 5c2ed9f6e54aa3407de4875f19cbca2fc0bba16d Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 16:08:41 +0200 Subject: [PATCH 64/66] Update reflow.html --- understanding/21/reflow.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 9371daf9..a4b5f36f 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -19,7 +19,7 @@

          Intent of this Success Criterion

          Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling signiicantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.

          How reflow works

          User agents for technologies such as HTML/CSS, PDF and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

          -

          Supporting the reflow of content is also known as Responsive Web Design. It is enabled by CSS media queries which reformat the web content for different viewport widths in order to provide adapted layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.

          +

          Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.

          In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

          Visibility and availability of content

          How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

          From e6d3b8d98e14fd0dc6bc353bda8b67e140fcd720 Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 16:12:22 +0200 Subject: [PATCH 65/66] Update reflow.html --- understanding/21/reflow.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index a4b5f36f..ad8a31a9 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -21,15 +21,16 @@

          How reflow works

          User agents for technologies such as HTML/CSS, PDF and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.

          Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.

          In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.

          -

          Visibility and availability of content

          -

          How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

          -

          The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.

          -

          Viewing distance and display resolution

          +

          Viewing distance and display resolution

          The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.

          image showing the size of character needed by viewing distance to make the same image on the retina
          Fig. 1: A letter of the same CSS pixel size on different displays with different resolutions

          Different types of display are typically used at different viewing distances. What counts is not the absolute size of text, but the relative size depending on the viewing distance and display resolution. In Fig. 1 above, each vertical line shall represent a 16px letter. The letter projected onto the retina remains the same size even though the absolute size of the letter on different displays (phone, tablet, laptop and desktop) is quite different. Each of the devices has a different recommended resolution, but all should cast the same image height on the retina of the eye at the intended viewing distance. When users enlarge content on the laptop or desktop, the resolution goes down. By the same token, the absolute size of the letter will go up, causing the 16px letter to cast a bigger image on the retina at the same distance.

          +

          Visibility and availability of content

          +

          How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.

          +

          The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.

          +

          Content exceptions for reflow

          Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

          From 8843b63f1a2386d560ac0c887452f4c52cc87ada Mon Sep 17 00:00:00 2001 From: Detlev Fischer Date: Tue, 1 May 2018 16:14:27 +0200 Subject: [PATCH 66/66] Update reflow.html --- understanding/21/reflow.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index ad8a31a9..359b6b4c 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -34,8 +34,8 @@

          Visibility and availability of content

          Content exceptions for reflow

          Content which requires two-dimensional layout for usage or meaning cannot reflow without losing meaning, and is therefore out of scope of this Success Criterion. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable so that is out of scope. However, it is possible to have these elements stay within the bounds of viewport at zoom levels to 400% (see advisory techniques).

          -

          Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This success criteria therefore does not apply to data tables.

          -

          Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page).

          +

          Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore does not apply to data tables.

          +

          Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text (e.g., horizontally in a vertically scrolling page). This Success Criterion therefore does not apply to interfaces which provide toolbars.

          Browsers in mobile operating systems

          The layout method of most common browsers in mobile operating systems does not offer reflow in the same way as on desktop browsers. In these browsers, content can be magnified in different ways, for example, by using a pinch gesture to scale up content, or a double tap on a particular column to make it fill the viewport width. This means that currently, mobile browsers usually exhibit horizontal scrolling regardless of what an author does.