Comments (13)
Right now, we're outputting this part of the inventory as a dl
in HTML, which I think is the most appropriate way to mark this up from the perspective of screen readers, etc. It's not allowable to "skip" dt
elements, but I could give the dt
elements a class that can be hidden visually in CSS. Then, they'd work for screen readers, but sighted users wouldn't have to see labels like "Title" or "Note".
Does this sound ok? If I do it this way, Kathy may want to style dl
elements so that the dt
and dd
children line up on the left- otherwise titles and notes will look a little weird if they're indented with nothing above them.
More about the dl element here.
from bmrcportal.
from bmrcportal.
Also see #32.
from bmrcportal.
bmrcportal-test is now outputting extra HTML classes so we can identify things like this in CSS. I'm going to tag this as "design" so we can hide these labels in CSS.
from bmrcportal.
In a comment from another issue, @MomoMoses writes:
Rereading this I see that there may have been a misunderstanding. I don't think the labels need to appear in the table-row displays at all. With our without containers.
We should be able to hide those labels using CSS. I tagged this as "design" so Kathy can provide feedback and, if she thinks CSS is an appropriate place to do that too, to organize this in the CSS in whatever way makes the most sense.
from bmrcportal.
For ADA purposes you want to keep the dl
elements readable by a screen reader and not use a display: none
solution. Recommend you apply the "visually hidden" formula to these elements:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
from bmrcportal.
https://uchicago.app.box.com/file/807084219878?s=86ze2stummldz0bma0ek278dl9k7nphr
We can use this method to hide <publisher>
and child element data in the EAD that's included at the top of the finding aid so that we rely on the LH sidebar and name of the Archives in the Overview for informing the user about where the collection is held.
from bmrcportal.
Thanks very much, Kathy and Laurie.
In #49, we started displaying the labels in the descriptive summary at the top of each finding aid next to their values. Is that appropriate here too? (If so, it solves the indentation problem I mentioned above.)
(Please note that changes here may impact #35.)
from bmrcportal.
My thought was to drop the labels here in the container/inventory lists altogether. It's pretty obvious that there are "Dates" and if there's a line describing contents, we don't need to see "Title".
from bmrcportal.
It's easy enough to remove all of the labels from that part of the inventory- but it seems to me that they're useful in cases where each <did>
has more child elements, or where the child elements might not be as easy to tell apart. Here is an example, where lots of those elements contain a size, title and note:
https://bmrcportal-test.lib.uchicago.edu/view/?id=BMRC.DEFENDER.INDIVIDUALS.xml
What do you think?
from bmrcportal.
This is quite an outlier, so hard to know if it's necessary to have labels. This does have "Size" but let's see how it will display without the labels. I still contend that entries such as: "35 items" or "Category: Sports" or "photo + press info" are easily understood without the signpost. Further thoughts??
I'd like to try ditching the labels, and then re-visit if user research warrants.
from bmrcportal.
This is now implemented in 214054f and live on the site. Please take a look and let me know what you think, if it looks good we can close this issue out.
from bmrcportal.
Looks great. Very clean.😃🥳
from bmrcportal.
Related Issues (20)
- container inventory: labels displaying on top of other text HOT 4
- Accessibility: clickable logo in header HOT 1
- Accessibility: social icons HOT 5
- Accessibility: search button (magnifier icon) for WEBSITE HOT 1
- Error message for no site search results points to old link HOT 2
- Accessibility: need alt text for iframe HOT 4
- Accessibility: "Skip to" links not visible HOT 5
- Accessibility: two links in same context, different targets HOT 1
- Accessibility: line height too small in footer HOT 1
- Erroneous results in search
- North Park U name showing up in abbreviated form HOT 6
- Subject headings: identical heading with and without white space in dashes HOT 2
- seeing a lot of "Guide to the" in the SERP collection titles HOT 1
- font size seems very small in Edge browser
- Remove periods at end of subject and corpname terms HOT 1
- text is clipped when re-sized
- Accessibility per UC: need a link in the footer
- display of very detailed "extent" from MARCXML conversions is messy
- "Squished" display of multi-line inventory in finding aid view HOT 1
- Add contact info to Archives data page HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bmrcportal.