Closed fibn144 closed 10 years ago
For reference, here's the output from the Fangs Screen Reader Emulator on this page: http://www.refugerestrooms.org/bathrooms?utf8=%E2%9C%93&search=Washington+DC&lat=38.90723089999999&long=-77.03646409999999 :
Page has twenty-one linksREFUGE restrooms dash Internet ExplorerEdit Washington DC SearchbuttonCheckboxNot checked OFF CheckboxNot checked OFFCheckboxNot checked Map View Link dulles airport terminal C IAD, Sterling, DC Not Yet Rated zero point zero miles Link Stoney\'s one thousand four hundred thirty-three P Street, Washington, DC Not Yet Rated zero point zero miles Link HRC Building one thousand six hundred forty Rhode Island Ave, NW, WASHINGTON, DC Not Yet Rated zero point one one miles Link Caribou Coffee one thousand one hundred fifty-six fifteen th Street Northwest, Washington, DC Not Yet Rated zero point one six miles Link Sweet Green one thousand four hundred seventy-one P St NW, Washington, DC Not Yet Rated zero point two three miles Link Caribou Coffee one thousand one hundred one seventeen th Street NW, Washington, DC Not Yet Rated zero point two three miles Link The Pig one thousand three hundred twenty fourteen th St. NW, Washington, DC Not Yet Rated zero point two four miles Link Tsunami Sushi and amp; Lounge one thousand three hundred twenty-six fourteen th Street Northwest, Washington , DC Not Yet Rated zero point two five miles Link Caribou Coffee one thousand four hundred fourteen th Street NW, Washington, DC Not Yet Rated zero point two six miles Link Potbelly Sandwich Shop one thousand six hundred sixty L Street NW, Washington, DC Not Yet Rated zero point two seven miles Link Logan Tavern one thousand four hundred twenty-three p st nw, Washington, DC Not Yet Rated zero point two seven miles Link Subway Sandwiches one thousand seven hundred twelve L Street NW, Washington, DC Not Yet Rated zero point two nine miles Link Starbucks Coffee one thousand three hundred one Connecticut Ave., NW, Washington, DC Not Yet Rated zero point two nine miles Link GBD one thousand three hundred twenty-three Connecticut Ave NW, Washington, DC Not Yet Rated zero point three miles Link Chop\'T Salad Works one thousand three hundred Connecticut Avenue Northwest, Washington, DC Not Yet Rated zero point three one miles Link The Big Hunt one thousand three hundred twenty-five Connecticut Avenue, NW, WASHINGTON, DC Not Yet Rated zero point three one miles Link Caribou Coffee one thousand eight hundred M Street NW number four Washington , DC Not Yet Rated zero point three three miles Link Saxby\'s Coffee one thousand Vermont Avenue Northwest, Washington, DC Not Yet Rated zero point three three miles Link Hello Cupcake one thousand three hundred sixty-one Connecticut Ave NW, Washington, DC Not Yet Rated zero point three three miles Link Mitchell Gold one thousand five hundred twenty-six fourteen th Street, Washington, DC Not Yet Rated zero point three four miles contact colon refugerestrooms at gmail.com refuge restrooms is open source. Link code on github. copyright copyleft two thousand fourteen refuge restrooms. Disqus Google Analytics
Noteable parts are:
CheckboxNot checked OFF CheckboxNot checked OFFCheckboxNot checked Map View
Which doesn't say what the first two checkboxes do, and:
Link dulles airport terminal C IAD, Sterling, DC Not Yet Rated zero point zero miles
Which doesn't say that the bathroom is ADA compliant or unisex, even though graphically it says both.
Ah! Undo the close! Sorry! I don't know how to Github well!
Might also be good practice to do expanded text, too. While it's technically antiquated, it's still a standard ADA feature of HTML5.
I'd be able to just do the alt text myself, but I don't know websiting at all, so I don't get why the list view uses DIVs instead of IMGs.
A div class or id allows you to store the core img elements of the site in the css instead of the html, so you can make global changes to the website's design without having to edit each individual html page, one by one to change something as simple as a logo.
On Mon, Feb 10, 2014 at 12:33 AM, fibn144 notifications@github.com wrote:
I'd be able to just do the alt text myself, but I don't know websiting at all, so I don't get why the list view uses DIVs instead of IMGs.
Reply to this email directly or view it on GitHubhttps://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-34602069 .
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558 http://natalieroman.com
So is there any way to add alt-text to that?
I don't do CSS. So I'll have to defer to Alicia or natalie here. There has got to be a way.— Sent from Mailbox for iPhone
On Tue, Feb 11, 2014 at 11:41 AM, fibn144 notifications@github.com wrote:
So is there any way to add alt-text to that?
Reply to this email directly or view it on GitHub: https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-34796792
Hey! I've added alt tags and text to the labels to make the points you hilighted more clear on the Fangs Emulator! Here is what it outputs now:
buttonCheckboxNot checked ADA Compliant FilterCheckboxNot checked Unisex Filter Map View Link
And...
Link Martha and Brothers Coffee three thousand eight hundred sixty-eight twenty-four th St, SAN FRANCISCO, CA Not yet rated six point one one miles GraphicUnisex BathroomGraphicADA Compliant Bathroom
@fibn144 , do you have any other recommendations to make the site even more accessible? And thanks for the help so far!
Um... (I should explain, I don't use or know anyone who uses screenreaders. It's just a pet peeve of mine that so many webpages -- which are stored and distributed in a text-based format -- are so terrible at being interpretable as just text)
That said: Just looking at the website: Header: The current location button; the search button (that doesn't lose any functionality, because search is given as an option because of the search box, but I'd guess it's confusing); The fact that (when javascript is enabled), clicking on the logo takes you to the homepage doesn't appear at all in Fangs. Footer: all the "contact" links Front page: Logo, "Submit a Restroom" link List view: Besides the comments above, I can't think of anything Map view: I really have no idea how to judge maps' accessibility Bathroom page: The unisex and ADA graphics don't have alt-text here, either, but it looks like that will also be fixed when you push the fix for the list view? But you should double check? Blog: None of the images have alt text, but that's because Tumblr is silly-poo and for some reason hasn't made images be able to have alt text, right? Secret Special Bonus page!: Is there one? I couldn't find a Secret Special Bonus page to check.
Actually, there is also the World Wide Web Consortium's Web Accessibility Initiative's easy checks: http://www.w3.org/WAI/eval/preliminary , which do a much more thorough job than I could. (The only thing I noticed while reading through the list was maybe the use of Headings could be made better? But I really don't know if that's necessary?)
That's what I was still wondering. We put in id tags but there's only one alt tag and I didn't understand why we said we fixed it, when Fangs is showing me almost nothing. I will see if I can add alt text to as much as I can.
On Fri, Feb 14, 2014 at 12:54 AM, fibn144 notifications@github.com wrote:
Um... (I should explain, I don't use or know anyone who uses screenreaders. It's just a pet peeve of mine that so many webpages -- which are stored and distributed in a text-based format -- are so terrible at being interpretable as just text)
That said: Just looking at the website: Header: The current location button; the search button (that doesn't lose any functionality, because search is given as an option because of the search box, but I'd guess it's confusing); The fact that (when javascript is enabled), clicking on the logo takes you to the homepage doesn't appear at all in Fangs. Footer: all the "contact" links Front page: Logo, "Submit a Restroom" link List view: Besides the comments above, I can't think of anything Map view: I really have no idea how to judge maps' accessibility Bathroom page: The unisex and ADA graphics don't have alt-text here, either, but it looks like that will also be fixed when you push the fix for the list view? But you should double check? Blog: None of the images have alt text, but that's because Tumblr is silly-poo and for some reason hasn't made images be able to have alt text, right? Secret Special Bonus page!: Is there one? I couldn't find any.
Actually, there is also the World Wide Web Consortium's Web Accessibility Initiative's easy checks: http://www.w3.org/WAI/eval/preliminary , which do a much more thorough job than I could. (The only thing I noticed while reading through the list was maybe the use of Headings could be made better? But I really don't know if that's necessary?)
Reply to this email directly or view it on GitHubhttps://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35058524 .
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558 http://natalieroman.com
Basicly everything that's an img is going to have to go into an HTML img tag instead of placing it as a background img in CSS then the alt text can be added— Sent from Mailbox for iPhone
On Thu, Feb 13, 2014 at 10:11 PM, nataliegroman notifications@github.com wrote:
That's what I was still wondering. We put in id tags but there's only one alt tag and I didn't understand why we said we fixed it, when Fangs is showing me almost nothing. I will see if I can add alt text to as much as I can. On Fri, Feb 14, 2014 at 12:54 AM, fibn144 notifications@github.com wrote:
Um... (I should explain, I don't use or know anyone who uses screenreaders. It's just a pet peeve of mine that so many webpages -- which are stored and distributed in a text-based format -- are so terrible at being interpretable as just text)
That said: Just looking at the website: Header: The current location button; the search button (that doesn't lose any functionality, because search is given as an option because of the search box, but I'd guess it's confusing); The fact that (when javascript is enabled), clicking on the logo takes you to the homepage doesn't appear at all in Fangs. Footer: all the "contact" links Front page: Logo, "Submit a Restroom" link List view: Besides the comments above, I can't think of anything Map view: I really have no idea how to judge maps' accessibility Bathroom page: The unisex and ADA graphics don't have alt-text here, either, but it looks like that will also be fixed when you push the fix for the list view? But you should double check? Blog: None of the images have alt text, but that's because Tumblr is silly-poo and for some reason hasn't made images be able to have alt text, right? Secret Special Bonus page!: Is there one? I couldn't find any.
Actually, there is also the World Wide Web Consortium's Web Accessibility Initiative's easy checks: http://www.w3.org/WAI/eval/preliminary , which do a much more thorough job than I could. (The only thing I noticed while reading through the list was maybe the use of Headings could be made better? But I really don't know if that's necessary?)
Reply to this email directly or view it on GitHubhttps://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35058524 .
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558
http://natalieroman.com
Reply to this email directly or view it on GitHub: https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059100
I think you can add alt tags to almost anything these days, though I might be mistaken. If we have to rid of encapsulation of our images in the SASS just to put in Alt Text, we might have to. It shouldn't affect how buttons function, I'm pretty sure.
On Fri, Feb 14, 2014 at 1:12 AM, Teagan notifications@github.com wrote:
Basicly everything that's an img is going to have to go into an HTML img tag instead of placing it as a background img in CSS then the alt text can be added-- Sent from Mailbox for iPhone
On Thu, Feb 13, 2014 at 10:11 PM, nataliegroman notifications@github.com
wrote:
That's what I was still wondering. We put in id tags but there's only one alt tag and I didn't understand why we said we fixed it, when Fangs is showing me almost nothing. I will see if I can add alt text to as much as I can. On Fri, Feb 14, 2014 at 12:54 AM, fibn144 notifications@github.com wrote:
Um... (I should explain, I don't use or know anyone who uses screenreaders. It's just a pet peeve of mine that so many webpages -- which are stored and distributed in a text-based format -- are so terrible at being interpretable as just text)
That said: Just looking at the website: Header: The current location button; the search button (that doesn't lose any functionality, because search is given as an option because of the search box, but I'd guess it's confusing); The fact that (when javascript is enabled), clicking on the logo takes you to the homepage doesn't appear at all in Fangs. Footer: all the "contact" links Front page: Logo, "Submit a Restroom" link List view: Besides the comments above, I can't think of anything Map view: I really have no idea how to judge maps' accessibility Bathroom page: The unisex and ADA graphics don't have alt-text here, either, but it looks like that will also be fixed when you push the fix for the list view? But you should double check? Blog: None of the images have alt text, but that's because Tumblr is silly-poo and for some reason hasn't made images be able to have alt text, right? Secret Special Bonus page!: Is there one? I couldn't find any.
Actually, there is also the World Wide Web Consortium's Web Accessibility Initiative's easy checks: http://www.w3.org/WAI/eval/preliminary , which do a much more thorough job than I could. (The only thing I noticed while reading through the list was maybe the use of Headings could be made better? But I really don't know if that's necessary?)
Reply to this email directly or view it on GitHub< https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35058524>
.
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558
http://natalieroman.com
Reply to this email directly or view it on GitHub:
https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059100
Reply to this email directly or view it on GitHubhttps://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059151 .
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558 http://natalieroman.com
I did some searching and you can not do alt text on CSS style. It must be done on img tag. The theory is that img tags are supised to be for content important images and background imgs are supised to be purely asthetic. Thus the need for alt text on img tags but not on background images— Sent from Mailbox for iPhone
On Thu, Feb 13, 2014 at 10:14 PM, nataliegroman notifications@github.com wrote:
I think you can add alt tags to almost anything these days, though I might be mistaken. If we have to rid of encapsulation of our images in the SASS just to put in Alt Text, we might have to. It shouldn't affect how buttons function, I'm pretty sure. On Fri, Feb 14, 2014 at 1:12 AM, Teagan notifications@github.com wrote:
Basicly everything that's an img is going to have to go into an HTML img tag instead of placing it as a background img in CSS then the alt text can be added-- Sent from Mailbox for iPhone
On Thu, Feb 13, 2014 at 10:11 PM, nataliegroman notifications@github.com
wrote:
That's what I was still wondering. We put in id tags but there's only one alt tag and I didn't understand why we said we fixed it, when Fangs is showing me almost nothing. I will see if I can add alt text to as much as I can. On Fri, Feb 14, 2014 at 12:54 AM, fibn144 notifications@github.com wrote:
Um... (I should explain, I don't use or know anyone who uses screenreaders. It's just a pet peeve of mine that so many webpages -- which are stored and distributed in a text-based format -- are so terrible at being interpretable as just text)
That said: Just looking at the website: Header: The current location button; the search button (that doesn't lose any functionality, because search is given as an option because of the search box, but I'd guess it's confusing); The fact that (when javascript is enabled), clicking on the logo takes you to the homepage doesn't appear at all in Fangs. Footer: all the "contact" links Front page: Logo, "Submit a Restroom" link List view: Besides the comments above, I can't think of anything Map view: I really have no idea how to judge maps' accessibility Bathroom page: The unisex and ADA graphics don't have alt-text here, either, but it looks like that will also be fixed when you push the fix for the list view? But you should double check? Blog: None of the images have alt text, but that's because Tumblr is silly-poo and for some reason hasn't made images be able to have alt text, right? Secret Special Bonus page!: Is there one? I couldn't find any.
Actually, there is also the World Wide Web Consortium's Web Accessibility Initiative's easy checks: http://www.w3.org/WAI/eval/preliminary , which do a much more thorough job than I could. (The only thing I noticed while reading through the list was maybe the use of Headings could be made better? But I really don't know if that's necessary?)
Reply to this email directly or view it on GitHub< https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35058524>
.
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558
http://natalieroman.com
Reply to this email directly or view it on GitHub:
https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059100
Reply to this email directly or view it on GitHubhttps://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059151 .
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558
http://natalieroman.com
Reply to this email directly or view it on GitHub: https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059193
Okay. This should still not be a big deal design wise. On Feb 14, 2014 2:01 AM, "Teagan" notifications@github.com wrote:
I did some searching and you can not do alt text on CSS style. It must be done on img tag. The theory is that img tags are supised to be for content important images and background imgs are supised to be purely asthetic. Thus the need for alt text on img tags but not on background images-- Sent from Mailbox for iPhone
On Thu, Feb 13, 2014 at 10:14 PM, nataliegroman notifications@github.com
wrote:
I think you can add alt tags to almost anything these days, though I might be mistaken. If we have to rid of encapsulation of our images in the SASS just to put in Alt Text, we might have to. It shouldn't affect how buttons function, I'm pretty sure. On Fri, Feb 14, 2014 at 1:12 AM, Teagan notifications@github.com wrote:
Basicly everything that's an img is going to have to go into an HTML img tag instead of placing it as a background img in CSS then the alt text can be added-- Sent from Mailbox for iPhone
On Thu, Feb 13, 2014 at 10:11 PM, nataliegroman < notifications@github.com>
wrote:
That's what I was still wondering. We put in id tags but there's only one alt tag and I didn't understand why we said we fixed it, when Fangs is showing me almost nothing. I will see if I can add alt text to as much as I can. On Fri, Feb 14, 2014 at 12:54 AM, fibn144 notifications@github.com wrote:
Um... (I should explain, I don't use or know anyone who uses
screenreaders. It's just a pet peeve of mine that so many webpages
which are stored and distributed in a text-based format -- are so terrible at being interpretable as just text)
That said: Just looking at the website: Header: The current location button; the search button (that doesn't lose any functionality, because search is given as an option because of the search box, but I'd guess it's confusing); The fact that (when javascript is enabled), clicking on the logo takes you to the homepage doesn't appear at all in Fangs. Footer: all the "contact" links Front page: Logo, "Submit a Restroom" link List view: Besides the comments above, I can't think of anything Map view: I really have no idea how to judge maps' accessibility Bathroom page: The unisex and ADA graphics don't have alt-text here, either, but it looks like that will also be fixed when you push the fix for the list view? But you should double check? Blog: None of the images have alt text, but that's because Tumblr is silly-poo and for some reason hasn't made images be able to have alt text, right? Secret Special Bonus page!: Is there one? I couldn't find any.
Actually, there is also the World Wide Web Consortium's Web Accessibility Initiative's easy checks: http://www.w3.org/WAI/eval/preliminary , which do a much more thorough job than I could. (The only thing I noticed while reading through the list was maybe the use of Headings could be made better? But I really don't know if that's necessary?)
Reply to this email directly or view it on GitHub<
https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35058524>
.
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558
http://natalieroman.com
Reply to this email directly or view it on GitHub:
https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059100
Reply to this email directly or view it on GitHub< https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059151>
.
Natalie Roman - Ball State University Student Recreation and Wellness Center - Web Manager Muncie OUTreach - Program Facilitator/Marketing Intern Gamma Rho Lambda - Web Mistress/Herald (Public Relations) 765.713.9558
http://natalieroman.com
Reply to this email directly or view it on GitHub:
https://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35059193
Reply to this email directly or view it on GitHubhttps://github.com/tkwidmer/refugerestrooms/issues/41#issuecomment-35061015 .
Hey so I don't know if it's just a lack-of-time holdup, or a not-sure-the-best-way-to-do-it holdup, but here's a list of ways to add alt-text to background images: http://pauljadam.com/demos/altbgimg.html
@fibn144 I think this was done? I think? It may just not have gotten closed.
Oh! It is done. I just looked, and it hadn't been changed. Yay!
cool. i'm going to close this then.
Currently, the website uses images to contain content in a few places: I've noticed at least in the filters and info about whether it's unisex or ADA. None of these images have alt text, and so give absolutely no information to people on screenreaders.