Community @ The Turning Gate

Ah, I just read one of the complaints. It's a template used in all of these, nearly all filed by the same guy. The main part seems to be targeted at the store's usability by the blind. Also note all of the lawsuits are targeted a businesses.

Now that I'm curious, I looked at my own site to see ADA issues. The main one is the lack of alt-text for visual elements.

Changes for Backlight

• The icons need alt-text, so the right-arrow icon needs something like alt-text='right arrow' and that sort of thing.

• The slide show displays the image, but without alt-text. It's there in the permalink page, but not on the slide show. The alt-text for the image on the permalink page isn't great. It's just the name of the file. It would be better as the description, title, or caption (if available). I've mention this as an SEO enhancement, but the name of the file should pass ADA.

• Forms need labels and possibly instructions. This might impact you if you're using a store or client response forms.

The rest of the changes would be done by the content creator, and outside of Backlight. This means adding titles, descriptions, that sort of thing to your pages. If you write content, use descriptive text for links. If you use an image you need alt-text to describe it.

Most of the support is provided by the OS and web browser. If you just use good html practice, you're good to go. If you want to test your site, you need to get the "Job Access With Speech" tool, otherwise known as JAWS. Then try navigating your site with that.

I've done work on web sites to get ADA compliance. It's a long and complicated issue. Last I checked there's no actual "test" to confirm compliance. Most of the hard work is done by browsers. You also have to test with screen readers, which means proper html tagging and alt-text.

The short answer is all your content needs to be available to people with disabilities. I can't imagine how a blind person would need access to photography, is one of the use cases? There's also the near-blind, but really?

To understand how to address the issues for your site, you'd want to read the complaints about the similar sites and address those issues.

totally guessing, since we can't see the site in question

Are you using PHP a plugin? If so, tried disabling it?

I don't use the BL contact page, but a quick look at the docs didn't reveal a question I might have.

Can BL use the Invisible reCAPTCHA?

That's what I would prefer.

I don't think a color icon really helps here. This is only for the client, right? A color probably isn't obvious to any new client.

The request should simply be a way for new clients to find which images they added comments.

Maybe a different comment icon entirely, or something long that idea. Or even a way to only show images that include comments, like it can filter for only selected items.

This looks promising, but it's an iPhone technique. I'm an iPhone user, and don't have access to any Android phones.

Maybe this could be used as a PHPPlugin but it would be an iPhone only trick.

https://developer.apple.com/library/arc … 51-CH3-SW2

More tips here: https://stackoverflow.com/questions/273 … -on-iphone

And this looks very promising: https://stackoverflow.com/questions/248 … fullscreen

I would swear there's cases where I've seen images go full screen mode in the iPhone, but I can't think of an example. It's a frustrating experience to always have Apple's UI taking over the top and bottom of the screen, especially in landscape mode.

Thanks Mat, it's making more sense now. Still, I've found something odd on my site that isn't making sense.

One of the mysteries was how dynamically changing the window size was causing the toggle button to behave inconsistently. That's not so much of a problem since that's not a real-world case. Closely the photo and showing it again seems to clear that up. I doubt anyone will ever notice. I just happen to noticed details, and this was confusing me.

But there is one behavior that isn't making sense. Turns out, this also happens for me in BL1.

I understand how the toggle button has a default state of opacity:0.  Then when the window is narrow, causing the caption to wrap, the toggle gets an added class of "fancybox-caption-toggleable" which sets the opacity to 1.

The odd thing, the toggle in my window is always set to "fancybox-caption-toggleable". So it's always visible. I must have triggered some interaction causing the toggle to always appear, but I haven't found what's triggering this.

I don't know what code is looking for when to change the toggle button to fancybox-caption-toggleable, and then under what conditions.

You can see the oddity in my gallery. It happens in all of my galleries, but this is a good one to look at. The toggle button is always "fancybox-caption-toggleable"

https://reekes.net/photos/07-places/

I think I got it figured out. The toggle only works when you have a caption that is more than one line of text. The confusing part is why it's there in all of my galleries  but in most of the others I looked like TTG's demos, or Ben's, or Rod's galleries, I wasn't finding it. I don't understand how it's only there sometimes.

I can be found in this gallery http://pangolin.barbeephoto.com/galleri … #gallery-2 but the toggle isn't visible. The button is white on a near white background.

Look at the caption with the Inspector. You'll find the button at the far right, under the fancybox-caption tag. The CSS tag is <button class="fancybox-caption-toggle

If you narrow the window enough to cause the caption to wrap more than one line, then clicking that button will cause the caption to collapse to just one line.

The other odd thing, which is how I first noticed it, is if the window is shorter than the image. View this image, http://pangolin.barbeephoto.com/galleri … #gallery-5 then make the window small as if it were a phone. Make the window narrow enough where the caption wraps. Then make it short enough where the caption overlaps the image.

The toggle will collapse the caption to one line. But the caption will still overlap the image.

Then wait a moment, the caption will disappear, revealing the entire image. That's nice, but I don't see this behavior on my iPhone. It happens on the Mac, but not my phone.

On the iPhone, the captions are always overlapping tall images. It cuts off the bottom of images.

Trying to tap on the slide show's play button caused the Safari's UI to appear, cutting off the image. Same with the caption toggle at the bottom.

Playing with it a lot more, I finally discovered if you tap on the image (e.g. center of the screen) you can hide Safari's UI and see the entire image.

Yup, knew about that. Using border with box-sizing: content-box to cause the border to draw outside the box is the same as just using outline.

If the border is drawn inside, it removes that space from the image (and will cause scaling).

I'm caring about the scaling because it causes the image to be less sharp. Granted I might be the only one that notices, but as a photographer I've trained my eye to look for this

If the image can fit entirely on screen, then there's no need for scaling. The simple fix in BL is to change from using border to outline. Then check the math for how to scale, when you need to scale (since the borders will then be drawn outside the box).

Using outline is a more "modern" approach, since it was created to keep boxes their intended size when adding borders.

I see, you're using the padding to create a nice frame. But your images are being scaled. Even on my large monitor your image is being scaled. For example, your tall image is 977px and being scaled down to 817px on my monitor. Even without the padding and border, your images are being scaled on my screen.

The problem I'm trying to solve is how to add a frame and NOT cause scaling. I'm using images with a height of 840px. So on a large monitor it's not going to scale. But if I use a 1px border in CSS, it causes the image to scale even though the entire image does fit on the screen.

If I add a padding or height property, it causes scaling. What I'm after is how to create an image and frame that doesn't have scaling.

If BL changed from border to outline in CSS, at least we could create images that fit on the screen without scaling. Same with the thumbs. Adding a border to thumbs in BL causes scaling, even when we can fit many on the screen at once.

When I use outline for the frame, the only problem I've found (so far) is that when the image must be scaled BL doesn't know about the frame and it gets cut off.