@JohnHewittCriterion there seems to be some confusion here as there are no images - they are in the css so it isn't possible to add alt text. However I think changing the role from "alert" on the modal dialogs to "dialog" and adding a aria-label="error" should cause it to read "error". Otherwise I don't see how to make it work since there isn't really anything there to add the role="img" to as you suggest.
@sadlerw I think that seems reasonable. It will read properly as an "Error" or "Warning" dialog and then read the text. Or add an aria-label to the element holding the image of "error" or "warning" and make sure it's in the div with the role="alert". It should then read the "Error" then the message in the box. I haven't done an exact test like this, but I've done similar and it worked well.
yea I like your solution better (in osx anyway) - if you make it a dialog then you have to press ctrl/option/shift/downarrow just to read the dialog text - it doesn't do it automatically.
Notes
The alert error icon needs an alt text spoken to the screen reader user like
Use aria-label="Info" for the info icon or something similar as the alt text. Use role=img to make it an image.
Sorry, we were unable to process your request. Please try again.
Permit number 55555555 was not found.
Season dates for Mt. Hood National Forest are now Nov 01, 2018 to Dec 25, 2018
Linkage: CTF-74 WCAG: 1.1.1
Acceptance criteria
Tasks
Definition of Done
update fs web design and if it isn't in the u.s. wds give them a PR
@JohnHewittCriterion there seems to be some confusion here as there are no images - they are in the css so it isn't possible to add alt text. However I think changing the role from "alert" on the modal dialogs to "dialog" and adding a aria-label="error" should cause it to read "error". Otherwise I don't see how to make it work since there isn't really anything there to add the role="img" to as you suggest.
@sadlerw I think that seems reasonable. It will read properly as an "Error" or "Warning" dialog and then read the text. Or add an aria-label to the element holding the image of "error" or "warning" and make sure it's in the div with the role="alert". It should then read the "Error" then the message in the box. I haven't done an exact test like this, but I've done similar and it worked well.
yea I like your solution better (in osx anyway) - if you make it a dialog then you have to press ctrl/option/shift/downarrow just to read the dialog text - it doesn't do it automatically.