RefugeRestrooms / refugerestrooms

REFUGE restrooms indexes and maps safe restroom locations for trans, intersex, and gender nonconforming individuals.
http://www.refugerestrooms.org
GNU Affero General Public License v3.0
894 stars 261 forks source link

Accessibility: Add alt text to images #41

Closed fibn144 closed 10 years ago

fibn144 commented 10 years ago

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.

fibn144 commented 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.

fibn144 commented 10 years ago

Ah! Undo the close! Sorry! I don't know how to Github well!

nataliegroman commented 10 years ago

Might also be good practice to do expanded text, too. While it's technically antiquated, it's still a standard ADA feature of HTML5.

fibn144 commented 10 years ago

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.

nataliegroman commented 10 years ago

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

fibn144 commented 10 years ago

So is there any way to add alt-text to that?

tkwidmer commented 10 years ago

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

awoitte commented 10 years ago

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!

fibn144 commented 10 years ago

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?)

nataliegroman commented 10 years ago

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

tkwidmer commented 10 years ago

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

nataliegroman commented 10 years ago

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

tkwidmer commented 10 years ago

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

nataliegroman commented 10 years ago

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 .

fibn144 commented 10 years ago

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

tkwidmer commented 10 years ago

@fibn144 I think this was done? I think? It may just not have gotten closed.

fibn144 commented 10 years ago

Oh! It is done. I just looked, and it hadn't been changed. Yay!

tkwidmer commented 10 years ago

cool. i'm going to close this then.