{"url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/27","repository_url":"https://api.github.com/repos/empress/empress-blog-casper-template","labels_url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/27/comments","events_url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/27/events","html_url":"https://github.com/empress/empress-blog-casper-template/pull/27","id":453877844,"node_id":"MDExOlB1bGxSZXF1ZXN0Mjg2NDU3ODc0","number":27,"title":"A11Y Improvements: Add Alt Attribute from Post Metadata Or Default to Empty Value","user":{"login":"jayjayjpg","id":8811742,"node_id":"MDQ6VXNlcjg4MTE3NDI=","avatar_url":"https://avatars.githubusercontent.com/u/8811742?v=4","gravatar_id":"","url":"https://api.github.com/users/jayjayjpg","html_url":"https://github.com/jayjayjpg","followers_url":"https://api.github.com/users/jayjayjpg/followers","following_url":"https://api.github.com/users/jayjayjpg/following{/other_user}","gists_url":"https://api.github.com/users/jayjayjpg/gists{/gist_id}","starred_url":"https://api.github.com/users/jayjayjpg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jayjayjpg/subscriptions","organizations_url":"https://api.github.com/users/jayjayjpg/orgs","repos_url":"https://api.github.com/users/jayjayjpg/repos","events_url":"https://api.github.com/users/jayjayjpg/events{/privacy}","received_events_url":"https://api.github.com/users/jayjayjpg/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2019-06-09T08:57:41Z","updated_at":"2021-11-23T12:07:40Z","closed_at":null,"author_association":"FIRST_TIME_CONTRIBUTOR","active_lock_reason":null,"draft":false,"pull_request":{"url":"https://api.github.com/repos/empress/empress-blog-casper-template/pulls/27","html_url":"https://github.com/empress/empress-blog-casper-template/pull/27","diff_url":"https://github.com/empress/empress-blog-casper-template/pull/27.diff","patch_url":"https://github.com/empress/empress-blog-casper-template/pull/27.patch","merged_at":null},"body":"Closes #19\r\n\r\n### Expected\r\n\r\nScreen reader users should be able to\r\n- read an image description for images containing informative content\r\n- skip images that are purely decorative and not get notified by their screenreader if they encounter such an image\r\n\r\n### What this PR does\r\n\r\nThis adds the ability for blog authors to provide an alternative text for header images that will be set as to the `alt` attribute via the `imageMeta.alt` property. If no `imageMeta.alt` is provided it will default to `\"\"` which in turn applies an empty `alt` attribute to the image instead.\r\n\r\n### How to reproduce\r\n\r\n- start VoiceOver on Mac (or alternatively, e.g. [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn) on other OSes)\r\n- navigate to a page with a header image\r\n- focus the page\r\n- navigate to the next graphic using the Graphic navigation command in VoiceOver: Ctrl + Opt + Cmd + G to focus on the image\r\n- --> the screenreader will read the url for the image instead of 1. reading the `alt` text if one is available or 2. skipping the image entirely no description of the image is available\r\n\r\nYou can also review the shortcuts for VoiceOver for navigating websites [over here](https://webaim.org/articles/voiceover/)\r\n\r\n### Demos\r\n\r\n#### Example Informative Image\r\n| before | after |\r\n|--|--|\r\n|||\r\n\r\n\r\n#### Example Decorative Image\r\n|before (no alt text provided) | after (no alt text provided)|\r\n|--|--|\r\n|||\r\n\r\n\r\n### `alt=\"\"` vs. `alt`\r\n\r\nIt seems both the empty attribute syntax with an empty string value (``) as well as the sole use of the `alt` attribute (``) can be used interchangeably as valid implementations of the [WCAG guidelines for decorative images](https://www.w3.org/WAI/tutorials/images/decorative/) when following [the spec of the empty attribute syntax](https://www.w3.org/TR/2014/REC-html5-20141028/syntax.html#attributes-0):\r\n\r\n> **Empty attribute syntax**\r\n> Just the attribute name. The value is implicitly the empty string.\r\n> In the following example, the disabled attribute is given with the empty attribute syntax:\r\n``","closed_by":null,"reactions":{"url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/27/reactions","total_count":0,"+1":0,"-1":0,"laugh":0,"hooray":0,"confused":0,"heart":0,"rocket":0,"eyes":0},"timeline_url":"https://api.github.com/repos/empress/empress-blog-casper-template/issues/27/timeline","performed_via_github_app":null}