|
POST
|
On March 5th, we released our new version of search to improve how you, your teams, and your community search and discover relevant content. We've added more content types, private data, faster and more reliable search indexing, a new look, and new ways to refine your search, including search collections across the top of the results page. Now you have a custom header and you were styling the search page or using CSS to hide our navigation bar, you may encounter some oddities on the search results page. While we strongly recommend not hiding our navigation bar as we use it to place new navigation features, here's a few things to watch out for in your custom header CSS if you're noticing a weird layout. Styling the Search Page with CSS Unfortunately, this page is not intended to be styled. If you were able to figure out how to style it in the older version of search, you benefited from a bug that occurred in the custom header. I won’t be explaining how to work around our new version as we’re actually very close to fixing that bug and it would just undo your work all over again. So please stick to the hub site and hub page layout screens when doing CSS for webpage layout purposes. Search Icon Visible in Your Header If you were hiding our navigation by placing your custom header on top of it either through absolute positioning, negative margins, flex, and/or use of a z-index, you may need to change your z-index to an even higher number (e.g. 1200) to get the search icon to hide. However, be warned that we’re doing some updates to navigation, which will be coming out at the end of the month and should you want to use the improved navigation, you will need to change your z-index back to 900; otherwise, you may observe the autosuggest from our search bar drop behind your custom header. If you’re using negative margins like the example above, you may need to adjust them based on the size of your header to compensate for the collections' links. It can be challenging to get your custom header to look exactly as you want in our interface, but if possible, please try to avoid using negative margins and absolute positioning as both are inflexible layout methods and more likely to break your site styling when we release new features. Unfortunately, try as we do, we cannot always predict the impact of custom styling on new features. No Collections If you were hiding our navigation through use of display:none and using absolute or fixed positioning to manage your custom header, then you may not have search collections visible at all. This is because when you hide components using display:none, they do not take up any space, and as such, the beginning of your page content will start much closer to top edge of the page. If you used fixed or absolute positioning in addition to display:none, your header will cover up the top of your page content and in this case, it’s the search collections. If you change display:none to visibility:hidden, the content you are trying to hide will not show, but it will take up the same amount of space, which will result in a layout more similar to the intended experience of sites that aren't hiding navigation. The caveat for visibility:hidden is that it will not, in fact, hide the content from assistive technologies, so those using screen-readers will still be able to explore that part of your page.
... View more
03-05-2019
01:28 PM
|
0
|
9
|
2993
|
|
POST
|
Hi Sara, Are you talking about a custom header or using the standard header? Currently, you cannot add links to the standard header. You only get site name and logo. However, we have changes to our navigation styling coming in the next month or so that will give you more customization and the ability to add links to a header. For the time being though, there are two methods forward that you could use. Make a Custom Header Under Header in the Customize Panel, select the Use custom HTML/CSS option. This will inject some default code. There is a small gear icon on the page in the upper right-hand corner. It may be hard to see. (This is a bug as it lost some of its button styling.) Click on that to edit the box that controls the HTML. If you don't like the HTML we provided, you can also use https://getbootstrap.com/docs/3.3/getting-started/#examples The CSS that controls that HTML can be found in the Customize Panel and the parent class of the custom header is a class called .custom-header. If you nuke the CSS/HTML we provide and use default Bootstrap 3, you'll want to make sure to prefix any styling with the .custom-header class. Create a Navigation with a Text Card The alternative is that you could the standard text card with HTML and embed CSS through <style> tags. In the example site I show above, I actually use the default header, which means that only my home page will show this automatically. Dataset views and the search results view would get just the default header. But as pages can also use text cards, I could duplicate this same look onto them, it just wouldn't automatically carry over. But the way that I achieve this look is that I have my first row set to the dark pink color. I have two cards in that row, an image card and then a text card. The text card contains the following HTML. You could then replace the href="#" in the links with the actual links for your pages. The navigation bar below the pink row, is a black row containing another text card with a bunch of navigation links. (I didn't include that HTML in the snippet below.) <style>
li.bold-nav-item a {font-size: 44px; color: #fff;}
li.bold-nav-item a:hover {background-color: #fff !important; color: #c20071;}
</style>
<ul class="nav nav-pills bold-nav" style="margin-top: 60px;">
<li class="center-text bold-nav-item" style="margin-right: 30px;">
<a href="#">Discover</a>
</li>
<li class="center-text bold-nav-item" style="margin-right: 30px;">
<a href="#">Engage</a>
</li>
<li class="center-text bold-nav-item">
<a href="#">Volunteer</a>
</li>
</ul> There is not step-by-step documentation for doing custom HTML, but the Bootstrap 3 documentation page is a good start if you are trying to learn.
... View more
02-15-2019
05:15 AM
|
0
|
0
|
3256
|
|
POST
|
> The screen reader used was ChromeVox. It would read out anything you clicked on, but the tabbing order was nonsensical and would outright skip over certain elements. For instance, it would read a collection of 12 image cards in one row, but skip over another set of image cards in another row. I just now installed the ChromeVox Chrome extension and ran it through one of our sites that has many card variations. I followed these keyboard commands: For the ChromeVox extension for Mac, the ChromeVox modifier keys are Cmd + Ctrl. ChromeVox + Down = Navigate Forward ChromeVox + Up = Navigate backward ChromeVox + Right = Navigate forward at a more detailed level ChromeVox + Left = Navigate backward at a more detailed level Tab = Jump to next focusable item Shift + Tab = Jump to previous focusable item What I observed was that if you moved strictly up and down through rows, ChromeVox did sometimes skip content (within the site I was testing, I observed this only with iframes, but I didn't have 12 image cards like you did.) I poked at ChromeVox documentation and perhaps up/down is generally for landmark roles? Not sure. I did notice that if I used right and left keys to navigate the whole page, which is very similar to how one navigates using VoiceOver, all content was read aloud including that within iframes. Occasionally, it seemed like I got stuck in iframe content and despite my attempts to use ChromeVox + P or ChromeVox + N to skip to the next or previous thing those keyboard commands didn't seem to work correctly. I tried ChromeVox + P, then H and did hear it tell me there were no previous headings, which was accurate of the row I was in, but not the site as a whole. In those cases, I did have to use Tab and Shift+Tab to get to the next interactive content element on the page. It also looks to me that ChromeVox behaves much like VoiceOver and NVDA in the sense that Tab and Shift+Tab keystrokes take you to links or form elements. Typically, Tab and Shift+Tab are keyboard interactions for sighted users to jump through interactive parts of a webpage. In my experience, most screenreaders do also support that functionality, but that isn't how they navigate a page structurally. For instance, one wouldn't use tabindex="0" to make sure a screenreader read a heading or body text, as a screenreader would do that automatically using its native navigation (in this case, up/down/right/left arrows + ChromeVox keys.) This is how Bootstrap's .sr-only class works. It basically repositions the text really far off the side of the browser screen so no one can see it, but a screenreader will encounter it in the code as if it's just a normal part of the page. Typically, tabindex="0" is used, when as a developer I might need to allow sighted users the ability to interact with something that is semantically not clickable. For instance, if I had an accordion that was made up of <divs>, but I had javascript running in the background that allowed those divs to act as if they were buttons and thereby receive focus and accept an onClick() event or an onKeypress() event (for the enter keystroke), I'd need to add a tabindex="0" so that someone who was sighted but navigating by keyboard would know they were selectable. For a screenreader perspective, I'd probably also add an aria-role role="button" to the div so that a non-sighted user would also pick up on that interaction, but a screenreader would actually have an easier time interacting with that content without tabindex than a sighted keyboard user would. Content being read aloud by assistive technologies will not necessarily map to a visually focusable piece of content on the page. ChromeVox seems to support it through its native navigation, but for instance VoiceOver uses an overlay dialog, and in my experience, NVDA shows no visible match between what is heard and what is current visible. I'd be happy to take a look though when you get the site public.
... View more
02-14-2019
02:09 PM
|
2
|
0
|
4329
|
|
POST
|
Hello Tim, Would you be able to share a link to your site? What screenreader and browser combination are you using? We strive to make our app semantic and test with VoiceOver/Safari/OSX and NVDA/Firefox/Windows 10. Your scenario does sound odd and I'd like to take a look at why a screenreader might be skipping rows, since the intended effect of semantic coding is that assistive technologies can rely on their own native controls to access information. However, if you need to render text to screenreaders only, Bootstrap already has a class for this and you could create a div that has the .sr-only class on it, which will hide the text to sighted audiences, but not hide it for assistive technologies. -Klara
... View more
02-14-2019
05:19 AM
|
2
|
2
|
4329
|
|
BLOG
|
I opened up a trail map PDF that is only half-tagged and I can confirm, a PDF that is partially tagged but does not contain alt text on images does in fact read off "image" from the semantic structure and will not skip un-annotated images unless you mark them as background images.
... View more
02-04-2019
08:35 AM
|
0
|
0
|
6136
|
|
BLOG
|
Are you encountering 50,000+ elements when you try to tag an object on your PDF using the Reading Order pane or are you right-clicking on "Tagged PDF - Failed" and trying to have Acrobat fix it for you through auto-tagging? If the latter, I'd recommend doing it manually. I know it seems like more work, but it's not just maps, Acrobat adds a lot of extra elements in its automatic tagging process. I have, in the past, made a very graphical 52-page marketing PDF accessible and auto-tagging isn't as time-saving as one might think, because it'll tag seemingly invisible objects and makes it next to impossible for you to sort through the list of them to clean them up.
... View more
02-01-2019
10:06 AM
|
0
|
0
|
6136
|
|
POST
|
Hi Don, I'm not sure I can accurately visualize your problem. Are you talking about the Dataset Card description? It currently justifies text and truncates by character count. It doesn't support HTML input. The only card we have that supports HTML input would be our current text card. If you're comfortable with HTML, you can use code snippets from this page to generate a card, Calcite Bootstrap. However, we have added a lot of improvements to our Gallery Card. From the Gallery Card, you could do manual selection for datasets you wish to feature and while we do not support HTML input in this card either, there are more styling options. Or you can choose the dynamic option and use tags and/or groups to filter down to the content you wish to highlight and that content would be centered by default. Klara
... View more
12-21-2018
07:35 AM
|
0
|
1
|
843
|
|
POST
|
Hello Niklas, Our video player card intentionally does not support autoplay because we're striving to make our product more accessible all around. It is considered a jarring experience to arrive on a page, especially if you're using assistive technology like a screen-reader, and hear audio already playing somewhere on the page. It's akin to opening a site and hearing background music that makes it hard for you to focus, except you don't actually know where on the page the controls to turn it off might be. For more information on why autoplay is not considered a best practice in terms of usability, you can read https://a11yproject.com/posts/never-use-auto-play/ (There are additional resources at the end of the article that further explain why automatic motion isn't the best experience for several audiences and why.) Klara
... View more
12-21-2018
06:02 AM
|
0
|
0
|
1162
|
|
POST
|
Hi Kevin, We can look into improving this. This section of the app is a little bit older than other parts. The tricky bit is that we do have a number of customers using the old standard thumbnail size, which was a maximum resolution of 200x133 pixels. I think we can bump the aspect ratio up to ~1:4 in the short term and then map to the new standard during some improvements coming out early next year. To answer your question on why there is a gray background? If one does not include a thumbnail with their item, we load a default thumbnail in and that is a white image with a transparent background. We were using the background color of the site, but then sometimes the white image would vanish on white sites. Gray was the most neutral for the largest array of customer themes. This whole area could use a little work, but there are several major features ahead of it. I'll keep you posted.
... View more
11-27-2018
05:56 AM
|
2
|
0
|
805
|
|
POST
|
Hello, Can I recommend you switch your cards to our new suggested format? You can find code examples here: Calcite Bootstrap The code you are currently using was deprecated within the framework because it was neither mobile friendly nor accessible to keyboard users. The good news is that you can update your text cards containing the HTML using new style and all the CSS will automatically be applied. The updated cards are responsive and should help you achieve your goal of a mobile friendly site.
... View more
10-11-2018
05:32 AM
|
0
|
0
|
856
|
|
POST
|
Hello Tom, I wanted to let you know that our latest release added the feature that you had asked about. You can now upload an image onto a row and then under the appearance settings for that image, set whether or not you want the background scrolling to be present. By default it is off and you would have what you have today, but if you turn it on, we will fix the background image (no CSS required) within the row and scroll content over top the image. Hope this makes things easier for you in the future!
... View more
10-10-2018
09:56 AM
|
0
|
0
|
1528
|
|
POST
|
Speaking for Calcite Bootstrap, we are reluctant to include a carousel feature as studies have proven they are not an effective user-experience. The Nielson Normon Group (UX research firm) concluded in a study they performed that users skip over carousels and accordions that auto-rotate, and a B2B company called Search Engine Land determined that sliders can negatively effect your SEO as they provide redundant headings, can slow page load, and often provide shallow content lacking keywords. Their study also suggested it doesn’t matter what content is in the carousel (branding, service links, white papers) the click-rate remains low. In addition, carousels and sliders can prove to be a hinderance for organizations that care about web accessibility, WCAG 2.0, or Section 508 compliance. Carousels are difficult to build in a way that is compatible for assistive technologies as they incur issues with keyboard navigation, relaying semantic relationships between content, and any automatic movement requires stop/pause/hide controls, so sites that include a carousel are likely to be making it more difficult for visitors with disabilities.
... View more
08-16-2018
08:31 AM
|
2
|
3
|
2957
|
|
BLOG
|
Update: David Watkins from ArcMap tells me that ArcMap does allow you to author maps/basemaps and choose, colors, fonts, sizes, etc., which provides the tools needed to make a high contrast map and avoid color combinations that would be trouble for someone with color blindness. He also suggests using Color Brewer http://colorbrewer2.org/#type=sequential&scheme=YlGnBu&n=7 to find options that are safe for audiences that are colorblind. So while it is possible to use Acrobat to solve these issues from inside the PDF, it may be easier to do it correctly from inside ArcMap before you export. A month or so ago, we got a question from a customer on how to make an exported ArcMap map PDF accessible. In this post, I am going to cover how to make a PDF accessible using Adobe Acrobat Pro. There are many tools that assist in making PDFs accessible; however, I will be focusing on Acrobat because it is the tool I have personally used the most often. Full Disclaimer: I have never used ArcMap. But I have made some 500+ PDFs accessible and a colleague has kindly provided me with a simple map PDF to use as a walk-through for purpose of this post. I will touch upon more complex map PDFs at the end. Now before I begin, I want to lay out a few idiosyncrasies with Acrobat: 1) There is no undo option - If you screw something up, your best course of action is to exit the file without saving changes and reopen it. This means that you must save frequently as you correct issues. This is especially important when you are tagging a document and setting reading order. 2) In my experience, Acrobat is likely to crash while doing Reading Order on large files. Therefore, if your document is larger than 5 pages, I'd recommend dividing it into 5 page sections, doing accessibility on each section, and then merging them all together at the end, before setting a title. Turning on Accessibility Tools Open your PDF file in Acrobat and check to see if you have the Accessibility option in your sidebar. If you don’t see it, go to Tools and search for “Accessibility," then click Add. Select Accessibility from the sidebar menu. You should now be in the Accessibility tools interface. Select Full Check from the Accessibility Tooling Pane, then select Start Checking from the modal. The Accessibility Checker will produce a list of issues that can be expanded within it’s side panel. It may be tempting to right-click an issue and select Fix, and this can be safely done for things like title or language, but should be avoided for issues involving tag structure. (If you don’t know how Acrobat “fixed” the issue behind the scenes, then don’t use the automatic option.) Fixing Document Issues Skip anything that says Tagged PDF - Failed and/or Reading Order for now and start with the Primary Language - Failed and Title - Failed issues. For Language, right-click, and select Fix. Acrobat will launch a dropdown menu that you can use to make a selection, then select OK. For Title, right-click, and select Fix. Acrobat will launch a modal, and you may need to unselect the Leave As Is checkbox in order to type a title into the title input field. Then select OK. Save For issues that say Needs manual check, you will have to apply accessibility guidelines by your own knowledge as Acrobat cannot validate them automatically. For example, if I were to check for appropriate contrast of the red symbols on my light green neighborhood map, I would do the following: Screenshot a bit of the image, open the screenshot in a browser, use a browser extension called Colorzilla to pull the colors out of the image (available for Chrome and Firefox), and then paste those two colors into WebAIM’s color contrast checker. WebAIM shows that the red used for the hospital marker is not sufficient contrast against the map background. However, the black text and purple metro lines are fine. While a bit tedious, it is possible to correct the red hospital markers from inside Acrobat. Select a marker on the map, use your cursor to highlight it, then go to Tools > Edit PDF. This will open the Format sidebar, wherein you may select a more appropriate color. Once finished, right-click the “Needs Manual Check” item and select Pass to indicate that you’ve reviewed the item and if necessary, made changes. Now Save. ...Anddd Acrobat froze. Good thing I just saved everything. (If this happens to you, you’ll have to rerun the Full Check to open up the Accessibility Checker report panel.) Fixing Page Content Issues For Tagged Content - Failed issues, you’ll need to do some manual tagging to resolve them. If you don’t have an icon for the Content pane visible in your Accessibility Checker, then select Autotag Document from the Accessibility Tooling Pane. This will produce a report, and add the Content icon to the opposite side. Under Content, right-click an artifact and select Show in Tags option. This should add an icon for the Tags pane. Now that you have all the components you need in your workspace, I’d actually recommend you delete all the tags in the Tags pane that got added during the Autotag Document step. With the Reading Order pane open, right-click your PDF, and select Clear Page Structure. Autotagging is a bit like alphabet soup - it’s hard to comprehend and takes a longer time to fix than doing it from scratch. Once you’ve deleted your tags, you’re read to begin. Open the Reading Order tool. This will open a modal with a lot of disabled buttons. Under the Show Page Content Groups checkbox, select the Structure Types radio button. This will indicate what type you have tagged certain groups of elements. With the Reading Order modal open, draw a rectangle around the title text. Select the Text/Paragraph button. Repeat with other text elements on the PDF. For image elements, tag Figure. Right-click a Figure tag to select Edit Alternative Text. In the dialog that opens, describe the information conveyed by the figure, and select OK. Weird Mysteries What should you do when you draw a rectangle around some element to tag, and Acrobat highlights a block of what looks like empty space? Do not tag it to make it go away. The correct action is to delete the empty artifact. Open the Content pane. Navigate through the container artifacts, until the offending one becomes highlighted. Drill down into the artifact to the root issue, in this case, a text element containing nothing. Right-click the Text element and select Delete. Save Fixing Alternative Text Issues Now honestly, you’ll have probably fixed most of these issues while doing manual tagging. Run Full Check again or right-click the Alternative Text accordion from the report and select Check Again. I have one figure left that I tagged, but forgot to add alternative text. In the Accessibility Checker report, select any errors to see them highlighted on the page. Then in Accessibility Tooling Pane, selection Set Alternative Text. Acrobat will scan the PDF for all images that it thinks need alt text. For each figure missing alt text, Acrobat will highlight it, and prompt you for a description. You can use the arrows in a dialog to move through all figures with alt text. Then Save & Close. Fixing Reading Order Issues Finally, you come to reading order. This is the least fun part of the whole process, but probably the most important. Yay you! What you want to do here is order all the artifacts in the Content Pane, top to bottom, the way you want a screen-reader to encounter them in terms of reading order - almost as if they were a numerical list. Open the Content pane. Save everything you’ve done up unto this point. Drag and Drop each element container to the correct position. Wrapping Up Do one last Full Check, delete any empty tags, and you’re done! What does deleting empty tags look like? If you click on an element under Page Content > Tagged Content - Failed, and it highlights part of the PDF that is empty, right-click the element and select Show in Content Panel. Once there, find the empty element and delete it. Then rerun Full Check. One Last Note... If you have a PDF that is very complicated visually, uses lines instead of points, or has multiple layers of complex data, and you’re finding it difficult to tag, I attended a Section 508 panel where Rob Haverty from Adobe shared a best practice on making complex visual PDFs accessible. He recommended using the Reading Order pane to divide the map into Figures, which can then utilize Alternative Text to describe what is occurring visually at a high level.
... View more
07-19-2018
01:50 PM
|
7
|
8
|
14928
|
|
POST
|
I'm afraid I may not have very good advice as I'm a little vague about the end-goal, but if your wish is to have the burger menu appear on the left, you'll want to create a unique class on the navigation root element and that'll help you float the menu to the left. If your goal is to have a single button outside the menu and always on the right, I would use the .pull-right class rather than .navbar-right as there's some extra styling attached to .navbar-right because we need it a little different. You'll want to move your "FR" button to the top of the nav container, so that it has some static content to float around and into the correct position, and to avoid having it part of the collapsable menu. Per your logo, if you use a custom-class you can remove the padding that gets generated by the navbar-brand class. I, unfortunately, was not able to remedy the burger menu being flush left with the edge of the screen since it has something to do with the negative margins in navbar-header, but I couldn't find the appropriate set of selectors that would cause an override. You may need to experiment a bit more. Finally, I added a clearfix class in an empty div at the bottom to make sure none of these floats caused any other mischief. CSS .left-menu .navbar-toggle {float: left; background-color: #101012;}
.left-menu .navbar-brand {height: 70px; padding: 5px 0px;} HTML <nav class="left-menu navbar navbar-default">
<ul class="nav nav-navbar pull-right">
<li>
<a href="#" class="btn btn-primary" style="margin-top: 5px; margin-right: 5px;">FR</a>
</li>
</ul>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://opendata.arcgis.com/" class="navbar-brand">
<img src="https://maps.ottawa.ca/od_images/Ottawa.png" alt="City of Ottawa Logo">
</a>
</div><!-- /.navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Data</a></li>
<li><a href="#">Stories</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
<div class="clearfix"></div>
</nav>
... View more
05-17-2018
01:55 PM
|
0
|
0
|
2723
|
|
POST
|
Hi Tom, Presently, we do not support fixed background images. All row background images use the responsive CSS property of `background-size: cover` and the default scroll state for the `background-attachment` property. We do have an issue slated to add a control that would allow you to set `background-position` which allows you to center the focal point around which your image will responsively resize and we may be able work `background-attachment` in during that time. But unfortunately, there isn't a very clean way to do the CSS to override it as-of-today since none of the rows have unique classes on them and you should not use the dynamic ember IDs as those change.
... View more
04-09-2018
11:00 AM
|
0
|
0
|
1528
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 3 weeks ago | |
| 7 | 3 weeks ago | |
| 1 | 01-23-2026 09:56 AM | |
| 1 | 04-22-2025 07:38 AM | |
| 1 | 01-30-2025 07:00 AM |
| Online Status |
Offline
|
| Date Last Visited |
a week ago
|