When a user uploads an image in Core, that image should include alt text.
There are ways to work around that in some contexts, but I do think in this case, there should probably be:
<img width="74" height="85" class="image-style-thumbnail" typeof="foaf:Image" alt="Profile image for user admin" src="http://s547d5cfd6ab8acb.s3.simplytest.me/sites/default/files/styles/thumbnail/public/pictures/drupal_ngo.png?itok=5YiK_Iel">
Rather than alt=""
.
After
Comment | File | Size | Author |
---|---|---|---|
#78 | Screen Shot 2015-09-20 at 9.16.47 AM.png | 589.77 KB | serundeputy |
#60 | alt_tag_missing_on_user-2358319-60.patch | 3.18 KB | geertvd |
#60 | interdiff-2358319-56-60.txt | 1.44 KB | geertvd |
#45 | interdiff-42-45.txt | 1.43 KB | hussainweb |
#39 | Profile-Picture-with-Alt.png | 201.12 KB | mgifford |
Comments
Comment #1
RobLoachIs alt required by the HTML5 spec? I'd recommend:
Comment #2
mgiffordIt's required by WCAG 2.0 AA.
Generating an alt text from the source is almost always a bad idea. Way better to leave it as
alt=""
, however a user photo is almost always going to be a representation of the user. I used the Drupal logo, but that's a representation of me, so the alt text should just bealt="Profile image for user admin"
for the example I provided above.A good alt text page from WebAim - http://webaim.org/techniques/alttext/
A discussion about how to do this in D7 on Stack Overflow:
http://drupal.stackexchange.com/questions/60059/how-to-add-alt-and-title...
Definitely just wanting to set a default alt text for user pictures. I really don't think this is something it makes sense to expose to the user.
Comment #3
serundeputy CreditAttribution: serundeputy commentedI believe you can do this here: /admin/config/people/accounts/fields/user.user.user_picture?bundle=user
Set the alt text to required.
Comment #4
mgiffordYou can enable the alt text there for sure.
However, that would just mean that every user would have to enter in alt text for their photos (which they won't do unless you make it required in which case they will just be annoyed and go away).
Without tokens though I don't know how we can spit out something like
alt="Profile image for user admin"
though automatically.I'm really not even sure if this is something you'd want to give users the ability to edit through the UI. It's a profile photo and really should be clearly there to describe the user.
Comment #5
dshields CreditAttribution: dshields commentedThis is also an a11y fail in Drupal 7 core.
Comment #6
mgiffordComment #7
mgiffordOk, this seems to work, but doesn't look pretty. Also, it really should just assign the username by default.
Comment #8
xjmComment #9
BarisW CreditAttribution: BarisW at LimoenGroen commentedNot sure if this is the best way, but we definately need a default alt tag on profile pictures. Thanks Mike!
Comment #10
mgifford@BarisW - I was mostly trying to get this moving. Hopefully we can find a more elegant way to do this. In the interm, moving this to "Needs work".
Comment #11
mahtoranjeet CreditAttribution: mahtoranjeet commentedComment #12
mahtoranjeet CreditAttribution: mahtoranjeet commentedComment #13
mahtoranjeet CreditAttribution: mahtoranjeet commentedComment #14
mahtoranjeet CreditAttribution: mahtoranjeet commentedComment #15
markconroy CreditAttribution: markconroy at Annertech commented@mgifford - Mike, three issues I'm finding with your solution (and I appreciate it's not a finished product, but a work in progress):
1) It enables the alt field which allows people to edit it - we could hide it with js or css, I guess
2) For some reason it's only showing the alt text on the frontend (as in, the Bartik theme) not on the backend (as in, the Seven theme)
3) The 'name' variable is not being passed in - the alt tag's default is blank when I tried this approach.
So, looks like we need to keep
alt_field: false
and come up with some way of dynamically injecting the info in there.Back to the
drawingthinking board for me.Comment #17
mgiffordThanks @markconroy - it's definitely a work in progress.
1) Interesting. It's certainly something that shouldn't be editable.
2) Odd with the difference between Bartik & Seven. Definitely it should work on all themes.
3) Not having the variable name defeats the point.
The patch needs to be re-done as it no longer applies to Core.
Did you use the patch in #7 or #11 - they are very different. @mahtoranjeet - I don't understand your patch.
Just editing the core/profiles/standard/config/install/field.field.user.user.user_picture.yml seems a bit to minimal.
Comment #19
markconroy CreditAttribution: markconroy at Annertech commentedHi Mike,
I didn't apply either patch, I just edited the necessary file to check, but you're right, we need to edit more than that.
I can't make sense of the patch in #11. I don't think it should belong in this thread.
Comment #20
crasx CreditAttribution: crasx commentedLooks like patch #11 was posted in the wrong thread.
I'm not sure that we should use the alt field for this because we should pass the alt text through translation. Another issue is that the user's photo field can be named anything since it is done through the field api, so setting it through a form alter won't be reliable. If we do only target the "user_picture" field maybe we could to it when the field is loaded?
Comment #21
pbuyle CreditAttribution: pbuyle at Floe design + technologies commentedTargeting the
user_picture
field seems fine, the goal is to provide proper behaviour out of the box. If a site builder is not using the existing, default,user_picture
field then it is up to that site builder to ensure the behaviour of the used custom field.Comment #22
pbuyle CreditAttribution: pbuyle at Floe design + technologies commentedI'm at #DrupalNorth sprint, I'll attempt a patch to alter the alt value for
user_picture
in ahook_user_load()
implementation and ensure a non-empty value.Comment #23
pbuyle CreditAttribution: pbuyle at Floe design + technologies commentedThe attached patch ensure there is always an alt text for the
user_picture
field in an implementation ofhook_ENTITY_TYPE_view_alter()
for user entities.Comment #24
pbuyle CreditAttribution: pbuyle at Floe design + technologies commentedComment #26
pbuyle CreditAttribution: pbuyle at Floe design + technologies commentedComment #27
Anonymous (not verified) CreditAttribution: Anonymous as a volunteer commentedUpdating the issue tag to include a hashless DrupalNorth2015 on behalf of the Drupal North sprinting group.
Comment #28
markconroy CreditAttribution: markconroy at Annertech commentedHi pbuyle,
I haven't applied your patch yet, but looks very good. And Crassx, well done to you for coming up with this as a solution.
Comment #29
crasx CreditAttribution: crasx at Digital Bridge Solutions commentedadded documentation to the function so there is no confusion in the future about why it exists.
Comment #30
crasx CreditAttribution: crasx at Digital Bridge Solutions commentedComment #31
mgiffordThis looks a lot better.
alt="Profile picture for user m fish"
works well here:Thanks for the patch @pbuyle & the docs @crasx
Do we need to have tests here before it is RTBC?
Comment #32
BarisW CreditAttribution: BarisW at LimoenGroen commentedJust wondering is a call to user_picture_enabled() is needed here. Wouldn't a check on empty($build['user_picture]) suffice?
Other than that: great fix.
++
Comment #33
crasx CreditAttribution: crasx at Digital Bridge Solutions commentedI think we should keep user_picture_enabled so that that logic is centralized. Interestingly that function is only used in one other place.
We should add tests for this so that if someone decides to change the "User_picture" field name the alt text is not lost.
Comment #34
mparker17Removing old hashed tag.
Comment #35
mgiffordComment #36
mgiffordComment #37
BerdirMissing empty line after the first sentence.
I also wouldn't put in the issue reference and certainly not like this, just leave that sentence out.
We just added something like this to a custom theme, and we did it in preprocess_image_formatter(), there it can be changed directly on the resulting render array instead of indirectly through changing the data.
This could actually end up being saved in case someone views a user and then saves it.
Comment #38
hussainwebFixing for comments in #37 and added a couple of asserts in an existing test.
Comment #39
mgiffordThis looks great. It's got tests. I think all outstanding concerns have been addressed. Here's a screenshot for the record.
Comment #40
mgiffordComment #41
Wim LeersWhy not have this check
alt="Profile picture […]"
? Then it'd be actually checking if it was in analt
attribute.Comment #42
hussainwebFair point. Changing the test.
Comment #43
Wim LeersComment #44
alexpottalt is not part of the translated text
Comment #45
hussainwebSecond time's the charm. :)
Comment #46
mgiffordThis should be good to go now. I checked the interdiff and applied it once again.
Comment #47
Wim LeersYeah, in fact, we can just drop the
t()
call altogether, because this is a test, so it's never going to be translated.Comment #48
markconroy CreditAttribution: markconroy at Annertech commentedWell done folks. Looks very good. One step closer to Drupal 8
Comment #49
alexpottThis is not actually testing the alt text on the user image - it is testing any alt on the page. Seems brittle. I think we should be using xpath - look at Drupal\image\Tests\ImageThemeFunctionTest for examples.
Comment #50
hussainweb@alexpott: That's true. However, all the code in that test is in the same fashion. It checks for the file URI's in the response using assertRaw, which is just as brittle. If we were to do the check with xpath here, we should change the test to use it throughout. Does that make sense as a followup or should we do it in this issue itself?
Comment #51
star-szrTaking a look at this. I don't think we should balloon the scope to change the whole test (that could be a follow-up task), but let's make sure what we add is solid.
Comment #52
star-szrThis is more specific.
Comment #53
geertvd CreditAttribution: geertvd at XIO commentedI think the test looks a lot better now. Just 1 nitpick.
We should avoid using
SafeMarkup::format()
in tests now. We can just replace it by a concatenated string #2549805: Remove all usage of FormattableMarkup in tests apart from explicit tests of that APIComment #54
geertvd CreditAttribution: geertvd at XIO commentedAlso shouldn't this say
Found alt text for user image on node page.
Comment #55
star-szrGood points, thanks @geertvd! I will also try to update the img src checking to be more specific. The 'user account page' assertion text was based on this code comment but I'll check it closer:
// Verify that the image is displayed on the user account page.
Comment #56
star-szrThis checks that the image is in the correct spot with the correct image style and the correct alt text, and the assertion messages should be more accurate.
Comment #57
geertvd CreditAttribution: geertvd at XIO commentedThis looks good, will RTBC when it's green.
Comment #58
geertvd CreditAttribution: geertvd at XIO commentedComment #60
geertvd CreditAttribution: geertvd at XIO commentedThis broke because #2214241: Field default markup - removing the divitis I still consider this RTBC
Comment #63
hussainwebThese are permission denied errors. It seems random. Tentatively setting back to RTBC as per #60.
Comment #65
borisson_The test failures of
EntityFileTest
are the same here as they are in in #2553661: KernelTestBase fails to set up FileCache, so I don't think these are related.Comment #66
hussainwebIs it possible that HEAD is broken?
Comment #67
star-szrThe last couple tests were on bot 3128 which according to #2429617-352: Make D8 2x as fast: Dynamic Page Cache: context-dependent page caching (for *all* users!) was broken and has now been taken out of rotation. Going to hit re-test.
Comment #69
geertvd CreditAttribution: geertvd at XIO commentedback to rtbc
Comment #72
geertvd CreditAttribution: geertvd at XIO commentedComment #75
geertvd CreditAttribution: geertvd at XIO commentedComment #76
alexpottCommitted fc8a559 and pushed to 8.0.x. Thanks!
Comment #78
serundeputy CreditAttribution: serundeputy at Common Media commentedI was starting to work on a D7 backport for this, but when I added a profile picture it already has alt text (see screenshot).
In the file
template_preprocess_user_picture
the lines: 1512 to 1517:So, I think no action is required for D7.
thanks,
~Geoff
Comment #79
star-szrCool, thanks @serundeputy!
Comment #81
cilefen CreditAttribution: cilefen as a volunteer commented