{"id":173,"date":"2019-06-04T12:26:56","date_gmt":"2019-06-04T16:26:56","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&p=173"},"modified":"2019-11-19T11:04:56","modified_gmt":"2019-11-19T16:04:56","slug":"1-3-adaptable-level-a","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/1-3-adaptable-level-a\/","title":{"raw":"1.3 Adaptable (Level A)","rendered":"1.3 Adaptable (Level A)"},"content":{"raw":"
\r\n

Guideline 1.3<\/strong> Adaptable<\/h2>\r\nCreate content that can be presented in different ways without losing information or structure (e.g., a simpler layout).\r\n\r\n<\/div>\r\n
\r\n\r\nKey Point: <\/strong>WCAG 2.0 included only Level A success criteria for Guideline 1.3<\/strong>. WCAG 2.1 added two additional Level AA requirements, plus one new Level AAA requirement that will be introduced on the page that follows.\r\n\r\n<\/div>\r\n

Guideline 1.3 Adaptable Explained<\/h3>\r\nWhy should I make it possible to present content in different ways?<\/strong>\r\n\r\nPeople need choices in how they use computers. One of the advantages of electronic documents over paper is flexibility. It is \u2014 or should be \u2014 easy to substitute one font for another or change colours, line spacing, margins, and dozens of other formatting characteristics. By following a handful of guidelines, web content authors make it easy for users to adjust the appearance and organization of web pages to suit users\u2019 individual needs. For example:\r\n
    \r\n \t
  1. An individual with low vision can read many web pages when the font is yellow, zoomed at 400% larger than normal, and displayed on a black background. If web content authors follow guidelines, users can substitute a custom style sheet to display pages in their desired format.<\/li>\r\n \t
  2. A screen reader user accesses an online article about Canadian weather. The content includes a data table that shows the number of hours of sunshine per year for every provincial capital. The user can navigate from cell to cell in the table, certain about which cells contain header information and which cells contain data. A user using a screen reader should be able to determine, for example, that Winnipeg receives an average of 2,372 hours of sunshine per year.<\/li>\r\n \t
  3. A lawyer accesses the Internet from a web-enabled cell phone. Despite the small screen, she can easily read the content on a law library site that conforms to WCAG 2.1 guidelines.<\/li>\r\n<\/ol>\r\n
    \r\n

    <\/a>Success Criterion 1.3.1<\/strong> Info and Relationships<\/h3>\r\nLevel A\r\n\r\nInformation, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.\r\n\r\n<\/div>\r\n
    \r\n\r\nDefinition<\/strong>\r\n\r\nProgrammatically Determined: <\/strong>Determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities.\r\n\r\n<\/div>\r\n
    \r\n\r\nDefinition<\/strong>\r\n\r\nUser Agent<\/strong>: Typically a web browser, though could be any software used to present web content to users, including assistive technologies.\r\n\r\n<\/div>\r\n
    \r\n\r\nDefinition<\/strong>\r\n\r\nAssistive Technology<\/strong>: Sometimes referred to as adaptive technology; software or hardware that acts as a user agent (or acts with a mainstream user agent) to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents.\r\n\r\n<\/div>\r\n

    Info and Relationships Explained<\/h4>\r\nIf you look \u201cunder the hood\u201d of a web page, you will find a document that consists of all the words that appear on the page (the \u201ccontent\u201d) thickly interspersed with words, non-words, numbers, and symbols (the \u201ccode\u201d). The code describes how the content should be formatted and what purpose it serves. For example, you might find something like this on a recipe website:\r\n
    <h1>Recipes for Whole Wheat Bread<\/h1>\r\n<\/code><\/pre>\r\nThe pair of <h1><\/code>\u00a0and <\/h1><\/code> tags that surround \u201cRecipes for Whole Wheat Bread\u201d means that the phrase appears larger and bolder than the text that surrounds it, and the phrase is the most important heading on the page.\r\n\r\nWithin that page of recipes there may be several types of whole wheat bread. Each of those would be presented with an <h2><\/code> to indicate their relationship as subtopics to the main topic of the page presented in an <h1><\/code>. Likewise, within each recipe, there may be an <h3><\/code> used to present ingredients, another to present preparation instructions, and yet another for serving suggestions. Each of those <h3><\/code> headings has a relationship to the parent <h2><\/code>\u00a0but not to the other <h2><\/code> headings that represent other types of whole wheat bread. The following shows a semantic structure (i.e., the relationships of topics and subtopics) associated with the bread recipes.\r\n\r\n
    \r\n\r\nTechnical:<\/strong>\r\n
    <h1>Recipes for Whole Wheat Bread<\/h1> \/\/main topic\r\n   <h2>Whole Grain Bread<\/h2> \/\/type of bread\r\n       <h3>Ingredients<\/h3> \/\/recipe elements\r\n       \u2026\r\n       <h3>Preparation<\/h3>\r\n       \u2026\r\n       <h3>Serving<\/h3>\r\n       \u2026\r\n   <h2>Multigrain Bread<\/h2> \/\/type of bread\r\n      <h3>Ingredients<\/h3> \/\/recipe elements\r\n      \u2026\r\n      <h3>Preparation<\/h3>\r\n      \u2026\r\n      <h3>Serving<\/h3>\r\n      \u2026\r\n   <h2>Sourdough Bread<\/h2> \/\/type of bread\r\n      <h3>Ingredients<\/h3> \/\/recipe elements\r\n       \u2026\r\n      <h3>Preparation<\/h3>\r\n      \u2026\r\n      <h3>Serving<\/h3>\r\n      \u2026<\/pre>\r\n<\/div>\r\nThe above semantic structure uses headings that represent topics, and subtopics could also be represented as a nested list. The following list maintains the same relationships defined by the headings above. In this case, there is a main list with one item, the main topic; three sublists with each type of bread; and one sublist under each of those representing the elements of a given recipe.\r\n
    \r\n\r\nTechnical:<\/strong>\r\n
    <ul> \/\/main list of bread recipes\r\n<li>Recipes for Whole Wheat Bread\r\n   <ul> \/\/type of bread\r\n      <li>Whole Grain Bread\r\n      <ul> \/\/recipe elements\r\n         <li>Ingredients\r\n         \u2026\r\n         <\/li>\r\n         <li>Preparation\r\n         \u2026\r\n         <\/li>\r\n         <li>Serving\r\n         \u2026\r\n         <\/li>\r\n \u00a0    <\/ul> \r\n     <\/li>\r\n \u00a0<\/ul> \/\/End of Whole Grain type\r\n \u00a0<ul> \/\/type of bread\r\n     <li>Multigrain Bread\r\n     <ul> \/\/recipe elements\r\n        <li>Ingredients\r\n        \u2026\r\n        <\/li>\r\n        <li>Preparation\r\n        \u2026\r\n        <\/li>\r\n        <li>Serving\r\n        \u2026\r\n        <\/li>\r\n \u00a0   <\/ul>\r\n    <\/li>\r\n \u00a0<\/ul> \/\/End of Multigrain type\r\n \u00a0<ul> \/\/type of bread\r\n     <li>Sourdough Bread\r\n     <ul> \/\/recipe elements\r\n         <li>Ingredients\r\n         \u2026\r\n         <\/li>\r\n         <li>Preparation\r\n         \u2026\r\n         <\/li>\r\n         <li>Serving\r\n         \u2026\r\n         <\/li>\r\n \u00a0   <\/ul>\r\n     <\/li> \r\n \u00a0\u00a0<\/ul> \/\/End of Sourdough type\r\n<\/li> \r\n<\/ul> \/\/End of main list of bread recipes<\/pre>\r\n<\/div>\r\nSC 1.3.1<\/strong> requires web content authors to use the right code to generate relationships and associate related information. When they do, browsers and assistive technologies automatically \u201cunderstand\u201d how content relates to other content on the page. (This is what is meant by \u201cprogrammatically determined.\u201d) For example:\r\n