{"action":"created","issue":{"url":"https://api.github.com/repos/jonathantneal/svg4everybody/issues/74","labels_url":"https://api.github.com/repos/jonathantneal/svg4everybody/issues/74/labels{/name}","comments_url":"https://api.github.com/repos/jonathantneal/svg4everybody/issues/74/comments","events_url":"https://api.github.com/repos/jonathantneal/svg4everybody/issues/74/events","html_url":"https://github.com/jonathantneal/svg4everybody/issues/74","id":102610869,"number":74,"title":"Recommended \"alt text\" strategy","user":{"login":"fvsch","id":243601,"avatar_url":"https://avatars.githubusercontent.com/u/243601?v=3","gravatar_id":"","url":"https://api.github.com/users/fvsch","html_url":"https://github.com/fvsch","followers_url":"https://api.github.com/users/fvsch/followers","following_url":"https://api.github.com/users/fvsch/following{/other_user}","gists_url":"https://api.github.com/users/fvsch/gists{/gist_id}","starred_url":"https://api.github.com/users/fvsch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fvsch/subscriptions","organizations_url":"https://api.github.com/users/fvsch/orgs","repos_url":"https://api.github.com/users/fvsch/repos","events_url":"https://api.github.com/users/fvsch/events{/privacy}","received_events_url":"https://api.github.com/users/fvsch/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-23T11:35:06Z","updated_at":"2015-08-23T12:31:00Z","closed_at":null,"body":"Hi. I’m wondering if the recommended markup for accessible text alternatives should be changed. (I’m not an accessibility expert and more importantly I don’t have the know-how, tools and access to platforms to fully test different markups, so take my advice with a grain of salt.)\r\n\r\nHere's the current recommendation:\r\n```svg\r\n<symbol id=\"codepen\">\r\n    <title>CodePen</title>\r\n    <path etc.../>\r\n</symbol>\r\n```\r\n```html\r\n<svg title=\"CodePen\">\r\n    <use xlink:href=\"map.svg#codepen\"/>\r\n</svg>\r\n```\r\n\r\n## Possible issues with `<title>`+`title`\r\n\r\n- Title attribute may not be read at all.\r\n- The `<title>` element in a sprite will often be filled automatically by tools, using the file name of the original SVG file. So it may be a suboptimal name, such as `hourglass-2` or worse.\r\n- More importantly, accessible text should not be a description of the graphic but a bit of text that conveys the intended information. For instance, it's probable the `<title>` for a symbol that represents a gear will be \"gear\" or \"gears\", when the information to convey for a text-less button using that gear symbol should be \"Preferences\" or \"My account\" or something similar.\r\n- Some symbols may be used in different places, with slightly different meanings.\r\n\r\nSo in my opinion the accessible text of each *use* of the icon should be decorrelated from the graphic itself, and thus from the `<symbol>`.\r\n\r\n## Context-specific alt text: use `aria-label`?\r\n\r\nIntroduction to `aria-label`: https://dev.opera.com/articles/ux-accessibility-aria-label/\r\n\r\nOne example from the article:\r\n```html\r\n<button aria-label=\"close\">&times;</button>\r\n```\r\n\r\nWhat we use at work for buttons with an SVG icon and no visible text:\r\n\r\n```html\r\n<button aria-label=\"Refresh results\">\r\n    <svg width=\"20\" height=\"20\" aria-hidden=\"true\"><use xlink:href=\"sprite.svg#arrows-cycle\"></use></svg>\r\n</button>\r\n```\r\nWe \"hide\" the SVG icon with `aria-hidden=\"true\"` since it has either no text content or its text content (e.g. a `<title>` element that was automatically generated for the file’s name) is inexact, and we provide the actual text we want with a `aria-label` on the container (often a button or link).\r\n\r\nFor buttons or links that have visible text, we keep the `aria-hidden` on the icon:\r\n\r\n```html\r\n<button>\r\n    <svg width=\"20\" height=\"20\" aria-hidden=\"true\"><use xlink:href=\"sprite.svg#arrows-cycle\"></use></svg>\r\n    Refresh\r\n</button>\r\n```\r\n\r\nFrom what I’ve read, and questions I’ve asked accessibility consultants, this seems like a good approach."},"comment":{"url":"https://api.github.com/repos/jonathantneal/svg4everybody/issues/comments/133826386","html_url":"https://github.com/jonathantneal/svg4everybody/issues/74#issuecomment-133826386","issue_url":"https://api.github.com/repos/jonathantneal/svg4everybody/issues/74","id":133826386,"user":{"login":"fvsch","id":243601,"avatar_url":"https://avatars.githubusercontent.com/u/243601?v=3","gravatar_id":"","url":"https://api.github.com/users/fvsch","html_url":"https://github.com/fvsch","followers_url":"https://api.github.com/users/fvsch/followers","following_url":"https://api.github.com/users/fvsch/following{/other_user}","gists_url":"https://api.github.com/users/fvsch/gists{/gist_id}","starred_url":"https://api.github.com/users/fvsch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fvsch/subscriptions","organizations_url":"https://api.github.com/users/fvsch/orgs","repos_url":"https://api.github.com/users/fvsch/repos","events_url":"https://api.github.com/users/fvsch/events{/privacy}","received_events_url":"https://api.github.com/users/fvsch/received_events","type":"User","site_admin":false},"created_at":"2015-08-23T12:31:00Z","updated_at":"2015-08-23T12:31:00Z","body":"I wrote a test, and ran it with VoiceOver on Yosemite, using default settings, and this test page I set up:\r\nhttps://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html\r\n\r\nI tested two situations, since they seem to differ quite a bit: when the SVG is in a button, and when it's in regular text flow.\r\n\r\nWithout a button or link, the SVG icon is generally not read. (Not read at all in Safari, read as \"Image\" but no alt text in Firefox.) The only way to get alternative text I found was with a visually hidden element (that must not be 0 by 0 pixels, or it won’t be read).\r\n\r\nInside a button or link, VoiceOver will do its best to read alt text. It will read:\r\n- Neighboring text, including a visually hiddden `<span>`\r\n- The `aria-label` if there is one\r\n- The `<title>` element from the `<symbol>`\r\n\r\nIt will NOT read:\r\n- The `title` attribute (at least not with default settings)\r\n- The symbol’s `<title>` if we used `aria-hidden=\"true\"` on the SVG icon\r\n\r\nFinally, if we use both a `<title>` (with no `aria-hidden=\"true\"`) and an `aria-label`, the `aria-label` will take priority.\r\n\r\nSo my final recommendation would be:\r\n\r\n```html\r\nButton with a single icon:\r\n<button aria-label=\"Button label\">\r\n  <svg aria-hidden=\"true\"><use xlink:href=\"...\"></use></svg>\r\n</button>\r\n\r\nButton with an icon and visible label:\r\n<button>\r\n  <svg aria-hidden=\"true\"><use xlink:href=\"...\"></use></svg>\r\n  Button label\r\n</button>\r\n```\r\n"}}