closed livingstoneonline/livingstoneonline#169

Desktop: Alt text in various places

awisnicki

The alt text on the share icons, search box, browse, and nav tabs needs to be correct on home, grid, and section pages.

Be sure to confirm on each of the three kinds of pages as it's also inconsistent page to page (i.e., home page is done differently from grid page, etc.).

1) For share icons, search box, and browse, please see the alt text we already used for he manuscript viewer and implement that here.

2) For nav tabs, alt text should simply say what the nav tabs say. Right now, the text is prefaced with "Section pages:"

3) Could we have alt text on the grid boxes that simply said what appears in the grid boxes on mouseover, namely "title colon tag line" e.g. "The Design of Livingstone Online: Creative Collaboration in Action." I think have such alt text would help visually impaired readers who may have issues with the contrast of text v. images on the grid boxes themselves.

4) Since the site logo (on all levels) is an image (rather than text), it should probably also have alt text.

5) The little circles that allow users to select an image on the home page should probably also have alt text: Home Page Image 1, Home Page Image 2, etc.

6) The institutional logos on the home page should also have alt text.

7) The images on the carousel should have alt text. The alt text can be "Image:" plus the name of the page to which the image corresponds: "Image: Project Team"

8) For the arrows at the right and left ends of the carousel, please put alt text: "Scroll Left in Carousel" and "Scroll Right in Carousel"

9) To be consistent across the site, I think we should follow the pattern of capitalizing the first word on any alt text, then putting the rest of it in lower case: "Enter your search terms" I also think it looks better that way.

nigelgbanks
  1. For share icons, search box, and browse, please see the alt text we already used for he manuscript viewer and implement that here.

'alt' text only applies to images, but I've added 'title' attribute to these elements.

  1. For nav tabs, alt text should simply say what the nav tabs say. Right now, the text is prefaced with "Section pages:"

This can be controlled via the backend see the image below. I've also changed this in the feature for the menu content.

<img width="1659" alt="screen shot 2017-07-24 at 11 06 05" src="https://user-images.githubusercontent.com/487373/28518533-1fc32106-7060-11e7-8d67-b88bb4e6a94b.png">

  1. Could we have alt text on the grid boxes that simply said what appears in the grid boxes on mouseover, namely "title colon tag line" e.g. "The Design of Livingstone Online: Creative Collaboration in Action." I think have such alt text would help visually impaired readers who may have issues with the contrast of text v. images on the grid boxes themselves.

This can be set directly on the content of the section page like so (click edit):

<img width="466" alt="screen shot 2017-07-24 at 11 01 36" src="https://user-images.githubusercontent.com/487373/28518391-9e1fdba8-705f-11e7-87af-d9f3afc7e8d7.png">

Add either 'alt' or 'title' text as needed. <img width="1391" alt="screen shot 2017-07-24 at 11 01 45" src="https://user-images.githubusercontent.com/487373/28518400-a31ce934-705f-11e7-89e5-8f180bb5c499.png">

  1. Since the site logo (on all levels) is an image (rather than text), it should probably also have alt text.

Currently the image has the alt text "Home" but this can be changed to be "Livingstone Online: illuminating imperial exploration", though likely it would be more confusing for blind people? The link (which doesn't appear on the home page) also has the 'title' Home, currently.

  1. The little circles that allow users to select an image on the home page should probably also have alt text: Home Page Image 1, Home Page Image 2, etc.

They are not images so have no 'alt' attribute, but I've added a 'title' attribute to that affect.

  1. The institutional logos on the home page should also have alt text.

K.

  1. The images on the carousel should have alt text. The alt text can be "Image:" plus the name of the page to which the image corresponds: "Image: Project Team"

Probably don't need the image in-front of it as it's implied by the 'alt' attribute. This can be set in same way as 3.

  1. For the arrows at the right and left ends of the carousel, please put alt text: "Scroll Left in Carousel" and "Scroll Right in Carousel" K.

  2. To be consistent across the site, I think we should follow the pattern of capitalizing the first word on any alt text, then putting the rest of it in lower case: "Enter your search terms" I also think it looks better that way.

K. I assume this is for 'title' rather than 'alt' as 'alt' is not displayed.

awisnicki
  1. Search title should be "Enter your search terms"
  2. Please show me where I change this alt text.
  3. Please show me where I change this alt text.

2/3/5/7/8/9. Resolved. Thank you.

nigelgbanks
  1. Search title should be "Enter your search terms"

K

  1. Please show me where I change this alt text.

For both of these just follow the breadcrumbs shown in blue at the top of the page in both images.

So admin bar -> Structure -> Menu -> (whichever menu) -> (whichever link)

And the field is in the fieldset "Menu Link attributes", it's the first text field. Shown in the bottom of the image.

  1. Please show me where I change this alt text.

Just click on edit for the Grid Image (any section page) and you'll be presented with the form shown in the image above.

awisnicki

Everything that was on here is resolved. However, in reviewing this, I noticed that the title text for two buttons needs to be adjusted. In the spectral image viewer, for Processing Details, it shows "Display Processing Details" and for the Archival Packets, the title text is "Download Archival Packet". In both cases, please decapitalize the 2nd and 3rd words.

nigelgbanks

Should be sorted.

awisnicki

Great. Thank you! Sorry one more small thing with these two buttons. Currently they are slightly too high so that the bottoms of them are not level with the bottom of the spectral image dropdown to the left. It's literally just a touch that's needed. Feel free to close this ticket once you done it.

awisnicki

This one's a wrap. Thank you!