Add a prototype page (#118)

* Add a prototype page

source/prototype.html.md.erb

@@ -0,0 +1,144 @@
+---
+title: PROTOTYPE - 1.1.1 Non-text Content (A)
+---
+
+# <%= current_page.data.title %>
+
+<%= warning_text('- This is a temporary prototype that is intended to show how the content for the WCAG Primer and the Test Guide might work together when merged.') %>
+
+Current pages for comparison: [WCAG Primer: 1.1.1](sc/1.1.1) and [Test Guide: 1.1.1](https://github.com/alphagov/wcag-primer/wiki/1.1.1)
+
+## WCAG says:
+
+[W3C's 'Understanding 1.1.1 Non-text Content (level A)'](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content)
+
+> All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
+>
+> * **Controls, Input:** If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to [Success Criterion 4.1.2](sc/4.1.2) for additional requirements for controls and content that accepts user input.)
+>
+> * **Time-Based Media:** If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
+>
+> * **Test:** If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
+>
+> * **Sensory:** If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
+>
+> * **CAPTCHA:** If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
+>
+> * **Decoration, Formatting, Invisible:** If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
+
+## What this means:
+
+All non-text content like images, charts, icons and infographics, must have an appropriate text equivalent. This ensures that information conveyed by non-text content is available to people who cannot see it, like screen reader users.
+
+## How to test
+
+### When this is applicable
+
+This applies if the page includes:
+
+* images or symbols in any form, including SVGs, background images or icon fonts
+* video, audio or multimedia objects
+* animation
+* CAPTCHAs
+
+### Check images
+
+Use the browser's inspector or a screen reader to check all types of images.
+
+Check:
+
+* images have alternative text
+* alternative text is appropriate - if an image is meaningful the alt text should describe its purpose, otherwise it should be marked up as decorative
+
+Alternative text can be the in following forms:
+
+* close to the image
+* as alternative text (for example with an `alt` attribute or `aria-label`)
+* as a long description (for example, using `longdesc` or linking to more details)
+
+#### <img\> elements
+
+To check `alt` text on `img` images, use the [Web Developer extension](https://chrispederick.com/work/web-developer/) and go to 'Images \> Display Alt Attributes'. `img` elements must always have an `alt` attribute whether it is adding the alternative text or it is empty.
+
+#### Background images
+
+A background image is an image that is not in the content (HTML) but the CSS.
+
+#### Font icons
+
+Some fonts contain icons such as symbols and glyphs. These can be added directly into HTML or inserted using CSS. Some screen readers will ignore them and some will read them out as something unrelated. As such, check the character for the icon is hidden from screen readers.
+
+#### Emojis and symbols
+
+Emojis and symbols already have inherent alternative text. But that might not be what is the most appropriate.
+
+#### <svg\> elements
+
+SVGs should either have:
+
+* alternative text in `title` or `desc` element or in `aria-label` - if the `title` element is used, the `svg` element has an `aria-labelledby` referencing the title
+* `aria-hidden="true"` if it's decorative
+
+### What the alternatives should be
+
+Generally, if the image has meaning, describe its purpose. If it's not meaningful, make sure it's marked up as decorative.
+
+For interactive images or images as controls:
+
+* alternative text of an image in a link should describe the target
+* alternative text of an image in a button should describe the action
+* alternative text of image maps should describe the target or action
+* if both the contents of the image and the target or action are equally important, the alternative text should describe both
+
+For images containing text, check:
+
+* the alternative text includes the same text as the text on the image
+* symbols are not described but replaced with their meaning
+* CAPTCHAs describe the purpose and point to an alternative way to solve it using different senses
+
+For decorative images:
+
+* `img` images must still have an `alt` attribute and it must be empty (`alt=""`)
+* you can use `aria-hidden="true"` for any other type of image
+
+You should also check objects that have been inserted or embedded on a page. This might include video-only or audio-only content, animations, graphs or diagrams. This type of content should have a fallback text that identifies what it is and describes it. That alternative text ultimately needs to be in text form. For example, when a video doesn't load, you could have a fallback image that has alternative text. Although diagrams and graphs are excluded from [1.4.5 Images of Text](sc/1.4.5), they still need an alternative under 1.1.1.
+
+If multiple images have been grouped to compose a larger image, it's fine to have just one alternative text describing the larger image and the other `alt` parameters can be empty.
+
+### Exceptions
+
+* if non-text content is part of a test or exercise and alternative text would render the test irrelevant, unless it's a CAPTCHA
+* if words cannot describe a sensory experience, non-text content should be identified and have a brief description
+
+### Best practice
+
+* Alternative texts should be clear and short
+* If an image within a link or button is unclear to everyone, it's bad usability
+* If any alternative text is visible, there should be no hidden alternative text that duplicates it
+* If image and text are in the same link or button, do not duplicate the link or button text in the image alt text - use an empty alt (or equivalent) or describe the image if it's important
+* If image and text are adjacent but link to the same target (for example a thumbnail image and article title which both link to the same place), hide the image and its link for screen readers and remove the link from the tabbing order
+* Images in links or buttons should have descriptive text within the same link or button
+* If the alternative text is long, it shouldn't be added using attributes - for example, complex diagrams should not be described in the `alt` text but somewhere else on the page (the alt text should say what and where it is described, using words or programmatically)
+
+### Other ways to test
+
+* Check if there are any background images by changing colours in Firefox (background images will disappear)
+* Check alt text by looking at the HTML source code and searching for: `<img`, `type="image"`, `<area`; look for `background(-image)`, `content` within CSS
+* Use the [Web Developer extension](https://chrispederick.com/work/web-developer/) and go to 'Disable All Styles and Images \> Hide Images' to reveal what other types of "images" there are - for example, it will leave background images or font icons or objects (be aware that results can be inconsistent as it also removes some background images)
+
+### Mobile app testing
+
+Use a screen reader to check text alternatives for images and other non-text content.
+
+## Common mistakes
+
+* The image communicates information but does not have a text description
+* The text description does not communicate the same information as the image
+* The image has a text description but, like a placeholder or file name, it does not communicate the information in the image
+* The image has a text description that is an exact duplication of content elsewhere on the page
+
+## Useful links
+
+* [W3C Requirements for providing text to act as an alternative for images](https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text)
+* [W3C Alt text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/)
+* Anika Henke's talk: [Alternative text: there's more to it than meets the eye](https://www.youtube.com/watch?v=-UsI3Ev7MlI&list=PL5tovFCB3CsDAfBhyDTem0u6Loae61fMG&index=2)