Writing - Human Interface Guidelines

Re:Writing - Human Interface Guidelines by KronisLV on Monday March 06, 2023 @04:47AM (#35039202)

The images don't load for me for whatever reason, but the alt text is set up nicely, which is great to see!

  Image: /design/human-interface-guidelines/foundations/writing/images/fall-detection-message.png
  Alt: A screenshot of a Fall Detection message that reads: it looks like you've taken a hard fall.
  
  Image: /design/human-interface-guidelines/foundations/writing/images/move-streak-message.png
  Alt: A screenshot of an Activity message that reads: you set a personal record for your longest daily Move streak, 35 days!
  
  Image: /design/human-interface-guidelines/foundations/writing/images/handwashing-settings.png
  Alt: A screenshot showing the Handwashing Timer description, which reads: Apple Watch can detect when you're washing your hands and start a 20-second timer.

These are pretty useful for not just when using a screen reader or maybe a text based browser or something, but also when the images themselves break.

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by toastal on Monday March 06, 2023 @07:08AM (#35040056)

Just as important of a side note for supporting text-based browsers and screen readers: if the images are purely decorative, you should make it alt="". https://www.w3.org/WAI/tutorials/images/decorative/

Don't do: <h1><img src alt="ACME logo">ACME</h1>.

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by ryanjamurphy on Monday March 06, 2023 @07:58AM (#35040430)

Huh, this is a good tip. I've always provided a rich description of decorative images, because I didn't want screen readers to "miss out," but apparently that was a bad idea!

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by snowwrestler on Monday March 06, 2023 @08:50AM (#35040941)

Well the logo might not be a great example, as it is often clickable to the home page and should have alt text so people know what it is.

A better example is when a site has little stock photo thumbnails with article titles on a navigational page. The screen reader can read the title text; knowing what’s in the thumbnail adds nothing.

Images should only have alt text when they contain “real” content (for example if it is an original photo that is relevant to the associated story).

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by toastal on Monday March 06, 2023 @12:25PM (#35043949)

A logo is a perfect example because so many sites are failing to do it correctly. When you do

    <h1><img src alt="ACME logo">ACME</h1>

What gets rendered and read is what you would never want

    ACME logoACME

If you don't have or use actual text nearby then you just do this:

    <h1><img src alt="ACME"></h1>

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by snowwrestler on Monday March 06, 2023 @02:09PM (#35046055)

Got it, thanks for following up

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by grumple on Monday March 06, 2023 @11:14AM (#35042768)

Same. Getting 403 Forbidden.

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by qwertox on Monday March 06, 2023 @03:06PM (#35046838)

I'm getting a 404, at least for one of the images [0].

[0] https://developer.apple.com/design/human-interface-guideline...

[ Parent | on HN ]

Re:Writing - Human Interface Guidelines by familiartime on Monday March 06, 2023 @12:39PM (#35044324)

Is the fall detection alt-text actually that good here? There were more elements in that image, which I assume people who use screen readers or are reading the alt-text for broken images would want to know.

The "EMERGENCY SOS" slider and "I'm OK" button give more examples of the "straightforward and direct" language that the article text references. I also learned something about that feature itself (besides that it existed in the first place) - Apple's design choices to make the "SOS" a slider, followed by a larger/easier to press button for "I'm OK". Even though it wasn't related to the point of the article, it was information that I wouldn't have learned had I just read that alt-text.

Is this part of accessibility guidelines for alt-text? Shouldn't they convey the same information, whether it's in image or text form, even if it's not directly relevant to the point of an article?

I can also imagine that people have different preferences - maybe some want all the information like I mentioned, whereas others don't want to distract from the point of what they're reading. I wonder which way the alt-text guidelines lean in practice.

[ Parent | on HN ]