Merge pull request #66 from readium/develop

Improve a11y of docs

Author: JayPanoz

docs/CSS03-injection_and_pagination.md

@@ -84,13 +84,13 @@ The spread will consequently switch to a single page once the user sets a `font-
 
 The following illustrations are the two models you’ll have to deal with.
 
-![Single Page Model](assets/Page-Model.jpg)
+![The single page model relies on the column width of the :root element. Line-length is constrained by the max-width of the body element, including its padding. Finally an auto margin centers the content.](assets/Page-Model.jpg)
 
 A single page is just a column which can grow to the entire width of the web view/iframe since it is declared for `html`.
 
 Page margins are part of `body`, hence `--RS__maxLineLength`. Contents are centered using the `auto` value for `body` margins.
 
-![Two-Column Spread Model](assets/spread-model.jpg)
+![The two-column spread model is somehow simpler in the sense the column width is the minimum value that must be reached for this model to be applied. We are relying on left and right padding instead of column-gap for gutters.](assets/spread-model.jpg)
 
 In the spread model, i.e. two columns, the `--RS__colWidth` is a floor: once the minimum width available (viewport) can’t contain 2 columns (the value is computed from the `font-size` user setting), we switch to the single page model.
 
@@ -218,7 +218,7 @@ Indeed, columns are automatically laid out on the `y-axis` (vertical) with such
 
 We consequently use a “Fragmented Model”, as it differs significantly from the “Pagination Model”, especially the column-axis.
 
-![Fragmented Model](assets/Fragmented-Model.jpg)
+![The fragmented Model is kind of a superset of the single page model in the vertical direction, with extra padding added to the root element for extra horizontal gutters.](assets/Fragmented-Model.jpg)
 
 One can think of the fragmented model as the single page model rotated 90% clockwise. The only difference is that `padding` is added to the `:root` (`html`) element so that text doesn’t run from edge to edge.
 

docs/CSS08-defaults.md

@@ -182,7 +182,7 @@ In which, `--RS__lineHeightCompensation` is a factor whose default is `1`. Indee
 
 The results we could get for the vast majority of fonts can be described as good in terms of typographic color. Here is Iowan Old Style for instance.
 
-![Iowan Old Style dynamic leading](assets/dynamic-leading.jpg)
+![Comparison of the algorithm using four different font-sizes with the Iowan Old Style typeface. We can notice that the leading applied is solider as font-size increases, which results in a relatively even distribution of typographic color. This is confirmed by the computed values retrieved in the tool ReadiumCSS provides for testing.](assets/dynamic-leading.jpg)
 
 This isn’t a perfect solution though, and this algorithm may be revisited in the future.
 

docs/CSS10-libre_fonts.md

@@ -117,7 +117,7 @@ An extended selection of 12 typefaces are recommended to offer implementers some
 
 #### Charis SIL
 
-![Charis SIL](assets/charis-sil.png)
+![Charis SIL compared to Charter. The typeface appears a little bit bolder but shares Charter’s metrics. When comparing an entire paragraph, it is really hard to tell which is which as they originate from the same “master.”](assets/charis-sil.png)
 
 Global info:
 
@@ -143,7 +143,7 @@ OpenType Features: none.
 
 #### Faustina
 
-![Faustina](assets/faustina.png)
+![Faustina compared to Charter. The typeface looks smaller and feels definitely condensed. When comparing an entire paragraph, the fact its x-height is larger becomes really visible as it allows for a shorter line-length while appearing larger in weight. Those specificities may help on narrow screens.](assets/faustina.png)
 
 Global info:
 
@@ -169,7 +169,7 @@ OpenType Features: none.
 
 #### IBM Plex Serif
 
-![IBM Plex Serif](assets/plex-serif.png)
+![IBM Plex Serif compared to Charter. The typeface is definitely wider, larger and bolder. When comparing an entire paragraph, this become obvious in the sense fewer words fit on a line. This could become an advantage on larger screens, as the user won’t have to increase font-size.](assets/plex-serif.png)
 
 Global info:
 
@@ -195,7 +195,7 @@ OpenType Features: none.
 
 #### Merriweather
 
-![Merriweather](assets/merriweather.png)
+![Merriweather compared to Iowan Old Style. Although more condensed, the typeface has been designed for screens and offers a larger x-height and bolder strokes. This shows when comparing an entire paragraph, as fewer words fit on a line and an extra line is even created.](assets/merriweather.png)
 
 Global info:
 
@@ -221,7 +221,7 @@ OpenType Features: none.
 
 #### PT Serif
 
-![PT Serif](assets/pt-serif.png)
+![PT Serif compared to Charter. The typeface looks slightly larger and makes for a sharper substitute. When comparing an entire paragraph, it is visibly larger but fits the same amount of words on each line.](assets/pt-serif.png)
 
 Global info:
 
@@ -247,7 +247,7 @@ OpenType Features: none.
 
 #### Vollkorn
 
-![Vollkorn](assets/vollkorn.png)
+![Vollkorn compared to Bembo (ET variant). The typeface is significantly larger and bolder; its vertical alignement is also a lot lower. When comparing an entire paragraph, those traits become obvious and offer a better design for reading on screens.](assets/vollkorn.png)
 
 Global info:
 
@@ -275,7 +275,7 @@ OpenType Features: small caps, numeric figure values, numeric spacing values (an
 
 #### Clear Sans
 
-![Clear Sans](assets/clear-sans.png)
+![Clear Sans compared to Trebuchet MS. The typeface appears a little bit smaller and the aperture of some glyphs like lowercase D appear more enclosed. When comparing an entire paragraph, it feels a little bit smaller but some letters like capital I are easier to differentiate, which is a plus for accessibility.](assets/clear-sans.png)
 
 Global info:
 
@@ -301,7 +301,7 @@ OpenType Features: none.
 
 #### Fira Sans
 
-![Fira Sans](assets/fira-sans.png)
+![Fira Sans compared to Arial. The typeface is decidedly more condensed, and its letter-spacing larger. When comparing an entire paragraph, the metrics of both fonts don’t look that much different, but Fira Sans brings the extra personality some users require in a bookish context.](assets/fira-sans.png)
 
 Global info:
 
@@ -327,7 +327,7 @@ OpenType Features: none.
 
 #### Libre Franklin
 
-![Libre Franklin](assets/libre-franklin.png)
+![Libre Franklin compared to San Fransisco, the Apple’s system typeface. Libre Franklin appears a little bit thinner and feels definitely larger. When comparing an entire paragraph, it shows, although it is capable of keeping the same amount of words on each line.](assets/libre-franklin.png)
 
 Global info:
 
@@ -353,7 +353,7 @@ OpenType Features: none.
 
 #### Merriweather Sans
 
-![Merriweather Sans](assets/merriweather-sans.png)
+![Merriweather Sans compared to San Fransisco, the Apple’s system typeface. It appears bolder and feels decidedly larger. This is remarkable when comparing an entire paragraph, especially as its design is less neutral.](assets/merriweather-sans.png)
 
 Global info:
 
@@ -379,7 +379,7 @@ OpenType Features: none.
 
 #### PT Sans
 
-![PT Sans](assets/pt-sans.png)
+![PT Sans compared to Seravek. The typeface appears more condensed. When comparing an entire paragraph, it also feels a little bit thinner but fits the same amount of words on each line and share some of Seravek’s traits.](assets/pt-sans.png)
 
 Global info:
 
@@ -405,7 +405,7 @@ OpenType Features: none.
 
 #### Source Sans Pro
 
-![Source Sans Pro](assets/source-sans-pro.png)
+![Source Sans Pro compared to Seravek. Its x-height is noticeably – but not remarkably – larger. When comparing an entire paragraph, both feel like they share some common traits, despite very visible differences in the drawing of their glyphs.](assets/source-sans-pro.png)
 
 Global info:
 

docs/ReadiumCSS_docs.epub

@@ -127,15 +127,15 @@
         <p>The following illustrations are the two models you’ll have to deal with.</p>
 
         <figure class="fullbleed">
-          <img src="../Images/Page-Model.jpg" alt="Single Page Model"/>
+          <img src="../Images/Page-Model.jpg" alt="The single page model relies on the column width of the :root element. Line-length is constrained by the max-width of the body element, including its padding. Finally an auto margin centers the content."/>
         </figure>
 
         <p>A single page is just a column which can grow to the entire width of the web view/iframe since it is declared for <code>html</code>.</p>
 
         <p>Page margins are part of <code>body</code>, hence <code>--RS__maxLineLength</code>. Contents are centered using the <code>auto</code> value for <code>body</code> margins.</p>
 
         <figure class="fullbleed">
-          <img src="../Images/spread-model.jpg" alt="Two-Column Spread Model"/>
+          <img src="../Images/spread-model.jpg" alt="The two-column spread model is somehow simpler in the sense the column width is the minimum value that must be reached for this model to be applied. We are relying on left and right padding instead of column-gap for gutters."/>
         </figure>
 
         <p>In the spread model, i.e. two columns, the <code>--RS__colWidth</code> is a floor: once the minimum width available (viewport) can’t contain 2 columns (the value is computed from the <code>font-size</code> user setting), we switch to the single page model.</p>
@@ -346,7 +346,7 @@ body {
         <p>We consequently use a “Fragmented Model”, as it differs significantly from the “Pagination Model”, especially the column-axis.</p>
 
         <figure class="fullbleed">
-          <img src="../Images/Fragmented-Model.jpg" alt="Fragmented Model"/>
+          <img src="../Images/Fragmented-Model.jpg" alt="The fragmented Model is kind of a superset of the single page model in the vertical direction, with extra padding added to the root element for extra horizontal gutters."/>
         </figure>
 
         <p>One can think of the fragmented model as the single page model rotated 90% clockwise. The only difference is that <code>padding</code> is added to the <code>:root</code> (<code>html</code>) element so that text doesn’t run from edge to edge.</p>

docs/ReadiumCSS_docs/OEBPS/Text/Section-003.xhtml

@@ -192,7 +192,7 @@
         <p>The results we could get for the vast majority of fonts can be described as good in terms of typographic color. Here is Iowan Old Style for instance.</p>
 
         <figure>
-          <img src="../Images/dynamic-leading.jpg" alt="Iowan Old Style dynamic leading."/>
+          <img src="../Images/dynamic-leading.jpg" alt="Comparison of the algorithm using four different font-sizes with the Iowan Old Style typeface. We can notice that the leading applied is solider as font-size increases, which results in a relatively even distribution of typographic color. This is confirmed by the computed values retrieved in the tool ReadiumCSS provides for testing."/>
 
         </figure>
 

docs/ReadiumCSS_docs/OEBPS/Text/Section-008.xhtml

@@ -217,7 +217,7 @@
           <h4 class="sigil_not_in_toc">Charis SIL</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/charis-sil.png" alt=""/>
+            <img src="../Images/charis-sil.png" alt="Charis SIL compared to Charter. The typeface appears a little bit bolder but shares Charter’s metrics. When comparing an entire paragraph, it is really hard to tell which is which as they originate from the same “master.”"/>
           </figure>
 
           <p>Global info:</p>
@@ -263,7 +263,7 @@
           <h4 class="sigil_not_in_toc">Faustina</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/faustina.png" alt=""/>
+            <img src="../Images/faustina.png" alt="Faustina compared to Charter. The typeface looks smaller and feels definitely condensed. When comparing an entire paragraph, the fact its x-height is larger becomes really visible as it allows for a shorter line-length while appearing larger in weight. Those specificities may help on narrow screens."/>
           </figure>
 
           <p>Global info:</p>
@@ -309,7 +309,7 @@
           <h4 class="sigil_not_in_toc">IBM Plex Serif</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/plex-serif.png" alt=""/>
+            <img src="../Images/plex-serif.png" alt="IBM Plex Serif compared to Charter. The typeface is definitely wider, larger and bolder. When comparing an entire paragraph, this become obvious in the sense fewer words fit on a line. This could become an advantage on larger screens, as the user won’t have to increase font-size."/>
           </figure>
 
           <p>Global info:</p>
@@ -355,7 +355,7 @@
           <h4 class="sigil_not_in_toc">Merriweather</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/merriweather.png" alt=""/>
+            <img src="../Images/merriweather.png" alt="Merriweather compared to Iowan Old Style. Although more condensed, the typeface has been designed for screens and offers a larger x-height and bolder strokes. This shows when comparing an entire paragraph, as fewer words fit on a line and an extra line is even created."/>
           </figure>
 
           <p>Global info:</p>
@@ -401,7 +401,7 @@
           <h4 class="sigil_not_in_toc">PT Serif</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/pt-serif.png" alt=""/>
+            <img src="../Images/pt-serif.png" alt="PT Serif compared to Charter. The typeface looks slightly larger and makes for a sharper substitute. When comparing an entire paragraph, it is visibly larger but fits the same amount of words on each line."/>
           </figure>
 
           <p>Global info:</p>
@@ -447,7 +447,7 @@
           <h4 class="sigil_not_in_toc">Vollkorn</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/vollkorn.png" alt=""/>
+            <img src="../Images/vollkorn.png" alt="Vollkorn compared to Bembo (ET variant). The typeface is significantly larger and bolder; its vertical alignement is also a lot lower. When comparing an entire paragraph, those traits become obvious and offer a better design for reading on screens."/>
           </figure>
 
           <p>Global info:</p>
@@ -497,7 +497,7 @@
           <h4 class="sigil_not_in_toc">Clear Sans</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/clear-sans.png" alt=""/>
+            <img src="../Images/clear-sans.png" alt="Clear Sans compared to Trebuchet MS. The typeface appears a little bit smaller and the aperture of some glyphs like lowercase D appear more enclosed. When comparing an entire paragraph, it feels a little bit smaller but some letters like capital I are easier to differentiate, which is a plus for accessibility."/>
           </figure>
 
           <p>Global info:</p>
@@ -543,7 +543,7 @@
           <h4 class="sigil_not_in_toc">Fira Sans</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/fira-sans.png" alt=""/>
+            <img src="../Images/fira-sans.png" alt="Fira Sans compared to Arial. The typeface is decidedly more condensed, and its letter-spacing larger. When comparing an entire paragraph, the metrics of both fonts don’t look that much different, but Fira Sans brings the extra personality some users require in a bookish context."/>
           </figure>
 
           <p>Global info:</p>
@@ -589,7 +589,7 @@
           <h4 class="sigil_not_in_toc">Libre Franklin</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/libre-franklin.png" alt=""/>
+            <img src="../Images/libre-franklin.png" alt="Libre Franklin compared to San Fransisco, the Apple’s system typeface. Libre Franklin appears a little bit thinner and feels definitely larger. When comparing an entire paragraph, it shows, although it is capable of keeping the same amount of words on each line."/>
           </figure>
 
           <p>Global info:</p>
@@ -635,7 +635,7 @@
           <h4 class="sigil_not_in_toc">Merriweather Sans</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/merriweather-sans.png" alt=""/>
+            <img src="../Images/merriweather-sans.png" alt="Merriweather Sans compared to San Fransisco, the Apple’s system typeface. It appears bolder and feels decidedly larger. This is remarkable when comparing an entire paragraph, especially as its design is less neutral."/>
           </figure>
 
           <p>Global info:</p>
@@ -681,7 +681,7 @@
           <h4 class="sigil_not_in_toc">PT Sans</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/pt-sans.png" alt=""/>
+            <img src="../Images/pt-sans.png" alt="PT Sans compared to Seravek. The typeface appears more condensed. When comparing an entire paragraph, it also feels a little bit thinner but fits the same amount of words on each line and share some of Seravek’s traits."/>
           </figure>
 
           <p>Global info:</p>
@@ -727,7 +727,7 @@
           <h4 class="sigil_not_in_toc">Source Sans Pro</h4>
 
           <figure class="fullbleed">
-            <img src="../Images/source-sans-pro.png" alt=""/>
+            <img src="../Images/source-sans-pro.png" alt="Source Sans Pro compared to Seravek. Its x-height is noticeably – but not remarkably – larger. When comparing an entire paragraph, both feel like they share some common traits, despite very visible differences in the drawing of their glyphs."/>
           </figure>
 
           <p>Global info:</p>

docs/ReadiumCSS_docs/OEBPS/Text/Section-010.xhtml

@@ -16,7 +16,7 @@ div {text-indent: 0; text-align: center; margin: 0; padding: 0;}
 
 <body id="cover" xml:lang="en">
   <div id="cover-image">
-    <img src="../Images/cover.jpg" alt=""/>
+    <img src="../Images/cover.jpg" alt="Readium CSS, Implementers’ documentation."/>
   </div>
 </body>
 </html>

docs/ReadiumCSS_docs/OEBPS/Text/cover.xhtml

@@ -357,7 +357,7 @@
         </li>
         <li>
           <a href="../Text/Section-013.xhtml#sigil_toc_id_169">Vestibular disorders</a>
-        </li>		
+        </li>
         <li>
           <a href="../Text/Section-013.xhtml#sigil_toc_id_142">Internationalization</a>
         </li>

docs/ReadiumCSS_docs/OEBPS/Text/nav.xhtml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<package unique-identifier="epub-id-1" version="3.0" xmlns="http://www.idpf.org/2007/opf">
+<package prefix="schema: http://schema.org/" unique-identifier="epub-id-1" version="3.0" xmlns="http://www.idpf.org/2007/opf">
   <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
     <dc:title>Readium CSS Implementers’ doc</dc:title>
     <dc:creator id="cre">Readium</dc:creator>
@@ -8,8 +8,21 @@
     <dc:language>en</dc:language>
     <dc:identifier id="epub-id-1">urn:uuid:91cab77e-946f-4814-9e61-8494a5d5cb0f</dc:identifier>
     <meta name="cover" content="cover_jpg"/>
-    <meta property="dcterms:modified">2019-06-13T18:30:22Z</meta>
+    <meta property="dcterms:modified">2019-06-28T16:43:31Z</meta>
     <meta content="0.9.5" name="Sigil version"/>
+    <meta property="schema:accessibilityFeature">displayTransformability</meta>
+    <meta property="schema:accessibilityFeature">readingOrder</meta>
+    <meta property="schema:accessibilityFeature">structuralNavigation</meta>
+    <meta property="schema:accessibilityFeature">unlocked</meta>
+    <meta property="schema:accessibilityFeature">alternativeText</meta>
+    <meta property="schema:accessibilityHazard">noFlashing</meta>
+    <meta property="schema:accessibilityHazard">noSound</meta>
+    <meta property="schema:accessibilityHazard">noMotionSimulation</meta>
+    <meta property="schema:accessMode">textual</meta>
+    <meta property="schema:accessMode">visual</meta>
+    <meta property="schema:accessModeSufficient">textual,visual</meta>
+    <meta property="schema:accessModeSufficient">textual</meta>
+    <meta property="schema:accessibilitySummary">The publication should meet EPUB Accessibility 1.0 requirements and WCAG 2.0 Level AA.</meta>
   </metadata>
   <manifest>
     <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>